/*
		photo-rotation
		---------------------
		It is hoped implementation will be as simple as pasting the following line into the HTML:
		
		<script language="JavaScript" type="text/javascript" src="/js/photo-rotation.js"></script>	
	*/
	
	// Initialize the arrays:
	var photo_img = new Array();
	var photo_preloader = new Array();
	
	// Declare variables for use as the beginning and close of the image source paths:
	var photo_img_path = "/images/photo-rotation/";
	var photo_img_ext = ".jpg";
	
	// This will be incremented and used as the number of the array elements that follow:
	var x = 0;
	
	// To add a new item to the array, copy the 4 lines that constitute one full item.
	// Once copied, increment the [number] of the array by one, and change the values 
	// as appropriate.
	// 
	// Here is what each line does:
	// --------------------------------------------------------------------------------
	// - First item is the descriptive text to appear above the logo.
	// - Second, the name of the image to use.
	// - Third is the width and height respectively of the image.
	// - Fourth increments the variable 'x' by 1. This needs no editing, but must be present for each item. We use 
	//   this instead of hard-coding the numbers of the array elements (ie: [0], [1], [2], etc) because often 
	//   marketing is going to need to swap in and out new items. If we hard-coded the number of the array 
	//   elements, and someone wanted to squeeze a new photo between items 3 and 4, the old 4 becomes 5, old 5 
	//   becomes 6, and so on. This way we don't have to manually update that every time a change is requested.
	// 
		photo_img[x] = "intro";
		photo_preloader[x] = new Image(200,127);
		x = x + 1;
	
		photo_img[x] = "3216104263_d917ace88c";
		photo_preloader[x] = new Image(200,127);
		x = x + 1;
	
	//	photo_img[x] = "3216105741_7434d100b1";
	//	photo_preloader[x] = new Image(200,127);
	//	x = x + 1;
	
	//	photo_img[x] = "3216105993_e28e86bfab";
	//	photo_preloader[x] = new Image(200,127);
	//	x = x + 1;
	
		photo_img[x] = "3216106625_2f01f83ccb";
		photo_preloader[x] = new Image(200,127);
		x = x + 1;
		
		photo_img[x] = "3216957762_78892da946";
		photo_preloader[x] = new Image(200,127);
		x = x + 1;
		
	//	photo_img[x] = "3216958682_5708b041ee";
	//	photo_preloader[x] = new Image(200,127);
	//	x = x + 1;
	
		photo_img[x] = "3216960746_13428a8900";
		photo_preloader[x] = new Image(200,127);
		x = x + 1;
		
	//	photo_img[x] = "3216961116_1c429187c1";
	//	photo_preloader[x] = new Image(200,127);
	//	x = x + 1;
		
		photo_img[x] = "3216961372_bedd0bedfb";
		photo_preloader[x] = new Image(200,127);
		x = x + 1;
		
	//	photo_img[x] = "3216961782_613b87f5ec";
	//	photo_preloader[x] = new Image(200,127);
	//	x = x + 1;
		
		
	



// We need to pre-load the images in the array above, to minimize delays in display which could set the 
	// associated text out of synch with the logos as they are swapped.
	// 
	// Since photo_preloader[0].src will be exactly the same as photo_preloader[100].src with the exception 
	// of the number of the array (0 vs. 100 in the example), we can use the following loop to write this 
	// entire section of the array for us.
	// 
	for (i=0; i<photo_preloader.length; i++) {
		photo_preloader[i].src = photo_img_path + photo_img[i] + photo_img_ext;
	}
	
	
	// This is the timer function:
	var k = 0;
	var timer = setTimeout("changeKey()",5000); // 5000 = 5 second delay between items

	function changeKey() {
		k = k+1;
		if(k == photo_img.length) { // the max no. of times to loop is keying off the length of 'photo_img()'
			k = 0;
		}

        // Insert image source
		document.getElementById('photo_img_rotation').src = photo_img_path + photo_img[k] + photo_img_ext;
		
		time = setTimeout("changeKey()",5000); // 5000 = 5 second delay between items
	}
	
	
	// Below, we write the entire UI, including the CSS, in JavaScript. If a user does not have JavaScript 
	// turned on, they won't see anything at all.
	
	var photo_img_ui = ""; // initialize
	photo_img_ui += "<style type='text/css'> #photo_img_rotation { border: 1px solid #cccccc; padding: 3px; margin-left: 10px; margin-top: 10px; } </style>";
	photo_img_ui += "<img src='" + photo_img_path + photo_img[0] + photo_img_ext + "' alt='' id='photo_img_rotation' />";
	
	
	// Write the UI elements:
	document.write(photo_img_ui);