/**
 * Handles the image gallery
 */
var galleryManager = {
	/**
	 * the overlay html element
	 */
	objOverlay:null,
	/**
	 * the gallery html element
	 */
	objGallery:null,
	/**
	 * the image container html element
	 */
	objImageContainer:null,
	/**
	 * the image html element
	 */
	objImage: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
	 */
	efxImageContainerH:null,
	/**
	 * image effects object
	 */
	efxImage:null,
	
	/**
	 * shows the overlay html element
	 */
	show: function()
	{
		this.efxOverlay.custom(0,0.3);
		this.objGallery.setStyle("display","");
	},
	
	/**
	 * hides the overlay html element
	 */
	hide: function() {
		this.efxOverlay.hide();
	},
	/**
	 * Setups the gallery
	 */
	setup: function() {
		// gets the Body
		var objBody = document.getElementsByTagName("body").item(0);
		//getPageSize() aufrufen
		var arrayPageSize = this.getPageSize();
		// creates overlay and sets its properties
		this.objOverlay = new Element("div");
		this.objOverlay.id = "overlay";
		this.objOverlay.setStyle("width",arrayPageSize[0] + 'px');
		this.objOverlay.setStyle("height",arrayPageSize[1] + 'px');
		objBody.appendChild(this.objOverlay);
		
		// creates overlay opacity effects
		this.efxOverlay = this.objOverlay.effect("opacity",{duration:300});
		this.efxOverlay.hide();
		
		// attach click event to overlay
		this.objOverlay.addEvent("click",galleryManager.close);
		
		// creates gallery div
		this.objGallery = new Element("div");
		this.objGallery.id = "imgGallery";
		this.objGallery.setStyle("display","none");
		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:1300});
		this.efxImageContainerW = this.objImageContainer.effect("width",{duration:600});
		this.efxImageContainerH = this.objImageContainer.effect("height",{duration:600, onComplete:function(){
			galleryManager.efxImage.custom(0,1);}});
		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.efxImage = this.objImage.effect("opacity",{duration:300});
		this.efxImage.hide();
		
		// gets all images to be handle by this
		document.getElements("a").each(function(anchor){

			if (anchor.rel.toLowerCase().match("lightbox"))
			{							
						// attach click event
						anchor.onclick = galleryManager.loadImage.bindAsEventListener(anchor);
					}
				});
	},
	/**
	 * Loads the image viewer
	 */
	loadImage: function() {
		galleryManager.show();
		var imgToLoad = new Image();
		imgToLoad.onload = function(){
			galleryManager.objImageContainer.setStyle("top","360px");
			var imageSize = imgToLoad.width;
			var paddingLeft = Math.round((894 - imgToLoad.width) / 2) + 167;
			galleryManager.objImageContainer.setStyle("left", paddingLeft + "px");
			galleryManager.efxImageContainer.custom(0,1);
			galleryManager.efxImageContainerH.custom(galleryManager.objImageContainer.offsetHeight,imgToLoad.height);
			galleryManager.efxImageContainerW.custom(galleryManager.objImageContainer.offsetWidth,imgToLoad.width);
			galleryManager.objImage.src=imgToLoad.src;
		};
		imgToLoad.src = this.href;
		return false;
	},
	/**
	 * closes the image viewer
	 */
	close: function() {
		galleryManager.efxImage.hide();
		galleryManager.efxImageContainer.hide();
		galleryManager.objGallery.setStyle("display","none");
		galleryManager.hide();
		//Hack für IE6 wegen Ghostbildern
		galleryManager.objImage.src='/img/lightbox_blank.gif';
	},
	/**
	 * getPageSize()
	 * Returns array with page width, height and window width, height
	 * Core code from - quirksmode.org
	 * Edit for Firefox by pHaez
	 */
	getPageSize: function(){
		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;
	}
}
//--------------------------------
window.onload = function() {
	galleryManager.setup();
}