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

Type.registerNamespace("WebControls");

// This 'element' here should be the inputEl
WebControls.Image = function(element) {
    WebControls.Image.initializeBase(this, [element]);

    this._selected = false;    
}

WebControls.Image.prototype = {
    initialize: function() {
        WebControls.Image.callBaseMethod(this, 'initialize');

        var that = this;

        if (this._mouseoverFileName) {
            $addHandlers(this._element, {mouseover: this._mouseover}, this);
            $addHandlers(this._element, {mouseout: this._mouseout}, this);
        }
        
        // If a fileName has been provided, load the image
        if (this._fileName) {
            this.refreshImage();
        }
        
        if (this._allowClick) {
            $addHandlers(this._element, {'click': this._imageClick}, this);
        }

    },
    dispose: function() {
        //Add custom dispose actions here
        WebControls.Image.callBaseMethod(this, 'dispose');
    },
    
    _imageClick: function() {
        this._raiseEvent("imageClicked", {});
    },

    /*
    I don't think we want to 'uniquify' these urls because otherwise
    it's going to have to reload the image from the server every time
    you mouseover, but I think we should preload the images (uniquified)
    so it is instant when you mouseover (and so it can't be caching
    old images after they have been changed).   
    */
    
    _mouseover: function() {    
        this._element.src = this._baseUrl + this._mouseoverFileName;
    },

    _mouseout: function() {    
        // this._element.src = this._baseUrl + this._fileName;
        if (this._selected) {
            this._element.src = this._baseUrl + this._selectedFileName;
        } else {
            this._element.src = this._baseUrl + this._fileName;
        }        
    },

    // true or false can be supplied as the value here
    // if true, it shows the "selected" image 
    set_selected: function(value) {
        this._selected = value;
        if (this._selected) {
            this._element.src = this._baseUrl + this._selectedFileName;
        } else {
            this._element.src = this._baseUrl + this._fileName;
        }    
    },
    
    // Provided for completeness
    get_value: function() {
        return this._fileName;
    },
    
    set_value: function(value) {
        this.set_fileName(value);        
        this.refreshImage();    
    },
    
//    get_value : function() {
//        return this._element.src;
//    },
// 
//    set_value : function(value) {
//        if (value == null) {
//            this._element.src = "";
//        } else {
//            this._element.src = value;
//        }
//    },
//    
//    set_fileName: function(value) {    
//        // this._element.src = '';  // To cause refresh
//        this._element.src = this._baseUrl + value + "?a=" + new Date().getMilliseconds(); // To force reload          
//        // Some way to ensure it is refreshed
//    },
    
    // I think we'll have a function like this to refresh the image, rather than
    // having the set_fileName do it
    refreshImage: function() {
        this._element.src = this._baseUrl + this._fileName + "?a=" + new Date().getMilliseconds(); // To force reload
        // Hide image if no filename...
        if (this._fileName) {
            this._element.style.display = '';
        } else {
            this._element.style.display = 'none';
        }
    }

}

WebControls.Image.createProperty('baseUrl');
WebControls.Image.createProperty('fileName');
WebControls.Image.createProperty('mouseoverFileName');
WebControls.Image.createProperty('selectedFileName');
WebControls.Image.createProperty('allowClick');

WebControls.Image.createEvent('imageClicked');

WebControls.Image.registerClass('WebControls.Image', WebControls.BaseInput);

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

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