var lastNav = 'null'; //the id of the div currently visible, initially null

var images = new Array  ( 
			"images/eric.jpg", 
			"images/grace.jpg", 
			"images/daniel.jpg", 
			"images/jeannie.jpg"
);

$(document).ready(function() { //jQuery: when document is done loading all text and images
	handleImgNav("nextImg");//load first image

	$(".nav").click(function(){ //prev/next
		handleImgNav($(this).attr("id"));
	});

});
currImg = -1; //img # out of totImages
var totImages = images.length;
var lastActiveP = null;

function handleImgNav(action) {
	if (action == "prevImg" && currImg == 0)
		currImg = totImages;
	else if (action == "nextImg" && currImg == totImages-1)
		currImg = -1;

	if (action=="nextImg")
		nextImage();
	else if (action=="prevImg")
		prevImage();

	if (lastActiveP){
		$("#"+lastActiveP).toggleClass("bullet_active");
	}

	$("#b_"+currImg).toggleClass("bullet_active");
		lastActiveP = "b_"+currImg;
}

function nextImage(){
	currImg++;
	$("#currImg").image(images[currImg], "currImg"); //load image to #currImg
}

function prevImage(){
	currImg--;
	$("#currImg").image(images[currImg], "currImg"); //load image to #currImg
}

$.fn.image = function(src, id){
	return this.each(function(){
		var i = new Image();
		i.src = src;
		//	$("#"+id).css("background", "url("+src+") 0 0 no-repeat");
		i.onload = function (){
			$("#"+id).css("background", "url("+src+") 0 0 no-repeat");
		};
	});
} 

/* Extract a substring from 'str' split at 'where'
and return the part at array index 'which' */
function extractSubstr(str, where, which){
	if (str==null) return ;
	var res = str.split(where);
	return res[which];
}