/*
Copyright (c) 2009, Jens Lojek. All rights reserved.
version: 1.2

Description:
Animate a Feedback message box with color highlighting

require YUI
 - YAHOO.util.Dom	(yahoo-dom-event.js)
 - YAHOO.util.Anim (animation-min.js)

Example Usage

---[HTML]---
<div id="FeedbackBox"></div>

---[JS]---
var msg = "Place your individual feedback message here.";
var Msg = new YAHOO.webfact.MsgFeedback('FeedbackBox');
YAHOO.util.Event.on(document, 'click', function() {
	Msg.show(msg);
});

*/

(function(){
	var Dom = YAHOO.util.Dom;

	YAHOO.namespace("webfact");

	YAHOO.webfact.MsgFeedbackInstance = 0;

	YAHOO.webfact.MsgFeedback = function(element, attributes) {
	    if (!element) {
	        YAHOO.log('element required to create MsgFeedback instance', 'error', 'MsgFeedback');
	    }
	    //this.init(element, attributes);
        this._initConfig(element, attributes);
	};
	YAHOO.webfact.MsgFeedback.NAME = 'MsgFeedback';

	YAHOO.webfact.MsgFeedback.prototype = {

        show:function(msgStr) {
            this.message = msgStr.toString();//message string to display within the feedback box
            this._initBox();
            this.fMsgBox.animate();
        },

        setCfg: function( key , value ){
            this.attribs[key] = value;
        },

        setElem: function( element ){
            if( Dom.get(element) )
            {
                this.trgElement = element;
            }
        },


        _initConfig: function(element, config){
            config = config || {};
            this.trgElement = element;
            this.attribs = {
                    mode: (config.mode ? config.mode : 'green'),
                    defColor: (config.defColor ? config.defColor : 'transparent'),
                    greenColor: (config.greenColor ? config.greenColor : '#00FF00'),
                    redColor: (config.redColor ? config.redColor : '#FF0000'),
                    offsetHide: (config.offsetHide ? config.offsetHide : 4)
            };

            if( this.attribs.mode == 'green' )
            {
                var _fromColor = this.attribs.defColor;
                var _toColor = this.attribs.greenColor;
            }
            if( this.attribs.mode == 'red' )
            {
                var _fromColor = this.attribs.defColor;
                var _toColor = this.attribs.redColor;
            }

            this.attributesIn = { backgroundColor:{from:_fromColor, to:_toColor} };
            this.attributesOut = { backgroundColor:{from:_toColor, to:_fromColor} };

            this.isVisible = false;
            this.message = '';
        },

        _initBox:function(){
            ++YAHOO.webfact.MsgFeedbackInstance;

            this.fMsgBox = new YAHOO.util.ColorAnim(this.trgElement, this.attributesIn, 0.5, YAHOO.util.Easing.easeIn);

            //onStart, show element in Dom
            this.fMsgBox.onStart.subscribe(function (sType, args, scope) {
                var el = this.getEl();
                Dom.addClass(el, scope.attribs.mode);
                el.innerHTML = scope.message;
                if( !scope.isVisible )
                {
                    //show the message box before color fading
                    Dom.setStyle(el, 'display', 'block');
                }
            }, this);

            //onComplete, hide element in Dom with offset time
            this.fMsgBox.onComplete.subscribe(function (sType, args, scope) {
                var el = this.getEl();
                if( !scope.isVisible )
                {
                    scope.isVisible = true;
                    this.attributes = scope.attributesOut;
                    //box will be displayed, reverse attributes and request hideout with timer
                    YAHOO.lang.later(scope.attribs.offsetHide*1000.0, null, function() {
                        //prevent animation if new started in the meantime
                        if( YAHOO.webfact.MsgFeedbackInstance == 1){
                            scope.fMsgBox.animate();
                        }else{
                            --YAHOO.webfact.MsgFeedbackInstance;
                        }
                    });
                }
                else
                {
                    //hide the message box
                    Dom.setStyle(el, 'display', 'none');
                    --YAHOO.webfact.MsgFeedbackInstance;
                    scope.isVisible = false;
                }
            }, this);

            //this.fMsgBox.attributes = this.attributesIn;
            Dom.removeClass(Dom.get(this.trgElement), 'green');
            Dom.removeClass(Dom.get(this.trgElement), 'red');
            this.isVisible = false;
        }

	};
	
	//make sure, that the body element has a yui skin class
	try{
		addSkin=function(){if(!Dom.hasClass(document.body, 'yui-skin-sam')){Dom.addClass(document.body, 'yui-skin-sam');}};
		YAHOO.util.Event.onDOMReady(addSkin); 
	}catch(e){}

})();