//This uses source replacement as oppose to node replacement
var currentIndex = 0;
var picturesTableArray = new Array();
var tableElementsArray = new Array();
var viewsImagesArray= new Array();

/* viewsLoadedArray holds whether an image is loaded 
   single dimension one element per table.
   viewsLoadedImagesArray holds the loaded views per table.
   two dimensional [TableId, [one per view ]] */
var viewsLoadedStatusArray= new Array();
var viewsLoadedImagesArray= new Array();
var loadedImages = 0;
var testImages = 0;
var loadBars = new Array();
var pageHasFinished = false;
//var pageHasFinished = true;

function setScrollBarColours()
	{
	  document.body.style.scrollbarBaseColor = '#31656B';
	  document.body.style.scrollbarArrowColor='FFCF00';
	};
	
function setSpecificScrollBarColours(A,B)
	{
	  document.body.style.scrollbarBaseColor = A;
	  document.body.style.scrollbarArrowColor= B;
	};


function buildPicturesTableArray() 
    {

	  var aTable        = findObject("PicturesTable",0);
	  var leftPicture   = findObject("leftPicture",0);
	  var rightPicture  = findObject("rightPicture",0);
	  var magnifySquare = findObject("square",1);
	  var viewsText     = findObject("viewsText",0);
	  var itemTitle		= findObject("itemTitle",0);
	  var progressBar   = findObject("progressBar",0);
	  // right picture table so that we can alter between white and black background
	  var rightPictureTable = findObject("RightTable",0);
	  
	  //   element 0 emply cell, 1 views text, 2-8 button td, 9 empty cell.
	  var buttonsArray = new Array(8);
	  var j;

	  for (j = 0; j< 8; j++)
		   {
			var loadBarObject 		= findObject("load"+(j+1),0);
			var loadBarTableObject  = findObject("tableLoad"+(j+1),0);
			loadBars[j] = [loadBarTableObject, loadBarObject];
	       };	 
//	 alert(loadBars)
	 buttonsArray[0] = viewsText;
	  for (j = 0; j< 7; j++)
		   {
	        var imageObject = findObject("view"+j,0);
	 		buttonsArray[j+1] = imageObject;
	       };	 
	   picturesTableArray = [aTable,[leftPicture,rightPicture,rightPictureTable],
	   						 buttonsArray,magnifySquare,itemTitle,progressBar,
							 [leftPicture.src, rightPicture.src]];
	 };
	
function buildObjectArray() 
    {
	 setScrollBarColours();
	 buildPicturesTableArray();
	 var i;

	 for (i = 0; i <numberOfItems; i++)
	 	 {
	      var aTable = findObject("Table"+i,0);
	      tableElementsArray[i] = [aTable];
	     };
	 };
	 
function buildViewsArray()
	{
	 var i;
	 var j;

	 for(i=0; i < numberOfItems; i++) 
   		{

    	 var view0 = 
	         new Array("../images/prices/"+tableData[i][4]+"/views/"+tableData[i][5]+"-leftview0.jpg",
				      "../images/prices/"+tableData[i][4]+"/views/"+tableData[i][5]+"-leftview1.jpg");
		 var allViews = new Array();
		 allViews[0] = view0;
    	 maxViews = tableData[i][1];
		 for (j=1; j<maxViews; j++)
			 {
		 	  var view = 
	    	       new Array("../images/prices/"+tableData[i][4]+"/views/"+tableData[i][5]+"-leftview1.jpg",
				  	         "../images/prices/"+tableData[i][4]+"/views/"+tableData[i][5]+"-rightview"+j+".jpg");
		 	  allViews[j] = view;
			 };
// used to load the dimensions picture 			 
		  var view = 
	    	  new Array("../images/prices/"+tableData[i][4]+"/views/"+tableData[i][5]+"-leftview0.jpg",
				  	    "../images/prices/"+tableData[i][4]+"/Dimensions/"+tableData[i][7]+".jpg");
		 	allViews[maxViews] = view;
//			alert(allViews);  
		 viewsImagesArray[i] = allViews;
		 viewsLoadedStatusArray[i] = 0;
		 var temp = new Array(maxViews+1);
		 viewsLoadedImagesArray[i] = [i,temp];
   		};
	};
 
 
function showView(aButtonNo) 
	{
	
	 posA = tableData[currentIndex][2][aButtonNo];
   	 showEnlargedView(aButtonNo, posA[0] , posA[1]);
    };
	
function showDetails (index) 
	{ //alert(pageHasFinished);
	 if (pageHasFinished) 
	    {pageHasFinished = false;
		//pageHasFinished = true;
		var haveLoadedImages;
	 	 var obj = picturesTableArray[3];
	 	 obj.visibility = "hidden";
   	 	 currentPicture = "Table"+index;
   	 	 currentIndex = index;
	 	 haveLoadedImages = checkLoadedImages();
//		 alert(haveLoadedImages);
	 	 picturesTableArray[4].innerHTML= tableData[currentIndex][3];
	 	 showTable();
	 	 if(!haveLoadedImages) 
	   		{pageHasFinished = true;
//			 alert('showDEtails');
			 showView(0)}
		 else
		     //pageHasFinished = true;
			 pageHasFinished = true;
		};
   	};

function checkLoadedImages() 
	{
	 if (viewsLoadedStatusArray[currentIndex]==0)
	    {//alert('jim');

	  picturesTableArray[1][0].src  = picturesTableArray[6][0];
      picturesTableArray[1][1].src = picturesTableArray[6][1];

		testImages =0;
		picturesTableArray[5].style.visibility= "visible"
		

		 
		 var allviews;
		 var numberOfViews = tableData[currentIndex][1] + 1;
		 var i;
		 var image1;
		 var image2;
//		 alert('numberOfViews'+numberOfViews);		 
		 for (i=0; i < 8; i++)
		     { if (i <= numberOfViews)
			   {loadBars[i][0].style.visibility = "visible";
			    loadBars[i][1].style.visibility = "visible";}
//			    loadBars[i][1].src = "../images/Gifs/15x22blue.gif"; }
			   else
			   loadBars[i][0].style.visibility = "hidden" ;
			 };   
			   

		 allViews = viewsImagesArray[currentIndex];
		 		 		 
		 for (i=0; i< numberOfViews; i++)
		 	 {image1 = new Image();
			 if (i==0)
			       image1.onload= increaseLoadCounter ;
		     else
			       image1.onLoad= increaseTempCounter ;
			  image1.width = '256';
			  image1.height = '192';
			  image1.src = allViews[i][0];
			  image2 = new Image();
			  if (i==0)
			       image2.onload= increaseLoadCounter ;
			  else
			       image2.onload= increaseTempCounter ;
			  image2.width = '256';
			  image2.height = '192';
			  image2.src = allViews[i][1];
			  viewsLoadedImagesArray[currentIndex][i] = [image1,image2];
			  
			 };
//		alert(viewsLoadedImagesArray);
		viewsLoadedStatusArray[currentIndex]=1;
		return true;
	     };
	   picturesTableArray[5].style.visibility= "hidden";
       return false;
	 };

function increaseLoadCounter()
    {
	 increaseTempCounter();
	 loadedImages = loadedImages + 1;
	 this.onload=null;
	 if(loadedImages == 2)
	    {loadedImages = 0;
		 //alert('increaseLoadCounter');
		 //showView(0)
		  };
	};

function increaseTempCounter()
    {
	 var original;
	 var temp;
	 original = testImages;
	 testImages = testImages + 1;
	 loadBars[original][1].style.visibility = "hidden" ;
		 this.onload=null;
	 
	 var maxViews = tableData[currentIndex][1];
	 if (testImages > maxViews) 
	    {for (i=0; i < 8; i++)
		     {loadBars[i][0].style.visibility = "hidden" ;};

		 temp = findObject("navigation",0);
		 temp.style.visibility="visible";
		 picturesTableArray[5].style.visibility= "hidden";
		 pageHasFinished = true;
		// alert('increaseTempCounter');
		 showView(0)};
	};

     	 
function showTable()
	{
	 var i;
	 var aTableObject; 
	 //show - hide the corresponding prices table
     for (i=0; i < numberOfItems; i++)
		 { 
	  	  aTableObject = tableElementsArray[i][0];
	      if (currentIndex == i)
	         aTableObject.style.display="block";
		  else
		     aTableObject.style.display="none";
 		 };
	 var details = tableData[currentIndex];
	 var maxViews = details[1];

//   pick the buttons array
  
     var viewsObjectArray = picturesTableArray[2];	 		
   	 var viewsLabelObject = viewsObjectArray[0];
	 var userViews;  // used to overcome the problem with the only one view
	 if (maxViews <=1) 
	    {viewsLabelObject.style.visibility = "hidden";
		 userViews = 0}
	 else
	    {viewsLabelObject.style.visibility = "visible";
		 userViews = maxViews };
 
		 
	 var offset = 1;
	 var buttonObject; 
	 for(i= 0; i <= 6; i++)
		{
		 buttonObject = viewsObjectArray[i+offset];
	 	 if (i < userViews)
	     	{buttonObject.style.visibility = "visible"}
		 else
		 	{buttonObject.style.visibility = "hidden"}
    	};
	};

function showEnlargedView(aButtonNo, posX,posY) 
	{

	 var leftPicture  = picturesTableArray[1][0];
	 var rightPicture = picturesTableArray[1][1];
	 var maxViews = tableData[currentIndex][1];
	 var allViews;
// The black picture is replaced as he background of the table.

	 picturesTableArray[1][2].background = "../images/Gifs/256x192Black.gif";
	 allViews = viewsLoadedImagesArray[currentIndex];
	 //alert(viewsLoadedStatusArray);
//	 try {leftPicture.src  = allViews[aButtonNo][0].src;
//	      rightPicture.src = allViews[aButtonNo][1].src;
//		 };
//	  catch(e) {};
//    alert(typeof(allViews[aButtonNo][0]));
    if (typeof (allViews[aButtonNo][0]) !== "object")
	   		{leftPicture.src  = "../images/Gifs/firstPicture256.gif"}
		else
		     {leftPicture.src = allViews[aButtonNo][0].src};

    if (typeof (allViews[aButtonNo][1]) !== "object")
	   		{rightPicture.src  = "../images/Gifs/firstPicture256.gif"}
		else
		     {rightPicture.src = allViews[aButtonNo][1].src};
			 

//	replace view buttons
     var viewsObjectArray = picturesTableArray[2];
     var offset = 1;   // Third element is the first button
	 for (i=0; i<maxViews; i++)
	  	 {buttonObject = viewsObjectArray[i+offset];   // image object
	  	  if(i==aButtonNo)
	    	{buttonObject.src= "../images/Gifs/LightBlue-reverse-button.gif";}
	  	  else
	    	{buttonObject.src = "../images/Gifs/LightBlue-features-button.gif";}
	  	  };
				  
     showEnlargedArea(posX,posY);
	};

	
function showDimensions() 
	{

	 var leftPicture  = picturesTableArray[1][0];
	 var rightPicture = picturesTableArray[1][1];
	 var maxViews = tableData[currentIndex][1];
	 var allViews;
	 
	 picturesTableArray[1][2].background = "../images/Gifs/256x192White.gif";

	 allViews = viewsLoadedImagesArray[currentIndex];
//	 alert(allViews[maxViews][1].src);
	 //alert(viewsLoadedStatusArray);
//	 try {leftPicture.src  = allViews[aButtonNo][0].src;
//	      rightPicture.src = allViews[aButtonNo][1].src;
//		 };
//	  catch(e) {};
//    alert(typeof(allViews[aButtonNo][0]));
    if (typeof (allViews[maxViews][0]) !== "object")
	   		{leftPicture.src  = "../images/Gifs/firstPicture256.gif"}
		else
		     {leftPicture.src = allViews[maxViews][0].src};

    if (typeof (allViews[maxViews][1]) !== "object")
	   		{rightPicture.src  = "../images/Gifs/firstPicture256.gif"}
		else
		     {rightPicture.src = allViews[maxViews][1].src};
			 

//	Switch off all buttons

     var viewsObjectArray = picturesTableArray[2];
     var offset = 1;   // Third element is the first button
	 for (i=0; i<maxViews; i++)
	  	 {buttonObject = viewsObjectArray[i+offset];   // image object
			buttonObject.src = "../images/Gifs/LightBlue-features-button.gif";
	  	  };
// Hide the highlight square

	  var obj = picturesTableArray[3];
	  obj.visibility = "hidden";

				  
	};



function showEnlargedArea(posX,posY)
	 {
	  var obj = picturesTableArray[3];
	  if (posX > 0)		   
//	     {obj.left = posX-600;
//		  obj.top = posY-145;
		 {obj.left = posX+65;
		  obj.top = posY+115 - positionOffset;
		  obj.visibility = "visible";
		  }
	  else
	    obj.visibility = "hidden";
	 };