/// <reference name="MicrosoftAjax.js"/>

Type.registerNamespace("MyAjaxControls");

MyAjaxControls.ImageGallery = function(element) {
    MyAjaxControls.ImageGallery.initializeBase(this, [element]);
    this._images = null;
    this._modalDisplay = null;
    this._currentImage = null;
    this._displayImage = null;
    this._currentImageIndex = null;
    this._generationMode = 'default';
}

MyAjaxControls.ImageGallery.prototype = {
    initialize: function() {
        MyAjaxControls.ImageGallery.callBaseMethod(this, 'initialize');
        
        // Add custom initialization here
        this._images = this.get_element().getElementsByTagName("img");
        this._assignHandlerToImages();
    },
    dispose: function() {        
        //Add custom dispose actions here
        this._unassignHandlerFromImages();
        
        MyAjaxControls.ImageGallery.callBaseMethod(this, 'dispose');
    },
    
    _onImageClicked: function(e) {
        this._currentImage = e.target;
        this._constructModalDisplay();
        for (var i = 0; i < this._images.length; i++)
        {
            if (this._currentImage.src == this._images[i].src)
            {
                this._currentImageIndex = i;
                break;
            }
        }
        switch (this._currentImageIndex)
        {
            case 0:
                Sys.UI.DomElement.addCssClass(this._displayImage.childNodes[1].childNodes[0], "hidden");
                if (this._images.length > 1)
                    Sys.UI.DomElement.addCssClass(this._displayImage.childNodes[1].childNodes[2], "visible");
                else
                    Sys.UI.DomElement.addCssClass(this._displayImage.childNodes[1].childNodes[2], "hidden");
//                Sys.UI.DomElement.addCssClass(this._displayImage.childNodes[1].childNodes[2], "visible");
                break;
            case (this._images.length - 1):
                Sys.UI.DomElement.addCssClass(this._displayImage.childNodes[1].childNodes[0], "visible");
                Sys.UI.DomElement.addCssClass(this._displayImage.childNodes[1].childNodes[2], "hidden");
                break;
            default:
                Sys.UI.DomElement.addCssClass(this._displayImage.childNodes[1].childNodes[0], "visible");
                Sys.UI.DomElement.addCssClass(this._displayImage.childNodes[1].childNodes[2], "visible");
                break;            
        }
    },
    
    _unassignHandlerFromImages: function() {
        Array.forEach(this._images, function(item, index, array) {
                $clearHandlers(item);
            }, null);
    },
    
    _constructModalDisplay: function() {
        this._modalDisplay = document.createElement("div");
        $addHandlers(this._modalDisplay, { click: this._onModalDisplayClick }, this);
        Sys.UI.DomElement.addCssClass(this._modalDisplay, "modalDisplay");
        this._displayImage = this._getLayoutDiv();
        var thumbnailImagePath = new String(this._currentImage.src);
        if (this._generationMode != 'viaHandler')
            this._displayImage.firstChild.firstChild.setAttribute("src", thumbnailImagePath.replace("/Thumbnails",""));
        else
            this._displayImage.firstChild.firstChild.setAttribute("src", thumbnailImagePath.replace("thumb=true","thumb=false"));
            
        $addHandlers(this._displayImage.childNodes[1].childNodes[1], { click: this._onModalDisplayClick }, this);
        $addHandlers(this._displayImage.childNodes[1].childNodes[0], { click: this._onPreviousClick }, this);
        $addHandlers(this._displayImage.childNodes[1].childNodes[2], { click: this._onNextClick }, this); 
        this._setDisplayImageLocation();
        document.body.appendChild(this._modalDisplay);
        document.body.appendChild(this._displayImage);
    },
    
    _setDisplayImageLocation : function()
    {
		/*var docBounds = Sys.UI.DomElement.getBounds(document.body);
		var dispImgBounds = Sys.UI.DomElement.getBounds(this._displayImage);
		var left = docBounds.width/2 - dispImgBounds.width/2;
        var top = docBounds.height/2 - dispImgBounds.height/2;
        Sys.UI.DomElement.setLocation(this._displayImage, left, 10);*/
    },
    
    _onNextClick: function(e)
    {
        this._currentImageIndex++;
        this._currentImage = this._images[this._currentImageIndex];
        var thumbnailImagePath = new String(this._currentImage.src);
        if (this._generationMode != 'viaHandler')
            this._displayImage.firstChild.firstChild.setAttribute("src", thumbnailImagePath.replace("/Thumbnails",""));
        else
            this._displayImage.firstChild.firstChild.setAttribute("src", thumbnailImagePath.replace("thumb=true","thumb=false"));
        this._setDisplayImageLocation();
        if (this._currentImageIndex == this._images.length - 1)
        {
            this._displayImage.childNodes[1].childNodes[2].className = "hidden";
        }
        this._displayImage.childNodes[1].childNodes[0].className = "visible";
    },
    
    _onPreviousClick: function()
    {
        this._currentImageIndex--;
        this._currentImage = this._images[this._currentImageIndex];
        var thumbnailImagePath = new String(this._currentImage.src);
        if (this._generationMode != 'viaHandler')
            this._displayImage.firstChild.firstChild.setAttribute("src", thumbnailImagePath.replace("/Thumbnails",""));
        else
            this._displayImage.firstChild.firstChild.setAttribute("src", thumbnailImagePath.replace("thumb=true","thumb=false"));
        this._setDisplayImageLocation();
        if (this._currentImageIndex == 0)
        {
            this._displayImage.childNodes[1].childNodes[0].className = "hidden";
        }
        this._displayImage.childNodes[1].childNodes[2].className = "visible";
    },
    
    _getLayoutDiv: function() {
        var div = document.createElement("div");
		Sys.UI.DomElement.addCssClass(div, "mainLayoutDiv");
        for (var i = 0; i < 2; i++)
        {
            var row = document.createElement("div");
            div.appendChild(row);
        }
        Sys.UI.DomElement.addCssClass(div.firstChild, "imageLayoutDiv");
        Sys.UI.DomElement.addCssClass(div.childNodes[1], "buttonsLayoutDiv");
        
        // Create 3 buttons
        var buttons = new Array();
        for (var i = 0; i < 3; i++)
        {
            buttons[i] = document.createElement("input");
            buttons[i].setAttribute("type", "button");
            div.childNodes[1].appendChild(buttons[i]);
        }
        // initialize buttons
        buttons[0].setAttribute("value", "Previous");
        buttons[1].setAttribute("value", "Close");
        buttons[2].setAttribute("value", "Next");
        
        var image = document.createElement("img");
        div.firstChild.appendChild(image);
        
        return div;
    },
    
    _onModalDisplayClick: function() {
        $clearHandlers(this._displayImage.childNodes[1].childNodes[0]);
        $clearHandlers(this._displayImage.childNodes[1].childNodes[1]);
        $clearHandlers(this._displayImage.childNodes[1].childNodes[2]);
        $clearHandlers(this._modalDisplay);
        document.body.removeChild(this._displayImage);
        document.body.removeChild(this._modalDisplay);
        this._modalDisplay = null;
        this._displayImage = null;
    },
    
    _assignHandlerToImages: function() {
        // this will assign click handler to all necessary images
        Array.forEach(this._images, function(item, index, array) {
                $addHandlers(item, { click : this._onImageClicked}, this);
            }, this);
    },
    
    get_generationMode : function()
    {
        return this._generationMode;
    },
    
    set_generationMode : function(value)
    {
        this._generationMode = value;
    }
}
MyAjaxControls.ImageGallery.registerClass('MyAjaxControls.ImageGallery', Sys.UI.Control);
if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();