/*
    window_picture_viewer.js Picture viewer window
    Dependencies : Prototype JavaScript framework 1.6
                   window.js
*/

var SOSCuisine = SOSCuisine || {};

SOSCuisine.WindowPictureViewer = Class.create(SOSCuisine.BaseWindow,
{       
    image : null,
    imageContainer : null,
    controlsContainer : null,
    closeAnchor : null,
    zoomInAnchor : null,
    zoomInImage : null,    
    effects : [],
    args : {},
    isHidden : false,
    isAnimating : false,
    
    
    initialize : function($super)
    {
       $super("picture_viewer");
           
       this.window.style.cursor = "pointer";
       
       this.image = new Element("img");
       
       this.imageContainer = new Element("div");
       this.imageContainer.style.position = "relative";
       
       this.controlsContainer = new Element("div");
       this.controlsContainer.addClassName("picture_viewer_controls");
       this.controlsContainer.style.height = "20px";
       
       this.closeAnchor = new Element("a");
       this.closeAnchor.href = "";
              
       this.zoomInAnchor = new Element("a");       
       this.zoomInAnchor.style.position = "absolute"; 
       this.zoomInAnchor.style.right = "2px"; 
       this.zoomInAnchor.style.bottom = "5px"; 

       this.zoomInImage = new Element("img");
       this.zoomInImage.src = "media/images/zoom_in_large.gif";

       this.zoomInAnchor.appendChild(this.zoomInImage);
       this.imageContainer.appendChild(this.zoomInAnchor);  
       this.controlsContainer.appendChild(this.closeAnchor);      
       this.imageContainer.appendChild(this.image);       
       this.container.appendChild(this.imageContainer);       
       this.container.appendChild(this.controlsContainer);      
       
       this.image.observe('load', this.image_onload.bindAsEventListener(this));              
       this.image.observe('click', this.image_click.bindAsEventListener(this));              
       this.window.observe('click', this.hide.bindAsEventListener(this));
       this.zoomInAnchor.observe('click', this.zoomInAnchor_click.bindAsEventListener(this));        
       this.closeAnchor.observe('click', this.closeAnchor_click.bindAsEventListener(this));                   
    },
    
    loadContents : function(args)
    {    
       var body = document.getElementsByTagName("body")[0];
       body.style.overflow = ""; 
       body.style.height = "auto";
       document.getElementById("overlay").style.height = Element.getHeight(body) +  "px";
       body.style.height = "100%";
       
       this.args = args;
       
       this.closeAnchor.innerHTML = this.args['closeCaption'];
       
       this.controlsContainer.style.visibility = "hidden";       
       this.zoomInAnchor.style.display = "none";       
       this.image.style.visibility = "hidden";       
       
       this.image.style.height = "auto";
       this.image.style.width = "auto"; 
             
       this.image.src = args['url'];
       
       this.isHidden = false;
    },
    
    image_click : function(evt)
    {
        if (!this.isAnimating)
        {
            if (this.args['largePictureUrl'])
            {
                this.show({closeCaption : this.args['closeCaption'], url : this.args['largePictureUrl']});                
            }
            else
            {
                this.hide();
            }
        }
        evt.stop();
        return false;           
    },
    
    zoomInAnchor_click : function(evt)
    {
        if (!this.isAnimating)
        {    
            this.show({closeCaption : this.args['closeCaption'], url : this.args['largePictureUrl']});
        } 
        evt.stop();
        return false;    
    },
    
    closeAnchor_click : function(evt)
    {
        if (!this.isAnimating)
        {        
            this.hide();
        }            
        evt.stop();
        return false;    
    },
    
    image_onload : function()
    {       
       if (this.isHidden == true) return;

       this.image.setOpacity(0);
       this.image.style.visibility = "visible"; 
       this.isAnimating = true;
       this.window.style.cursor = "";
              
       new Effect.Morph(this.container, {
         style: {
            width : this.image.width + "px",
            height : this.image.height + this.controlsContainer.offsetHeight + "px"
         }, 
         duration : 0.8,
         afterFinish : function()
         {
             this.container.style.backgroundImage = "";       
             this.imageContainer.style.height = this.image.height;
             
             this.effects.push(new Effect.Opacity(this.image, { 
                 from : 0.0, 
                 to : 1.0, 
                 duration : 0.8, 
                 afterFinish : function(){
                     this.controlsContainer.style.visibility = "visible";       
                     if (this.args['largePictureUrl'])
                     {        
                         this.zoomInAnchor.style.display = "";       
                     }        
                     this.isAnimating = false;      
                     this.window.style.cursor = "pointer";             
                 }.bind(this)
              }));         
         }.bind(this)
       });
    },
    
    hide : function($super)
    {
        this.isHidden = true;
       
        if (!this.isAnimating)
        {    
            this.effects.each(function(effect){
                effect.cancel();
            });
       
            this.image.src = "";
           
            this.controlsContainer.style.visibility = "hidden";       
            this.zoomInAnchor.style.display = "none";       
            this.image.style.visibility = "hidden";  
            this.window.style.visibility = "hidden";
           
            this.image.setOpacity(0);       
           
            document.getElementById("sidebar_ads").style.display = "block";           
            this.setSelectVisibility("visible");
            SOSCuisine.overlay.hideOverlay();     
        }  
    }
    
});

SOSCuisine.pictureViewer = new SOSCuisine.WindowPictureViewer();