// JavaScript Document
 var maxPicWidth = 646;
 var widthChange = 10;
 var contentWidth = 320;
 var widthWithContent = maxPicWidth - contentWidth;
 var contentRight = 646;
 var currentWidth = 0;

 function displayRight( fShow )
 {
  var right_div = document.getElementById("right-div");
  
  	if( right_div != null )
	{
		  right_div.style.display = fShow? 'block': 'none';
	}
	else
	{
		 alert( "Could not find element 'right-div'!" );
	}
 }
 
 function displayContent( fShow )
 {
  var content = document.getElementById("content");
  
  	if( content != null )
	{
		  content.style.display = fShow? 'block': 'none';
		  //alert( "Set content display to: " + content.style.display );
	}
	else
	{
		 alert( "Could not find element 'content'!" );
	}
 }

 function setPicWidth( newWidth )
 {
  var img = document.getElementById("centerImage");
  var debugOut = document.getElementById("debug");
   
    if( img != null )
	{
	   img.style.width = newWidth + "px";
	   currentWidth = newWidth;
	   if( debugOut != null )
	   {
		   debugOut.value = img.style.width;
	   }
	}
	else
	{
		 alert( "Could not find element 'centerImage'!" );
	}
 }
 
 function setContentLeft( newWidth )
 {
  var content = document.getElementById("content");
   var debugOut = document.getElementById("debug2");
   
    if( content != null )
	{
	   content.style.left = newWidth + "px";
	   //alert( "Set content left to: " + content.style.left );
       if( debugOut != null )
	   {
		   debugOut.value =  content.style.left;
	   }
	}
	else
	{
		 alert( "Could not find element 'content'!" );
	}
 }
 
 function showContent( newWidth )
 {
	   if( newWidth >= 0 )
       {
	       setContentLeft( contentRight - newWidth );
		   //setContentWidth( newWidth );
	       if( newWidth >= contentWidth-widthChange )
	       {
	          displayContent(true);
			  setTimeout( "displayRight(true)", 1000 );
	       }
		   else if( newWidth <= widthChange )
		   {
			   // starting, hide texts
	          displayContent(false);
			  displayRight(false);
		   }
       }
       else
       {
           displayContent(false);
		   displayRight(false);
       }
 }

 function gotoPage( pageURL, newPicWidth, forContent )
 {
   var minWidth = 0;
   
       if( forContent )
	   {
	      minWidth = widthWithContent;
	   }
	   else
	   { 
	   	  if( newPicWidth > currentWidth )
		  {
			  // don't close the pictuer when changing to new page
			  newPicWidth = currentWidth;
			  //alert( "Set minWidth to current" );
		  }
	      showContent( -1 );
	   }
	   newPicWidth -= widthChange;
	   if( newPicWidth >= minWidth )
	   {
		  if( forContent )
		  {
		     showContent( maxPicWidth - newPicWidth );
		  }
		  setPicWidth( newPicWidth );
		  setTimeout( "gotoPage('" + pageURL + "', " + newPicWidth + "," + forContent + ")", 1 );
	   }
	   else
	   {
		   // reached end of opeing pic
		  if( newPicWidth < currentWidth )
		  {
			  newPicWidth = currentWidth;
		  }
	      setPicWidth( newPicWidth );
		  if( forContent )
		  {
		     showContent( maxPicWidth - newPicWidth );
		  }
		  else
		  {
	         document.location = pageURL;
		  }
	   }
 }

 function unclokePic( newWidth, forContent )
 {
	newWidth +=  widthChange;
	if( newWidth >= maxPicWidth )
	{
		setPicWidth( maxPicWidth );
		if( forContent )
		{
		   setTimeout( "gotoPage('', " + newWidth + ",true)", 1 );
		}
	}
	else
	{
		setPicWidth( newWidth );
		setTimeout( "unclokePic(" + newWidth + "," + forContent + ")", 1 );
	}
 }