/// <reference name="MicrosoftAjax.js"/>
/// <reference path="../Common/AjaxCommonBase.js" />

Type.registerNamespace("Crown.Web.Ajax.Controls");

// --------------------------------------------------------------------------
// MultiStateImageExtender Ctrl
// --------------------------------------------------------------------------
Crown.Web.Ajax.Controls.MultiStateImageExtender = function(element) 
{
    Crown.Web.Ajax.Controls.MultiStateImageExtender.initializeBase(this, [element]);
    this._activeImageUrl = "";
    this._activeImage = null;
    this._inactiveImageUrl = "";
    this._inactiveImage = null;
    this._hoverImageUrl = "";
    this._hoverImage = null;
    this._targetDisabled = false;
    this._timerHandle = null;
    this._timerInterval = 250;
    this._commandName = "";
    this._commandArgument = "";
    this._imageElement = null;
    this._hasServerSideCommandHandler = false;
    this._hoverHandler = Function.createDelegate(this, this._onHover);
    this._unhoverHandler = Function.createDelegate(this, this._onUnhover);
    this._clickHandler = Function.createDelegate(this, this._onClick);
    this._timerTickHandler = Function.createDelegate(this, this._onTimerTick);
}
Crown.Web.Ajax.Controls.MultiStateImageExtender.prototype = 
{
    initialize: function() 
    {
        Crown.Web.Ajax.Controls.MultiStateImageExtender.callBaseMethod(this, 'initialize');
        
        // Get the actual image element
        if (this.get_element().tagName.toUpperCase() != "A")
			this._imageElement = this.get_element();
		else
		{
			// Find all img elements that are children of the extended element
			var imageElements = this.get_element().getElementsByTagName("img");
			
			// Ensure we have found an img
			if (imageElements == null || imageElements.length == 0)
				throw(Error.argument("element", null));
			
			// Save the img
			this._imageElement = imageElements[0];
		}
		
        // Save the active image
        this._activeImageUrl = this._imageElement.src;
        
        // Preload our images if it's supported by the browser
        if (document.images)
        {
			if (this._activeImageUrl != null && this._activeImageUrl.length > 0)
			{
				this._activeImage = new Image();
				this._activeImage.src = this._activeImageUrl;
			}
			if (this._inactiveImageUrl != null && this._inactiveImageUrl.length > 0)
			{
				this._inactiveImage = new Image();
				this._inactiveImage.src = this._inactiveImageUrl;	
			}
			if (this._hoverImageUrl != null && this._hoverImageUrl.length > 0)
			{
				this._hoverImage = new Image();
				this._hoverImage.src = this._hoverImageUrl;
			}
        }
        
        // Add our event handlers
        $addHandlers(this.get_element(), { 
			mouseover:this._hoverHandler,
			mouseout:this._unhoverHandler,
			click:this._clickHandler
		});
        
        // Save the disabled state of the target control and mark it as inactive if disabled
        if ((this._targetDisabled = this.get_element().disabled) == true)
			this.setInactiveState();
		
        // Set the window timer to detect changes in our target control's disabled state
        if (this._inactiveImageUrl != null && this._inactiveImageUrl.length > 0)
			this._timerHandle = window.setTimeout(this._timerTickHandler, this._timerInterval);
    },
    dispose: function() 
    {
		var targetElement = this.get_element();
		
        // Disable our timer
		if (this._timerHandle != null)
			window.clearTimeout(this._timerHandle);
			
		// Clear our event handlers
		if (targetElement != null)
			$clearHandlers(targetElement);
		
		// Call our base method
		Crown.Web.Ajax.Controls.MultiStateImageExtender.callBaseMethod(this, 'dispose');
    },
    
    // Gets or sets the inactive image url
    get_InactiveImage: function() { return this._inactiveImageUrl; },
    set_InactiveImage: function(value) { this._inactiveImageUrl = value; },
    
    // Gets or sets the hover image url
    get_HoverImage: function() { return this._hoverImageUrl; },
    set_HoverImage: function(value) { this._hoverImageUrl = value; },
    
    // Gets or sets the command name for the command event
    get_CommandName: function() { return this._commandName; },
    set_CommandName: function(value) { this._commandName = value; },
    
    // Gets or sets the command argument for the command event
    get_CommandArgument: function() { return this._commandArgument; },
    set_CommandArgument: function(value) { this._commandArgument = value; },
    
    // Determines whether we have a server-side handler for the command event
    get_HasServerSideCommandHandler: function() { return this._hasServerSideCommandHandler; },
    set_HasServerSideCommandHandler: function(value) { this._hasServerSideCommandHandler = value; },
    
    // Adds or removes the onhover event
    add_OnClientHover: function (handler) { this.get_events().addHandler("OnClientHover", handler); },
    remove_OnClientHover: function (handler) { this.get_events().removeHandler("OnClientHover", handler); },
    raiseOnClientHover: function()
    {
        var handler = null;
        
        // Create our event args and by default have it not cancelled
        var eventArgs = new Sys.CancelEventArgs();
        eventArgs.set_cancel(false);
        
        // Raise the OnClientHover event if we have a handler
        if ((handler = this.get_events().getHandler("OnClientHover")) != null)
            handler(this, eventArgs);
            
        // Return whether the event has been cancelled
        return eventArgs.get_cancel();
    },
    
    // Adds or removes the onunhover event
    add_OnClientUnhover: function (handler) { this.get_events().addHandler("OnClientUnhover", handler); },
    remove_OnClientUnhover: function (handler) { this.get_events().removeHandler("OnClientUnhover", handler); },
    raiseOnClientUnhover: function()
    {
        var handler = null;
        
        // Create our event args and by default have it not cancelled
        var eventArgs = new Sys.CancelEventArgs();
        eventArgs.set_cancel(false);
        
        // Raise the OnUnHover event if we have a handler
        if ((handler = this.get_events().getHandler("OnClientUnhover")) != null)
            handler(this, eventArgs);
        
        // Return whether the event has been cancelled
        return eventArgs.get_cancel();
    },
    
    // Adds or removes the onclick event
    add_OnClientCommand: function (handler) { this.get_events().addHandler("OnClientCommand", handler); },
    remove_OnClientCommand: function (handler) { this.get_events().removeHandler("OnClientCommand", handler); },
    raiseOnClientCommand: function()
    {
        var handler = null;
        
        // Raise the OnClick event if we have a handler
        if ((handler = this.get_events().getHandler("OnClientCommand")) != null)
            handler(this, new Crown.Web.Ajax.Controls.CommandEventArgs(this._commandName, this._commandArgument));
    },
    
    // Puts the control in its enabled state
    setActiveState: function()
    {
		// Set the active element image
		if (this._activeImageUrl != null && this._activeImageUrl.length > 0)
			this._imageElement.src = this._activeImageUrl;
    },
    
    // Puts the control in its disabled state
    setInactiveState: function()
    {
		// Set the inactive element image
		if (this._inactiveImageUrl != null && this._inactiveImageUrl.length > 0)
			this._imageElement.src = this._inactiveImageUrl;
    },
    
    // Puts the control in its hover state
    setHoverState: function()
    {
		// Set the hover element image
		if (this._hoverImageUrl != null && this._hoverImageUrl.length > 0)
			this._imageElement.src = this._hoverImageUrl;
    },
    
    // Called when the user hovers over the target element
    _onHover: function(eventArgs)
    {
		// Raise the client hover event, if it's not cancelled then set the active state
		if (!this.raiseOnClientHover())
			this.setHoverState();
	},
    
    // Called when the user moves the cursor off the target element
    _onUnhover: function(eventArgs)
    {
		// Raise the client hover event, if it's not cancelled then set the active state
		if (!this.raiseOnClientUnhover())
			this.setActiveState();
	},
	
	// Called by the timer 
	_onTimerTick: function()
	{
		// Clear our timer
		window.clearTimeout(this._timerHandle);
		this._timerHandle = null;
		
		// Determine if the control has been enabled
		if (this.get_element().disabled == false && this._targetDisabled)
		{
			this._targetDisabled = false;
			this.setActiveState();
		}
		else if (this.get_element().disabled == true && !this._targetDisabled)
		{
			this._targetDisabled = true;
			this.setInactiveState();
		}
		
		// Set a timer to detect any changes in the target control state
        this._timerHandle = window.setTimeout(this._timerTickHandler, this._timerInterval);
	},
	
	// Called when the user clicks on the target control
	_onClick: function()
	{
		// If we have a server-side command handler, raise the server-side command event
		if (this._hasServerSideCommandHandler)
			this.performCallback(this._commandName, this._commandArgument);
	
		// Raise the client-side command event
		this.raiseOnClientCommand();
	}
}
Crown.Web.Ajax.Controls.MultiStateImageExtender.registerClass('Crown.Web.Ajax.Controls.MultiStateImageExtender', Crown.Web.Ajax.Controls.AjaxExtenderBase);

// --------------------------------------------------------------------------
// Script registration
// --------------------------------------------------------------------------
if (typeof(Sys) !== 'undefined') 
	Sys.Application.notifyScriptLoaded();
Type.registerNamespace('Crown.Web.Ajax.Controls');Crown.Web.Ajax.Controls.Resource={};
if(typeof(Sys)!=='undefined')Sys.Application.notifyScriptLoaded();