$(document).ready(function () {
	$("input").placeholder();

	/*
	$(".item").hover(function () {
		$(".item .showreelCaption").slideDown(300);
	}, function () {
		$(".item .showreelCaption").slideUp(300);
	});
	*/


	$(".item").hover(function () {
		clearTimeout($(this).data("timeout"));
		//$(".item .showreelCaption").slideDown(300);
	}, function () {
		var t = setTimeout(function () {
			//$(".item .showreelCaption").slideUp(300);
		}, 500);
		$(this).data("timeout", t);
	});

	$(".scrollable").scrollable({ circular: true, speed: 800 
		}).navigator().autoscroll({
			interval: 5000
	});

	var clientsWidth = "";
});

function showProject(filterStr, type) {
	var filterBy = "." + filterStr;	
	if (type == "client") {
		clientsWidth = $('#clients').width();
	}	
	//reset
	$('.Chronological').hide("slow");
	$('.chronologicalsorter').attr("class", "chronologicalsorter");
	$('.clientsorter').attr("class", "clientsorter");
	$('.categorysorter').attr("class", "categorysorter");
	
	//hide
	if (type == "client"){
		$('#clients').attr("style", "display:none;");
	} else {
		$('.categorysorter').attr("class", "categorysorter active");
		$('#categories').attr("style", "display:none;");
		$('#order').attr("style", "display:none;");
	}
	
	//start something new
	$(filterBy).show("slow");
	if (type == "client"){		
		$('.clientsorter').attr("class", "clientsorter active");
		setTimeout(hideFlyout, 400);
	} else {
		$('.categorysorter').attr("class", "categorysorter active");
		//setTimeout(hideCat, 400);
		setTimeout(hideFlyout, 400);
	}		
}

function updateCategoryHeadline(category) {
	$('.categorysorter').html(category);
	$('.clientsorter').html("Client");
}

function updateClientHeadline(client) {
	$('.clientsorter').html(client);
	$('.categorysorter').html("Category");
}

function hideFlyout() {
	if(typeof(clientsWidth) != "undefined"){
		if (clientsWidth != 0 && clientsWidth != "") {
			var widthToSet = "width:" + clientsWidth + "px;";
			$('.flyout').attr("style", "");	
			$('#clients').attr("style", widthToSet);
		} else {
			$('.flyout').attr("style", "");
		}
	}
	$('#categories').attr("style", "width:170px;");
	$('#order').attr("style", "width:170px;");
}

function hideCat() {
	$('#categories').attr("style", "");
	$('#order').attr("style", "");
	$('.flyout').attr("style", "");
}