/**
 * @author Bruno 'Shine' Figueiredo - http://www.brunofigueiredo.com
 * @version 1.0 
 * modified: Michiel Jelijs - Cinnamon - http://www.cinnamon.nl/
 */

	
/**
 * Handles the image gallery
 */
var galleryManager = 
{
	/**
	 * the overlay html element
	 */
	objOverlay:null,
	/**
	 * the loading indicator element
	 */
	objLoading:null,
	/**
	 * the gallery html element
	 */
	objGallery:null,
	/**
	 * the image container html element
	 */
	objImageContainer:null,
	/**
	 * the image html element
	 */
	objImage:null,
	/**
	 * next button
	 */
	objBtnNext:null,
	/**
	 * previous button
	 */
	objBtnPrev:null,
	/**
	 * overlay opacity effects object
	 */
	efxOverlay:null,
	/**
	 * image container opacity effects object
	 */
	efxImageContainer:null,
	/**
	 * image container width effects object
	 */
	efxImageContainerW:null,
	/**
	 * image container height effects object
	 */
	efxImageH:null,
	/**
	 * image effects object
	 */
	efxImage:null,
	/**
	 * caption object
	 */
	objCaption:null,
	/**
	 * amount of moobox images
	 */
	total:null,

	/**
	 * shows the overlay html element
	 */
	show: function()
	{
		this.objOverlay.setStyle("display","block");
		this.efxOverlay.custom(0,0.5);
		this.objGallery.setStyle("display","block");
	},
	
	/**
	 * hides the overlay html element
	 */
	hide: function()
	{
		this.objGallery.setStyle("display","none");
		this.efxOverlay.hide();
		this.objLoading.setStyle("display","none");
	},
	/**
	 * Setups the gallery
	 */
	setup: function()
	{

		var arrayPageSize = getPageSize();
		var arrayPageScroll = getPageScroll();

		// gets the Body
		var objBody = document.getElementsByTagName("body").item(0);
		
		// creates overlay and sets its properties
		this.objOverlay = new Element("div");
		this.objOverlay.id = "overlay";
		this.objOverlay.setStyle("height",arrayPageSize[1] + 'px');
		objBody.appendChild(this.objOverlay);
		
		// creates loading indicator
		this.objLoading = new Element("div");
		this.objLoading.id = "loading";
		this.objLoading.setStyle("height",Window.getHeight() + 'px');
		objBody.appendChild(this.objLoading);

		// creates overlay opacity effects
		this.efxOverlay = this.objOverlay.effect("opacity",{
			duration:300,
			onComplete : function() { galleryManager.objLoading.setStyle("display","block"); }
		});
		this.efxOverlay.hide();
		
		// attach click event to overlay
		this.objOverlay.addEvent("click",galleryManager.close);
		this.objLoading.addEvent("click",galleryManager.close);
		
		// creates gallery div
		this.objGallery = new Element("div");
		this.objGallery.id = "imgGallery";
		this.objGallery.setStyle("display","none");
		this.objGallery.setStyle("height",arrayPageSize[1] + 'px');
		objBody.appendChild(this.objGallery);
		this.objGallery.addEvent("click",galleryManager.close);
							
		// creates image container div inside de gallery div
		this.objImageContainer = new Element("div");
		this.objImageContainer.id = "imageContainer";
		this.objGallery.appendChild(this.objImageContainer);
		//this.objImageContainer.addEvent("click",galleryManager.close);
		// creates the image container effects
		this.efxImageContainer = this.objImageContainer.effect("opacity",{
			duration:300
		});
		this.efxImageContainerT = this.objImageContainer.effect("top",{duration:600});
		this.efxImageContainerW = this.objImageContainer.effect("width",{duration:600});
		this.efxImageContainer.hide();
		
		// creates the image element inside the imageContainer div
		this.objImage = new Element("img");
		this.objImage.id = "img";
		this.objImageContainer.appendChild(this.objImage);
		this.objImage.addEvent("click",galleryManager.close);
		//creates the image effects
		this.efxImageH = this.objImage.effect("height",{
			duration:600,
			onComplete:function(){
				galleryManager.efxImage.custom(0,1);
			}
		});
		this.efxImage = this.objImage.effect("opacity",{duration:300});
		this.efxImage.hide();
		
		this.objCaption = new Element("p");
		this.objCaption.id = "imgCaption";
		this.objImageContainer.appendChild(this.objCaption);

		// gets all images to be handle by this
		this.anchors = [];
		document.getElements("a").each(function(anchor){

			if (anchor.rel.toLowerCase().match("lightbox"))
			{
				galleryManager.anchors.push(anchor)
			}
		});
		this.total = this.anchors.length;
		for (var i=0; i<this.total; i++) {
			// attach click event
			this.anchors[i].setStyle("display","block");
			this.anchors[i].index = i;
			this.anchors[i].onclick = galleryManager.loadImage.bindAsEventListener(this.anchors[i]);
			// add magnifier icon
			if (this.anchors[i].rel.toLowerCase().match("magnifier")) {
				this.anchors[i].objMagnifier = document.createElement("div");
				this.anchors[i].objMagnifier.className = "magnifier";
				this.anchors[i].parentNode.insertBefore(this.anchors[i].objMagnifier,this.anchors[i]);
				this.anchors[i].objMagnifier.style.top = (this.anchors[i].offsetTop) + "px";
				this.anchors[i].objMagnifier.style.left = (this.anchors[i].offsetLeft + this.anchors[i].offsetWidth - 32) + "px";
				this.anchors[i].onmouseover = function() {
					this.objMagnifier.style.visibility = "visible";
				}
				this.anchors[i].onmouseout = function() {
					this.objMagnifier.style.visibility = "hidden";
				}
				this.anchors[i].objMagnifier.onmouseover = function() {
					this.style.visibility = "visible";
				}
				this.anchors[i].objMagnifier.onmouseout = function() {
					this.style.visibility = "hidden";
				}
				this.anchors[i].objMagnifier.onclick = galleryManager.loadImage.bindAsEventListener(galleryManager.anchors[i]);
			}
		}

	},

	/**
	 * Loads new image
	 */
	newImg: function(x)
	{
		if (galleryManager.objBtnPrev) {
			galleryManager.objImageContainer.removeChild(galleryManager.objBtnPrev);
			galleryManager.objBtnPrev = null;
		}
		if (galleryManager.objBtnNext) {
			galleryManager.objImageContainer.removeChild(galleryManager.objBtnNext);
			galleryManager.objBtnNext = null;
		}
		var imgIndex = x;
		var arrayPageSize = getPageSize();
		var arrayPageScroll = getPageScroll();
		var captionTxt = this.anchors[imgIndex].title + ' (' + (imgIndex+1) + '/' + galleryManager.total + ')';

		galleryManager.objImage.setStyle("opacity",0);
		var imgToLoad = new Image();
		imgToLoad.onload = function(){

			var oldTop = Math.floor(arrayPageScroll[1] + arrayPageSize[3]/2 - galleryManager.objImageContainer.offsetHeight/1.8);
			var newTop = Math.floor(arrayPageScroll[1] + arrayPageSize[3]/2 - imgToLoad.height/1.8);

			galleryManager.objCaption.innerHTML = captionTxt;

			// animate position and size
			galleryManager.efxImageContainerT.custom(oldTop,newTop);
			galleryManager.efxImageH.custom(galleryManager.objImageContainer.offsetHeight,imgToLoad.height);
			galleryManager.efxImageContainerW.custom(galleryManager.objImageContainer.offsetWidth,imgToLoad.width);

			galleryManager.objImage.src = imgToLoad.src;

			if (imgIndex > 0) {
				galleryManager.objBtnPrev = new Element("a");
				galleryManager.objBtnPrev.id = "btnPrev";
				galleryManager.objBtnPrev.onclick = function() { galleryManager.newImg(imgIndex-1); };
				galleryManager.objImageContainer.appendChild(galleryManager.objBtnPrev);
			}
			if (imgIndex < galleryManager.total-1) {
				galleryManager.objBtnNext = new Element("a");
				galleryManager.objBtnNext.id = "btnNext";
				galleryManager.objBtnNext.onclick = function() { galleryManager.newImg(imgIndex+1); };
				galleryManager.objImageContainer.appendChild(galleryManager.objBtnNext);
			}

		};
		imgToLoad.src = this.anchors[imgIndex].href;
		return false;
	},

	/**
	 * Loads the image viewer
	 */
	loadImage: function()
	{
		var arrayPageSize = getPageSize();
		var arrayPageScroll = getPageScroll();
		var imgIndex = this.index;
		var captionTxt = this.title + ' (' + (imgIndex+1) + '/' + galleryManager.total + ')';

		galleryManager.show();
		galleryManager.objLoading.setStyle("top",arrayPageScroll[1]+"px");

		var imgToLoad = new Image();
		imgToLoad.onload = function(){

			galleryManager.objLoading.setStyle("display","none");

			var oldTop = Math.floor(arrayPageScroll[1] + arrayPageSize[3]/2 - galleryManager.objImageContainer.offsetHeight/1.8);
			var newTop = Math.floor(arrayPageScroll[1] + arrayPageSize[3]/2 - imgToLoad.height/1.8);

			galleryManager.objCaption.innerHTML = captionTxt;

			// animate opacity
			galleryManager.efxImageContainer.custom(0,1);
			// animate position and size
			galleryManager.efxImageContainerT.custom(oldTop,newTop);
			galleryManager.efxImageH.custom(galleryManager.objImageContainer.offsetHeight,imgToLoad.height);
			galleryManager.efxImageContainerW.custom(galleryManager.objImageContainer.offsetWidth,imgToLoad.width);

			galleryManager.objImage.src = imgToLoad.src;

			if (imgIndex > 0) {
				galleryManager.objBtnPrev = new Element("a");
				galleryManager.objBtnPrev.id = "btnPrev";
				galleryManager.objBtnPrev.title = "Vorige afbeelding"
				galleryManager.objBtnPrev.onclick = function() { galleryManager.newImg(imgIndex-1); };
				galleryManager.objImageContainer.appendChild(galleryManager.objBtnPrev);
			}
			if (imgIndex < galleryManager.total-1) {
				galleryManager.objBtnNext = new Element("a");
				galleryManager.objBtnNext.id = "btnNext";
				galleryManager.objBtnNext.title = "Volgende afbeelding"
				galleryManager.objBtnNext.onclick = function() { galleryManager.newImg(imgIndex+1); };
				galleryManager.objImageContainer.appendChild(galleryManager.objBtnNext);
			}

		};
		imgToLoad.src = this.href;
		return false;
	},
	
	/**
	 * closes the image viewer
	 */
	close: function()
	{
		if (galleryManager.objBtnPrev) {
			galleryManager.objImageContainer.removeChild(galleryManager.objBtnPrev);
			galleryManager.objBtnPrev = null;
		}
		if (galleryManager.objBtnNext) {
			galleryManager.objImageContainer.removeChild(galleryManager.objBtnNext);
			galleryManager.objBtnNext = null;
		}
		galleryManager.efxImage.hide();
		galleryManager.efxImageContainer.hide();
		galleryManager.objCaption.innerHTML = "";
		galleryManager.hide();
	}
}
			
window.addEvent("load",function(){galleryManager.setup()});



/* helpers */

//
// getPageScroll()
// Returns array with x,y page scroll values.
// Core code from - quirksmode.org
//
function getPageScroll(){

	var yScroll;

	if (self.pageYOffset) {
		yScroll = self.pageYOffset;
	} else if (document.documentElement && document.documentElement.scrollTop){	 // Explorer 6 Strict
		yScroll = document.documentElement.scrollTop;
	} else if (document.body) {// all other Explorers
		yScroll = document.body.scrollTop;
	}

	arrayPageScroll = new Array('',yScroll) 
	return arrayPageScroll;
}



//
// getPageSize()
// Returns array with page width, height and window width, height
// Core code from - quirksmode.org
// Edit for Firefox by pHaez
//
function getPageSize(){
	
	var xScroll, yScroll;
	
	if (window.innerHeight && window.scrollMaxY) {	
		xScroll = document.body.scrollWidth;
		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
		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 = windowWidth;
	} else {
		pageWidth = xScroll;
	}


	arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) 
	return arrayPageSize;
}