//Copyleft Strumpet and Pink and .inbetwixt.
//Optimised by Mark Stringer

function linkObject(linkText, linkImage)
{
this.linkText = linkText;
this.linkImage = linkImage;
}
var linkArray = new Array();

function populate()
{
	count=0;
	//menu text and the image it loads
	//in the order that it appears here
	//total 29 images

	linkArray[count++] = new linkObject("STRUMPET & PINK","calling-card.jpg");
	linkArray[count++] = new linkObject("The Flower of Balay","the-flower-of-balay.jpg");
	linkArray[count++] = new linkObject("Hunting Through the Ruffles (Exploded and capped)","hunting-through-the-ruffles-ex-and-cap.jpg");
	linkArray[count++] = new linkObject("Black Swan","black-swan.jpg");
	linkArray[count++] = new linkObject("Garden of Delights (Vintage)","garden-of-delights-vintage.jpg");
	linkArray[count++] = new linkObject("Dress Shirt","dress-shirt.jpg");
	linkArray[count++] = new linkObject("Key Lime Pie","key-lime-pie.jpg");
	linkArray[count++] = new linkObject("Lady Hume’s Blush","lady-humes-blush.jpg");
	linkArray[count++] = new linkObject("Eiderdown","eiderdown.jpg");
	linkArray[count++] = new linkObject("Midsummer Maiden","midsummer-maiden.jpg");
	linkArray[count++] = new linkObject("Cheerleader","cheerleader.jpg");
	linkArray[count++] = new linkObject("Swan’s Tale","swans-tail.jpg");
	linkArray[count++] = new linkObject("Willow","willow.jpg");
	linkArray[count++] = new linkObject("Garden of Delights","garden-of-delights.jpg");
	linkArray[count++] = new linkObject("Little Bow-Peep","bow-peep.jpg");
	linkArray[count++] = new linkObject("Rosette Cheeks (Extended)","rosette-cheeks-extended.jpg");
	linkArray[count++] = new linkObject("Ming’s Vase","mings-vase.jpg");
	linkArray[count++] = new linkObject("Black Forest Gateaux","black-forest-gateaux.jpg");
	linkArray[count++] = new linkObject("Hunting Through the Ruffles (Extended)","hunting-through-the-ruffles.jpg");
	linkArray[count++] = new linkObject("Maiden’s Belt","maidens-belt.jpg");
	linkArray[count++] = new linkObject("Where the Sun Does Shine","where-the-sun-does-shine.jpg");
	linkArray[count++] = new linkObject("Ming’s Vase (Unbuttoned)","mings-vase-unbuttoned.jpg");
	linkArray[count++] = new linkObject("Dreaming of Jade (in Pink)","wedding.jpg");
	linkArray[count++] = new linkObject("Fifi","fifi.jpg");
	linkArray[count++] = new linkObject("Sowing Her Seeds","sowing-seeds.jpg");
	linkArray[count++] = new linkObject("Mimi","mimi.jpg");
	linkArray[count++] = new linkObject("Princess and the Pea","princess-and-the-pea.jpg");
	linkArray[count++] = new linkObject("Eve’s Drapes","eves-drapes.jpg");
	linkArray[count++] = new linkObject("The Back Page","backpage.png");

	for(i=0; i<linkArray.length-1; i++)
	{
	    if (i < 15){//use topblock01
		    linksContainer = document.getElementById("topblock01");
		}else if (i < 30){//use topblock02
		    linksContainer = document.getElementById("topblock02");
		}
		
		linksContainer.innerHTML = linksContainer.innerHTML
		+"<p id=\"menuItem"+i+"\">"
		+"<span id=\"currentItem"+i+"\" style=\"display: none;\">This is: </span>"
		+"<span id=\"clickItem"+i+"\" style=\"display: none;\">Next page: </span>"
		+"<span id=\"waitingItem"+i+"\" style=\"display: none;\">"+linkArray[i].linkText+"</span>"
		+"<a id=\"listItem" +i + "\" style=\"display: none;\" href=\"javascript:swapBackground('./images/"+linkArray[i].linkImage+"','listItem"+(i+1)+"','./images/"
		+linkArray[i+1].linkImage+"',"+i+")\">"+linkArray[i].linkText+"</a></p>";
	}
	
	//final link
	linksContainer.innerHTML = linksContainer.innerHTML 
	+"<p id=\"menuItem"+(linkArray.length-1)+"\">"
	+"<span id=\"currentItem"+(linkArray.length-1)+"\" style=\"display: none;\">This is: </span>"
	+"<span id=\"clickItem"+(linkArray.length-1)+"\" style=\"display: none;\">Next page: </span>"
	+"<span id=\"waitingItem"+i+"\" style=\"display: none;\">"+linkArray[(linkArray.length-1)].linkText+"</span>"
	+"<a id=\"listItem" +(linkArray.length-1) + "\" style=\"display: none;\" href=\"javascript:swapBackground('./images/"
	+linkArray[(linkArray.length-1)].linkImage+"','listItem0','./images/"+linkArray[0].linkImage+"',"+(linkArray.length-1)+")\">"+linkArray[(linkArray.length-1)].linkText+"</a></p>";
	
}

//log the currentItem
var currentLog = 0;

function loaded(){

//populate the array
populate();

//preload the first image
var preloadImage = new Image();
//but wait until it has loaded until you show the next link
preloadImage.onload = function() {
    document.getElementById('listItem0').style.display='';
    document.getElementById('currentItem0').style.display='';
//  document.getElementById('currentItem0').style.color='#ffdddd';
    document.getElementById('listItem1').style.display='';
    document.getElementById('clickItem1').style.display='';
//  document.getElementById('clickItem1').style.color = '#ffdddd';

//open the ghost links waiting to be loaded
//for(i=2; i<linkArray.length;i++) {
//  document.getElementById('waitingItem'+i).style.display='';
//	document.getElementById('waitingItem'+i).style.color='#ddaaaa';
//	document.getElementById('waitingItem'+i).style.textDecoration='line-through';
//	}

};

//load first image
preloadImage.src = './images/swans-tail.jpg';

//end loaded
}

function swapBackground(displayImage,displayOnMenu,preloadImageName,currentItem){

//display the image that we have preloaded last time
document.body.style.backgroundImage='url('+displayImage+')';

//reset the current tag to hidden on all the menu items
for(i=0; i<linkArray.length;i++) {
	document.getElementById('currentItem'+i).style.display='none';
//	document.getElementById('currentItem'+i).style.color='#ffdddd';
//	document.getElementById('clickItem'+i).style.color='#ffdddd';
}

//reset the current tag to displayed on just the current menu item
document.getElementById('currentItem'+currentItem).style.display='';
document.getElementById('listItem'+currentItem).style.display='';
document.getElementById('clickItem'+currentItem).style.display='none';
//document.getElementById('waitingItem'+currentItem).style.display='none';
     
if (currentItem > currentLog){

    //preload the next image into preloadImage
    preloadImage = new Image();
    //but wait until it has loaded until you show the next link
    preloadImage.onload = function() {
        document.getElementById(displayOnMenu).style.display='';
        if (currentItem < linkArray.length-1){
		document.getElementById('clickItem'+(currentItem+1)).style.display = '';
	}
   	document.getElementById('clickItem'+currentItem).style.display='none';
	//document.getElementById('waitingItem'+(currentItem+1)).style.display='none';
	};
    preloadImage.src = preloadImageName;

    //log the currentItem
    currentLog = currentItem;
	}
//end swapBackground
}