var g_photo_id_prefix = "p_";
var g_number_id_prefix = "n_";

//<base> tag is used in _inc1.html, so URLs that are just '#' will load the home page  
var g_page_name = "photos.html";

function printStatus(){
	var i;
	var cols = 9;
	
	document.write("<div align=\"center\"><table cellpading=0 cellspacing=0 border=0><tr>");
	
	//prev
	document.write("<td class=\"nav\"><a href=\"" + g_page_name + "#\" onclick=\"move(-1);return false;\">&lt; prev</a></td>");
	
	//numbers
	document.write("<td align=\"center\"><table class=\"numbers\" cellpadding=0 cellspacing=0 border=0><tr>");
	for (i = 0; i < g_num_photos; ++i){
		if (i % cols == 0 && i != 0){
			document.write("</tr><tr>");
		}
		document.write("<td class=\"number\" id=\"" + g_number_id_prefix + i + "\"><a href=\"" + g_page_name + "#\" onclick=\"show('" + i + "');return false\">" + (i+1) + "</a></td>");
	}
	document.write("</tr></table></td>");
	
	//next
	document.write("<td class=\"nav\"><a href=\"" + g_page_name + "#\" onclick=\"move(1);return false;\">next &gt;</a></td>");
	
	document.write("</tr></table></div>");
}

function printPhotos(){
	var i;
	for (i = 0; i < g_num_photos; ++i){
		document.write("<div class=\"photo\" style=\"display:none;\" id=\"" + g_photo_id_prefix + i + "\">");
		document.write("<a href=\"" + g_page_name + "#\" onclick=\"move(1);return false;\"><img src=\"" + g_photo_srcs[i] + "\" /></a><br />");
		document.write("<div class=\"description\">" + g_photo_descriptions[i] + "</div>");
		document.write("</div>");
	}
}

function move(dir){
	g_photo_current = parseInt(g_photo_current) + parseInt(dir);
	if (g_photo_current >= g_num_photos){
		g_photo_current = 0;
	}
	if (g_photo_current < 0){
		g_photo_current = g_num_photos - 1;
	}
	setVisibility(-1, false); //all
	setVisibility(g_photo_current, true);
}

function show(index){
	index = parseInt(index);
	
	if (index < 0){
		index = 0;
	}
	if (index >= g_num_photos){
		index = g_num_photos - 1;
	}
	
	g_photo_current = index;
	
	setVisibility(-1, false); //all
	setVisibility(g_photo_current, true);
}

function setVisibility(index, visible){
	var v;
	var n;

	//TODO: some sort of way to change the element's class name?
	if (visible){
		v = "block";
		n = "#dfd";
	}
	else{
		v = "none";
		n = "transparent";
	}
	
	if (index < 0){
		var i;
		for (i = 0; i < g_num_photos; ++i){
			document.getElementById(g_photo_id_prefix + i).style.display = v;
			document.getElementById(g_number_id_prefix + i).style.backgroundColor = n;
		}
	}
	else{
		document.getElementById(g_photo_id_prefix + index).style.display = v;
		document.getElementById(g_number_id_prefix + index).style.backgroundColor = n;
	}
}