var INDEX=1;
var IMG = new Array(26);
var ARROWS;

function extras()
{

/* Preload Images */

	var LeftArrowHi = new Image();
	LeftArrowHi.src = "images/arrow-left-hi.gif";

	var RightArrowHi = new Image();
	RightArrowHi.src = "images/arrow-right-hi.gif";
	
/* write HTML to div#arrows */

	divArrows = document.getElementById("arrows");

	var sLeftArrow = "<span id='showLeftArrow'><a href='#' title='Previous' onmouseover='hiLeft()' onmouseout='loLeft()' onclick='previous();return false'><img name='arrLeft' src='images/arrow-left-lo.gif' alt='Previous' /></a></span>";

	var sIndexing = "<span id='showIndex'><b>1</b> of 26</span>";

	var sRightArrow = "<span id='showRightArrow'><a href='#' title='Next' onmouseover='hiRight()' onmouseout='loRight()' onclick='next();return false'><img name='arrRight' src='images/arrow-right-lo.gif' alt='Next' /></a></span>";

	divArrows.innerHTML = sLeftArrow + sIndexing + sRightArrow;

/* Bind OnClick Event to thumbnails */

	IMG[1] = document.getElementById("img1"); IMG[1].onclick = loadpic1; 
	IMG[2] = document.getElementById("img2"); IMG[2].onclick = loadpic2; 
	IMG[3] = document.getElementById("img3"); IMG[3].onclick = loadpic3; 
	IMG[4] = document.getElementById("img4"); IMG[4].onclick = loadpic4; 
	IMG[5] = document.getElementById("img5"); IMG[5].onclick = loadpic5; 
	IMG[6] = document.getElementById("img6"); IMG[6].onclick = loadpic6; 
	IMG[7] = document.getElementById("img7"); IMG[7].onclick = loadpic7; 
	IMG[8] = document.getElementById("img8"); IMG[8].onclick = loadpic8; 
	IMG[9] = document.getElementById("img9"); IMG[9].onclick = loadpic9; 
	IMG[10] = document.getElementById("img10"); IMG[10].onclick = loadpic10; 
	IMG[11] = document.getElementById("img11"); IMG[11].onclick = loadpic11; 
	IMG[12] = document.getElementById("img12"); IMG[12].onclick = loadpic12; 
	IMG[13] = document.getElementById("img13"); IMG[13].onclick = loadpic13; 
	IMG[14] = document.getElementById("img14"); IMG[14].onclick = loadpic14; 
	IMG[15] = document.getElementById("img15"); IMG[15].onclick = loadpic15; 
	IMG[16] = document.getElementById("img16"); IMG[16].onclick = loadpic16; 
	IMG[17] = document.getElementById("img17"); IMG[17].onclick = loadpic17; 
	IMG[18] = document.getElementById("img18"); IMG[18].onclick = loadpic18; 
	IMG[19] = document.getElementById("img19"); IMG[19].onclick = loadpic19; 
	IMG[20] = document.getElementById("img20"); IMG[20].onclick = loadpic20; 
	IMG[21] = document.getElementById("img21"); IMG[21].onclick = loadpic21; 
	IMG[22] = document.getElementById("img22"); IMG[22].onclick = loadpic22; 
	IMG[23] = document.getElementById("img23"); IMG[23].onclick = loadpic23; 
	IMG[24] = document.getElementById("img24"); IMG[24].onclick = loadpic24; 
	IMG[25] = document.getElementById("img25"); IMG[25].onclick = loadpic25; 
	IMG[26] = document.getElementById("img26"); IMG[26].onclick = loadpic26; 

	drawAll();
}

/* Now Create Functions to each thumbnail event 
  (note: Look into simplifying into one array or loop) */

function loadpic1() { unframe(); INDEX=1; drawAll(); return false; } 
function loadpic2() { unframe(); INDEX=2; drawAll(); return false; } 
function loadpic3() { unframe(); INDEX=3; drawAll(); return false; } 
function loadpic4() { unframe(); INDEX=4; drawAll(); return false; } 
function loadpic5() { unframe(); INDEX=5; drawAll(); return false; } 
function loadpic6() { unframe(); INDEX=6; drawAll(); return false; } 
function loadpic7() { unframe(); INDEX=7; drawAll(); return false; } 
function loadpic8() { unframe(); INDEX=8; drawAll(); return false; } 
function loadpic9() { unframe(); INDEX=9; drawAll(); return false; } 
function loadpic10() { unframe(); INDEX=10; drawAll(); return false; } 
function loadpic11() { unframe(); INDEX=11; drawAll(); return false; } 
function loadpic12() { unframe(); INDEX=12; drawAll(); return false; } 
function loadpic13() { unframe(); INDEX=13; drawAll(); return false; } 
function loadpic14() { unframe(); INDEX=14; drawAll(); return false; } 
function loadpic15() { unframe(); INDEX=15; drawAll(); return false; } 
function loadpic16() { unframe(); INDEX=16; drawAll(); return false; } 
function loadpic17() { unframe(); INDEX=17; drawAll(); return false; } 
function loadpic18() { unframe(); INDEX=18; drawAll(); return false; } 
function loadpic19() { unframe(); INDEX=19; drawAll(); return false; } 
function loadpic20() { unframe(); INDEX=20; drawAll(); return false; } 
function loadpic21() { unframe(); INDEX=21; drawAll(); return false; } 
function loadpic22() { unframe(); INDEX=22; drawAll(); return false; } 
function loadpic23() { unframe(); INDEX=23; drawAll(); return false; } 
function loadpic24() { unframe(); INDEX=24; drawAll(); return false; } 
function loadpic25() { unframe(); INDEX=25; drawAll(); return false; } 
function loadpic26() { unframe(); INDEX=26; drawAll(); return false; } 

/* Arrows highlighting lowlighting methods */

function hiLeft() { document.images['arrLeft'].src="images/arrow-left-hi.gif"; }
function loLeft() { document.images['arrLeft'].src="images/arrow-left-lo.gif"; }
function hiRight() {	document.images['arrRight'].src="images/arrow-right-hi.gif"; }
function loRight() {	document.images['arrRight'].src="images/arrow-right-lo.gif"; }

/* IN Future the script really must be made more flexible / global / less-binding */

function drawAll()
{
	/* When reach first or last make one arrow go invisible */

	document.getElementById("showLeftArrow").style.visibility = (INDEX==1?'hidden':'visible');
	document.getElementById("showRightArrow").style.visibility = (INDEX==26?'hidden':'visible');

	/* Bug fix: unintentional highlighting occurring when moving back-and-fro from last and first images  */

	if(INDEX == 1) { document.images['arrLeft'].src="images/arrow-left-lo.gif";}
	if(INDEX == 26) { document.images['arrRight'].src="images/arrow-right-lo.gif"; }

	/* Now the rest */

	IMG[INDEX].style.border = "1px solid #900";
	document.getElementById("showIndex").innerHTML = "<b>" + INDEX + "</b> of 26";
	document.images['photo'].src="images/gallery/"+INDEX+".jpg";

	/* Set Alt Text of Major Photo. Bear in Mind Differences in JS DOM3 in browsers */

	document.images['photo'].alt = IMG[INDEX].childNodes[1].alt?IMG[INDEX].childNodes[1].alt:IMG[INDEX].firstChild.getAttribute('alt')
      


}

function unframe() 
{ 
	IMG[INDEX].style.border = "1px solid #F8F9F3"; 
}

function next()
{
	if(INDEX==26){ return false }
	unframe();
	INDEX++;
	drawAll();
}

function previous()
{
	if(INDEX==1){ return false }
	unframe();
	INDEX--;
	drawAll();
}