// ===========================  Picture Navigator  ==================================//
// Turn on id1
function TurnOn(id1)
{
	if (id1 == null) {
		return;
	}
	document.getElementById(id1).style.display = '';
}


function displayPicture(name) {
	document.getElementById('picture').innerHTML="<img src='Images/"+name+"'/>";
	document.getElementById('pic_name').innerHTML="<span id='bold'>Picture code:</span> " + name;
	document.getElementById('item_name').value="Free Picture - " + name;
	document.getElementById('item_name'+'_text').value="Free Picture w/ Text - " + name;
	document.getElementById('item_name'+'_logo').value="Free Picture w/ Logo - " + name;
	window.scrollTo(0,450);
}

function mod(num1, num2) {
	return Math.floor(num1/num2);
}

function remainder(num1, num2) {
	return num1-num2*Math.floor(num1/num2);
}

var page_size=6;
// page starts from 0, no is the pic numbers of the category
function display(page, category, no) {
	var begin = page*page_size;
	var end = ((no/page_size>(page+1))?(page+1):(no/page_size))*page_size;
	
	var name = "";
	var rem_i = 0;
	
	for (i = begin; i < end; i++) {
		name = "pic_"+category+"_"+i+".JPG";
		rem_i = remainder(i, page_size);
		document.getElementById("pic_chooser"+rem_i).innerHTML = "<img src='Images/pic_"+category+"_"+i+"_thumb.JPG' width='100' height='100' style=\"border:1px solid orange\" onclick=\"TurnOn('larger_view');displayPicture('"+name+"')\">";
	}
	// clear out the rest of the unused spots
	for (j = rem_i+1; j < page_size; j++) {
		document.getElementById("pic_chooser"+j).innerHTML = "&nbsp;";
	}		
	document.getElementById("container").style.display = '';
	if (page <= 0) {
		document.getElementById("larrow").innerHTML = "<img src='Images/sym_leaf.JPG' width='18' height='9'/>";
	}else {
		document.getElementById("larrow").innerHTML = "<input type='image' onclick='page=prev("+page+",\""+category+"\", "+no+")' src='Images/sym_minus.JPG' width='18' height='9' alt='previous page'/>";
	}
	
	if (page >= Math.floor(no / page_size)) {
		document.getElementById("rarrow").innerHTML = "<img src='Images/sym_leaf.JPG' width='18' height='9' />";
	} else {
		document.getElementById("rarrow").innerHTML = "<input type='image' onclick='page=next("+page+",\""+category+"\", "+no+")' src='Images/sym_plus.JPG' width='18' height='9' alt='next page'/> ";
	}
	return page;
}

function prev(page, category, no) {

	page = page==0?page:page-1;

	display(page, category, no);
	return page;
}

function next(page, category, no) {
	
	page = Math.min(Math.floor(no/page_size), page+1);
	display(page, category, no);
	return page;
}
// ===========================  End of Picture Navigator  ==================================//