// define some additional global variables
isIE6 = (Prototype.Browser.IE && parseInt(navigator.userAgent.substring(navigator.userAgent.indexOf("MSIE")+5)) == 6)?true:false;

// extend Prototype library by adding some new methods for Element
// define custom methods
var customMethods = {
	resizeToPage: function(element) {
		var pg = $(document.body).getDimensions(); // page height
		var vp = $(document.viewport).getDimensions(); // viewport height
		// always use the greater of the two
		//var new_w = (pg.width >= vp.width)?pg.width:vp.width;
		var new_h = (pg.height >= vp.height)?pg.height:vp.height;
		$(element).setStyle({
			//width: new_w + 'px',
			width: '100%',
			height: new_h + 'px'
		});
		return $(element);
	},
	
	resizeToViewport: function(element, margin) {
		var vp = $(document.viewport).getDimensions(); // viewport dimensions
		var less = margin*2;
		$(element).setStyle({
			width: vp.width - less + 'px',
			height: vp.height - less + 'px'
		});
		return $(element);
	},
	
	centerInViewport: function(element, animation) {
		var vp = $(document.viewport).getDimensions();
		var el = $(element).getDimensions();
		var el_left = Math.round((vp.width - el.width)/2);
		var el_top = Math.round((vp.height - el.height)/2);
		// we are assuming that the position is fixed
		// ie6 does not support 'fixed' so use absolute position instead. need to add amount of scroll down the page
		var vp_offset = $(document.viewport).getScrollOffsets();
		if (isIE6) el_top += vp_offset.top;
		
		// if there is an animation parameter then slide the object in to the center position from one of the browser edges
		// possible values are "left" and "top"
		if (animation == "left" || animation == "top") {
			if (animation == "left") {
				$(element).setStyle({
					left: -el.width + 'px',
					top: el_top + 'px'
				});
			}
			if (animation == "top") {
				$(element).setStyle({
					left: el_left + 'px',
					top: -el.height + 'px'
				});
			}
			new Effect.Move(element, {
				x: el_left,
				y: el_top,
				mode: 'absolute',
				duration: 2,
				queue: 'start'
			});
		// no animation
		} else {
			$(element).setStyle({
				left: el_left + 'px',
				top: el_top + 'px'
			});
		}
		return $(element);
	},
	
	pngFix: function(element, sizingMethod, autoResize) {
		if(isIE6 && document.body.filters) {
			if (!sizingMethod) var sizingMethod = 'scale'; // by default use 'scale', alternative methods are 'crop' and 'image'
			if (!autoResize) var autoResize = false; // by default, don't resize the png when the window resizes
			var elem = $(element);
			var e = elem.getDimensions();
			var img_src = '';
			
			if(elem.src && elem.src.include('.png')) { // check if it is an image with .png in the src
				img_src = elem.src;
				elem.setStyle({
					width: e.width + 'px',
					height: e.height + 'px',
					filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' + img_src + '", sizingMethod="' + sizingMethod + '")'
				});
				elem.src = '/images/spacer.gif'; // set src to a transparent gif
			} else { // else it is a background image on an element 
				img_src = elem.getStyle('backgroundImage');// string is in the form of 'url("http://image_source_here.gif")' - need to get just the src part
				if (img_src.include('.png')) {
					img_src_arr = img_src.split("\"",2);
					img_src = img_src_arr[1];
					elem.setStyle({
						//width: e.width + 'px',
						//height: e.height + 'px',
						filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' + img_src + '", sizingMethod="' + sizingMethod + '")',
						background: 'none'
					});
				}
			}
			if (img_src.include('.png')) {
				if (autoResize) {	
					Event.observe(window, 'resize', function() {
						elem.setStyle({width: '100%', filter: ''});
						var new_dimensions = elem.getDimensions();
						elem.setStyle({
							//width: new_dimensions.width + 'px',
							//height: new_dimensions.height + 'px',
							filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' + img_src + '", sizingMethod="' + sizingMethod + '")'
						});
					});
				}
			} else {
				// die gracefully by doing nothing...
				//alert("trying to run png fix on a non-png file type: src=" + img_src);
			}
			// store the original src because we may need to reference it
			$(element).secret_src = img_src;
		}
		return $(element);
	},
	// checks if x,y coordinates (usually from a page click) are within bounds of element
	// x and y are integer values
	hasPosition : function(element, x, y){
        element = $(element);
        this.topleft = Element.cumulativeOffset(element);
        this.bottomright = [
            this.topleft[0] + element.offsetWidth,
            this.topleft[1] + element.offsetHeight,
        ];
        return (y >= this.topleft[1] &&
            y <  this.bottomright[1] &&
            x >= this.topleft[0] &&
            x <  this.bottomright[0]);
    },
    imgShield: function(element) {
    	this.shield = $(document.createElement('img'));
    	this.shield.src = "/images/web/spacer.gif";
    	this.shield.className = "img_shield";
    	$(element).insert({before: this.shield});
    	$(this.shield).clonePosition(element);
		return $(element);
	}
	
}
// apply custom methods
Element.addMethods(customMethods);




//////////////////////////////////////////////////////////////////////////////////

//LIGHTBOX CLASS
//by default, the lightbox covers the page with a semi-opaque mask, and shows a content box.
//the content for the box is copied from a pre-existing element on the page (content_src)

if (!Lightbox) var Lightbox = {};
LIGHTBOXES = new Hash(); // global hash is an associative array of lightbox objects, indexed by content_src

Lightbox = Class.create({
	initialize: function(content_src, options) {
		var LB = this;
		// use default options as base and overwrite as desired with options param
		this.options = Object.extend(Object.extend({ },this.default_options), options || { });
		this.content_src = content_src;
		
		this.status = false; // string for if open or closed
		this.times_viewed = 0;
		
		// build the html for the lightbox
		// each instantiation builds its own set of DOM elements
		this.mask = $(document.createElement('div'));
		this.mask.addClassName('page_mask').setStyle({display:'none', backgroundColor:this.options.mask_color});
		document.body.appendChild(this.mask);
		
		this.container = $(document.createElement('table'));
		this.container.cellpadding = 0;
		this.container.cellspacing = 0;
		var container_pos = (isIE6)?'absolute':'fixed';
		this.container.addClassName(this.options.class_name).setStyle({display:'block', position:container_pos, top:'-10000px', left:'-10000px', width: this.options.width+'px', height: this.options.height+'px'});
		var tableHTML = '<tr><td class="nw"></td><td class="n"></td><td class="ne"><div class="close_btn"></div></td></tr><tr><td class="w"></td><td class="center"><div class="lightbox_content" style="width:' + (this.options.width-76) + 'px; height:' + (this.options.height-76) + 'px;"></div></td><td class="e"></td></tr><tr><td class="sw"></td><td class="s"></td><td class="se"></td></tr>';
		this.container.insert(tableHTML);
		document.body.appendChild(this.container);
		
		// load the content
		this.content = this.container.down('.lightbox_content');
		
		switch (this.options.content_type) {
			// if getting static content (not an iframe)
			case 'static':
				this.content.update($(this.content_src).innerHTML);
			break;
			
			case 'iframe':
				// show loading graphic for while the iframe page loads
				this.content.update('<div style="text-align:center;"><img src="/images/icons/anim_loading_dots.gif" style="margin:auto;" /></div>');
			break;
			
			// i think this just moves an existing page object, centering it on top of the lightbox??
			case 'overlay':
				$(this.content_src).centerInViewport();
			break;
			
			// fetch a smarty partial using id
			case 'ajax':
				var ajax_url = "?";
				new Ajax.Request(ajax_url,
				{
					method:'get',
					parameters: {
						product: 'Web',
						controller: 'WebAdmin',
						action: 'get_lightbox_content',
						content_id: LB.content_src,
						acnt: ACNT
					},
					onSuccess: function(transport) {
						if (transport.responseText) LB.content.update(transport.responseText);
					},
					onFailure: function() {
						alert('The ajax request failed - was loading lightbox content.');			
					}
				});
				
			break;
		}
		
		
		this.close_btn = this.container.down('div.close_btn');
		this.close_btn.observe("click", function() {
			LB.close();
		});
		if (!this.options.close_btn) this.close_btn.hide();
		if (this.options.mask_click_out) {
			this.mask.observe('click', function() {
				LB.close()
			});
		}
		this.mask.resizeToPage().setOpacity(this.options.mask_opacity);
		Event.observe(window, 'resize', function() {
			LB.mask.resizeToPage();
		});
		
		if (this.options.sizing == 'full') {
			Event.observe(window, 'resize', function() {
				LB.resizeToFull();
			});
		} else {
			Event.observe(window, 'resize', function() {
				LB.container.centerInViewport();
			});
		}
		this.container.select('.close_btn, td.nw, td.n, td.ne, td.e, td.se, td.s, td.sw, td.w').invoke('pngFix');
		this.container.hide();
		
		// add the lightbox object to the global array (object)
		LIGHTBOXES.set(this.content_src, LB);
	},
	
	// default options: any of these can be passed in as parameters to override the defaults
	default_options: {
		content_type: 'static', // 'static': html on the page already, 'iframe': iframe with external page inside, 'overlay': ?? I forget, 'ajax': retrieve content by id
		class_name: 'lightbox', // css class for the content box (table) allows for alternate styling options
		sizing: 'fixed', // 'fixed': requires fixed pixel dimensions for height and width, 'full': expands to fill the viewport (use with iframe to maximize viewable area)
		width: 600, // integer value in pixels
		height: 400,
		sizing_margin: 32, // in pixels, how far from the edges of the viewport when using the 'full' sizing
		mask: true, // set to false if you don't want to use the page mask
		mask_color: '#1966aa',
		mask_opacity: 0.75,
		mask_click_out: true, // allows you to click the mask to exit
		close_btn: true, // whether to show the close button
		animation: false // when opening, slide in from the edge. Possible values of "top" and "left".
	},
	
	// used for the 'full' sizing option. Resizes the contents to fill up the space in the container
	resizeToFull: function() {
		// first set the content to as small as possible
		this.content = this.container.down('.lightbox_content');
		this.content.setStyle({width:'1px', height:'1px'});
		
		// resize the container table relative to the viewport and margin settings
		this.container.resizeToViewport(this.options.sizing_margin).centerInViewport();
		
		// set dimensions for the contents
		// ** assume that padding of center cell is consistent on all four sides
		// ** assume that outer cells will have the same heights (for top and bottom) and widths (for left and right)
		var container = this.container.getDimensions();
		var cell_width = this.container.down('td.nw').getStyle('width').replace(/px/,'');
		var cell_height = this.container.down('td.nw').getStyle('height').replace(/px/,'');
		var cc_pad = this.content.up().getStyle('padding-top').replace(/px/,'');
		
		// *** need to fix safari cause it can't find height and width values using getStyle...
		// it returns null values if the element has display set to none??
		// hacking it for now so it is always 32px
		if (Prototype.Browser.WebKit) {
			cell_width = 32;
			cell_height = 32;
		}
		
		// set content size to fill up the center cell
		this.content.setStyle({
			width: container.width - (cell_width*2) - (cc_pad*2) + 'px',
			height: container.height - (cell_height*2) - (cc_pad*2) + 'px'
		});
	},
	
	open: function() {
		this.status = true;
		this.times_viewed++;
		
		// first hide any select boxes on the page to prevent them from popping through the mask or shadow
		// is this IE6 specific?? as other browsers are discovered, add them here.
		if (isIE6) {
			$$('select').each( function(sel) {
				sel.setStyle({
					visibility:'hidden'
				});
			});
		}
		
		if (this.options.mask) this.mask.resizeToPage().show();
		this.container.show().centerInViewport(this.options.animation);
		
		if (!this.contents_loaded && this.options.content_type == 'iframe') {
			this.content.replace('<iframe class="lightbox_content" frameborder="0" src="' + this.content_src + '" scrolling="auto" style="width:' + (this.options.width-76) + 'px; height:' + (this.options.height-76) + 'px;"></iframe>');
			this.contents_loaded = true;
		}
		
		if (this.options.sizing == 'full') this.resizeToFull();
		
		if (this.options.content_type == 'overlay') {
			$(this.content_src).show().centerInViewport();
		}
	},
	
	close: function() {
		this.status = false;
		if (this.options.mask) this.mask.hide();
		this.container.hide();
		// show any select boxes on the page again
		if (isIE6) {
			$$('select').each( function(sel) {
				sel.setStyle({
					visibility:'visible'
				});
			});
		}
		if (this.options.content_type == 'overlay') {
			$(this.content_src).hide();
		}
	}

});