$(document).ready(function(){
	
	//Intialize page
	var image_count = 24;
	$("#project-small-image-1").removeClass('project-small-image'); 
    $("#project-small-image-1").addClass('project-small-image-hover'); 
    for( i=2; i <= image_count; i++){
		$("#project-image-"+i).hide();
	}
	$("#more-info").hide();
	
	//Hover effect and switch images
	$(".project-small-link").hover(
		function (){
			
			$(".project-small").removeClass('project-small-image-hover'); 
    		$(".project-small").addClass('project-small-image');
			
			var image_link = $(this).attr('id');
			$(".project-image").hide();
			if(image_link == "project-link-1") {
				$("#project-image-1").show();
				$("#project-small-image-1").removeClass('project-small-image');
				$("#project-small-image-1").addClass('project-small-image-hover');
			}else if(image_link == "project-link-2") {
				$("#project-image-2").show();
				$("#project-small-image-2").removeClass('project-small-image');
				$("#project-small-image-2").addClass('project-small-image-hover');
			}else if(image_link == "project-link-3") {
				$("#project-image-3").show();
				$("#project-small-image-3").removeClass('project-small-image');
				$("#project-small-image-3").addClass('project-small-image-hover');
			}else if(image_link == "project-link-4") {
				$("#project-image-4").show();
				$("#project-small-image-4").removeClass('project-small-image');
				$("#project-small-image-4").addClass('project-small-image-hover');
			}else if(image_link == "project-link-5") {
				$("#project-image-5").show();
				$("#project-small-image-5").removeClass('project-small-image');
				$("#project-small-image-5").addClass('project-small-image-hover');
			}else if(image_link == "project-link-6") {
				$("#project-image-6").show();
				$("#project-small-image-6").removeClass('project-small-image');
				$("#project-small-image-6").addClass('project-small-image-hover');
			}else if(image_link == "project-link-7") {
				$("#project-image-7").show();
				$("#project-small-image-7").removeClass('project-small-image');
				$("#project-small-image-7").addClass('project-small-image-hover');
			}else if(image_link == "project-link-8") {
				$("#project-image-8").show();
				$("#project-small-image-8").removeClass('project-small-image');
				$("#project-small-image-8").addClass('project-small-image-hover');
			}else if(image_link == "project-link-9") {
				$("#project-image-9").show();
				$("#project-small-image-9").removeClass('project-small-image');
				$("#project-small-image-9").addClass('project-small-image-hover');
			}else if(image_link == "project-link-10") {
				$("#project-image-10").show();
				$("#project-small-image-10").removeClass('project-small-image');
				$("#project-small-image-10").addClass('project-small-image-hover');
			}else if(image_link == "project-link-11") {
				$("#project-image-11").show();
				$("#project-small-image-11").removeClass('project-small-image');
				$("#project-small-image-11").addClass('project-small-image-hover');
			}else if(image_link == "project-link-12") {
				$("#project-image-12").show();
				$("#project-small-image-12").removeClass('project-small-image');
				$("#project-small-image-12").addClass('project-small-image-hover');
			}else if(image_link == "project-link-13") {
				$("#project-image-13").show();
				$("#project-small-image-13").removeClass('project-small-image');
				$("#project-small-image-13").addClass('project-small-image-hover');		
			}else if(image_link == "project-link-14") {
				$("#project-image-14").show();
				$("#project-small-image-14").removeClass('project-small-image');
				$("#project-small-image-14").addClass('project-small-image-hover');	
			}else if(image_link == "project-link-15") {
				$("#project-image-15").show();
				$("#project-small-image-15").removeClass('project-small-image');
				$("#project-small-image-15").addClass('project-small-image-hover');	
			}else if(image_link == "project-link-16") {
				$("#project-image-16").show();
				$("#project-small-image-16").removeClass('project-small-image');
				$("#project-small-image-16").addClass('project-small-image-hover');	
			}else if(image_link == "project-link-17") {
				$("#project-image-17").show();
				$("#project-small-image-17").removeClass('project-small-image');
				$("#project-small-image-17").addClass('project-small-image-hover');	
			}else if(image_link == "project-link-18") {
				$("#project-image-18").show();
				$("#project-small-image-18").removeClass('project-small-image');
				$("#project-small-image-18").addClass('project-small-image-hover');	
			}else if(image_link == "project-link-19") {
				$("#project-image-19").show();
				$("#project-small-image-19").removeClass('project-small-image');
				$("#project-small-image-19").addClass('project-small-image-hover');	
			}else if(image_link == "project-link-20") {
				$("#project-image-20").show();
				$("#project-small-image-20").removeClass('project-small-image');
				$("#project-small-image-20").addClass('project-small-image-hover');	
			}else if(image_link == "project-link-21") {
				$("#project-image-21").show();
				$("#project-small-image-21").removeClass('project-small-image');
				$("#project-small-image-21").addClass('project-small-image-hover');	
			}else if(image_link == "project-link-22") {
				$("#project-image-22").show();
				$("#project-small-image-22").removeClass('project-small-image');
				$("#project-small-image-22").addClass('project-small-image-hover');	
			}else if(image_link == "project-link-23") {
				$("#project-image-23").show();
				$("#project-small-image-23").removeClass('project-small-image');
				$("#project-small-image-23").addClass('project-small-image-hover');	
			}else if(image_link == "project-link-24") {
				$("#project-image-24").show();
				$("#project-small-image-24").removeClass('project-small-image');
				$("#project-small-image-24").addClass('project-small-image-hover');	
			}
		
		},
		function() {
			//do nothing
		}
	);
	
	//Slide the more info down
	$("#more-link").click( function() {
		if($("#more-info").is(':visible')) {
			$("#more-info").hide("blind", {}, 500);
			$("#more-link").html("more");
			$("#more-symbol").html("<img src=\"/_source/img/misc/more-icon.png\" alt=\"more-icon\"/>");
		}else{
			$("#more-info").show("blind", {}, 500);
			$("#more-link").html("less");
			$("#more-symbol").html("<img src=\"/_source/img/misc/less-icon.png\" alt=\"more-icon\"/>");
		}
	});

});