// JavaScript Document

// Find out how many images are defined
howMany = myImg.length;

// Tell browser where to find the image
myImgSrc = "photos/";

// Tell browser the type of file
myImgEnd = ".jpg"

var i = 0;

// Create function to load image
function loadImg(){
	document.imgSrc.src = myImgSrc + myImg[i] + myImgEnd;
}

function loadImgNum(n){
	document.imgSrc.src = myImgSrc + myImg[n] + myImgEnd;
	i=n; toggleCtrl();
}

// Create link function to switch image backward
function prev(){
  if(i<1){
    var l = i;
  } else {
    var l = i-=1;
  }
  document.imgSrc.src = myImgSrc + myImg[l] + myImgEnd;
  togglePrev();
}

// Toggle Previous when on First Item
function togglePrev(){
  if(i<1){
	document.getElementById("next").style.display="inline";
	document.getElementById("prev").style.display="none";
  } else {
	document.getElementById("next").style.display="inline";
	document.getElementById("prev").style.display="inline";
  }
}

// Create link function to switch image forward
function next(){
  if(i>howMany-2){
    var l = i;
  } else {
    var l = i+=1;
}
  document.imgSrc.src = myImgSrc + myImg[l] + myImgEnd;
  toggleNext();
}

// Toggle Next when on last Item
function toggleNext(){
  if(i>howMany-2){
	document.getElementById("prev").style.display="inline";
	document.getElementById("next").style.display="none";
  } else {
	document.getElementById("prev").style.display="inline";
	document.getElementById("next").style.display="inline";
  }
}

// Toggle Prev/Next from Thumbs events...
function toggleCtrl(){
  if(i<1){
	document.getElementById("next").style.display="inline";
	document.getElementById("prev").style.display="none";
  } else if(i>howMany-2){
	document.getElementById("prev").style.display="inline";
	document.getElementById("next").style.display="none";
  } else {
	document.getElementById("next").style.display="inline";
	document.getElementById("prev").style.display="inline";
  }
}

// Create and load thumbs
function loadThumbs(){
	var num=0;
	var thumbDiv = document.getElementById("thumbs");
	while(num<howMany){
		var thumbImg = document.createElement("IMG");
		var thumbSrc = myImgSrc + myImg[num] + "_thumb" + myImgEnd;
		//var imgHTML = "<img src='"+thumbSrc+"' style='cursor:pointer; border:0px; width:100px; height:100px;' onclick='alert("+num+")'";
		thumbImg.setAttribute('src',thumbSrc);
		thumbImg.style.cursor = "pointer";
		thumbImg.style.margin = "5px";
		thumbImg.style.width = "90px";
		thumbImg.style.height = "70px";
		thumbImg.style.border = "1px solid #000000";
		thumbImg.onclick = new Function('loadImgNum('+num+')');
		thumbDiv.appendChild(thumbImg);
		num=num+1;
	}
}

// Init functions
function init(){
	loadImg();
	loadThumbs();
}

// Load function after page loads
window.onload = init;