// -----------------------------------------------------------------------------------
//
//	Lightbox v2.04
//	by Lokesh Dhakar - http://www.lokeshdhakar.com
//	Last Modification: 2/9/08
//
//	For more information, visit:
//	http://lokeshdhakar.com/projects/lightbox2/
//
//	Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/
//  	- Free for use in both personal and commercial projects
//		- Attribution requires leaving author name, author link, and the license info intact.
//	
//  Thanks: Scott Upton(uptonic.com), Peter-Paul Koch(quirksmode.com), and Thomas Fuchs(mir.aculo.us) for ideas, libs, and snippets.
//  		Artemy Tregubenko (arty.name) for cleanup and help in updating to latest ver of proto-aculous.
//
// -----------------------------------------------------------------------------------
/*

    Table of Contents
    -----------------
    Configuration

    Lightbox Class Declaration
    - initialize()
    - updateTags()
    - start()
    - resizeLoginContainer()
    - showLogin()
    - updateDetails()
    - enableKeyboardNav()
    - disableKeyboardNav()
    - keyboardAction()
    - submitLogin()
    - end()
    
    Function Calls
    - document.observe()
   
*/
// -----------------------------------------------------------------------------------

//var Lightbox = Class.create();

//document.observe('dom:loaded', function () { $$('body')[0].insert("<div id=\"LB_Components\"></div>"); });

/*
 * Configures a Lightbox.
 *
 * @param lightboxID              Unique identifier for this lightbox and its children
 * @param overlayOpacity          Opacity from 0.00 to 1.00 of the shadow overlay
 * @param width                   The width of the Lightbox
 * @param height                  The height of the Lightbox
 * @param borderSize              The size of the Lightbox border
 * @param contentElement          HTMLElement representing the parent node of the Lightbox's content
 * @param animate                 Whether or not animations are desired
 * @param resizeSpeed             Speed of resizing animations from 1 to 10
 */
function configureLightbox(lightboxID,
                           overlayOpacity,
                           width,
                           height,
                           borderSize,
                           contentElement,
                           animate,
                           resizeSpeed) {
	/* Default values */
	if (overlayOpacity == undefined) {
		overlayOpacity = 0.75;
	}
	
	if (width == undefined) {
		width = 350;
	}
	
	if (height == undefined) {
		height = 64;
	}
	
	if (borderSize == undefined) {
		borderSize = 10;
	}
	
	if (animate == undefined) {
		animate = true;
	}
	
	if (resizeSpeed == undefined) {
		resizeSpeed = 7;
	}
	
	/* Create LightboxOptions object */
	/*
	LightboxOptions = Object.extend({
	    overlayOpacity: overlayOpacity,
	    
	    width: width,
	    height: height,
	    borderSize: borderSize,
	    
	    animate: animate,
	    resizeSpeed: resizeSpeed
	}, window.LightboxOptions || {});
	*/
	return Class.create({
	//Lightbox.prototype = {
		// initialize()
		// Constructor runs on completion of the DOM loading. Calls updateImageList and then
		// the function inserts html at the bottom of the page which is used to display the shadow 
		// overlay and the image container.
		//
		initialize: function() {    
		    this.overlayOpacity = overlayOpacity;
		    
		    this.width = width;
		    this.height = height;
		    this.borderSize = borderSize;
		    
		    this.animate = animate;
		    this.resizeSpeed = resizeSpeed;
		    
		    this.contentElement = contentElement;
		    
		    this.keyboardAction = this.keyboardAction.bindAsEventListener(this);

		    //if (LightboxOptions.resizeSpeed > 10) LightboxOptions.resizeSpeed = 10;
		    //if (LightboxOptions.resizeSpeed < 1)  LightboxOptions.resizeSpeed = 1;
		    if (this.resizeSpeed > 10) this.resizeSpeed = 10;
		    if (this.resizeSpeed < 1) this.resizeSpeed = 1;

			//this.resizeDuration = LightboxOptions.animate ? ((11 - LightboxOptions.resizeSpeed) * 0.15) : 0;
			//this.overlayDuration = LightboxOptions.animate ? 0.2 : 0;  // shadow fade in/out duration
			this.resizeDuration = this.animate ? ((11 - this.resizeSpeed) * 0.15) : 0;
			this.overlayDuration = this.animate ? ((8 - this.resizeSpeed) * 0.15) : 0; // shadow fade in/out duration

		    // When Lightbox starts it will resize itself from 250 by 250 to the current image dimension.
		    // If animations are turned off, it will be hidden as to prevent a flicker of a
		    // white 250 by 250 box.
		    //var size = (LightboxOptions.animate ? 75 : 1) + 'px';
		    var size = (this.animate ? 35 : 1) + 'px';
		    

		    // Code inserts XHTML at the bottom of the page that looks similar to this:
		    //
		    //  <div id="LB_overlay_<lightboxID>" class="LB_overlay"></div>
		    //  <div id="lightbox_<lightboxID>" class="lightbox">
		    //      <div id="LB_outerContainer_<lightboxID>" class="LB_outerContainer">
		    //          <div id="LB_innerContainer_<lightboxID>" class="LB_innerContainer"></div>
		    //      </div>
		    //  </div>

		    var LB_Components = $('LB_Components');
		    if (LB_Components == null) {
		    	$$('body')[0].insert("<div id=\"LB_Components\"></div>");
		    	LB_Components = $('LB_Components');
		    }
		    
		    LB_Components.insert("<div id=\"LB_overlay_" + lightboxID + "\" class=\"LB_overlay\"></div>");
		    LB_Components.insert("<div id=\"lightbox_" + lightboxID + "\" class=\"lightbox\">" +
		                             "<div id=\"LB_outerContainer_" + lightboxID + "\" class=\"LB_outerContainer\">" +
		                                 "<div id=\"LB_innerContainer_" + lightboxID + "\" class=\"LB_innerContainer\"></div>" +
		                             "</div>" +
		                         "</div>");

			this.LB_overlay = $('LB_overlay_' + lightboxID);
			this.lightbox = $('lightbox_' + lightboxID);
			this.LB_outerContainer = $('LB_outerContainer_' + lightboxID);
			this.LB_innerContainer = $('LB_innerContainer_' + lightboxID);
			
			this.LB_innerContainer.insert(this.contentElement.hide());

			this.LB_overlay.hide().observe('click', (function() { this.end(); }).bind(this));
			this.lightbox.hide().observe('click', (function(event) { if (event.element().id == 'lightbox_' + lightboxID) this.end(); }).bind(this));
			this.LB_outerContainer.setStyle({ width: size, height: size });
		},
		
		//
		//  start()
		//  Display overlay and lightbox.
		//
		start: function(loginLink) {    

		    $$("select", "object", "embed").each(function(node) {
		                                             node.setStyle({visibility: "hidden"});
		                                         });

		    // stretch overlay to fill page and fade in
		    var arrayPageSize = this.getPageSize();
		    this.LB_overlay.setStyle({ width: arrayPageSize[0] + 'px', height: arrayPageSize[1] + 'px' });

		    //new Effect.Appear(this.LB_overlay, { duration: this.overlayDuration, from: 0.0, to: LightboxOptions.overlayOpacity });
		    new Effect.Appear(this.LB_overlay, { duration: this.overlayDuration, from: 0.0, to: this.overlayOpacity });

		    // calculate top and left offset for the lightbox 
		    var arrayPageScroll = document.viewport.getScrollOffsets();
		    //var lightboxTop = arrayPageScroll[1] + ((document.viewport.getHeight() / 2) - (LightboxOptions.height / 2));
		    var lightboxTop = arrayPageScroll[1] + ((document.viewport.getHeight() / 2) - (this.height / 2));
		    var lightboxLeft = arrayPageScroll[0];
		    this.lightbox.setStyle({ top: lightboxTop + 'px', left: lightboxLeft + 'px' }).show();

		    //this.resizeLoginContainer(LightboxOptions.width, LightboxOptions.height); // (width, height)
		    this.resizeContainer(this.width, this.height); // (width, height)
		},

		//
		//  resizeContainer()
		//
		resizeContainer: function(formWidth, formHeight) {

		    // get current width and height
		    var widthCurrent  = this.LB_outerContainer.getWidth();
		    var heightCurrent = this.LB_outerContainer.getHeight();

		    // get new width and height
		    //var widthNew  = (formWidth  + LightboxOptions.borderSize * 2);
		    //var heightNew = (formHeight + LightboxOptions.borderSize * 2);
		    var widthNew  = (formWidth  + this.borderSize * 2);
		    var heightNew = (formHeight + this.borderSize * 2);

		    // scalars based on change from old to new
		    var xScale = (widthNew  / widthCurrent)  * 100;
		    var yScale = (heightNew / heightCurrent) * 100;

		    // calculate size difference between new and old loginForm, and resize if necessary
		    var wDiff = widthCurrent - widthNew;
		    var hDiff = heightCurrent - heightNew;

		    if (hDiff != 0) new Effect.Scale(this.LB_outerContainer, yScale, {scaleX: false, duration: this.resizeDuration, queue: 'front'}); 
		    if (wDiff != 0) new Effect.Scale(this.LB_outerContainer, xScale, {scaleY: false, duration: this.resizeDuration, delay: this.resizeDuration}); 

		    // if new and old loginForms are same size and no scaling transition is necessary, 
		    // do a quick pause to prevent image flicker.
		    var timeout = 0;
		    if ((hDiff == 0) && (wDiff == 0)){
		        timeout = 100;
		        if (Prototype.Browser.IE) timeout = 250;   
		    }

		    (function(){
		        this.showLogin();
		    }).bind(this).delay(timeout / 1000);
		},
		
		//
		//  showLogin()
		//  Display login form.
		//
		showLogin: function(){
		    new Effect.Appear(this.LB_innerContainer, { 
		        duration: this.resizeDuration, 
		        queue: 'end', 
		        afterFinish: (function(){ this.updateDetails(); }).bind(this) 
		    });
		},

		//
		//  updateDetails()
		//  Display caption.
		//
		updateDetails: function() {
		    
		    //this.contentElement.show();
		    new Effect.Appear(this.contentElement, { duration: this.overlayDuration});
		    
		    // update overlay size
			var arrayPageSize = this.getPageSize();
			this.LB_overlay.setStyle({ height: arrayPageSize[1] + 'px' });

		},

		//
		//  enableKeyboardNav()
		//
		enableKeyboardNav: function() {
		    document.observe('keydown', this.keyboardAction); 
		},

		//
		//  disableKeyboardNav()
		//
		disableKeyboardNav: function() {
		    document.stopObserving('keydown', this.keyboardAction); 
		},

		//
		//  keyboardAction()
		//
		keyboardAction: function(event) {
		    var escapeKey;
		    if (event.DOM_VK_ESCAPE) {  // mozilla
		        escapeKey = event.DOM_VK_ESCAPE;
		    } else { // ie
		        escapeKey = 27;
		    }
		    var keycode = event.keyCode;
		    if (keycode == escapeKey){ // close lightbox
		        this.end();
		    }
		},

		//
		//  end()
		//
		end: function() {
		    this.disableKeyboardNav();
		    this.lightbox.hide();
		    new Effect.Fade(this.LB_overlay, {
		        duration: this.overlayDuration,
		        afterFinish: (function(){
		                          $$("select", "object", "embed").each(function(node) {
		                              node.setStyle({visibility: "visible"});
		                          });
		                      }).bind(this)
		    });
		    
		},

		//
		//  getPageSize()
		//
		getPageSize: function() {
			    
			 var xScroll, yScroll;
		
			if (window.innerHeight && window.scrollMaxY) {	
				xScroll = window.innerWidth + window.scrollMaxX;
				yScroll = window.innerHeight + window.scrollMaxY;
			} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
				xScroll = document.body.scrollWidth;
				yScroll = document.body.scrollHeight;
			} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
				xScroll = document.body.offsetWidth;
				yScroll = document.body.offsetHeight;
			}
		
			var windowWidth, windowHeight;
		
			if (self.innerHeight) {	// all except Explorer
				if(document.documentElement.clientWidth){
					windowWidth = document.documentElement.clientWidth; 
				} else {
					windowWidth = self.innerWidth;
				}
				windowHeight = self.innerHeight;
			} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
				windowWidth = document.documentElement.clientWidth;
				windowHeight = document.documentElement.clientHeight;
			} else if (document.body) { // other Explorers
				windowWidth = document.body.clientWidth;
				windowHeight = document.body.clientHeight;
			}	
		
			// for small pages with total height less then height of the viewport
			if(yScroll < windowHeight){
				pageHeight = windowHeight;
			} else { 
				pageHeight = yScroll;
			}
	
			// for small pages with total width less then width of the viewport
			if(xScroll < windowWidth){	
				pageWidth = xScroll;		
			} else {
				pageWidth = windowWidth;
			}

			return [pageWidth,pageHeight];
		}
	});
	
	return tmp;
}
/*
var myLightBox; // will hold the new Lightbox() object

function getMyLightBox() {
	return myLightBox;
}

document.observe('dom:loaded', function () { window.myLightBox = new Lightbox(); });
*/