/*
Photo Viewer
*/

//Register the namespace for control class.
Type.registerNamespace("OeS");

//PhotoViewer Control
OeS.PhotoViewer = function(element)
{
    //Module level variables
    this._images = null;
    this._thumbnailWidth = 120;
    this._cssClassValue = '';
    this._thumbnailCssClass = '';
    this._mainImage = null;
    this._thumbailContainer = null;
    this._mainImageWidth = 480;
    this._autoHideThumbnails = true;
    this._courtesyMessageContainer = null;
    this._courtesyMessage = '';
    
    
    
    //Required Event Handlers
    
    //Call base class contructor.
    OeS.PhotoViewer.initializeBase(this,[element]);
}

OeS.PhotoViewer.prototype = 
{
    //Properties
    
    //Images
    get_images : function()
    {
        return this._images;
    },
    set_images : function(value)
    {
        this._images = value;
    },
    // Thumbnail Width
    get_thumbnailWidth : function()
    {
        this._thumbnailWidth;        
    },
    set_thumbnailWidth : function(value)
    {
        this._thumbnailWidth = value;
    },
    // Css Class
    get_cssClassValue : function()
    {
        return this._cssClassValue;
    },
    set_cssClassValue : function(value)
    {
        this._cssClassValue = value;
    },
    //Thumbnail Css Class
    get_thumbnailCssClass : function()
    {
        return this._thumbnailCssClass;
    },
    set_thumbnailCssClass : function(value)
    {
        this._thumbnailCssClass = value;
    },
    //Main Image Width
    get_mainImageWidth :function()
    {
        return this._mainImageWidth;
    },
    set_mainImageWidth : function(value)
    {
        this._mainImageWidth = value;
    },
    //Auto Hide Thumbnails
    get_autoHideThumbnails : function()
    {
        return this._autoHideThumbnails;
    },
    set_autoHideThumbnails :function(value)
    {
        this._autoHideThumbnails = value;
    },
    //Courtesy Message
    get_courtesyMessage : function()
    {
        return this._courtesyMessage;
    },
    set_courtesyMessage : function(value)
    {
        this._courtesyMessage = value;
    },
    //Events
    
    //Overrides
    initialize : function()
    {
        //Call base method
        OeS.PhotoViewer.callBaseMethod(this,'initialize');
        
        var target = this.get_element();
        
        if (this._autoHideThumbnails == true)
        {
            this._mouseOverHandler = Function.createDelegate(this, this._onMouseOver);
            this._mouseOutHandler = Function.createDelegate(this, this._onMouseOut);
            
            $addHandlers(target, {'mouseover':this._mouseOverHandler,'mouseout':this._mouseOutHandler},this);
        }        
        
        
    },
    dispose : function()
    {
        $clearHandlers(this.get_element()); //Detach all event handlers;
        delete this._mouseOverHandler;
        delete this._mouseOutHandler;
        
        //Call base method
        OeS.PhotoViewer.callBaseMethod(this,'dispose');        
    },
    _onMouseOver : function(e)
    {
       if (this._thumbailContainer != null)
       {
            this._thumbailContainer.style.display = "block";
       }
    },
    _onMouseOut : function(e)
    {
        if (this._thumbailContainer != null)
       {
            this._thumbailContainer.style.display = "none";
       }
    },
    _onThumbnailClicked : function(e,context)
    {
        
        if (context.sender._images != null && context.sender._mainImage != null)
        {
            var targetBounds = Sys.UI.DomElement.getBounds(context.sender.get_element());
            
            if (context.sender._mainImageWidth != -1)
            {
                context.sender._mainImage.src = context.sender._images[context.imageIndex] + '?size=' + context.sender._mainImageWidth;
            }
            else
            {
                context.sender._mainImage.src = context.sender._images[context.imageIndex]
            }
        }
        
    },
    show : function(images,courtesyMessage)
    {
        this._images = images;
        if (courtesyMessage != null)
        {
            this._courtesyMessage = courtesyMessage;
        }
        
        var target = this.get_element();
        var targetBounds = Sys.UI.DomElement.getBounds(target);
        //Sys.Debug.trace(target.hasChildNodes());
        if (target.hasChildNodes())
        {
            while(target.lastChild != null)
            {
                target.removeChild(target.lastChild);
            }
        }
        //Add first image
        if (images != null)
        {          
            
            //Main Image
            if  ((this._mainImage == null) || (!target.hasChildNodes()))
            {
                target.innerHTML = "Move your mouse over this photo to see more photos.";
                this._mainImage = document.createElement("img");                    
                target.appendChild(this._mainImage);
                this._courtesyMessageContainer = document.createElement("div");
                this._courtesyMessageContainer.innerHTML = this._courtesyMessage;          
                target.appendChild(this._courtesyMessageContainer);
            }            
            this._mainImage.style.visibility = "visible";          
            if (this._mainImageWidth != -1)
            {  
                this._mainImage.src = images[0] + '?size=' + this._mainImageWidth;
            }
            else
            {
                this._mainImage.src = images[0]
            }
            this._mainImage.title = "Mouse over this photo to view additional photos"; 
            
            
            //Thumbnails
            this._thumbailContainer = document.createElement("div");
            if (this._autoHideThumbnails == true)
            {
                this._thumbailContainer.style.display = "none";
            }
            
            target.appendChild(this._thumbailContainer);
            for(var i=0;i < images.length;i++)
            {
                var thumbnail = document.createElement("img");
                thumbnail.src = images[i] + '?size=' + this._thumbnailWidth;
                thumbnail.style.cssFloat = 'left';
                thumbnail.alt = "click for larger image";
                this._thumbailContainer.appendChild(thumbnail);
                var thumbnailCallback = Function.createCallback(this._onThumbnailClicked, {sender:this,imageIndex:i});
                $addHandler(thumbnail,"click",thumbnailCallback);
            }
            
            //Sys.Debug.traceDump(this);
        }
    }
}

OeS.PhotoViewer.registerClass('OeS.PhotoViewer',Sys.UI.Control);

if (typeof(SyS) != 'undefined')
{
    Sys.Application.notifyScriptLoaded();
}