var ANIMATE_FRAMES = 10;

function PopupInfo(obj, popupObj) {
	this.obj = obj;
	this.popupObj = popupObj;
	this.outlineObj = null;
	this.animateTimer = false;
	this.opening = false;
	this.queueClose = false;
	this.animateObj = new Object();
	with (this.animateObj) {
		timer = null;
		origX = 0;
		origY = 0;
		origWidth = 0;
		origHeight = 0;
		deltaX = 0;
		deltaY = 0;
		deltaWidth = 0;
		deltaHeight = 0;
		frame = 0;			
	}
	
	obj.style.position = "relative";
	
	var thisObj = this;

	function easeInOutCubic(current, start, change, duration) {
		if ((current /= duration / 2) < 1) {
			return change / 2 * current * current * current + start
		} else {
			return change / 2 * ((current -= 2) * current * current + 2) + start;
		}		
	}

	this.animateOutline = function(inOut) {
		var addX = easeInOutCubic(thisObj.animateObj.frame, thisObj.animateObj.origX,
			thisObj.animateObj.deltaX, ANIMATE_FRAMES);
		var addY = easeInOutCubic(thisObj.animateObj.frame, thisObj.animateObj.origY,
			thisObj.animateObj.deltaY, ANIMATE_FRAMES);
		
		var addWidth = easeInOutCubic(thisObj.animateObj.frame, thisObj.animateObj.origWidth,
			thisObj.animateObj.deltaWidth, ANIMATE_FRAMES);

		var addHeight = easeInOutCubic(thisObj.animateObj.frame, thisObj.animateObj.origHeight,
			thisObj.animateObj.deltaHeight, ANIMATE_FRAMES);
		
		thisObj.outlineObj.style.left = Math.round(addX) + 'px';
		thisObj.outlineObj.style.top = Math.round(addY) + 'px';
		thisObj.outlineObj.style.width = Math.round(addWidth) + 'px';
		thisObj.outlineObj.style.height = Math.round(addHeight) + 'px';
		
		if (thisObj.animateObj.frame < ANIMATE_FRAMES) {
			thisObj.animateObj.frame++;
			thisObj.animateObj.timer = window.setTimeout(function () { thisObj.animateOutline(inOut); }, 10);
		} else {
			thisObj.outlineObj.style.visibility = "hidden";
			thisObj.opening = false;
			if (inOut == "in") {
				thisObj.popupObj.style.visibility = "visible";
				if (thisObj.queueClose) {
					thisObj.queueClose = false;
					thisObj.hidePopup();
				}
			}
		}
	}
			
	this.showPopup = function() {
		this.outlineObj.style.width = thisObj.obj.offsetWidth +'px';
		this.outlineObj.style.height = thisObj.obj.offsetHeight +'px';
					
		var tempObj = thisObj.obj;
		var posX = 0;//tempObj.offsetLeft;
		var posY = 0;//tempObj.offsetTop;
		
		/*while (tempObj) {
			if (tempObj.nodeType == 1) {
				posX += tempObj.offsetLeft;
				posY += tempObj.offsetTop;
			}
			tempObj = tempObj.parentNode;
		}*/	
		this.outlineObj.style.left = posX + 'px';
		this.outlineObj.style.top = posY + 'px';
		this.outlineObj.style.visibility = "visible";
		thisObj.showTimer = false;

		thisObj.animateObj.origX = posX;
		thisObj.animateObj.origY = posY;
		thisObj.animateObj.origWidth = thisObj.outlineObj.offsetWidth;
		thisObj.animateObj.origHeight = thisObj.outlineObj.offsetHeight;
		thisObj.animateObj.deltaX = (thisObj.popupObj.offsetLeft - thisObj.outlineObj.offsetLeft);
		thisObj.animateObj.deltaY = (thisObj.popupObj.offsetTop - thisObj.outlineObj.offsetTop);
		thisObj.animateObj.deltaWidth = (thisObj.popupObj.offsetWidth - thisObj.outlineObj.offsetWidth);
		thisObj.animateObj.deltaHeight = (thisObj.popupObj.offsetHeight - thisObj.outlineObj.offsetHeight);
		thisObj.animateObj.frame = 0;			
		thisObj.animateObj.timer = window.setTimeout(function () {thisObj.animateOutline("in"); }, 10);
	}

	this.hidePopup = function() {
		if (thisObj.opening) {
			thisObj.queueClose = true;
			return;
		}
	
		var tempObj = thisObj.obj;
		var posX = 0;//tempObj.offsetLeft;
		var posY = 0;//tempObj.offsetTop;

		
		/*while (tempObj) {
			if (tempObj.nodeType == 1) {
				posX += tempObj.offsetLeft;
				posY += tempObj.offsetTop;
			}
			tempObj = tempObj.parentNode;
		}*/
			
		this.outlineObj.style.visibility = "visible";
		this.popupObj.style.visibility = "hidden";
		thisObj.showTimer = false;

		thisObj.animateObj.origX = thisObj.outlineObj.offsetLeft;
		thisObj.animateObj.origY = thisObj.outlineObj.offsetTop;
		thisObj.animateObj.origWidth = thisObj.outlineObj.offsetWidth;
		thisObj.animateObj.origHeight = thisObj.outlineObj.offsetHeight;
		thisObj.animateObj.deltaX = (posX - thisObj.outlineObj.offsetLeft);
		thisObj.animateObj.deltaY = (posY - thisObj.outlineObj.offsetTop);
		thisObj.animateObj.deltaWidth = (thisObj.obj.offsetWidth - thisObj.outlineObj.offsetWidth);
		thisObj.animateObj.deltaHeight = (thisObj.obj.offsetHeight - thisObj.outlineObj.offsetHeight);
		thisObj.animateObj.frame = 0;					
		thisObj.animateObj.timer = window.setTimeout(function () {thisObj.animateOutline("out"); }, 10);
	}
			
	this.mouseOver = function() {
		if (!thisObj.showTimer && !this.opening && !thisObj.queueClose) {
			thisObj.opening = true;
			thisObj.showTimer = window.setTimeout(function () {thisObj.showPopup();}, 300);
		}
	}
	
	this.mouseOut = function() {	
		if (thisObj.opening) {
			thisObj.queueClose = true;
			return;
		}		
					
		if (!thisObj.showTimer) {
			thisObj.showTimer = window.setTimeout(function () {thisObj.hidePopup();}, 300);
		}
	}
	
	function registerEvents(obj) {
		obj.onmouseover = thisObj.mouseOver;
		obj.onmouseout = thisObj.mouseOut;
	}
	registerEvents(obj);
	
	this.outlineObj = document.createElement("DIV");
	this.outlineObj.className = "animate-outline";
	popupObj.parentNode.appendChild(this.outlineObj);
}