$(document).ready(function(){
	$("#loading").ajaxStart(function(){
		$(this).show();
	});
	$("#loading").ajaxStop(function(){
		$(this).hide();
	});
	$("#rightArrow").bind("click", function(){
		var name = $(this).attr("name");
		clickArrow($("#rightArrow"), name);
	});
	$("#leftArrow").bind("click", function(){
		clickArrow($("#leftArrow"), name);
	});
	mouseoverItem($(".projectPic"));
	mouseoutItem($(".projectPic"));
});
function  mouseoverItem(element){
	element.bind("mouseenter", function(){
		if($(this).css("height") == "60px"){
			$(this).animate( { height:"120px"}, 200 );
			var index = $(".projectPic").index(this);
		}
	});
}
function mouseoutItem(element){
	element.bind("mouseleave", function(){
		if($(this).css("height") == "120px"){
			$(this).animate( { height:"60px"}, 200 );
			var index = $(".projectPic").index(this);
		}
	});
}

function clickArrow(element, page){
	$("#projectList").hide("fast");
	$.ajax({
			type: "GET",
			url: "projectsAjax.php?page="+page,
			dataType: "html",
			success: function(html){
				$("#projectList").empty();	
				$("#projectList").show("fast"); 
				$("#projectList").append(html);
				mouseoverItem($(".projectPic"));
				mouseoutItem($(".projectPic"));
				$("#rightArrow").bind("click", function(){
					page = parseInt(page)+1;
					clickArrow($("#rightArrow"), page);
				});
				$("#leftArrow").bind("click", function(){
					page = parseInt(page)-1;
					clickArrow($("#leftArrow"), page);
				});
				$(".item").bind("click", function(){
					var index = $(".item").index(this);
					var itemz = $(".testing"+index).attr("name");
				});
			}
		});
}