/**
 * 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();
    myTabs1 = new mootabs('myTabs', {height: '180px', width: '640px', changeTransition: 'none', mouseOverClass: 'over'});
}