function toMain(n) {
	
	var newImage = '/photo.php?pi='+n+'&size=four';
	
	document.getElementById('main_image').src=newImage;
	document.getElementById('main_image').alt=n;
	
	if (document.getElementById('big_photo').style.display == 'block') {
	
		var bpImage = '/photo.php?pi='+n+'&size=eight';
		document.getElementById('bp_image').src = bpImage;
	
		}


	}



function launchBigPhoto() {

	var viewPortSize = getViewPortSize();

	var viewportWidth = viewPortSize[0];
	var viewportHeight = viewPortSize[1];

	var piid = document.getElementById('main_image').alt;
	var bigImage = "<img src='/photo.php?pi="+piid+"&size=eight' id='bp_image' alt='Product Image'/>";
	var closeBar = "<button type='button' onclick='closeBigPhoto();'>Close</button>";
	
	var thumbs = document.getElementById('thumbnails').innerHTML;
	var bp_thumbs = "<ul id='bp_thumbs'>\n"+thumbs+"</ul>\n";

	var newInnerHTML = (thumbs != "") ? bigImage+bp_thumbs + closeBar : bigImage+closeBar;

	document.getElementById('mask').style.display='block';
	document.getElementById('big_photo').innerHTML = newInnerHTML;
	document.getElementById('big_photo').style.display='block';
	
	var bigPhotoHeight = 660; // height of photo, plus close bar, plus 20px padding top and bottom
	var bigPhotoWidth = (thumbs == "") ? 840 : 1000; // width of photo plus 20 px padding each size
	
	var top = ((viewportHeight / 2) - (bigPhotoHeight / 2))+"px";
	var left = ((viewportWidth / 2) - (bigPhotoWidth / 2))+"px";
	
	if (((viewportHeight / 2) - (bigPhotoHeight / 2)) < 140) top = '140px';  // makes room for the flash banner, which otherwise overrides the floating div

	document.getElementById('big_photo').style.top = top;
	document.getElementById('big_photo').style.left = left;
	if (thumbs != "") {
		
		document.getElementById('big_photo').style.width = '965px';
		document.getElementById('bp_thumbs').style.display = 'block';
		
		}
	}


function getViewPortSize() {

	 var viewportwidth;
	 var viewportheight;
	 var output = new Array();
	 
	 // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
	 
	 if (typeof window.innerWidth != 'undefined')
	 {
		  viewportwidth = window.innerWidth,
		  viewportheight = window.innerHeight
	 }
	 
	// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
	
	 else if (typeof document.documentElement != 'undefined'
		 && typeof document.documentElement.clientWidth !=
		 'undefined' && document.documentElement.clientWidth != 0)
	 {
		   viewportwidth = document.documentElement.clientWidth,
		   viewportheight = document.documentElement.clientHeight
	 }
	 
	 // older versions of IE
	 
	 else
	 {
		   viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
		   viewportheight = document.getElementsByTagName('body')[0].clientHeight
	 }
	
	
	output[0]=viewportwidth;
	output[1]=viewportheight;

	return output;	

	}


function closeBigPhoto() {

	document.getElementById('big_photo').style.display='none';
	document.getElementById('mask').style.display='none';
	
	}
	
/*********************** Spare Part Lightbox ************************************/

function showSparePartPhoto(piid,description) {
	
	var sparePartDiv = document.getElementById('spare_part_photo');
	var mask = document.getElementById('mask');

	var viewPortSize = getViewPortSize();

	var viewportWidth = viewPortSize[0];
	var viewportHeight = viewPortSize[1];

	var divWidth = '820'; // photo hieght + 10px padding per side
	var divHeight = '620'; // photo width + 10px padding per side
	
	var top = ((viewportHeight / 2) - (divHeight / 2))+"px";
	var left = ((viewportWidth / 2) - (divWidth / 2))+"px";
	
	if (((viewportHeight / 2) - (divHeight / 2)) < 140) top = '140px';  // makes room for the flash banner, which otherwise overrides the floating div
	
	sparePartDiv.style.display='block';
	sparePartDiv.style.top = top;
	sparePartDiv.style.left = left;
	
	if (!description) description = 'Spare Part';

	sparePartDiv.innerHTML = "<img src='/photo.php?pi="+piid+"&size=eight' alt='Multiplex USA'>\n";
	sparePartDiv.innerHTML+= "<p>"+description+"</p><button type='button' onclick='closeSparePartPhoto();'>Close</button>\n";
	mask.style.display='block'

	return false;


	}

function closeSparePartPhoto() {

	var sparePartDiv = document.getElementById('spare_part_photo');
	var mask = document.getElementById('mask');
	
	sparePartDiv.style.display='none';
	mask.style.display='none';

	return false;
	}