$(document).ready(function() {	
	
	/* -------------------------- */
	/* ----- Portfolio page ----- */
	/* -------------------------- */
	//Hide "portfolioItem" divs by default, show on image click
	$("div.portfolioItem").hide();
	
	//Override CSS
	$("li.click img").css({cursor:"pointer"});
	$(".portfolioItem").css({background:"none"});
	$("ul#portfolioNav").css({display:"inline"});
	
	//Function to show/hide "portfolioItem" div when image is clicked, or when scrolling to next item
	function divShowHide(item){
		if ($(item).children("div.portfolioItem").is(":visible")){
	        $(item).children("div.portfolioItem").slideUp("fast");
		} else {
				$("div.portfolioItem").slideUp("fast");
				$(item).children("div.portfolioItem").slideDown("fast");	
		}
	}
	
	$("li.click").click(function(){
		divShowHide(this);									
	});

	/* ------------------------------------------------------- */
	/* ----- Scroller - using jQuery SerialScroll plugin ----- */
	/* ------------------------------------------------------- */
	//Define variables
	var $items = $("#scroll #portfolioItems li.click"); 
	var $scroller = $("#scroll #portfolioItems");
	
	//Make scroller wide enough to contain all portfolio items
	$scroller.css("width", $items[0].offsetWidth * $items.length);
	
	//Nav selection - highlight active item (default = item 1)
	$('#portfolioNav li:first a').addClass("selected");
	$('#portfolioNav li a').click(function(){
		$('#portfolioNav li a').removeClass("selected");
		$(this).addClass("selected");
	});
	
	//Call serialScroll plugin
	$("#scroll").serialScroll({
		//target:'#portfolioItems',
		items:'li.click',
		prev:'a.prev',
		next:'a.next',
		navigation:'ul#portfolioNav li a',
		axis:'x',
		duration:400,
		start:0,
		force:true,	//scroll on page load
		stop:false,
		lock:false,
		cycle:false,
		easing:'easeInOutSine',
		jump:false,
		//lazy:true,	//items collected each time - allows dynamic content
		onBefore:function(e, elem, $pane, $items, pos){	//call "divShowHide" function to hide div (if visible) when scrolling to next item
			divShowHide(this);
		}
	});
	
});