Ext.namespace("Vromansys");

Ext.onReady(function() {
	Vromansys.InfoPanel.init();
});

Vromansys.InfoPanel = function() {
	var HEIGHT = 70;
	var WIDTH = 270;
	
	var hideTimeout;
	
	var panelEl;
	var activeItem;
	
	return {
		/**
		 * Init
		 */
		init: function() {
			var newEl = $("item-highlight-panel");
			if(!newEl) {
				newEl = document.createElement("div");
				newEl.style.position = "absolute";
				newEl.style.zIndex = 1000;
				newEl.style.height = HEIGHT + "px";
				newEl.style.width = WIDTH + "px";
				newEl.style.overflow = "auto";
				newEl.style.display = "none";
				
				panelEl = Ext.get(document.body.insertBefore(newEl, document.body.firstChild));
				panelEl.addClass("tool-tip"); // use tooltip look	
			}
		},
		 
		 /**
		  * Show
		  */
		 show: function(el) {
			this.resetTimeout();
			
			if(el == activeItem) {
				return; // already showing on this item
			}
			activeItem = el;
			 
			this.setText(document.getElementById(el.id+'long').innerHTML);
			panelEl.alignTo(el, "tl-bl?");
			panelEl.show();
			
			panelEl.on("mouseover", this.resetTimeout, this);
			panelEl.on("mouseout", this.hide, this);
		},
		 
		 
		/**
		 * Hide
		 */
		hide: function() {
			clearTimeout(hideTimeout);
			
			hideTimeout = setTimeout(function() {
				panelEl.hide();
				activeItem = null;
			}, 500);
		},
		 
		/**
		 * Set the text
		 */ 
		setText: function(text) {
			 panelEl.dom.innerHTML = text;
		},
		 
		 
		/**
		 * Reset hide timeout
		 */
		resetTimeout: function() {
			clearTimeout(hideTimeout);
		}
		 
	};	
}();