$(document).ready(function(){ 
	$("#index1").mouseover(function () {
		$('.index1').show();
		$('.index2').hide();
		$('.index3').hide();
		$('.index4').hide();
		
		$('#makeMeScrollable').show();
		
	});
	
	$("#index2").mouseover(function () {
		$('.index1').hide();
		$('.index2').show();
		$('.index3').hide();
		$('.index4').hide();
		
		$('#makeMeScrollable').hide();
	});
	
	$("#index3").mouseover(function () {
		$('.index1').hide();
		$('.index2').hide();
		$('.index3').show();
		$('.index4').hide();
		
		$('#makeMeScrollable').hide();
		
	});
	
	$("#index4").mouseover(function () {
		$('.index1').hide();
		$('.index2').hide();
		$('.index3').hide();
		$('.index4').show()
		
		$('#makeMeScrollable').hide();
		
	});
	
	$("#navi a").mouseout(function () {
		$('.index1').hide();
		$('.index2').hide();
		$('.index3').hide();
		$('.index4').hide();
		
		$('#makeMeScrollable').hide();
		$('.active').show();
		
		if($('.index1').attr('class')=='index1 active')
			$('#makeMeScrollable').show();
		
	});
	
	$(".scrollableArea a").click(function () {
		var id = $(this).attr("id").replace("element",""); 
		$("#content").load("projectsDetail.php?id="+id);
		
		$(".scrollableArea a").css("color","#A3A3A3");
		$(this).css("color","#656566");
		$(this).blur();
		
		return false;
	});
});