Type.registerNamespace('EpiniX.WebControls.AJAX.GlowButton');

EpiniX.WebControls.AJAX.GlowButton.GlowButtonBehavior = function(element) {
    EpiniX.WebControls.AJAX.GlowButton.GlowButtonBehavior.initializeBase(this, [element]);

    //  Properties
    this._duration = null;
    this._fps = null;
    this._from = null;
    this._to = null;
    this._mode = null;
    this._interval = null;
    
    // Event Handlers
    this._buttonOverHandler = null;
    this._buttonOutHandler = null;
    this._forwardAnimationEndedHandler = null;
    this._backwardAnimationEndedHandler = null;

    //  Variables
    this._glowButtonContainer = null;
    this._forwardAnimation = null;
    this._backwardAnimation = null;
    this._timeoutid = null;
}

EpiniX.WebControls.AJAX.GlowButton.GlowButtonBehavior.prototype = {

    initialize : function() {
        EpiniX.WebControls.AJAX.GlowButton.GlowButtonBehavior.callBaseMethod(this, 'initialize');
        //  get a reference to the INPUT element        
        var e = this.get_element();
        
        //  wrap the INPUT inside the spans
        this._glowButtonContainer = document.createElement('SPAN');
        this._glowButtonContainer.style.backgroundColor = this.get_From();
        Sys.UI.DomElement.addCssClass(this._glowButtonContainer, 'ajax-glow-button');
        var innerElement = document.createElement('SPAN');
        Sys.UI.DomElement.addCssClass(innerElement, 'inner');
        
        //  inject the spans around the INPUT
        e.parentNode.insertBefore(this._glowButtonContainer, e);
        e.parentNode.removeChild(e);
        this._glowButtonContainer.appendChild(innerElement);
        innerElement.appendChild(e);         
        
        //  manually add the styles based on the browser
        if (Sys.Browser.agent == Sys.Browser.InternetExplorer) {
            this._glowButtonContainer.style.display = 'inline-block';
            innerElement.style.display = 'inline-block';
            e.style.display = 'inline-block';
            
            innerElement.style.position = 'relative';
            innerElement.style.left = '-1px';

            //  IE6 doesn't render transparent PNG's, so apply the ie6 CSS
            //  to override the background image and use the filter style attribute
            if(Sys.Browser.version < 7) {
                this._glowButtonContainer.style.backgroundImage = 'none';
                Sys.UI.DomElement.addCssClass(this._glowButtonContainer, 'ie6');
            }
        }
        else {
            if(Sys.Browser.agent == Sys.Browser.Opera){
                this._glowButtonContainer.style.display = 'inline-block';
            }
            else {
                this._glowButtonContainer.style.display = '-moz-inline-box';
            }
            innerElement.style.display = 'block';
            e.style.display = 'block';
        }
        
        //  start the animation
        this._forwardAnimation = new AjaxControlToolkit.Animation.ColorAnimation(this._glowButtonContainer, this.get_Duration(), this.get_Fps(), 'style', 'backgroundColor', this.get_From(), this.get_To());
        this._backwardAnimation = new AjaxControlToolkit.Animation.ColorAnimation(this._glowButtonContainer, this.get_Duration(), this.get_Fps(), 'style', 'backgroundColor', this.get_To(), this.get_From());
        
        if(this.get_Mode() == EpiniX.WebControls.AJAX.GlowButton.Mode.Continuous || this.get_Mode() == EpiniX.WebControls.AJAX.GlowButton.Mode.Interval) {
        
            this._forwardAnimationEndedHandler = Function.createDelegate(this, this._forwardAnimationEnded);
            this._forwardAnimation.add_ended(this._forwardAnimationEndedHandler);
            this._backwardAnimationEndedHandler = Function.createDelegate(this, this._backwardAnimationEnded);
            this._backwardAnimation.add_ended(this._backwardAnimationEndedHandler);            
        
            //  kick off the animation right away
            this._forwardAnimation.play();
        }
        else if(this.get_Mode() == EpiniX.WebControls.AJAX.GlowButton.Mode.Hover) {
            //  attach to the mouseover and out events and run the animations then
            this._buttonOverHandler = Function.createDelegate(this, this._onMouseOver);
            $addHandler(this._glowButtonContainer, 'mouseover', this._buttonOverHandler);
            
            //  attach to the mouseover and out events and run the animations then
            this._buttonOutHandler = Function.createDelegate(this, this._onMouseOut);
            $addHandler(this._glowButtonContainer, 'mouseout', this._buttonOutHandler);            
        }
    },

    dispose : function() {
        if(this._buttonOverHandler) {
            $removeHandler(this._glowButtonContainer, 'mouseover', this._buttonOverHandler);
        }
        if(this._buttonOutHandler) {
            $removeHandler(this._glowButtonContainer, 'mouseout', this._buttonOutHandler);
        }        
        if(this._forwardAnimationEndedHandler) {
            this._forwardAnimation.remove_ended(this._forwardAnimationEnded);
        }
        if(this._backwardAnimationEndedHandler) {
            this._backwardAnimation.add_ended(this._backwardAnimationEndedHandler);            
        }     
        if(this._timeoutid) {
            window.clearTimeout(this.__timeoutid);
        }   
    
        EpiniX.WebControls.AJAX.GlowButton.GlowButtonBehavior.callBaseMethod(this, 'dispose');
    },
    
    _forwardAnimationEnded : function() {
        //  if the mode is either Continious or Interval, run the
        //  backward animation right away
        if(this.get_Mode() == EpiniX.WebControls.AJAX.GlowButton.Mode.Continuous || this.get_Mode() == EpiniX.WebControls.AJAX.GlowButton.Mode.Interval) {
            this._backwardAnimation.play();
        }
    },
    
    _backwardAnimationEnded : function() {
        //  if the mode is either Continious or Interval, run the
        //  backward animation right away
        if(this.get_Mode() == EpiniX.WebControls.AJAX.GlowButton.Mode.Continuous) {
            this._forwardAnimation.play();
        }        
        else if(this.get_Mode() == EpiniX.WebControls.AJAX.GlowButton.Mode.Interval) {
            //  wait for the interval before running the animation again
            this._timeoutid = window.setTimeout(Function.createDelegate(this, function(){ this._forwardAnimation.play(); }), this.get_Interval());
        }
    },   
    
    _onMouseOver : function() {
        this._forwardAnimation.stop();
        this._backwardAnimation.stop();
        
        this._forwardAnimation.play();
    },
    
    _onMouseOut : function() {
        this._forwardAnimation.stop();
        this._backwardAnimation.stop();
        
        this._backwardAnimation.play();    
    },    

    get_Duration : function() {
        return this._duration;
    },
    set_Duration : function(value) {
        if (this._duration != value) {
            this._duration = value;
            this.raisePropertyChanged('Duration');
        }
    },
    
    get_Fps : function() {
        return this._fps;
    },
    set_Fps : function(value) {
        if (this._fps != value) {
            this._fps = value;
            this.raisePropertyChanged('Fps');
        }
    },
    
    get_From : function() {
        return this._from;
    },
    set_From : function(value) {
        if (this._from != value) {
            this._from = value;
            this.raisePropertyChanged('From');
        }
    }, 
    
    get_To : function() {
        return this._to;
    },
    set_To : function(value) {
        if (this._to != value) {
            this._to = value;
            this.raisePropertyChanged('To');
        }
    }, 
    
    get_Mode : function() {
        return this._mode;;
    },
    set_Mode : function(value) {
        if (this._mode != value) {
            this._mode = value;
            this.raisePropertyChanged('Mode');
        }
    }, 
    
    get_Interval : function() {
        return this._interval;
    },
    set_Interval : function(value) {
        if (this._interval != value) {
            this._interval = value;
            this.raisePropertyChanged('Interval');
        }
    }                    
}

EpiniX.WebControls.AJAX.GlowButton.GlowButtonBehavior.registerClass('EpiniX.WebControls.AJAX.GlowButton.GlowButtonBehavior', AjaxControlToolkit.BehaviorBase);

EpiniX.WebControls.AJAX.GlowButton.Mode = function() {
    throw Error.invalidOperation();
}
EpiniX.WebControls.AJAX.GlowButton.Mode.prototype = {
    Continuous: 0,
    Interval: 1,
    Hover: 2
}
EpiniX.WebControls.AJAX.GlowButton.Mode.registerEnum('EpiniX.WebControls.AJAX.GlowButton.Mode');