	<!--
var defaultWidth = 320;		// Width of each panel
var defaultHeight = 356;	// Height of each panel
//var defaultHeight = 356;	// Height of each panel

var fromPanel = null;  		// Panel to move out
var toPanel = null;			// Panel to move in
var currentDirection = null;

var origionX = 0;			// top left
var origionY = 0;			// top right

var slideSpeed = 0; 		// timeout value
//var slideAmtX = 64; 		// #pixels moved for 5 steps (defaultWidth / 5)
//var slideAmtY = 89; 		// #pixels moved for 4 steps (defaultHeight / 4)
var slideAmtX = 64; 		// #pixels moved for 5 steps (defaultWidth / 5)
var slideAmtY = 89; 		// #pixels moved for 4 steps (defaultHeight / 4)

var slide_ongoing_flag = false;

function slidePanelOptimised( Source, Destination, Direction )
{
  if ( 'down' == Direction )
  {
    document.getElementById( Destination ).style.opacity = '1';	
    document.getElementById( Source ).style.webkitTransform = 'translate(0px, 356px)';	
//    document.getElementById( Source ).style.opacity = '0';
//    document.getElementById( Destination ).style.webkitTransform = 'translate(0px, 0px)';	
//    document.getElementById( Destination ).style.opacity = '1';
//    document.getElementById( Source ).style.display = "none";
  }
  if ( 'up' == Direction )
  {
    document.getElementById( Destination ).style.opacity = '1';
    document.getElementById( Destination ).style.display = "block";
//    document.getElementById( Destination ).style.top = defaultHeight + "px";
//    document.getElementById( Destination ).style.left = origionX + "px";
    document.getElementById( Destination ).style.webkitTransform = 'translate(0px, -356px)';	
//    document.getElementById( Destination ).style.opacity = '1';
//    document.getElementById( Source ).style.webkitTransform = 'translate(0px, 100px)';	
//    document.getElementById( Source ).style.opacity = '0';	
  }
//  setTimeout("slidePanelOptimisedComplete( '" + Source + "', '" + Destination + "' )", 1000);
}

function slidePanelOptimisedComplete( Source, Destination )
{
  document.getElementById( Source ).style.opacity = '0';	
//  document.getElementById( Destination ).style.webkitTransform = 'translate(0px, -356px)';	
}

function slidePanel()
{
  slide_ongoing_flag = true;
  
	// Existence of arguments tells us that this is the initial call to the function
	if(arguments.length > 0)
	{
		// Store style for panel being moved out
		fromPanel = document.getElementById(arguments[0]).style;

		// Store style for panel being moved in
		toPanel = document.getElementById(arguments[1]).style;

		// Direction to slide the panels
		currentDirection = arguments[2];
		
		// Always place the current panel at the top left of the screen
		fromPanel.left = origionX + "px";
		fromPanel.top = origionY + "px";
		
		// Place the new panel appropriate to the direction specified
		if(currentDirection == "left" || currentDirection == "right")
		{
			toPanel.top = origionX + "px";
			toPanel.left = (currentDirection =="left" ) ? defaultWidth + "px" :  -defaultWidth + "px";
	
		}

		// Place the new panel appropriate to the direction specified
		if(currentDirection == "up") 
		{
			toPanel.left = origionX + "px";
			toPanel.top  = defaultHeight + "px";
		}
    if (currentDirection == "down")
    {
			toPanel.left = origionX + "px";
			toPanel.top  = origionY + "px";
    }
		
		// Show the panel we're sliding in
		toPanel.display = "block";
		
		// Begin the animation
		setTimeout("slidePanel()",slideSpeed);
	}
	else
	{
		// Animation
		var fromVal  = null;	// Current panel coordinate
		var toVal  = null;		// Calculated new panel coordinate
		
		if(currentDirection == "left" || currentDirection == "right")
		{
			fromVal  = fromPanel.left.split("px")[0];
			toVal  = toPanel.left.split("px")[0];
			if(toVal != origionX)
			{
				// Calculate for slide left
				if(currentDirection =="left")
				{
					// ensure we get a number and not a string
					fromVal = (fromVal * 1) - ( slideAmtX * 1);
					toVal = (toVal * 1) - ( slideAmtX * 1);
				}
				// Calculate for slide right
				if(currentDirection =="right")
				{
					// ensure we get a number and not a string
					fromVal = (fromVal * 1) + ( slideAmtX * 1);
					toVal = (toVal * 1) + ( slideAmtX * 1);
				}
				fromPanel.left = fromVal + "px";
				toPanel.left = toVal + "px";
				
				// Queue the next animation
				setTimeout("slidePanel()",slideSpeed);
			}
			else 
			{ 
				// Animation is done so hide the panel moved out
				fromPanel.display = "none"; 

        slide_ongoing_flag = false;
			}
		}

		if(currentDirection == "up" || currentDirection == "down")
		{
			fromVal  = fromPanel.top.split("px")[0];
			toVal  = toPanel.top.split("px")[0];

      // Calculate for slide up
      if(currentDirection =="up")
      {
        // ensure we get a number and not a string
        toVal = (toVal * 1) - ( slideAmtY * 1);

        if(toVal > 0)
        {
          toPanel.top = toVal + "px";
   
          // Queue the next animation
          setTimeout("slidePanel()",slideSpeed);
        }
        else
        {
    			toPanel.top  = origionY + "px";
          
          // Animation is done so hide the panel moved out
          fromPanel.display = "none"; 

          slide_ongoing_flag = false;
        }
      }
      // Calculate for slide down
      if(currentDirection =="down")
      {
        // ensure we get a number and not a string
        fromVal = (fromVal * 1) + ( slideAmtY * 1);
        toVal = (toVal * 1) + ( slideAmtY * 1);

        if(fromVal < defaultHeight)
        {
          fromPanel.top = fromVal + "px";
   
           // Queue the next animation
           setTimeout("slidePanel()",slideSpeed);
        }
        else
        {
          // Animation is done so hide the panel moved out
          fromPanel.display = "none"; 

          slide_ongoing_flag = false;
        }
      }
		}
	}
}
//-->