var JTabPanel = function(option){
	this.onStyle = "on";
	this.tabChangedListeners = [];
	this.activeTabIndex = -1;
	this.tabCtrls = [];
	this.tabContents = [];
	this.timer = null;
	this.ACTION_DELAY = 300;
	this.option = option || {};
	this._requestBlocked = false;
}
JTabPanel.prototype = {
	setActiveTab:function(index){
		if(this._requestBlocked)//filter unexcepted request
			return;
		if(index<0||index>this.tabCtrls.length-1)
			return;//break
		var elapsedIndex = this.activeTabIndex;
		if(index == elapsedIndex)
			return;//break;
		if(elapsedIndex != -1){
			this._setActiveTabUI(elapsedIndex,false);
		}
		this._setActiveTabUI(index,true);
		this.activeTabIndex = index;
		this.fireTabChanged(elapsedIndex,index);
	},
	_setActiveTabUI:function(index,active){
		if(active){
			this.tabCtrls[index].className=this.onStyle;
			this.tabContents[index].style.display = "block";
		}else{
			this.tabCtrls[index].className = "";
			this.tabContents[index].style.display = "none";
		}
	},
	isRequestBlocked:function(){
		return this._requestBlocked;
	},
	blockRequest:function(b){
		if(typeof b == "boolean")
			this._requestBlocked = b;
	},
	addTab:function(tabCtrl,tabContent){
		var _this=this;
		tabCtrl.setAttribute("jtabpanelindex",this.tabCtrls.length);
		tabCtrl.onclick = function(){
			var index = parseInt(this.getAttribute("jtabpanelindex"));
			_this.setActiveTab(index);
		}
		if(this.option.autoExpand){
			tabCtrl.onmouseover = function(){
				var me = this;
				if(_this.timer){
					clearTimeout(_this.timer);
					_this.timer = null;
				}
				_this.timer = setTimeout(function(){
					var index = parseInt(me.getAttribute("jtabpanelindex"));
					_this.setActiveTab(index);
				},_this.ACTION_DELAY);
			}
			tabCtrl.onmouseout = function(){
				clearTimeout(_this.timer);
				_this.timer = null;
			}
		}
		this.tabCtrls.push(tabCtrl);
		this.tabContents.push(tabContent);
	},
	addTabChangeListener:function(l){
		if(typeof l == "function"){
			this.tabChangedListeners.push(l);
		}
	},
	fireTabChanged:function(elapsedIndex,activeIndex){
		for(var i=0,len=this.tabChangedListeners.length;i<len;i++){
			this.tabChangedListeners[i].call(this,elapsedIndex,activeIndex);
		}
	},
	getActiveTabIndex:function(){
		return this.activeTabIndex;
	}
}

var JFiguredMaskGadget = function(UI,option){
	this._UI = UI;
	this._option = option || {};
	
	this._rectUIs = [];
	this._isMaskVisible = false;
	this._maskUI = null;
	this._imgUI = null;
	this._tipPaneUI = null;
	this._tipPaneInnerUI = null;
	
	this._triggerTimer = null;
	this.TRIGGER_TIMER_INTERVAL = 250;
	this.init();
}
JFiguredMaskGadget.prototype = {
	addPerspectiveRect:function(x,y,width,height,label){
		var rect = document.createElement("a");
		rect.className = "figured-gear-rect figured-gear-rect-blank";
		this._UI.containerUI.appendChild(rect);
		rect.setAttribute("index",this._rectUIs.length);
		this._rectUIs.push(rect);
		rect.href = "javascript:void(0)";
		rect.style.left = x+"px";
		rect.style.top = y+"px";
		rect.style.width = width + "px";
		rect.style.height = height + "px";
		rect.innerHTML = label;
		var D = YAHOO.util.Dom;
		rect.style.background = D.getStyle(this._maskUI,"background-color") + " url('"+this._imgUI.src+"') -"+x+"px -"+y+"px no-repeat";
		rect.setAttribute("bg",rect.style.background);
		this._installListeners(rect);
	},
	_prepareAction:function(callback){
		if(this._triggerTimer)
			this._cancelAction();
		this._triggerTimer = setTimeout(callback,this.TRIGGER_TIMER_INTERVAL);
	},
	_cancelAction:function(callback){
		if(this._triggerTimer){
			clearTimeout(this._triggerTimer);
			this._triggerTimer = null;
		}else{
			if(callback)
				callback.call(this);
		}
	},
	_installListeners:function(rect){
		var D = YAHOO.util.Dom,_this = this;
		//we must trigger event under a timer
		rect.onmouseover = function(){
			var me = this;
			_this._prepareAction(function(){
//				_this.setMaskVisible(true);
				D.addClass(_this._UI.containerUI,"figured-gear-exclusive");
				D.replaceClass(me,"figured-gear-rect-blank","figured-gear-rect-on");
				_this._triggerTimer = null;
				_this.popupTipPane(true,me);
			});
		}
		rect.onmouseout = function(){
			var me = this;
			_this._cancelAction(function(){
//				_this.setMaskVisible(false);
				D.removeClass(_this._UI.containerUI,"figured-gear-exclusive");
				D.replaceClass(me,"figured-gear-rect-on","figured-gear-rect-blank");
				_this.popupTipPane(false,me);
			});
		}
	},
	popupTipPane:function(b,node){
		var D = YAHOO.util.Dom,_this = this,A = YAHOO.util.Anim;
		if(b){
			if(!this._tipPaneUI){
				this._tipPaneUI = document.createElement("div");
				this._tipPaneUI.className = "figured-gear-tip";
				this._tipPaneUI.innerHTML = "<span></span>";
				this._UI.containerUI.appendChild(this._tipPaneUI);
				this._tipPaneInnerUI = this._tipPaneUI.getElementsByTagName("span")[0];
			}
			var xy = D.getXY(node);
			if(node.textContent)
				this._tipPaneInnerUI.textContent = node.textContent;
			else
				this._tipPaneInnerUI.innerText = node.innerText;
			D.setStyle(this._tipPaneUI,"display","block");
			D.setXY(this._tipPaneUI,[
				xy[0]-this._tipPaneUI.offsetWidth/2+node.offsetWidth/2,
				xy[1]-this._tipPaneUI.offsetHeight-5
			]);
			if(typeof document.body.style.webkitTransform != "undefined")
				D.addClass(this._tipPaneUI,"figured-gear-tip-transform");
			else{
				D.setStyle(this._tipPaneUI,"opacity",0);
				var a = new A(this._tipPaneUI,{
					top:{
						from:parseInt(D.getStyle(this._tipPaneUI,"top"))+20,
						by:-20
					},
					opacity:{from:0,to:1}
				},0.3,YAHOO.util.Easing.easeOut);
				a.animate();
			}
		}else{
			D.setStyle(this._tipPaneUI,"display","none");
			if(typeof document.body.style.webkitTransform != "undefined")
				D.removeClass(this._tipPaneUI,"figured-gear-tip-transform");
		}
	},
	setMaskVisible:function(b){
		var A = YAHOO.util.Anim,_this = this;
		if(b){
			this._maskUI.style.display = "block";
			this._isMaskVisible = true;
			var a = new A(this._maskUI,{opacity:{from:0,to:0.4}},0.3,YAHOO.util.Easing.easeOut);
		}else{
			var a = new A(this._maskUI,{opacity:{from:0.4,to:0}},0.3,YAHOO.util.Easing.easeOut);
			a.onComplete.subscribe(function(){
				_this._maskUI.style.display = "none";
			});
			this._isMaskVisible = false;
		}
		a.animate();
	},
	isMaskVisible:function(){
		return this._isMaskVisible;
	},
	init:function(){
		var img = (typeof document.querySelector != "undefined")? this._UI.containerUI.querySelector("img") : this._UI.containerUI.getElementsByTagName("img")[0];
		if(!img)
			throw new Error("Missing Image Element");
		this._UI.containerUI.style.width = img.offsetWidth + "px";
		this._UI.containerUI.style.height = img.offsetHeight + "px";
		this._imgUI = img;

		this._maskUI = document.createElement("div");
		this._maskUI.className = "figured-gear-mask";
		this._UI.containerUI.appendChild(this._maskUI);
		this.setMaskVisible(true);
	}
}