var Steps = 10;
var Duration = 150;

var OpenAnimation = new Array();
var CloseAnimation = new Array();
var PopUps = new Array();

function PopUp() {
	// Target values
	this.DivWidth = 0;
	this.DivHeight = 0;
	this.DivX = 0;
	this.DivY = 0;

	// Default animation values
	this.Action = 0;
	this.ActionWidth = 0;
	this.ActionHeight = 0;
	this.ActionX = 0;
	this.ActionY = 0;
	
	// Steps
	this.StepX = 10;
	this.StepY = 10;
}


function OpenPopUp(id) {
	
	// Cancel CloseAnimation
	clearTimeout(CloseAnimation[id]);
	
	if (typeof PopUps[id] == "undefined") {
		PopUps[id] = new PopUp;
		
		PopUps[id].DivX = (1 * document.getElementById(id + '_PosX').value);
		PopUps[id].DivY = (1 * document.getElementById(id + '_PosY').value);
		PopUps[id].DivWidth = (1 * document.getElementById(id + '_Width').value);
		PopUps[id].DivHeight = (1 * document.getElementById(id + '_Height').value);
		
		// Calculating the steps
		PopUps[id].StepX = PopUps[id].DivWidth / Steps;
		PopUps[id].StepY = PopUps[id].DivHeight / Steps;

		PopUps[id].ActionX = PopUps[id].DivWidth/2 + PopUps[id].DivX;
		PopUps[id].ActionY = PopUps[id].DivY;
		PopUps[id].ActionWidth = 0;
		PopUps[id].ActionHeight = 0;

		// Postionning div for the first time
		document.getElementById(id).style.width = PopUps[id].ActionWidth + 'px';
		document.getElementById(id).style.height = PopUps[id].ActionHeight + 'px';
		document.getElementById(id).style.left = PopUps[id].ActionX + 'px';
		document.getElementById(id).style.bottom = PopUps[id].ActionY + 'px';

	}

	// Hide content of the div and show the div
	document.getElementById(id + '_Content').style.display = 'none';
	document.getElementById(id).style.display = 'block';
	document.getElementById(id).style.border = '1px solid #000';
	
	OpenPopUp2(id);
}

function OpenPopUp2(id) {

	PopUps[id].Action = 1;

	// Calculating size and position for this loop
	PopUps[id].ActionWidth = PopUps[id].ActionWidth + PopUps[id].StepX;
	PopUps[id].ActionHeight = PopUps[id].ActionHeight + PopUps[id].StepY;
	PopUps[id].ActionX = PopUps[id].ActionX - PopUps[id].StepX/2;

	// If div is big enough -> stop
	if (PopUps[id].ActionWidth >= PopUps[id].DivWidth) {
		clearTimeout(OpenAnimation[id]);
		PopUps[id].Action = 0;
		document.getElementById(id + '_Content').style.display = 'block';
		document.getElementById(id).style.border = '0px';
   } else {
		document.getElementById(id).style.width = Math.round(PopUps[id].ActionWidth) + 'px';
		document.getElementById(id).style.height = Math.round(PopUps[id].ActionHeight) + 'px';
		document.getElementById(id).style.left = Math.round(PopUps[id].ActionX) + 'px';
		document.getElementById(id).style.bottom = Math.round(PopUps[id].ActionY) + 'px';
		OpenAnimation[id] = setTimeout('OpenPopUp2(\'' + id + '\')', Duration/Steps);
   }
}

function ClosePopUp(id)
{
	// Cancel OpenAnimation
	clearTimeout(OpenAnimation[id]);
	
    if (typeof PopUps[id] != "undefined") {
		
		// Hide content of the div and show the div
		document.getElementById(id + '_Content').style.display = 'none';
		document.getElementById(id).style.display = 'block';
		document.getElementById(id).style.border = '1px solid #000';
		
		ClosePopUp2(id)
	}
}

function ClosePopUp2(id) {

	PopUps[id].Action = 1;

	// Calculating size and position for this loop
	PopUps[id].ActionWidth = PopUps[id].ActionWidth - PopUps[id].StepX;
	PopUps[id].ActionHeight = PopUps[id].ActionHeight - PopUps[id].StepY;
	PopUps[id].ActionX = PopUps[id].ActionX + PopUps[id].StepX/2;

	// If div is reduced -> stop
	if (PopUps[id].ActionWidth <= 0) {
		clearTimeout(CloseAnimation[id]);
		PopUps[id].Action = 0;
		document.getElementById(id).style.display = 'none';
   } else {
		document.getElementById(id).style.width = Math.round(PopUps[id].ActionWidth) + 'px';
		document.getElementById(id).style.height = Math.round(PopUps[id].ActionHeight) + 'px';
		document.getElementById(id).style.left = Math.round(PopUps[id].ActionX) + 'px';
		document.getElementById(id).style.bottom = Math.round(PopUps[id].ActionY) + 'px';
		CloseAnimation[id] = setTimeout('ClosePopUp2(\'' + id + '\')', Duration/Steps);
   }
}












function Test(pouet) {
	alert(getOffsetPosition(pouet.id, 'Top'));
	alert(getOffsetPosition(pouet.id, 'Left'));
	//alert(getOffsetPosition(pouet.id, 'Height'));
	alert(getOffsetPosition(pouet.id, 'Width'));
}

getOffsetPosition = function(inID, inTYPE)
{
 var iVal = 0;
 var oObj = document.getElementById(inID);
 var sType = 'oObj.offset' + inTYPE;
 while (oObj && oObj.tagName != 'BODY') {
  iVal += eval(sType);
  oObj = oObj.offsetParent;
 }
 return iVal;
}