/**
 * @description Provides the YUI with several built-in effect combinations.
 * @module effects
 * @version 0.8
 * @namespace YAHOO.widget
 * @requires yahoo, dom, event
*/
/**
* @class Effects
* @description Provides the YUI with several built-in effect combinations.<br>
* All effects now support a Custom Event called onEffectComplete.<br>
* They all now support a new option called delay. If delay is set to true the effect will not immediately execute.<br>
* You can then call eff.animate(); to animate it later. This way you can delay the execution & bind an onEffectComplete subscriber<br>
* Then animate the effect.
*/
YAHOO.widget.Effects = function() {
    return {
        version: '0.8'
    }
}();

/**
* This effect makes the object dissappear with display none.
* @class Effects.Hide
* @param {String/HTMLElement} inElm HTML element to apply the effect to
*/
YAHOO.widget.Effects.Hide = function(inElm) {
    this.element = YAHOO.util.Dom.get(inElm);

    YAHOO.util.Dom.setStyle(this.element, 'display', 'none');
    YAHOO.util.Dom.setStyle(this.element, 'visibility', 'hidden');
}

/**
* @method toString
* String function for reporting to YUI Logger
*/
YAHOO.widget.Effects.Hide.prototype.toString = function() {
    return 'Effect Hide [' + this.element.id + ']';
}
/**
* This effect makes the object Appear with display block.
* @class Effects.Show
* @param {String/HTMLElement} inElm HTML element to apply the effect to
*/
YAHOO.widget.Effects.Show = function(inElm) {
    this.element = YAHOO.util.Dom.get(inElm);

    YAHOO.util.Dom.setStyle(this.element, 'display', 'block');
    YAHOO.util.Dom.setStyle(this.element, 'visibility', 'visible');
}
/**
* @method toString
* String function for reporting to YUI Logger
*/
YAHOO.widget.Effects.Show.prototype.toString = function() {
    return 'Effect Show [' + this.element.id + ']';
}
/**
* This effect makes the object fade & disappear.
* @class Effects.Fade
* @param {String/HTMLElement} inElm HTML element to apply the effect to
* @param {Object} options Pass in an object of options for this effect, you can choose the Easing and the Duration
* <code> <br>var options = (<br>
*   ease: YAHOO.util.Easing.easeOut,<br>
*   seconds: 1<br>
*   delay: true (Delays execution)<br>
* )</code>
* @return Effect Object (Acess anmiation object via this.effect)
* @type Object
*/
YAHOO.widget.Effects.Fade = function(inElm, opts) {
    this.element = YAHOO.util.Dom.get(inElm);

    var attributes = {
        opacity: { from: 1, to: 0 }
    };
    /**
    * Custom Event fired after the effect completes
    * @type Object
    */
    this.onEffectComplete = new YAHOO.util.CustomEvent('oneffectcomplete', this);

    var ease = ((opts && opts.ease) ? opts.ease : YAHOO.util.Easing.easeOut);
    var secs = ((opts && opts.seconds) ? opts.seconds : 1);
    var delay = ((opts && opts.delay) ? opts.delay : false);

    /**
    * YUI Animation Object
    * @type Object
    */
    this.effect = new YAHOO.util.Anim(this.element, attributes, secs, ease);
    this.effect.onComplete.subscribe(function() {
        YAHOO.widget.Effects.Hide(this.element);
        this.onEffectComplete.fire();
    }, this, true);
    if (!delay) {
        this.effect.animate();
    }
}
/**
* @method animate
* Fires off the embedded Animation.
*/
YAHOO.widget.Effects.Fade.prototype.animate = function() {
    this.effect.animate();
}
/**
* @method toString
* String function for reporting to YUI Logger
*/
YAHOO.widget.Effects.Fade.prototype.toString = function() {
    return 'Effect Fade [' + this.element.id + ']';
}
/**
* This effect makes the object fade & appear.
* @class Effects.Appear
* @param {String/HTMLElement} inElm HTML element to apply the effect to
* @param {Object} options Pass in an object of options for this effect, you can choose the Easing and the Duration
* <code> <br>var options = (<br>
*   ease: YAHOO.util.Easing.easeOut,<br>
*   seconds: 3<br>
*   delay: true (Delays execution)<br>
* )</code>
* @return Effect Object (Acess anmiation object via this.effect)
* @type Object
*/
YAHOO.widget.Effects.Appear = function(inElm, opts) {
    this.element = YAHOO.util.Dom.get(inElm);

    YAHOO.util.Dom.setStyle(this.element, 'opacity', '0');
    YAHOO.widget.Effects.Show(this.element);
    var attributes = {
        opacity: { from: 0, to: 1 }
    };
    /*
    * Custom Event fired after the effect completes
    * @type Object
    */
    this.onEffectComplete = new YAHOO.util.CustomEvent('oneffectcomplete', this);
    
    var ease = ((opts && opts.ease) ? opts.ease : YAHOO.util.Easing.easeOut);
    var secs = ((opts && opts.seconds) ? opts.seconds : 3);
    var delay = ((opts && opts.delay) ? opts.delay : false);

    /**
    * YUI Animation Object
    * @type Object
    */
    this.effect = new YAHOO.util.Anim(this.element, attributes, secs, ease);
    this.effect.onComplete.subscribe(function() {
        this.onEffectComplete.fire();
    }, this, true);
    if (!delay) {
        this.effect.animate();
    }
}
/**
* @method animate
* Fires off the embedded Animation.
*/
YAHOO.widget.Effects.Appear.prototype.animate = function() {
    this.effect.animate();
}
/**
* @method toString
* String function for reporting to YUI Logger
*/
YAHOO.widget.Effects.Appear.prototype.toString = function() {
    return 'Effect Appear [' + this.element.id + ']';
}
/**
* This effect makes the object act like a window blind and retract.
* @class Effects.BlindUp
* @param {String/HTMLElement} inElm HTML element to apply the effect to
* @param {Object} options Pass in an object of options for this effect, you can choose the Easing and the Duration
* <code> <br>var options = (<br>
*   ease: YAHOO.util.Easing.easeOut,<br>
*   seconds: 1<br>
*   delay: true (Delays execution)<br>
*   bind: (string) bottom<br>
*   ghost: (boolean)<br>
* )</code><br>
* Setting the bind option will make the element "blind up/rise" from the bottom.
* @return Effect Object (Acess anmiation object via this.effect)
* @type Object
*/
YAHOO.widget.Effects.BlindUp = function(inElm, opts) {
    var ease = ((opts && opts.ease) ? opts.ease : YAHOO.util.Easing.easeOut);
    var secs = ((opts && opts.seconds) ? opts.seconds : 1);
    var delay = ((opts && opts.delay) ? opts.delay : false);
    var ghost = ((opts && opts.ghost) ? opts.ghost : false);

    this.element = YAHOO.util.Dom.get(inElm);
    this._height = $T.getHeight(this.element);
    this._top = parseInt($D.getStyle(this.element, 'top'));
    
    this._opts = opts;

    YAHOO.util.Dom.setStyle(this.element, 'overflow', 'hidden');
    var attributes = {
        height: { to: 0 }
    };
    if (ghost) {
        attributes.opacity = {
            to : 0,
            from: 1
        }
    }

    /**
    * Custom Event fired after the effect completes
    * @type Object
    */
    this.onEffectComplete = new YAHOO.util.CustomEvent('oneffectcomplete', this);


    if (opts && opts.bind && (opts.bind == 'bottom')) {
        var attributes = {
            height: { from: 0, to: parseInt(this._height)},
            top: { from: (this._top + parseInt(this._height)), to: this._top }
        };
        if (ghost) {
            attributes.opacity = {
                to : 1,
                from: 0
            }
        }
    }

    /**
    * YUI Animation Object
    * @type Object
    */
	this.effect = new YAHOO.util.Anim(this.element, attributes, secs, ease);
	this.effect.onComplete.subscribe(function() {
		if (this._opts && this._opts.bind && (this._opts.bind == 'bottom')) {
			YAHOO.util.Dom.setStyle(this.element, 'top', this._top + 'px');
		} else {
			YAHOO.widget.Effects.Hide(this.element);
			YAHOO.util.Dom.setStyle(this.element, 'height', this._height);
		}
		YAHOO.util.Dom.setStyle(this.element, 'opacity', 1);
		this.onEffectComplete.fire();
	}, this, true);
	if (!delay) {
		this.animate();
	}
}
/**
* @private
* @method prepStyle
* Preps the style of the element before running the Animation.
*/
YAHOO.widget.Effects.BlindUp.prototype.prepStyle = function() {
    if (this._opts && this._opts.bind && (this._opts.bind == 'bottom')) {
        YAHOO.util.Dom.setStyle(this.element, 'height', '0px');
        YAHOO.util.Dom.setStyle(this.element, 'top', this._height);
    }
    YAHOO.widget.Effects.Show(this.element);
}
/**
* @method animate
* Fires off the embedded Animation.
*/
YAHOO.widget.Effects.BlindUp.prototype.animate = function() {
	this.prepStyle();
	this.effect.animate();
}
/**
* @method toString
* String function for reporting to YUI Logger
*/
YAHOO.widget.Effects.BlindUp.prototype.toString = function() {
    return 'Effect BlindUp [' + this.element.id + ']';
}
/**
* This effect makes the object act like a window blind opening.
* @class Effects.BlindDown
* @param {String/HTMLElement} inElm HTML element to apply the effect to
* @param {Object} options Pass in an object of options for this effect, you can choose the Easing and the Duration
* <code> <br>var options = (<br>
*   ease: YAHOO.util.Easing.easeOut,<br>
*   seconds: 1<br>
*   delay: true (Delays execution)<br>
*   bind: (string) bottom<br>
*   ghost: (boolean)<br>
* )</code><br>
* Setting the bind option will make the element "blind down" from top to bottom.
* @return Effect Object (Acess anmiation object via this.effect)
* @type Object
*/
YAHOO.widget.Effects.BlindDown = function(inElm, opts) {
    var ease = ((opts && opts.ease) ? opts.ease : YAHOO.util.Easing.easeOut);
    var secs = ((opts && opts.seconds) ? opts.seconds : 1);
    var delay = ((opts && opts.delay) ? opts.delay : false);
    var ghost = ((opts && opts.ghost) ? opts.ghost : false);

    this.element = YAHOO.util.Dom.get(inElm);

    this._opts = opts;
    this._height = parseInt($T.getHeight(this.element));
    this._top = parseInt($D.getStyle(this.element, 'top'));

    YAHOO.util.Dom.setStyle(this.element, 'overflow', 'hidden');
    var attributes = {
        height: { from: 0, to: this._height }
    };
    if (ghost) {
        attributes.opacity = {
            to : 1,
            from: 0
        }
    }
    /**
    * Custom Event fired after the effect completes
    * @type Object
    */
    this.onEffectComplete = new YAHOO.util.CustomEvent('oneffectcomplete', this);


    if (opts && opts.bind && (opts.bind == 'bottom')) {
        var attributes = {
            height: { to: 0, from: parseInt(this._height)},
            top: { to: (this._top + parseInt(this._height)), from: this._top }
        };
        if (ghost) {
            attributes.opacity = {
                to : 0,
                from: 1
            }
        }
    }

    /**
    * YUI Animation Object
    * @type Object
    */
    this.effect = new YAHOO.util.Anim(this.element, attributes, secs, ease);
    if (opts && opts.bind && (opts.bind == 'bottom')) {
        this.effect.onComplete.subscribe(function() {
            YAHOO.widget.Effects.Hide(this.element);
            YAHOO.util.Dom.setStyle(this.element, 'top', this._top + 'px');
            YAHOO.util.Dom.setStyle(this.element, 'height', this._height + 'px');
            YAHOO.util.Dom.setStyle(this.element, 'opacity', 1);
            this.onEffectComplete.fire();
        }, this, true);
    } else {
        this.effect.onComplete.subscribe(function() {
            YAHOO.util.Dom.setStyle(this.element, 'opacity', 1);
            this.onEffectComplete.fire();
        }, this, true);
    }
    if (!delay) {
        this.animate();
    }
}
/**
* @private
* @method prepStyle
* Preps the style of the element before running the Animation.
*/
YAHOO.widget.Effects.BlindDown.prototype.prepStyle = function() {
    if (this._opts && this._opts.bind && (this._opts.bind == 'bottom')) {
    } else {
        YAHOO.util.Dom.setStyle(this.element, 'height', '0px');
    }
    YAHOO.widget.Effects.Show(this.element);
}
/**
* @method animate
* Fires off the embedded Animation.
*/
YAHOO.widget.Effects.BlindDown.prototype.animate = function() {
    this.prepStyle();
    this.effect.animate();
}
/**
* @method toString
* String function for reporting to YUI Logger
*/
YAHOO.widget.Effects.BlindDown.prototype.toString = function() {
    return 'Effect BlindDown [' + this.element.id + ']';
}
/**
* This effect makes the object slide open from the right.
* @class Effects.BlindRight
* @param {String/HTMLElement} inElm HTML element to apply the effect to
* @param {Object} options Pass in an object of options for this effect, you can choose the Easing and the Duration
* <code> <br>var options = (<br>
*   ease: YAHOO.util.Easing.easeOut,<br>
*   seconds: 1<br>
*   delay: true (Delays execution)<br>
*   bind: (string) right<br>
*   ghost: (boolean)<br>
* )</code><br>
* Setting the bind option will make the element "blind right" from right to left (it will be attached to the right side).
* @return Effect Object (Acess anmiation object via this.effect)
* @type Object
*/
YAHOO.widget.Effects.BlindRight = function(inElm, opts) {
    var ease = ((opts && opts.ease) ? opts.ease : YAHOO.util.Easing.easeOut);
    var secs = ((opts && opts.seconds) ? opts.seconds : 1);
    var delay = ((opts && opts.delay) ? opts.delay : false);
    var ghost = ((opts && opts.ghost) ? opts.ghost : false);
    this.element = YAHOO.util.Dom.get(inElm);

    this._width = parseInt(YAHOO.util.Dom.getStyle(this.element, 'width'));
    this._left = parseInt(YAHOO.util.Dom.getStyle(this.element, 'left'));
    this._opts = opts;

    YAHOO.util.Dom.setStyle(this.element, 'overflow', 'hidden');
    /**
    * Custom Event fired after the effect completes
    * @type Object
    */
    this.onEffectComplete = new YAHOO.util.CustomEvent('oneffectcomplete', this);

    var attributes = {
        width: { from: 0, to: this._width }
    };
    if (ghost) {
        attributes.opacity = {
            to : 1,
            from: 0
        }
    }

    if (opts && opts.bind && (opts.bind == 'right')) {
        var attributes = {
            width: { to: 0 },
            /*left: { from: parseInt, to: this._width }*/
            left: { to: this._left + parseInt(this._width), from: this._left }
        };
        if (ghost) {
            attributes.opacity = {
                to : 0,
                from: 1
            }
        }
    }
    /**
    * YUI Animation Object
    * @type Object
    */
    this.effect = new YAHOO.util.Anim(this.element, attributes, secs, ease);
    if (opts && opts.bind && (opts.bind == 'right')) {
        this.effect.onComplete.subscribe(function() {
            YAHOO.widget.Effects.Hide(this.element);
            YAHOO.util.Dom.setStyle(this.element, 'width', this._width + 'px');
            YAHOO.util.Dom.setStyle(this.element, 'left', this._left + 'px');
            this._width = null;
            YAHOO.util.Dom.setStyle(this.element, 'opacity', 1);
            this.onEffectComplete.fire();
        }, this, true);
    } else {
        this.effect.onComplete.subscribe(function() {
            YAHOO.util.Dom.setStyle(this.element, 'opacity', 1);
            this.onEffectComplete.fire();
        }, this, true);
    }
    if (!delay) {
        this.animate();
    }
}
/**
* @private
* @method prepStyle
* Preps the style of the element before running the Animation.
*/
YAHOO.widget.Effects.BlindRight.prototype.prepStyle = function() {
    if (this._opts && this._opts.bind && (this._opts.bind == 'right')) {
    } else {
        YAHOO.util.Dom.setStyle(this.element, 'width', '0');
    }
}
/**
* @method animate
* Fires off the embedded Animation.
*/
YAHOO.widget.Effects.BlindRight.prototype.animate = function() {
    this.prepStyle();
    this.effect.animate();
}
/**
* @method toString
* String function for reporting to YUI Logger
*/
YAHOO.widget.Effects.BlindRight.prototype.toString = function() {
    return 'Effect BlindRight [' + this.element.id + ']';
}
/**
* This effect makes the object slide closed from the left.
* @class Effects.BlindLeft
* @param {String/HTMLElement} inElm HTML element to apply the effect to
* @param {Object} options Pass in an object of options for this effect, you can choose the Easing and the Duration
* <code> <br>var options = (<br>
*   ease: YAHOO.util.Easing.easeOut,<br>
*   seconds: 1<br>
*   delay: true (Delays execution)<br>
*   bind: (string) right<br>
*   ghost: (boolean)<br>
* )</code><br>
* Setting the bind option will make the element "blind left" from left to right (it will be attached to the right side).
* @return Effect Object (Acess anmiation object via this.effect)
* @type Object
*/
YAHOO.widget.Effects.BlindLeft = function(inElm, opts) {
    var ease = ((opts && opts.ease) ? opts.ease : YAHOO.util.Easing.easeOut);
    var secs = ((opts && opts.seconds) ? opts.seconds : 1);
    var delay = ((opts && opts.delay) ? opts.delay : false);
    var ghost = ((opts && opts.ghost) ? opts.ghost : false);
    this.ghost = ghost;

    this.element = YAHOO.util.Dom.get(inElm);
    this._width = YAHOO.util.Dom.getStyle(this.element, 'width');
    this._left = parseInt(YAHOO.util.Dom.getStyle(this.element, 'left'));


    this._opts = opts;
    YAHOO.util.Dom.setStyle(this.element, 'overflow', 'hidden');
    var attributes = {
        width: { to: 0 }
    };
    if (ghost) {
        attributes.opacity = {
            to : 0,
            from: 1
        }
    }
    
    /**
    * Custom Event fired after the effect completes
    * @type Object
    */
    this.onEffectComplete = new YAHOO.util.CustomEvent('oneffectcomplete', this);


    if (opts && opts.bind && (opts.bind == 'right')) {
        var attributes = {
            width: { from: 0, to: parseInt(this._width) },
            left: { from: this._left + parseInt(this._width), to: this._left }
        };
        if (ghost) {
            attributes.opacity = {
                to : 1,
                from: 0
            }
        }
    }
    
    /**
    * YUI Animation Object
    * @type Object
    */
    this.effect = new YAHOO.util.Anim(this.element, attributes, secs, ease);
    if (opts && opts.bind && (opts.bind == 'right')) {
        this.effect.onComplete.subscribe(function() {
            this.onEffectComplete.fire();
        }, this, true);
    } else {
        this.effect.onComplete.subscribe(function() {
            YAHOO.widget.Effects.Hide(this.element);
            YAHOO.util.Dom.setStyle(this.element, 'width', this._width);
            YAHOO.util.Dom.setStyle(this.element, 'left', this._left + 'px');
            YAHOO.util.Dom.setStyle(this.element, 'opacity', 1);
            this._width = null;
            this.onEffectComplete.fire();
        }, this, true);
    }
    if (!delay) {
        this.animate();
    }
}
/**
* @private
* @method BlindLeft
* Preps the style of the element before running the Animation.
*/
YAHOO.widget.Effects.BlindLeft.prototype.prepStyle = function() {
    if (this._opts && this._opts.bind && (this._opts.bind == 'right')) {
        YAHOO.widget.Effects.Hide(this.element);
        YAHOO.util.Dom.setStyle(this.element, 'width', '0px');
        YAHOO.util.Dom.setStyle(this.element, 'left', parseInt(this._width));
        if (this.ghost) {
            YAHOO.util.Dom.setStyle(this.element, 'opacity', 0);
        }
        YAHOO.widget.Effects.Show(this.element);
    }
}
/**
* @method animate
* Fires off the embedded Animation.
*/
YAHOO.widget.Effects.BlindLeft.prototype.animate = function() {
    this.prepStyle();
    this.effect.animate();
}
/**
* @method toString
* String function for reporting to YUI Logger
*/
YAHOO.widget.Effects.BlindLeft.prototype.toString = function() {
    return 'Effect BlindLeft [' + this.element.id + ']';
}
/**
* This effect makes the object appear to fold up.
* @class Effects.Fold
* @param {String/HTMLElement} inElm HTML element to apply the effect to
* @param {Object} options Pass in an object of options for this effect, you can choose the Easing and the Duration
* <code> <br>var options = (<br>
*   ease: YAHOO.util.Easing.easeOut,<br>
*   seconds: 1,<br>
*   to: 5,<br>
*   delay: true (Delays execution),<br>
*   ghost: (boolean)<br>
* )</code>
* @return Effect Object (Acess anmiation object via this.effect)
* @type Object
*/
YAHOO.widget.Effects.Fold = function(inElm, opts) {
    var ease = ((opts && opts.ease) ? opts.ease : YAHOO.util.Easing.easeOut);
    var secs = ((opts && opts.seconds) ? opts.seconds : 1);
    var delay = ((opts && opts.delay) ? opts.delay : false);
    this.ghost = ((opts && opts.ghost) ? opts.ghost : false);

    this.element = YAHOO.util.Dom.get(inElm);

    this._to = 5;
    if (!delay) {
        YAHOO.widget.Effects.Show(this.element);
    }
    YAHOO.util.Dom.setStyle(this.element, 'overflow', 'hidden');

    this.done = false;

    this._height = parseInt($T.getHeight(this.element));

    this._width = YAHOO.util.Dom.getStyle(this.element, 'width');

    /**
    * Custom Event fired after the effect completes
    * @type Object
    */
    this.onEffectComplete = new YAHOO.util.CustomEvent('oneffectcomplete', this);

    if (opts && opts.to) {
        this._to = opts.to;
    }
    
    var attributes = {
        height: { to: this._to }
    };

    /**
    * YUI Animation Object
    * @type Object
    */
    this.effect = new YAHOO.util.Anim(this.element, attributes, secs, ease);
    this.effect.onComplete.subscribe(function() {
        if (this.done) {
            YAHOO.widget.Effects.Hide(this.element);
            YAHOO.util.Dom.setStyle(this.element, 'height', this._height + 'px');
            YAHOO.util.Dom.setStyle(this.element, 'width', this._width);
            this.onEffectComplete.fire();
        } else {
            this.done = true;
            this.effect.attributes = { width: { to: 0 }, height: { from: this._to, to: this._to } }
            if (this.ghost) {
                this.effect.attributes.opacity = {
                    to : 0, from: 1
                }
            }
            this.animate();
        }
    }, this, true);
    if (!delay) {
        this.animate();
    }
}
/**
* @method animate
* Fires off the embedded Animation.
*/
YAHOO.widget.Effects.Fold.prototype.animate = function() {
    this.effect.animate();
}
/**
* @method toString
* String function for reporting to YUI Logger
*/
YAHOO.widget.Effects.Fold.prototype.toString = function() {
    return 'Effect Fold [' + this.element.id + ']';
}
/**
* This effect makes the object appear to fold out (opposite of Fold).
* @class Effects.UnFold
* @param {String/HTMLElement} inElm HTML element to apply the effect to
* @param {Object} options Pass in an object of options for this effect, you can choose the Easing and the Duration
* <code> <br>var options = (<br>
*   ease: YAHOO.util.Easing.easeOut,<br>
*   seconds: 1,<br>
*   to: 5,<br>
*   delay: true (Delays execution),<br>
*   ghost: (boolean)<br>
* )</code>
* @return Effect Object (Acess anmiation object via this.effect)
* @type Object
*/
YAHOO.widget.Effects.UnFold = function(inElm, opts) {
    var ease = ((opts && opts.ease) ? opts.ease : YAHOO.util.Easing.easeOut);
    var secs = ((opts && opts.seconds) ? opts.seconds : 1);
    var delay = ((opts && opts.delay) ? opts.delay : false);
    this.ghost = ((opts && opts.ghost) ? opts.ghost : false);

    this.element = YAHOO.util.Dom.get(inElm);
    this._height = $T.getHeight(this.element);
    this._width = YAHOO.util.Dom.getStyle(this.element, 'width');

    this._to = 5;
    YAHOO.util.Dom.setStyle(this.element, 'overflow', 'hidden');


    this.done = false;

    /**
    * Custom Event fired after the effect completes
    * @type Object
    */
    this.onEffectComplete = new YAHOO.util.CustomEvent('oneffectcomplete', this);

    if (opts && opts.to) {
        this._to = opts.to;
    }
    
    attributes = {
        height: { from: 0, to: this._to },
        width: { from: 0, to: parseInt(this._width) }
    };
    if (this.ghost) {
        attributes.opacity = {
            to : .15, from: 0
        }
    }
    
    /**
    * YUI Animation Object
    * @type Object
    */
    this.effect = new YAHOO.util.Anim(this.element, attributes, secs, ease);
    this.effect.onComplete.subscribe(function() {
        if (this.done) {
            this.onEffectComplete.fire();
            this.done = false;
        } else {
            this.done = true;
            this.effect.attributes = { width: { from: parseInt(this._width), to: parseInt(this._width) }, height: { from: this._to, to: parseInt(this._height) } }
            if (this.ghost) {
                this.effect.attributes.opacity = {
                    to : 1, from: .15
                }
            }
            this.effect.animate();
        }
    }, this, true);
    if (!delay) {
        this.animate();
    }
}
/**
* @private
* @method prepStyle
* Preps the style of the element before running the Animation.
*/
YAHOO.widget.Effects.UnFold.prototype.prepStyle = function() {
    YAHOO.widget.Effects.Hide(this.element);
    YAHOO.util.Dom.setStyle(this.element, 'height', '0px');
    YAHOO.util.Dom.setStyle(this.element, 'width', '0px');
    this.effect.attributes = attributes;
}
/**
* @method animate
* Fires off the embedded Animation.
*/
YAHOO.widget.Effects.UnFold.prototype.animate = function() {
    this.prepStyle();
    YAHOO.widget.Effects.Show(this.element);
    this.effect.animate();
}
/**
* @method toString
* String function for reporting to YUI Logger
*/
YAHOO.widget.Effects.UnFold.prototype.toString = function() {
    return 'Effect UnFold [' + this.element.id + ']';
}


/**
* This effect makes the object shake from Right to Left.
* @class Effects.ShakeLR
* @param {String/HTMLElement} inElm HTML element to apply the effect to
* @param {Object} options Pass in an object of options for this effect, you can choose the Easing and the Duration
* <code> <br>var options = (<br>
*   ease: YAHOO.util.Easing.easeOut,<br>
*   seconds: .25,<br>
*   delay: true (Delays execution)<br>
*   offset: 10,<br>
*   maxcount: 5<br>
* )</code>
* @return Effect Object (Acess anmiation object via this.effect)
* @type Object
*/
YAHOO.widget.Effects.ShakeLR = function(inElm, opts) {
    this.element = YAHOO.util.Dom.get(inElm);

    this._offSet = 10;
    this._maxCount = 5;
    this._counter = 0;
    this._elmPos = YAHOO.util.Dom.getXY(this.element);
    var attributes = {
        left: { to:  ( - this._offSet) }
    };

    /**
    * Custom Event fired after the effect completes
    * @type Object
    */
    this.onEffectComplete = new YAHOO.util.CustomEvent('oneffectcomplete', this);

    if (opts && opts.offset) {
        this._offSet = opts.offset;
    }
    if (opts && opts.maxcount) {
        this._maxCount = opts.maxcount;
    }
    
    var ease = ((opts && opts.ease) ? opts.ease : YAHOO.util.Easing.easeOut);
    var secs = ((opts && opts.seconds) ? opts.seconds : .25);
    var delay = ((opts && opts.delay) ? opts.delay : false);

    /**
    * YUI Animation Object
    * @type Object
    */
    this.effect = new YAHOO.util.Anim(this.element, attributes, secs, ease);
    this.effect.onComplete.subscribe(function() {
        if (this.done) {
            this.onEffectComplete.fire();
        } else {
            if (this._counter < this._maxCount) {
                this._counter++;
                if (this._left) {
                    this._left = null;
                    this.effect.attributes = { left: { to: ( - this._offSet) } }
                } else {
                    this._left = true;
                    this.effect.attributes = { left: { to: this._offSet } }
                }
                this.effect.animate();
            } else {
                this.done = true;
                this._left = null;
                this._counter = null;
                this.effect.attributes = { left: { to: 0 } }
                this.effect.animate();
            }
        }
    }, this, true);
    if (!delay) {
        this.effect.animate();
    }
}
/**
* @method animate
* Fires off the embedded Animation.
*/
YAHOO.widget.Effects.ShakeLR.prototype.animate = function() {
    this.effect.animate();
}
/**
* @method toString
* String function for reporting to YUI Logger
*/
YAHOO.widget.Effects.ShakeLR.prototype.toString = function() {
    return 'Effect ShakeLR [' + this.element.id + ']';
}
/**
* This effect makes the object shake from Top to Bottom.
* @class Effects.ShakeTB
* @param {String/HTMLElement} inElm HTML element to apply the effect to
* @param {Object} options Pass in an object of options for this effect, you can choose the Easing and the Duration
* <code> <br>var options = (<br>
*   ease: YAHOO.util.Easing.easeOut,<br>
*   seconds: .25,<br>
*   delay: true (Delays execution)<br>
*   offset: 10,<br>
*   maxcount: 5<br>
* )</code>
* @return Effect Object (Acess anmiation object via this.effect)
* @type Object
*/
YAHOO.widget.Effects.ShakeTB = function(inElm, opts) {
    this.element = YAHOO.util.Dom.get(inElm);

    this._offSet = 10;
    this._maxCount = 5;
    this._counter = 0;
    this._elmPos = YAHOO.util.Dom.getXY(this.element);
    var attributes = {
        top: { to:  ( - this._offSet) }
    };

    if (opts && opts.offset) {
        this._offSet = opts.offset;
    }
    if (opts && opts.maxcount) {
        this._maxCount = opts.maxcount;
    }

    /**
    * Custom Event fired after the effect completes
    * @type Object
    */
    this.onEffectComplete = new YAHOO.util.CustomEvent('oneffectcomplete', this);
    
    var ease = ((opts && opts.ease) ? opts.ease : YAHOO.util.Easing.easeOut);
    var secs = ((opts && opts.seconds) ? opts.seconds : .25);
    var delay = ((opts && opts.delay) ? opts.delay : false);

    /**
    * YUI Animation Object
    * @type Object
    */
    this.effect = new YAHOO.util.Anim(this.element, attributes, secs, ease);
    this.effect.onComplete.subscribe(function() {
        if (this.done) {
            this.onEffectComplete.fire();
        } else {
            if (this._counter < this._maxCount) {
                this._counter++;
                if (this._left) {
                    this._left = null;
                    this.effect.attributes = { top: { to: ( - this._offSet) } }
                } else {
                    this._left = true;
                    this.effect.attributes = { top: { to: this._offSet } }
                }
                this.effect.animate();
            } else {
                this.done = true;
                this._left = null;
                this._counter = null;
                this.effect.attributes = { top: { to: 0 } }
                this.effect.animate();
            }
        }
    }, this, true);
    if (!delay) {
        this.effect.animate();
    }
}
/**
* @method animate
* Fires off the embedded Animation.
*/
YAHOO.widget.Effects.ShakeTB.prototype.animate = function() {
    this.effect.animate();
}
/**
* @method toString
* String function for reporting to YUI Logger
*/
YAHOO.widget.Effects.ShakeTB.prototype.toString = function() {
    return 'Effect ShakeTB [' + this.element.id + ']';
}
/**
* This effect makes the object drop from sight.
* @class Effects.Drop
* @param {String/HTMLElement} inElm HTML element to apply the effect to
* @param {Object} options Pass in an object of options for this effect, you can choose the Easing and the Duration
* <code> <br>var options = (<br>
*   ease: YAHOO.util.Easing.easeOut,<br>
*   seconds: 1,<br>
*   delay: true (Delays execution)<br>
* )</code>
* @return Effect Object (Acess anmiation object via this.effect)
* @type Object
*/
YAHOO.widget.Effects.Drop = function(inElm, opts) {
    this.element = YAHOO.util.Dom.get(inElm);


    this._height = parseInt($T.getHeight(this.element));
    this._top = parseInt($D.getStyle(this.element, 'top'));

    var attributes = {
        top: { from: this._top, to: (this._top + this._height) },
        opacity: { from: 1, to: 0 }
    };
    
    /**
    * Custom Event fired after the effect completes
    * @type Object
    */
    this.onEffectComplete = new YAHOO.util.CustomEvent('oneffectcomplete', this);

    var ease = ((opts && opts.ease) ? opts.ease : YAHOO.util.Easing.easeIn);
    var secs = ((opts && opts.seconds) ? opts.seconds : 1);
    var delay = ((opts && opts.delay) ? opts.delay : false);

    /**
    * YUI Animation Object
    * @type Object
    */
    this.effect = new YAHOO.util.Anim(this.element, attributes, secs, ease);
    this.effect.onComplete.subscribe(function() {
        YAHOO.widget.Effects.Hide(this.element);
        YAHOO.util.Dom.setStyle(this.element, 'top', this._top + 'px');
        YAHOO.util.Dom.setStyle(this.element, 'opacity', 1);
        this.onEffectComplete.fire();
    }, this, true);
    if (!delay) {
        this.animate();
    }
}
/**
* @method animate
* Fires off the embedded Animation.
*/
YAHOO.widget.Effects.Drop.prototype.animate = function() {
    this.effect.animate();
}
/**
* @method toString
* String function for reporting to YUI Logger
*/
YAHOO.widget.Effects.Drop.prototype.toString = function() {
    return 'Effect Drop [' + this.element.id + ']';
}
/**
* This effect makes the object flash on and off.
* @class Effects.Pulse
* @param {String/HTMLElement} inElm HTML element to apply the effect to
* @param {Object} options Pass in an object of options for this effect, you can choose the Easing and the Duration
* <code> <br>var options = (<br>
*   ease: YAHOO.util.Easing.easeOut,<br>
*   seconds: .25,<br>
*   delay: true (Delays execution)<br>
*   maxcount: 9<br>
* )</code>
* @return Effect Object (Acess anmiation object via this.effect)
* @type Object
*/
YAHOO.widget.Effects.Pulse = function(inElm, opts) {
    this.element = YAHOO.util.Dom.get(inElm);

    this._counter = 0;
    this._maxCount = 9;
    var attributes = {
        opacity: { from: 1, to: 0 }
    };

    if (opts && opts.maxcount) {
        this._maxCount = opts.maxcount;
    }
    
    /**
    * Custom Event fired after the effect completes
    * @type Object
    */
    this.onEffectComplete = new YAHOO.util.CustomEvent('oneffectcomplete', this);

    var ease = ((opts && opts.ease) ? opts.ease : YAHOO.util.Easing.easeIn);
    var secs = ((opts && opts.seconds) ? opts.seconds : .25);
    var delay = ((opts && opts.delay) ? opts.delay : false);

    /**
    * YUI Animation Object
    * @type Object
    */
    this.effect = new YAHOO.util.Anim(this.element, attributes, secs, ease);
    this.effect.onComplete.subscribe(function() {
        if (this.done) {
            this.onEffectComplete.fire();
        } else {
            if (this._counter < this._maxCount) {
                this._counter++;
                if (this._on) {
                    this._on = null;
                    this.effect.attributes = { opacity: { to: 0 } }
                } else {
                    this._on = true;
                    this.effect.attributes = { opacity: { to: 1 } }
                }
                this.effect.animate();
            } else {
                this.done = true;
                this._on = null;
                this._counter = null;
                this.effect.attributes = { opacity: { to: 1 } }
                this.effect.animate();
            }
        }
    }, this, true);
    if (!delay) {
        this.effect.animate();
    }
}
/**
* @method animate
* Fires off the embedded Animation.
*/
YAHOO.widget.Effects.Pulse.prototype.animate = function() {
    this.effect.animate();
}
/**
* @method toString
* String function for reporting to YUI Logger
*/
YAHOO.widget.Effects.Pulse.prototype.toString = function() {
    return 'Effect Pulse [' + this.element.id + ']';
}
/**
* This effect makes the object shrink from sight.
* @class Effects.Shrink
* @param {String/HTMLElement} inElm HTML element to apply the effect to
* @param {Object} options Pass in an object of options for this effect, you can choose the Easing and the Duration
* <code> <br>var options = (<br>
*   ease: YAHOO.util.Easing.easeOut,<br>
*   seconds: 1,<br>
*   delay: true (Delays execution)<br>
* )</code>
* @return Effect Object (Acess anmiation object via this.effect)
* @type Object
*/
YAHOO.widget.Effects.Shrink = function(inElm, opts) {
    this.start_elm = YAHOO.util.Dom.get(inElm);
    this.element = this.start_elm.cloneNode(true);

    this.start_elm.parentNode.replaceChild(this.element, this.start_elm);
    YAHOO.widget.Effects.Hide(this.start_elm);
    
    YAHOO.util.Dom.setStyle(this.element, 'overflow', 'hidden');

    /**
    * Custom Event fired after the effect completes
    * @type Object
    */
    this.onEffectComplete = new YAHOO.util.CustomEvent('oneffectcomplete', this);
    
    var ease = ((opts && opts.ease) ? opts.ease : YAHOO.util.Easing.easeOut);
    var secs = ((opts && opts.seconds) ? opts.seconds : 1);
    var delay = ((opts && opts.delay) ? opts.delay : false);
    
    var attributes = {
        width: { to: 0 },
        height: { to: 0 },
        fontSize: { from: 100, to: 0, unit: '%' },
        opacity: { from: 1, to: 0 }
    };

    /**
    * YUI Animation Object
    * @type Object
    */
    this.effect = new YAHOO.util.Anim(this.element, attributes, secs, ease);
    this.effect.onComplete.subscribe(function() {
        this.element.parentNode.replaceChild(this.start_elm, this.element);
        this.onEffectComplete.fire();
    }, this, true);
    if (!delay) {
        this.effect.animate();
    }
}
/**
* @method animate
* Fires off the embedded Animation.
*/
YAHOO.widget.Effects.Shrink.prototype.animate = function() {
    this.effect.animate();
}
/**
* @method toString
* String function for reporting to YUI Logger
*/
YAHOO.widget.Effects.Shrink.prototype.toString = function() {
    return 'Effect Shrink [' + this.element.id + ']';
}
/**
* This effect makes the object grow.
* @class Effects.Grow
* @param {String/HTMLElement} inElm HTML element to apply the effect to
* @param {Object} options Pass in an object of options for this effect, you can choose the Easing and the Duration
* <code> <br>var options = (<br>
*   ease: YAHOO.util.Easing.easeOut,<br>
*   seconds: 1,<br>
*   delay: true (Delays execution)<br>
* )</code>
* @return Effect Object (Acess anmiation object via this.effect)
* @type Object
*/
YAHOO.widget.Effects.Grow = function(inElm, opts) {
    this.element = YAHOO.util.Dom.get(inElm);

    
    var h = parseInt($T.getHeight(this.element));
    var w = parseInt(YAHOO.util.Dom.getStyle(this.element, 'width'));
    YAHOO.util.Dom.setStyle(this.element, 'overflow', 'hidden');

    /**
    * Custom Event fired after the effect completes
    * @type Object
    */
    this.onEffectComplete = new YAHOO.util.CustomEvent('oneffectcomplete', this);
    
    var ease = ((opts && opts.ease) ? opts.ease : YAHOO.util.Easing.easeOut);
    var secs = ((opts && opts.seconds) ? opts.seconds : 1);
    var delay = ((opts && opts.delay) ? opts.delay : false);
    
    var attributes = {
        width: { to: w, from: 0 },
        height: { to: h, from: 0 },
        fontSize: { from: 0, to: 100, unit: '%' },
        opacity: { from: 0, to: 1 }
    };

    /**
    * YUI Animation Object
    * @type Object
    */
    this.effect = new YAHOO.util.Anim(this.element, attributes, secs, ease);
    this.effect.onComplete.subscribe(function() {
        this.onEffectComplete.fire();
    }, this, true);
    if (!delay) {
        this.animate();
    }
}
/**
* @method animate
* Fires off the embedded Animation.
*/
YAHOO.widget.Effects.Grow.prototype.animate = function() {
    this.effect.animate();
}
/**
* @method toString
* String function for reporting to YUI Logger
*/
YAHOO.widget.Effects.Grow.prototype.toString = function() {
    return 'Effect Grow [' + this.element.id + ']';
}
/**
* This effect makes the object act like an old TV set.
* @class Effects.TV
* @param {String/HTMLElement} inElm HTML element to apply the effect to
* @param {Object} options Pass in an object of options for this effect, you can choose the Easing and the Duration
* <code> <br>var options = (<br>
*   ease: YAHOO.util.Easing.easeOut,<br>
*   seconds: 1,<br>
*   delay: true (Delays execution)<br>
* )</code>
* @return Effect Object (Acess anmiation object via this.effect)
* @type Object
*/
YAHOO.widget.Effects.TV = function(inElm, opts) {
    var ease = ((opts && opts.ease) ? opts.ease : YAHOO.util.Easing.easeIn);
    var secs = ((opts && opts.seconds) ? opts.seconds : 1);
    var delay = ((opts && opts.delay) ? opts.delay : false);

    this.element = YAHOO.util.Dom.get(inElm);

    this.done = false;

    this._height = parseInt($T.getHeight(this.element));
    this._width = parseInt(YAHOO.util.Dom.getStyle(this.element, 'width'));
    YAHOO.util.Dom.setStyle(this.element, 'overflow', 'hidden');

    var attributes = {
        top: { from: 0, to: (this._height / 2) },
        height: { to: 5 }
    };
    
    /**
    * Custom Event fired after the effect completes
    * @type Object
    */
    this.onEffectComplete = new YAHOO.util.CustomEvent('oneffectcomplete', this);


    /**
    * YUI Animation Object
    * @type Object
    */
    this.effect = new YAHOO.util.Anim(this.element, attributes, secs, ease);
    this.effect.onComplete.subscribe(function() {
        if (this.done) {
            this.onEffectComplete.fire();
            YAHOO.widget.Effects.Hide(this.element);
            YAHOO.util.Dom.setStyle(this.element, 'height', this._height + 'px');
            YAHOO.util.Dom.setStyle(this.element, 'width', this._width + 'px');
            YAHOO.util.Dom.setStyle(this.element, 'top', '');
            YAHOO.util.Dom.setStyle(this.element, 'left', '');
            YAHOO.util.Dom.setStyle(this.element, 'opacity', '1');
        } else {
            this.done = true;
            this.effect.attributes = { top: { from: (this._height / 2), to: (this._height / 2) }, left: { from: 0, to: (this._width / 2) }, height: { from: 5, to: 5 }, width: { to: 5 }, opacity: { from: 1, to: 0 } };
            this.effect.animate();
        }
    }, this, true);
    if (!delay) {
        this.animate();
    }
}
/**
* @method animate
* Fires off the embedded Animation.
*/
YAHOO.widget.Effects.TV.prototype.animate = function() {
    this.effect.animate();
}
/**
* @method toString
* String function for reporting to YUI Logger
*/
YAHOO.widget.Effects.TV.prototype.toString = function() {
    return 'Effect TV [' + this.element.id + ']';
}
/**
* This effect makes the object expand & dissappear.
* @class Effects.Shadow
* @param {String/HTMLElement} inElm HTML element to apply the effect to
* @param {Object} options Pass in an object of options for this effect, you can choose the Easing and the Duration
* <code> <br>var options = (<br>
*   delay: true<br>
*   topOffset: 8<br>
*   leftOffset: 8<br>
*   shadowColor: #ccc<br>
*   shadowOpacity: .75<br>
* )</code>
* @return Animation Object
* @type Object
*/
YAHOO.widget.Effects.Shadow = function(inElm, opts) {
    var delay = ((opts && opts.delay) ? opts.delay : false);
    var topOffset = ((opts && opts.top) ? opts.top : 8);
    var leftOffset = ((opts && opts.left) ? opts.left : 8);
    var shadowColor = ((opts && opts.color) ? opts.color : '#ccc');
    var shadowOpacity = ((opts && opts.opacity) ? opts.opacity : .75);

    this.element = YAHOO.util.Dom.get(inElm);

    
    if (YAHOO.util.Dom.get(this.element.id + '_shadow')) {
        this.shadow = YAHOO.util.Dom.get(this.element.id + '_shadow');
    } else {
        this.shadow = document.createElement('div');
        this.shadow.id = this.element.id + '_shadow';
        this.element.parentNode.appendChild(this.shadow);
    }

    var h = parseInt($T.getHeight(this.element));
    var w = parseInt(YAHOO.util.Dom.getStyle(this.element, 'width'));
    var z = this.element.style.zIndex;
    if (!z) {
        z = 1;
        this.element.style.zIndex = z;
    }

    YAHOO.util.Dom.setStyle(this.element, 'overflow', 'hidden');
    YAHOO.util.Dom.setStyle(this.shadow, 'height', h + 'px');
    YAHOO.util.Dom.setStyle(this.shadow, 'width', w + 'px');
    YAHOO.util.Dom.setStyle(this.shadow, 'background-color', shadowColor);
    YAHOO.util.Dom.setStyle(this.shadow, 'opacity', 0);
    YAHOO.util.Dom.setStyle(this.shadow, 'position', 'absolute');
    this.shadow.style.zIndex = (z - 1);
    var xy = YAHOO.util.Dom.getXY(this.element);

    /**
    * Custom Event fired after the effect completes
    * @type Object
    */
    this.onEffectComplete = new YAHOO.util.CustomEvent('oneffectcomplete', this);
    
    
    var attributes = {
        opacity: { from: 0, to: shadowOpacity },
        top: {
            from: xy[1],
            to: (xy[1] + topOffset)
        },
        left: {
            from: xy[0],
            to: (xy[0] + leftOffset)
        }
    };

    /**
    * YUI Animation Object
    * @type Object
    */
    this.effect = new YAHOO.util.Anim(this.shadow, attributes);
    this.effect.onComplete.subscribe(function() {
        this.onEffectComplete.fire();
    }, this, true);
    if (!delay) {
        this.animate();
    }
}
/**
* @method animate
* Fires off the embedded Animation.
*/
YAHOO.widget.Effects.Shadow.prototype.animate = function() {
    this.effect.animate();
}
/**
* @method toString
* String function for reporting to YUI Logger
*/
YAHOO.widget.Effects.Shadow.prototype.toString = function() {
    return 'Effect Shadow [' + this.element.id + ']';
}
/**
* This effect makes the object expand & dissappear.
* @class Effects.Puff
* @param {String/HTMLElement} inElm HTML element to apply the effect to
* @param {Object} options Pass in an object of options for this effect, you can choose the Easing and the Duration
* <code> <br>var options = (<br>
*   ease: YAHOO.util.Easing.easeOut,<br>
*   seconds: 1<br>
* )</code>
* @return Animation Object
* @type Object
*/
YAHOO.widget.Effects.Puff = function(inElm, opts) {
    var start_elm = YAHOO.util.Dom.get(inElm);
    /**
    * DOM manipulation...
    * @type HTMLElement
    */
    this.element = start_this.element.cloneNode(true);

    start_this.element.parentNode.replaceChild(this.element, start_elm);
    YAHOO.widget.Effects.Hide(start_elm);
    
    /**
    * Current location on the page
    * @type Array
    */
    var xy = YAHOO.util.Dom.getXY(this.element);
    /**
    * Get the Height
    * @type Integer
    */
    var h = parseInt($T.getHeight(this.element));
    /**
    * Get the Width
    * @type Integer
    */
    var w = parseInt(YAHOO.util.Dom.getStyle(this.element, 'width'));
    
    /**
    * One and a Half Times Bigger than it is
    */
    var nh = ((h / 2) + h);
    var nw = ((w / 2) + w);
    /**
    * Adjust position based on the new height and width
    */
    var nto = ((nh - h) / 2);
    var nlo = ((nw - w) / 2);
    var nt = xy[1] - nto;
    var nl = xy[0] - nlo;
    
    /**
    * Position needs to be absolute, so the new Height & Width will work
    */
    YAHOO.util.Dom.setStyle(this.element, 'position', 'absolute');
    
    var attributes = {
        top: { to: nt },
        left: { to: nl },
        width: { to: nw },
        height: { to: nh },
        opacity: { from: 1, to: 0 }
    };
    
    var ease = ((opts && opts.ease) ? opts.ease : YAHOO.util.Easing.easeOut);
    var secs = ((opts && opts.seconds) ? opts.seconds : 1);

    var puff = new YAHOO.util.Anim(this.element, attributes, secs, ease);
    puff.onComplete.subscribe(function() {
        this.element = this.getEl();
        /**
        * Replace the "cloned" element so we can put the original back with display:none set from above
        */
        this.element.parentNode.replaceChild(start_elm, elm);
    });
    puff.animate();
    
    return puff;
}


if (!YAHOO.Tools) {
    $T = {
        getHeight: function(el) {
            return YAHOO.util.Dom.getStyle(el, 'height');
        }
    }
}