var menuImages = new Array();
menuImages[0] = "<div><img src='/images/student1_small.jpg'/><img src='/images/student1_small_bw.jpg'/></div>";
menuImages[1] = "<div><img src='/images/student2_small.jpg'/><img src='/images/student2_small_bw.jpg'/></div>";
menuImages[2] = "<div><img src='/images/student3_small.jpg'/><img src='/images/student3_small_bw.jpg'/></div>";
menuImages[3] = "<div><img src='/images/student4_small.jpg'/><img src='/images/student4_small_bw.jpg'/></div>";
menuImages[4] = "<div><img src='/images/student5_small.jpg'/><img src='/images/student5_small_bw.jpg'/></div>";
menuImages[5] = "<div><img src='/images/student6_small.jpg'/><img src='/images/student6_small_bw.jpg'/></div>";
menuImages[6] = "<div><img src='/images/student7_small.jpg'/><img src='/images/student7_small_bw.jpg'/></div>";
menuImages[7] = "<div><img src='/images/student8_small.jpg'/><img src='/images/student8_small_bw.jpg'/></div>";
menuImages[8] = "<div><img src='/images/student9_small.jpg'/><img src='/images/student9_small_bw.jpg'/></div>";
menuImages[9] = "<div><img src='/images/student10_small.jpg'/><img src='/images/student10_small_bw.jpg'/></div>";   

var images = new Array();
images[0] = "<div><img src='/images/student1.jpg' /></div>";
images[1] = "<div><img src='/images/student2.jpg' /></div>";
images[2] = "<div><img src='/images/student3.jpg' /></div>";
images[3] = "<div><img src='/images/student4.jpg' /></div>";
images[4] = "<div><img src='/images/student5.jpg' /></div>";
images[5] = "<div><img src='/images/student6.jpg' /></div>";
images[6] = "<div><img src='/images/student7.jpg' /></div>";
images[7] = "<div><img src='/images/student8.jpg' /></div>";
images[8] = "<div><img src='/images/student9.jpg' /></div>";
images[9] = "<div><img src='/images/student10.jpg' /></div>";

//item = 1;

$(document).ready( function() {
	
	for (i=0; i<menuImages.length; i++) {
		$("#imagemenu").append(menuImages[i]);
	}
	
	for (i=0; i<images.length; i++) {
		$("#bigimage").append(images[i]);
	}
	
//	$("#bigimage").load("/resources/images.html",function() {
//		header('Content-Type: text/html; charset=UTF-8');},function() {
//		header('Content-Type: text/html; charset=UTF-8');});
//	$("#bigimage").ajaxComplete(function(request, settings){
//		$("#bigimage > div").hide();
//		$("#bigimage > div:nth-child(1)").show();
//		//$("#bigimage > div:nth-child("+item+")").show();
//	});
	
	$("#bigimagecap").load("/resources/captions.html");
	$("#bigimagecap").ajaxComplete(function(request, settings){
		$("#bigimagecap > div").hide();
		$("#bigimagecap > div:nth-child(1)").show();
		//$("#bigimagecap > div:nth-child("+item+")").show();
	});
	
	$("#imagemenu > div > img").hide();
	$("#imagemenu > div > img:nth-child(even)").show();
	$("#imagemenu > div:nth-child(1) > img:nth-child(even)").hide();
	$("#imagemenu > div:nth-child(1) > img:nth-child(odd)").show();

	$("#bigimage > div").hide();
	$("#bigimage > div:nth-child(1)").show();

	/*
	$("#imagemenu > div").hover( function() {
		$(this).children().filter("img:nth-child(even)").hide();
		$(this).children().filter("img:nth-child(odd)").show();
	}, function() {
		$(this).children().filter("img:nth-child(even)").show();
		$(this).children().filter("img:nth-child(odd)").hide();
	});
	*/
	
	$("#imagemenu > div").click( function() {
		var index = $("#imagemenu > div").index(this);
		$("#bigimage > div").hide();
		$("#bigimage > div:eq(" + index + ")").show();
		$("#bigimagecap > div").hide();
		$("#bigimagecap > div:eq(" + index + ")").show();
		
		$("#imagemenu > div > img").hide();
		$("#imagemenu > div > img:nth-child(even)").show();
		$(this).children().filter("img:nth-child(even)").hide();
		$(this).children().filter("img:nth-child(odd)").show();

		
//		item = index;
	});
});