Ext.namespace("Flowz");

/**
 * Custom dialog to show resulting message from an action
 * @param config
 *  - type (error or info)
 *  - message (text to display)
 *  - onShow (function to call when showing)
 *  - onHide (function to execute when closing)
 */
Flowz.Tip = function(config) {
    Ext.apply(this, config);
    this.addEvents('show');
    Flowz.Tip.superclass.constructor.call(this, config);
};

Flowz.Tip = Ext.extend(Flowz.Tip, Ext.util.Observable, {
	hoverDelay: 250,
	okayToClose: false,
	width: 300,
	
    render: function() {
        if(!this.el) {
        	if(!this.id)
        		this.id = Ext.id();
            this.el = Ext.DomHelper.append(Ext.getBody(), {
                tag: 'div', id: this.id, cls: 'x-tip-container x-hidden ' + this.cls, style: 'width: ' + this.width + 'px', children: [{
					tag: 'div', id: this.id + "-arrow-container", cls: 'x-tip-arrow-t', children: [{
                			tag: 'img', id: this.id + "-arrow", src: 'images/tip/arrow-top.png', width: '46', height: '30', style: 'display: block;'
                		}]
                },{
                	tag: 'div', cls: "x-tip", children: [{
                		tag: 'div', cls: 'x-tip-tl', children: [{
                			tag: 'div', cls: 'x-tip-tr', children: [{
                				tag: 'div', cls: 'x-tip-tc'
                			}]
                		}]
                	}, {
                		tag: 'div', cls: 'x-tip-ml', children: [{
                			tag: 'div', cls: 'x-tip-mr', children: [{
                				tag: 'div', cls: 'x-tip-mc', id: this.id + "-content"
                			}]
                		}]
                	}, {
                		tag: 'div', cls: 'x-tip-bl', children: [{
                			tag: 'div', cls: 'x-tip-br', children: [{
                				tag: 'div', cls: 'x-tip-bc'
                			}]
                		}]
                	}]
                }]
            }, true);
        }
        this.sourceEl = Ext.get(this.source);
        this.arrow = Ext.get(this.id + "-arrow");

        this.content = Ext.get(this.id + "-content");
        this.content.update(this.sourceEl.dom.innerHTML);

        this.sourceEl.remove();

        this.target = Ext.get(this.from);
		this.target.on('mouseover', this.show, this);
		this.target.on('mouseout', this.hide, this);

		/*
        var button = Ext.get("tip-dismiss-btn");
        button.on('click', this.hide, this);
        this.el.setTop(0);
        this.el.setLeft(0);
        this.el.removeClass("x-hidden");
        this.el.slideIn();

        if(this.onShow) {
            this.onShow();
        }
        */
    },
    
    show: function() {
    	//console.log("show(" + this.id + ")");
		this.okayToClose = false;
    	if(this.animating)
    		return;
    		
    	this.el.removeClass("x-hidden");
		//this.el.setOpacity(0);

		// This is for vertically aligned tip
		/*
		var swidth = this.getWidth() / 2;
		var left = this.getLeft() + swidth;
		var dwidth = el.getWidth() / 2;
		*/
		var left = this.target.getLeft() - ((this.el.getWidth() - this.target.getWidth()) / 2);
		//var arrowOffset = (this.el.getWidth() / 2) - (this.arrow.getWidth() / 2);
		var arrowLeft = left + ((this.el.getWidth() / 2) - (this.arrow.getWidth() / 2));
		if(left > 0) {
			this.el.setLeft(left);
		
		} else {
			this.el.setLeft(1);
			//arrowLeft = arrowLeft + (left / 2);
			arrowLeft = this.target.getLeft() - ((this.arrow.getWidth() - this.target.getWidth()) / 2);
			if(arrowLeft < 10)
				arrowLeft = 10; // 10 = width of rounded corner
		}
		// For some reason, the following is not effective. The arrow is acting like it is absolutely positioned even though it was set to relative.  going to set x explicitly then
		//this.arrow.setStyle("margin-left", arrowOffset);	
		this.arrow.setX(arrowLeft);
		
		if(this.offset)
			this.el.setTop(this.offset);
		else
			this.el.setTop(this.target.getTop());
			
		var top = this.target.getTop() + this.target.getHeight() + 5;
		this.animating = true;
		//this.el.show(); // for some reason, follow up calls do not work if this is not shown first.  (Believe it is something to do with use of YAHOO animation easing)
		//this.el.animate({ top: { to: top }, opacity: { to: 1 }}, .75, this.completedShow.createDelegate(this), YAHOO.util.Easing.elasticOut);
		// animating with position and opacity only seems to take position ?!
		this.el.syncFx();
		this.el.show(true);
		this.el.animate({ top: { to: top }, opacity: { to: 1 }}, .75, this.completedShow.createDelegate(this), YAHOO.util.Easing.elasticOut);
		this.fireEvent('show');
    },
    
    otherTipShown: function() {
    	this.el.hide();
    	this.okayToClose = true;
    	this.animating = false;
    },
    
    completedShow: function() { 
	    this.animating = false;
    },


	hide: function() {
		this.okayToClose = true;
		this.hideTask = new Ext.util.DelayedTask(this.doHide, this);
		this.hideTask.delay(this.hoverDelay);
	},

	doHide: function() {		
		if(this.okayToClose) {
			this.el.hide({ duration: .1 });
			this.animating = false;			
		}
	}
});