// -----------------------------------------------------------------------------------
//
//	Lightbox v2.02
//	by Lokesh Dhakar - http://www.huddletogether.com
//	3/31/06
//
//	For more information on this script, visit:
//	http://huddletogether.com/projects/lightbox2/
//
//	Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/
//	
//	Credit also due to those who have helped, inspired, and made their code available to the public.
//	Including: Scott Upton(uptonic.com), Peter-Paul Koch(quirksmode.org), Thomas Fuchs(mir.aculo.us), and others.
//
//
// -----------------------------------------------------------------------------------
//
//	Configuration
//
var fileLoadingImage = "/images/loadingbig.gif";		
var fileBottomNavCloseImage = "/images/closelabel.gif";
var resizeSpeed = 7;	// controls the speed of the image resizing (1=slowest and 10=fastest)
var borderSize = 10;	//if you adjust the padding in the CSS, you will need to update this variable

// -----------------------------------------------------------------------------------

//
//	Global Variables
//
var imageArray = new Array;
var activeImage;
var bodyOverflow;
if(resizeSpeed > 10){ resizeSpeed = 10;}
if(resizeSpeed < 1){ resizeSpeed = 1;}
resizeDuration = (11 - resizeSpeed) * 0.15;

// -----------------------------------------------------------------------------------

var Lightbox = Class.create();

Lightbox.prototype = {
	
	initialize: function() {	
		if (!document.getElementsByTagName){ return; }
		var anchors = document.getElementsByTagName('a');

		// loop through all anchor tags
		for (var i=0; i<anchors.length; i++){
			var anchor = anchors[i];
			
			var relAttribute = String(anchor.getAttribute('rel'));
			
			// use the string.match() method to catch 'lightbox' references in the rel attribute
			if (anchor.getAttribute('href') && (relAttribute.toLowerCase().match('lightbox'))){
				anchor.onclick = function () {myLightbox.start(this); return false;}
			}
		}

		// The rest of this code inserts html at the bottom of the page that looks similar to this:
		//
		//	<div id="overlay"></div>
		//	<div id="lightbox">
		//		<div id="outerImageContainer">
		//			<div id="imageContainer">
		//				<img id="lightboxImage">
		//				<div style="" id="hoverNav">
		//					<a href="#" id="prevLink"></a>
		//					<a href="#" id="nextLink"></a>
		//				</div>
		//				<div id="loading">
		//					<a href="#" id="loadingLink">
		//						<img src="images/loading.gif">
		//					</a>
		//				</div>
		//			</div>
		//		</div>
		//		<div id="imageDataContainer">
		//			<div id="imageData">
		//				<div id="imageDetails">
		//					<span id="caption"></span>
		//					<span id="numberDisplay"></span>
		//				</div>
		//				<div id="bottomNav">
		//					<a href="#" id="bottomNavClose">
		//						<img src="images/close.gif">
		//					</a>
		//				</div>
		//			</div>
		//		</div>
		//	</div>


		var objBody = document.getElementsByTagName("body").item(0);
		
		var objOverlay = document.createElement("div");
		objOverlay.setAttribute('id','overlay');
		objOverlay.style.display = 'none';
		objOverlay.onclick = function() { myLightbox.end(); return false; }
		objBody.appendChild(objOverlay);
		
		var objLightbox = document.createElement("div");
		objLightbox.setAttribute('id','lightbox');
		objLightbox.style.display = 'none';
		objLightbox.onclick = function() { myLightbox.end(); return false; }
		objBody.appendChild(objLightbox);
	
		var objOuterImageContainer = document.createElement("div");
		objOuterImageContainer.setAttribute('id','outerImageContainer');
		objLightbox.appendChild(objOuterImageContainer);

		var objImageContainer = document.createElement("iframe");
		objImageContainer.setAttribute('id','imageContainer');
		objOuterImageContainer.appendChild(objImageContainer);

		var objImageDataContainer = document.createElement("div");
		objImageDataContainer.setAttribute('id','imageDataContainer');
		objImageDataContainer.className = 'clearfix';
		objLightbox.appendChild(objImageDataContainer);

		var objImageData = document.createElement("div");
		objImageData.setAttribute('id','imageData');
		objImageDataContainer.appendChild(objImageData);
	
		var objImageDetails = document.createElement("div");
		objImageDetails.setAttribute('id','imageDetails');
		objImageData.appendChild(objImageDetails);
	
		var objCaption = document.createElement("span");
		objCaption.setAttribute('id','caption');
		objImageDetails.appendChild(objCaption);
	
		var objNumberDisplay = document.createElement("span");
		objNumberDisplay.setAttribute('id','numberDisplay');
		objImageDetails.appendChild(objNumberDisplay);
		
		var objBottomNav = document.createElement("div");
		objBottomNav.setAttribute('id','bottomNav');
		objImageData.appendChild(objBottomNav);
	
		var objBottomNavCloseLink = document.createElement("a");
		objBottomNavCloseLink.setAttribute('id','bottomNavClose');
		objBottomNavCloseLink.setAttribute('href','#');
		objBottomNavCloseLink.onclick = function() { myLightbox.end(); return false; }
		objBottomNav.appendChild(objBottomNavCloseLink);
	
		var objBottomNavCloseImage = document.createElement("img");
		objBottomNavCloseImage.setAttribute('src', fileBottomNavCloseImage);
		objBottomNavCloseLink.appendChild(objBottomNavCloseImage);
	},
	
	//
	//	start()
	//	Display overlay and lightbox. If image is part of a set, add siblings to imageArray.
	//
	start: function(imageLink) {	
		var arrayPageSize = getPageSize();
		var arrayPageScroll = getPageScroll();

		hideSelectBoxes();

        window.scrollTo(0, 0);
		Element.setHeight('overlay', arrayPageSize[3]);
		Element.show('overlay');

		Element.setTop('lightbox', 0);
		Element.show('lightbox');

		imageArray = [];
		imageNum = 0;		

		if (!document.getElementsByTagName) {
          return;
        }
		var anchors = document.getElementsByTagName('a');

		// if image is NOT part of a set..
		if((imageLink.getAttribute('rel') == 'lightbox')) {
		  imageArray.push(new Array(imageLink.getAttribute('href'), imageLink.getAttribute('title')));			
		}

		this.changeImage(imageNum);
	},

	//
	//	changeImage()
	//	Hide most elements and preload image in preparation for resizing image container.
	//
	changeImage: function(imageNum) {	
		
		activeImage = imageNum;	// update global var
		Element.show('outerImageContainer');
		Element.show('imageContainer');
		Element.show('imageDataContainer');
		imgPreloader = new Image();
        $('imageContainer').src = '/mashbox.php?item=' + encodeURIComponent(imageArray[activeImage][0]);
    	myLightbox.resizeImageContainer(imgPreloader.width, imgPreloader.height);
	},

	//
	//	resizeImageContainer()
	//
	resizeImageContainer: function( imgWidth, imgHeight) {
		var arrayPageSize = getPageSize();

        imgWidth = arrayPageSize[2] - 100;
        imgHeight = arrayPageSize[3] - 80;

		Element.setWidth('imageDataContainer', arrayPageSize[0]);
		Element.setLeft('imageDataContainer', 0);
		Element.setTop('imageDataContainer', 50 - Element.getHeight('imageDataContainer'));

		Element.setTop('outerImageContainer', 50);
		Element.setWidth('outerImageContainer', imgWidth);

		this.wCur = Element.getWidth('outerImageContainer');
		this.hCur = Element.getHeight('outerImageContainer');

		this.xScale = ((imgWidth) / this.wCur) * 100;
		this.yScale = ((imgHeight) / this.hCur) * 100;

		wDiff = (this.wCur) - imgWidth;
		hDiff = (this.hCur) - imgHeight;

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

		if((hDiff == 0) && (wDiff == 0)) {
          if (navigator.appVersion.indexOf("MSIE")!=-1) {
            pause(250);
            Element.setLeft('imageDataContainer', 52);
            Element.setWidth('imageDataContainer', imgWidth + 2);
          } else {
            pause(100);
            Element.setLeft('imageDataContainer', 50);
            Element.setWidth('imageDataContainer', imgWidth + 2);
          }
		}
        if (navigator.appVersion.indexOf("MSIE")!=-1) {
          Element.setLeft('imageDataContainer', 52);
          Element.setWidth('imageDataContainer', imgWidth -2);
        } else {
          Element.setLeft('imageDataContainer', 52);
          Element.setWidth('imageDataContainer', imgWidth + 2);
        }
	},
	
	//
	//	end()
	//
	end: function() {
		Element.hide('lightbox');
		Element.hide('overlay');
		Element.hide('outerImageContainer');
		Element.hide('imageContainer');
		Element.setWidth('outerImageContainer', 250);
		Element.setHeight('outerImageContainer', 250);
		showSelectBoxes();
	}
}

// -----------------------------------------------------------------------------------

function showSelectBoxes(){
    document.getElementsByTagName("body")[0].style.overflow = '';
	document.getElementsByTagName("html")[0].style.overflow = '';
	selects = document.getElementsByTagName("select");
	for (i = 0; i != selects.length; i++) {
		selects[i].style.visibility = "visible";
	}
}

// ---------------------------------------------------

function hideSelectBoxes(){
    $('imageContainer').src = 'about:blank';
    document.getElementsByTagName("body")[0].style.overflow = 'hidden';
	document.getElementsByTagName("html")[0].style.overflow = 'hidden';
	selects = document.getElementsByTagName("select");
	for (i = 0; i != selects.length; i++) {
		selects[i].style.visibility = "hidden";
	}
}

// ---------------------------------------------------

function initLightbox() {
  myLightbox = new Lightbox();
}

var LightboxLoaded = true;

//Event.observe(window, 'load', initLightbox, false);