// (c) Copyright Microsoft Corporation.
// This source is subject to the Microsoft Permissive License.
// See http://www.microsoft.com/resources/sharedsource/licensingbasics/sharedsourcelicenses.mspx.
// All other rights reserved.


/// <reference name="MicrosoftAjax.debug.js" />
/// <reference name="MicrosoftAjaxTimer.debug.js" />
/// <reference name="MicrosoftAjaxWebForms.debug.js" />
/// <reference path="../ExtenderBase/BaseScripts.js" />


Type.registerNamespace('CarQuotes.WebControls');

CarQuotes.WebControls.ToggleButtonBehavior = function(element) {
    /// <summary>
    /// The ToggleButtonBehavior is used to replace a checkbox with a pair of images
    /// </summary>
    /// <param name="element" type="Sys.UI.DomElement" domElement="true">
    /// Checkbox associated with the behavior
    /// </param>
    CarQuotes.WebControls.ToggleButtonBehavior.initializeBase(this, [element]);
    
    // "Constants"
    this._idDecoration = '_ToggleButton';

    // Properties
    this._UncheckedCssClass = null;
    this._CheckedCssClass = null;
    this._DisabledUncheckedCssClass = null;
    this._DisabledCheckedCssClass = null;
    this._CheckedOverCssClass = null;
    this._UncheckedOverCssClass = null;

    // Member variables
    this._decoyElement = null;
    this._decoyElementClickHandler = null;
    this._checkChangedHandler = null;
    this._divContent = null;
    this._clickHandler = null;
    this._decoyElementMouseOverHandler = null;
    this._decoyElementMouseOutHandler = null;
}
CarQuotes.WebControls.ToggleButtonBehavior.prototype = {
    initialize: function() {
        /// <summary>
        /// Initialize the behavior
        /// </summary>
        CarQuotes.WebControls.ToggleButtonBehavior.callBaseMethod(this, 'initialize');

        var e = this.get_element();

        // Create a decoy element to overlay the checkbox graphic and click it when clicked
        this._divContent = document.createElement('div');
        this._divContent.style.position = 'relative';
        this._decoyElement = document.createElement('a');
        e.parentNode.insertBefore(this._divContent, e);
        this._decoyElement.id = e.id + this._idDecoration;
        this._decoyElement.href = '';
        this._divContent.appendChild(this._decoyElement);

        // Set the style of the checkbox to size it and hide it
        e.style.visibility = 'hidden';
        // Set the style of the decoy element to position absolutely over the checkbox graphic
        var decoyElementStyle = this._decoyElement.style;
        decoyElementStyle.position = 'absolute';
        // Initialize left and top to 0px for Opera
        decoyElementStyle.left = '0px';
        decoyElementStyle.top = '0px';
        //        decoyElementStyle.width = this._ImageWidth + 'px';
        //        decoyElementStyle.height = this._ImageHeight + 'px';

        //Firefox uses fontSize to determine the height of href
        //        decoyElementStyle.fontSize = this._ImageHeight + 'px';

        // Make the decoy element look right
        decoyElementStyle.backgroundRepeat = 'no-repeat';
        this._onClick();

        // Create delegates
        this._clickHandler = Function.createDelegate(this, this._onClick);
        this._checkChangedHandler = Function.createDelegate(this, this._onClick);
        this._decoyElementClickHandler = Function.createDelegate(this, this._onDecoyElementClick);
        this._decoyElementMouseOverHandler = Function.createDelegate(this, this._onDecoyElementMouseOver);
        this._decoyElementMouseOutHandler = Function.createDelegate(this, this._onDecoyElementMouseOut);

        // Attach events
        $addHandler(e, "click", this._clickHandler);
        $addHandler(e, "change", this._checkChangedHandler);
        $addHandler(this._decoyElement, "click", this._decoyElementClickHandler);
        $addHandler(this._decoyElement, "mouseover", this._decoyElementMouseOverHandler);
        $addHandler(this._decoyElement, "mouseout", this._decoyElementMouseOutHandler);

        // Find any any label elements "for" the checkbox and update them to be "for" the decoy element
        // Only for Internet Explorer
        if (Sys.Browser.agent === Sys.Browser.InternetExplorer) {
            var labels = this._divContent.parentNode.getElementsByTagName('label');
            for (i = 0; i < labels.length; i++) {
                if (e.id == labels[i].htmlFor) {
                    labels[i].htmlFor = e.id + this._idDecoration;
                }
            }
        }
    },

    dispose: function() {
        /// <summary>
        /// Dispose the behavior
        /// </summary>

        // Detach events
        if (this._decoyElementClickHandler) {
            $removeHandler(this._decoyElement, "click", this._decoyElementClickHandler);
            this._decoyElementClickHandler = null;
        }
        if (this._checkChangedHandler) {
            $removeHandler(this.get_element(), "change", this._checkChangedHandler);
            this._checkChangedHandler = null;
        }
        if (this._clickHandler) {
            $removeHandler(this.get_element(), "click", this._clickHandler);
            this._clickHandler = null;
        }
        if (this._decoyElementMouseOverHandler) {
            $removeHandler(this._decoyElement, "mouseover", this._decoyElementMouseOverHandler);
            this._decoyElementMouseOverHandler = null;
        }
        if (this._decoyElementMouseOutHandler) {
            $removeHandler(this._decoyElement, "mouseout", this._decoyElementMouseOutHandler);
            this._decoyElementMouseOutHandler = null;
        }

        CarQuotes.WebControls.ToggleButtonBehavior.callBaseMethod(this, 'dispose');
    },

    _onClick: function() {
        /// <summary>
        /// Handle the element's click events
        /// </summary>

        if (this.get_element().checked) {
            this._decoyElement.className = this.get_element().disabled ? this.get_DisabledCheckedCssClass() : this._CheckedCssClass;
        } else {
            this._decoyElement.className = this.get_element().disabled ? this.get_DisabledUncheckedCssClass() : this._UncheckedCssClass;
        }

        // TODO: Review this
        if (this.get_element().checked) {
            group = this.get_element().name;
            inputs = document.getElementsByTagName("input");
            for (i = 0; i < inputs.length; i++) {
                if (inputs[i].name == group && inputs[i] != this.get_element()) {
                    if (inputs[i].previousSibling) {
                        decoy = inputs[i].previousSibling.firstChild;
                        decoy.className = inputs[i].disabled ? this.get_DisabledUncheckedCssClass() : this._UncheckedCssClass;
                    }
                }
            }
        }

    },

    _onDecoyElementClick: function(e) {
        /// <summary>
        /// Handle the decoy element's click events
        /// </summary>
        /// <param name="e" type="Sys.UI.DomEvent">
        /// Event info
        /// </param>

        this.get_element().click();
        e.preventDefault();
        return false;
    },

    _onDecoyElementMouseOver: function(e) {
        /// <summary>
        /// Handle the decoy element's mouseover event
        /// </summary>
        /// <param name="e" type="Sys.UI.DomEvent">
        /// Event info
        /// </param>

        var e = this.get_element();
        if (e && !e.disabled) {
            if (e.checked && this._CheckedOverCssClass) {
                this._decoyElement.className = this._CheckedOverCssClass;
            } else if (!e.checked && this._UncheckedOverCssClass) {
                this._decoyElement.className = this._UncheckedOverCssClass;
            }
        }
    },

    _onDecoyElementMouseOut: function(e) {
        /// <summary>
        /// Handle the decoy element's mouseout event
        /// </summary>
        /// <param name="e" type="Sys.UI.DomEvent">
        /// Event info
        /// </param>

        // Call _onClick because it restores the correct image
        this._onClick();
    },

    get_UncheckedCssClass: function() {
        /// <value type="String">
        /// URL of the image to show when the toggle button is in the unchecked state
        /// </value>
        return this._UncheckedCssClass;
    },
    set_UncheckedCssClass: function(value) {
        if (this._UncheckedCssClass != value) {
            this._UncheckedCssClass = value;
            this.raisePropertyChanged('UncheckedCssClass');
        }
    },

    get_CheckedCssClass: function() {
        /// <value type="String">
        /// URL of the image to show when the toggle button is in the checked state
        /// </value>
        return this._CheckedCssClass;
    },
    set_CheckedCssClass: function(value) {
        if (this._CheckedCssClass != value) {
            this._CheckedCssClass = value;
            this.raisePropertyChanged('CheckedCssClass');
        }
    },

    get_DisabledUncheckedCssClass: function() {
        /// <value type="String">
        /// URL of the image to show when the toggle button is disabled and in the unchecked state
        /// </value>
        return (this._DisabledUncheckedCssClass != undefined) ?
            this._DisabledUncheckedCssClass : this._UncheckedCssClass;
    },
    set_DisabledUncheckedCssClass: function(value) {
        if (this._DisabledUncheckedCssClass != value) {
            this._DisabledUncheckedCssClass = value;
            this.raisePropertyChanged('DisabledUncheckedCssClass');
        }
    },

    get_DisabledCheckedCssClass: function() {
        /// <value type="String">
        /// URL of the image to show when the toggle button is disabled and in the checked state
        /// </value>
        return (this._DisabledUncheckedCssClass != undefined) ?
            this._DisabledCheckedCssClass : this._CheckedCssClass;
    },
    set_DisabledCheckedCssClass: function(value) {
        if (this._DisabledCheckedCssClass != value) {
            this._DisabledCheckedCssClass = value;
            this.raisePropertyChanged('DisabledCheckedCssClass');
        }
    },

    get_CheckedOverCssClass: function() {
        /// <value type="String">
        /// URL of the image to show when the toggle button is in the checked state and the cursor is positioned over the element
        /// </value>
        return this._CheckedOverCssClass;
    },
    set_CheckedOverCssClass: function(value) {
        if (this._CheckedOverCssClass != value) {
            this._CheckedOverCssClass = value;
            this.raisePropertyChanged('CheckedOverCssClass');
        }
    },

    get_UncheckedOverCssClass: function() {
        /// <value type="String">
        /// URL of the image to show when the toggle button is in the unchecked state and the cursor is positioned over the element
        /// </value>
        return this._UncheckedOverCssClass;
    },
    set_UncheckedOverCssClass: function(value) {
        if (this._UncheckedOverCssClass != value) {
            this._UncheckedOverCssClass = value;
            this.raisePropertyChanged('UncheckedOverCssClass');
        }
    }
}
CarQuotes.WebControls.ToggleButtonBehavior.registerClass('CarQuotes.WebControls.ToggleButtonBehavior', AjaxControlToolkit.BehaviorBase);
//    getDescriptor : function() {
//        var td = CarQuotes.WebControls.ToggleButtonBehavior.callBaseMethod(this, 'getDescriptor');
//        // Add custom properties
//        td.addProperty('ImageWidth', String);
//        td.addProperty('ImageHeight', String);
//        td.addProperty('UncheckedCssClass', String);
//        td.addProperty('CheckedCssClass', String);
//        td.addProperty('DisabledUncheckedCssClass', String);
//        td.addProperty('DisabledCheckedCssClass', String);
//        td.addProperty('CheckedOverCssClass', String);
//        td.addProperty('UncheckedOverCssClass', String);
//        td.addProperty('UncheckedImageAlternateText', String);
//        td.addProperty('CheckedImageAlternateText', String);
//        td.addProperty('CheckedImageOverAlternateText', String);
//        td.addProperty('UncheckedImageOverAlternateText', String);
//        return td;
//    },

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