/**
 * 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()
	{
		document.getElements("SELECT").each(function(sel){
			sel.style.display='none';
		});
	
		this.efxOverlay.custom(0,0.8);
		this.objGallery.setStyle("display","");
	},
	
	/**
	 * hides the overlay html element
	 */
	hide: function()
	{				
		this.efxOverlay.hide();
		document.getElements("SELECT").each(function(sel){
			sel.style.display='inline';
		});
	},
	/**
	 * Setups the gallery
	 */
	setup: function()
	{
		// 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";
		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:300});
		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("mootoolsgallery"))
			{							
				// attach click event
				anchor.onclick = galleryManager.loadImage.bindAsEventListener(anchor);
			}
		});

	},
	
	/**
	 * Loads the image viewer
	 */
	loadImage: function()
	{
		$('overlay').setStyle("width",winWidth()-22);
		$('overlay').setStyle("height",winHeight()-4);
		galleryManager.show();
		var imgToLoad = new Image();
		imgToLoad.onload = function(){
			galleryManager.objImageContainer.setStyle("top","20px");
			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();
	}
}

function winWidth() {
        var result = 0;
        if(document.body.clientWidth && result < document.body.clientWidth) result = document.body.clientWidth;
        if(document.body.scrollWidth && result < document.body.scrollWidth) result = document.body.scrollWidth;
        if(document.documentElement.scrollWidth && result < document.documentElement.scrollWidth) result = document.documentElement.scrollWidth;
        if(document.documentElement.clientWidth && result < document.documentElement.clientWidth) result = document.documentElement.clientWidth;
        if(document.documentElement.offsetWidth && result < document.documentElement.offsetWidth) result = document.documentElement.offsetWidth;
        if(document.body.offsetWidth && result < document.body.offsetWidth) result = document.body.offsetWidth;
        if(window.innerWidth && result < window.innerWidth) result = window.innerWidth;
        return result;
};
function winHeight() {
        var result = 0;
        if(document.body.clientHeight && result < document.body.clientHeight) result = document.body.clientHeight;
        if(document.body.scrollHeight && result < document.body.scrollHeight) result = document.body.scrollHeight;
        if(document.documentElement.scrollHeight && result < document.documentElement.scrollHeight) result = document.documentElement.scrollHeight;
        if(document.documentElement.clientHeight && result < document.documentElement.clientHeight) result = document.documentElement.clientHeight;
        if(document.documentElement.offsetHeight && result < document.documentElement.offsetHeight) result = document.documentElement.offsetHeight;
        if(document.body.offsetHeight && result < document.body.offsetHeight) result = document.body.offsetHeight;
        if(window.innerHeight && result < window.innerHeight) result = window.innerHeight;
        return result;
};