var currentState = 'hide';

var ticked = 0;
var okayToGo = true;
var currentItem = 0;
var forwardBackward = 1;


var top1 = 860;
var top2=600;
var top3=660;
if (screen.height <= 768)
{
	top1 = 660;
	top2=400;
	top3=460;
}
if (screen.height <= 864)
{
	top1 = 760;
	top2=500;
	top3=560;
} 


function showhidepanel(show)
{
  if (okayToGo)
  {
    movePanel(show);
    currentState = show;
  }
}

function movePanel(show)//Animation Control Function
{
  if(okayToGo && currentState != show)
  {
	 if (show=='show')
	 {
		startTheMove = window.setInterval("showpanel()",20);//calls the Animation Execution Function
		document.getElementById('buttonPanel').style.visibility='hidden';
		document.getElementById('contentPanel').style.top = " "+top1+"px"; //sets the Y coordinate
		document.getElementById('contentPanel').style.visibility='visible';

	 }
	 else 
	 {
		startTheMove = window.setInterval("hidepanel()",20);//calls the Animation Execution Function
	 }
  }
}

function showpanel()//Animation Execution Function
{
  if (ticked == 1020)//after one second has passed, i.e. one cycle is finished
  {
    window.clearInterval(startTheMove);
	ticked = 0;
    okayToGo = true;
  }
  else
  {
    okayToGo = false;
	delta = ticked/5;
	document.getElementById('contentPanel').style.top = " "+(top1-delta)+"px"; //sets the Y coordinate
	ticked += 20;
  }
}

function hidepanel()//Animation Execution Function
{
  if (ticked == 1020)//after one second has passed, i.e. one cycle is finished
  {
    window.clearInterval(startTheMove);
	ticked = 0;
    okayToGo = true;
	document.getElementById('buttonPanel').style.visibility='visible';
	document.getElementById('contentPanel').style.visibility='hidden';
	document.getElementById('contentPanel').style.top=top2+'px';
  }
  else
  {
    okayToGo = false;
	delta = ticked/5;
	document.getElementById('contentPanel').style.top = " "+(top3+delta)+"px"; //sets the Y coordinate
	ticked += 20;
  }
}