Ext.ns("Ext.ux");

Ext.ux.Tooltip = Ext.extend(Ext.util.Observable, {
	cls: ''
	,style: ''
	,width: 350
	,constructor: function(config){
		config = config || {};
		Ext.apply(this, config);
		Ext.ux.Tooltip.superclass.constructor.call(this, config);
		this.initMarkup();
	}
	,initMarkup: function(){
		this.targetEl = '';
		// create tip element
		this.el = Ext.DomHelper.append(Ext.getBody(), {cls: this.cls, style: this.style}, true);
		this.el.setStyle('position', 'absolute');
		this.el.setDisplayed(false);
		this.el.setWidth(this.width);
	}
	,update: function(html){
		this.el.update(html);
	}
	,onMouseOver: function(){
		this.el.on('mouseover');
	}
	,show: function(el, contentId){
		var dom = document.getElementById(contentId);
		if(dom){
			this.update(dom.innerHTML);
			this.el.setDisplayed(true);
			var target = Ext.fly(el);
			if(Ext.isIE){
				this.el.setX(event.clientX + document.body.scrollLeft);
				this.el.setY(event.clientY + document.body.scrollTop);
			}else{
				this.el.setXY(target.getXY());
			}
			target.on('mousemove', function(e){
				this.el.setX(e.getPageX() + 10);	
				this.el.setY(e.getPageY() - this.el.getHeight() - 10);
			}, this);
		}
	}
	,hide: function(el){
		this.el.setDisplayed(false);
		Ext.fly(el).un('mousemove');
	}
});