// JavaScript Document

// change this value as pics are added or subtracted
var totalpics = 36; 
// min 13, no max

// thumbs are 78x78
// pics are 508x386



var thumbsperpage = 12;
var totalpages = Math.ceil(totalpics/thumbsperpage)//ensures there are exactly enough pages for total num of pix
var currentthumb = 1;
var currentpage = 1;

function incrementthumb(direction){
	// called from next pic and previous pic buttons
	//increments or decrements pic by one
	trypic = pageThumbToPicNum(currentthumb) + direction //test potential pic number before committing to it
	if  (trypic <= totalpics && trypic >= 1){// totalpic boundary
		setHighlight(currentthumb,false);//un-highlight thumb on pic/page incrment
		currentthumb = currentthumb + direction;
		if (currentthumb > thumbsperpage){//see if incmeenting thumb carries it to next page
			incrementpage(1)			
		}
		else if(currentthumb == 0){//see if current thumb carries it to prev page
			incrementpage(-1)			
		}
		showpic(currentthumb);
	}
}
		
function incrementpage(direction){
	//set buttons
	if (currentpage+direction <= totalpages && currentpage+direction >=1){//total page boundary
		currentpage += direction;
		if (direction >0){ currentthumb=1; }//if nexting to another page, set pointer to first thumb
		else{ currentthumb=thumbsperpage; }//if preving to another page, set pointer to last thumb
		refreshThumbs();
		showpic(currentthumb);
	}
}

function showpic(thumb){

	if (pageThumbToPicNum(thumb) <= totalpics){//dont allow clicking on empty thumb
		setHighlight(currentthumb,false);//un-highlight thumb on pic/page incrment
		currentthumb = thumb;//clickthumb may have come from clicking so currentthumb must be updated
		document.getElementById("gall_picture").src= "images/gallery/pic_" + padzeros(pageThumbToPicNum(currentthumb)) + ".jpg"
		setButtons();
		setHighlight(thumb,true);
	}
}
function setHighlight(thumb, on){
	if (on){
		document.getElementById("a" + padzeros(thumb)).style.border = "1px solid lime" //highlight thumb
	}
	else{
		document.getElementById("a" + padzeros(thumb)).style.border = "1px solid white" //highlight thumb
	}
}

function setButtons(){
	if (pageThumbToPicNum(currentthumb) >= totalpics){//total pic boundary
		document.getElementById("picup").src= "images/common/arrow_r_off.gif"
	}
	else{
		document.getElementById("picup").src= "images/common/arrow_r.gif"
	}
	if (pageThumbToPicNum(currentthumb) <= 1){//total page boundary
		document.getElementById("picdn").src= "images/common/arrow_l_off.gif"
	}
	else{
		document.getElementById("picdn").src= "images/common/arrow_l.gif"
	}

	if (currentpage >= totalpages){//total page boundary
		document.getElementById("pageup").src= "images/common/arrow_r_off.gif"
	}
	else{
		document.getElementById("pageup").src= "images/common/arrow_r.gif"
	}
	if (currentpage <= 1){//total page boundary
		document.getElementById("pagedn").src= "images/common/arrow_l_off.gif"
	}
	else{
		document.getElementById("pagedn").src= "images/common/arrow_l.gif"
	}
}

function refreshThumbs(){
	for (thumbNum=1;thumbNum<=thumbsperpage;thumbNum++){
		if (pageThumbToPicNum(thumbNum) <= totalpics){//only show thumbs for valid pic, otherwise show blank
			document.getElementById(padzeros(thumbNum)).src= "images/gallery/thb_" + padzeros(pageThumbToPicNum(thumbNum)) + ".jpg"
		}
		else{
			document.getElementById(padzeros(thumbNum)).src= "images/gallery/thb_empty.gif"
		}
		setHighlight(thumbNum,false);
	}
}

function pageThumbToPicNum(thumbNum){
	//just convert a pagenum and a thumbnum into a picture number
	// i.e. page 2, thumb 2 = pic number 14
	return thumbNum + (12*(currentpage-1))
}

function padzeros(value){
	//takes integer, return as string padded with zeros up to 2 chars total
   value = value.toString(); 
	var pd = ''; 
	if (2 > value.length){ 
		for (i=0; i < (2-value.length); i++){ 
			pd += '0'; 
		} 
	} 
	return pd + value.toString(); 
}