function displayPicture(name) {
	document.getElementById('picture').innerHTML="<img src='images/"+name+"' width='320' height='240'/>";
}



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 = category+"_"+i+".JPG";
		rem_i = remainder(i, page_size);
		document.getElementById("pic_chooser"+rem_i).innerHTML = "<img src='images/" + name + "' width='100' height='100' style=\"border:1px solid brown\" onclick=\"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;";
	}		
	if (page <= 0) {
		document.getElementById("larrow").innerHTML = "<img src='img/sym_leaf.JPG' width='18' height='9'/>";
	}else {
		document.getElementById("larrow").innerHTML = "<input type='image' onclick='page=prev(page,\""+category+"\", "+no+")' src='img/sym_minus.JPG' width='18' height='9' alt='previous page'/>";
	}
	
	if (page >= Math.floor(no / page_size)) {
		document.getElementById("rarrow").innerHTML = "<img src='img/sym_leaf.JPG' width='18' height='9' />";
	} else {
		document.getElementById("rarrow").innerHTML = "<input type='image' onclick='page=next(page,\""+category+"\", "+no+")' src='img/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;
}