Type.registerNamespace('Samples');

// PhotoGallery class.
Samples.PhotoGallery = function(element) {
    Samples.PhotoGallery.initializeBase(this, [element]);
    
    this._images = [];
    this._imageElement = null;
    this._nextElement = null;
    this._prevElement = null;
    this._progressElement = null;
    this._index = -1;
    this._imgPreload = null;
}
Samples.PhotoGallery.prototype = {
    initialize : function() {
        Samples.PhotoGallery.callBaseMethod(this, 'initialize');
        
        $addHandlers(this._nextElement, {click: this.viewNext}, this);
        $addHandlers(this._prevElement, {click: this.viewPrev}, this);
        
        this._imgPreload = document.createElement('IMG');
        $addHandlers(this._imgPreload, {load: this._onimageElementLoaded}, this);
               
        //if(this._index >= 0) {
        //    this._render();
        //}
        this.buttonsRender();
    },
    
    dispose : function() {
        $clearHandlers(this._prevElement);
        $clearHandlers(this._nextElement);
        $clearHandlers(this._imgPreload);
        
        Samples.PhotoGallery.callBaseMethod(this, 'dispose');
    },
    
    viewPrev : function(evt) {
        if(this._index > 0) {
            this._index--;
            this._render();
        }
    },

    viewNext : function(evt) {
        if(this._index < this._images.length - 1) {
            this._index++;
            this._render();
        }
    },
    
    buttonsRender : function() {
        if(this._index == 0)
        {
            this._prevElement.disabled = true;
            Sys.UI.DomElement.removeCssClass($get("prevSpan"), 'metalbutton');
            Sys.UI.DomElement.addCssClass($get("prevSpan"), 'metalbutton_disabled');
        }
        else
        {
            this._prevElement.disabled = false;
            Sys.UI.DomElement.removeCssClass($get("prevSpan"), 'metalbutton_disabled');
            Sys.UI.DomElement.addCssClass($get("prevSpan"), 'metalbutton');
        }
       
       if(this._index == this._images.length - 1)
       {
            this._nextElement.disabled = true;
            Sys.UI.DomElement.removeCssClass($get("nextSpan"), 'metalbutton');
            Sys.UI.DomElement.addCssClass($get("nextSpan"), 'metalbutton_disabled');
       }
       else
       {      
            this._nextElement.disabled = false;
            Sys.UI.DomElement.removeCssClass($get("nextSpan"), 'metalbutton_disabled');
            Sys.UI.DomElement.addCssClass($get("nextSpan"), 'metalbutton');
       }
    },

    _render : function() {
        this.buttonsRender();
        
        // Display the indicator.
        this._progressElement.style.visibility = 'visible';
        
        // Preload the image.
        this._imgPreload.src = this._images[this._index];
    },

    _onimageElementLoaded : function() {
        this._playTransition();
    },

    _displayImage : function() {
        // Hide the indicator.
        this._progressElement.style.visibility = 'hidden';
        
        // Display the image.
        this._imageElement.src = this._images[this._index];   
    },
       
    _playTransition : function() {
        var currentImageSize = {height: this._imageElement.height, width: 
            this._imageElement.width};                                    
        var nextImageSize = {height: this._imgPreload.height, width:      
            this._imgPreload.width};                                      
        
        var fadeIn = AjaxControlToolkit.Animation.createAnimation(        
            {
                "AnimationName": "FadeIn",
                "AnimationTarget": this._imageElement.id,
                "Duration": 0.1,
                "MinimumOpacity": 0.5,
                "MaximumOpacity": 1
             }
        );
        
        var sequence = AjaxControlToolkit.Animation.createAnimation(      
            {
                 "AnimationName": "Sequence",
                 "AnimationTarget": this._imageElement.id,
                 "AnimationChildren":
                 [
                    {
                      "AnimationName": "FadeOut",
                      "Duration": 0.1,
                      "MaximumOpacity": 1,
                      "MinimumOpacity": 0.5
                    },
                    
                    {
                      "AnimationName": "Resize",
                      "Height": nextImageSize.height,
                      "Width": currentImageSize.width
                    },
                    
                    {
                      "AnimationName": "Resize",
                      "Height": nextImageSize.height,
                      "Width": nextImageSize.width
                    }
                 ]
            }
        );
        
        // Subscribe to the ended event.
        sequence.add_ended(Function.createDelegate(this, onSequenceEnded));
        
        // Play the transition.
        sequence.play();
        
        // Handle the ended event.
        function onSequenceEnded() {
            this._displayImage();
            fadeIn.play();
        }
    },
    
    // Properties.
    get_images : function() {
        return this._images;
    },
    
    set_images : function(value) {
        this._images = value;
        
        if(this._images.length > 0) {
            this._index = 0;
            
            if(this.get_isInitialized()) {
                this._render();
            }
        }
    },
    
    get_prevElement : function() {
        return this._prevElement;
    },
    
    set_prevElement : function(value) {
        this._prevElement = value;
    },
    
    get_nextElement : function() {
        return this._nextElement;
    },
    
    set_nextElement : function(value) {
        this._nextElement = value;
    },
    
    get_imageElement : function() {
        return this._imageElement;
    },
    
    set_imageElement : function(value) {
        this._imageElement = value;
    },
    
    get_progressElement : function() {
        return this._progressElement;
    },
    
    set_progressElement : function(value) {
        this._progressElement = value;
    }
}
Samples.PhotoGallery.registerClass('Samples.PhotoGallery', Sys.UI.Control);