/************************************ 信息提示组件 *********************************************/
Ext.ns('Ext.gzj');
Ext.gzj.tipbox = Ext.extend(Ext.util.Observable, {
	clsTipbox: 'tipbox',          //组件的样式
    transitionDuration: 1,        //特效持续时间
    transitionEasing: 'easeOut',  //运动特效类型
	transitionOpacity: 9.6,         //透明度
    itemSelector: '.list_v',      //项目选择符
	//组件的构造方法
    constructor: function(config) {
        config = config || {};
        Ext.apply(this, config);
        Ext.gzj.tipbox.superclass.constructor.call(this, config);
        this.initMarkup();                  //初始化组件
		if(this.size>0) {
            this.initEvents();              //初始化事件
        }
    },
	//方法：初始化组件
    initMarkup: function() {
        var dh = Ext.DomHelper;
		//创建信息提示组件对象
		this.tipbox = dh.append(document.body, {
            id: 'tipbox',
			cls: this.clsTipbox
        }, true);
		this.halfWidth=this.tipbox.getWidth()/2;
		//获取需要提示的所有元素，并根据元素的个数，决定是否退出
		this.els=Ext.select(this.itemSelector);
		this.size=this.els.getCount();                             //元素（可以是图片，或其他html元素）的个数
		if(this.size<1)return;
		//创建提示组件的背景，并设置透明度。
		this.tipboxbg = dh.append(this.tipbox, { cls:'tipbox_bg' }, true);
		this.tipboxbg.setOpacity(this.transitionOpacity);
		//在组件中添加容器（用于装需要提示的元素） 
		this.container = dh.append(this.tipbox, { tag:'dl', cls:'tipbox_container' }, true);
		this.hide();       //隐藏信息提示组件
    },
	//方法：初始化事件
    initEvents: function() {
		//每个元素的事件
		for(var i=0; i<this.size; i++){
			this.els.item(i).on('mouseover', function(ev) {
				ev.preventDefault();
				ev.getTarget().blur();
				var eltarget=Ext.get(ev.getTarget(this.itemSelector));
				this.show(eltarget);
			}, this);
		}
		//组件对象的事件
		this.tipbox.on('mouseleave', function(ev) {
			this.hide();       //隐藏信息提示组件
		}, this);
    },
	//方法：显示组件
    show: function(el) {
		this.container.dom.innerHTML=el.dom.innerHTML; 
		var xPos = el.getX()+(el.getWidth()/2)-this.halfWidth;
		var yPos = el.getY()-10;
		this.tipbox.setLeft(xPos);
		this.tipbox.setTop(yPos);
		this.tipbox.setDisplayed(true);        //显示信息提示组件
    },
	//方法：隐藏组件
    hide: function() {
		this.tipbox.setDisplayed(false);       //隐藏信息提示组件
    }
});