/**
* @author Bruno 'Shine' Figueiredo - http://www.brunofigueiredo.com
* @version 1.0
*/


/**
* 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.8);
		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);

		// creates overlay and sets its properties
		this.objOverlay = new Element("div");
		this.objOverlay.id = "overlay";
		this.objOverlay.setStyle("width",Window.getWidth());
		this.objOverlay.setStyle("height",Window.getHeight());
		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()
	{
		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();
	}
}

window.onload = function()
{
	galleryManager.setup();
}