//I am using $(window).load instead of doc ready because sometimes if the
//images don't load fast enough jScrollPane has a mild mental breakdown
// and ruins everything

$(window).load(function()
{
	var jscrollsettings = {
		autoReinitialise: true,
		horizontalDragMinWidth: 125,
		horizontalDragMaxWidth: 125,
		//horizontalGutter: 100,
		mouseWheelSpeed:40,
		animateEase: "easeOutExpo",
		showArrows: true,         
		// horizontalArrowPositions: 'after',
		horizontalArrowPositions: 'split'
		//arrowScrollOnHover: true   
		//scrollbarMargin: 0
	}

   $(".nav li:last-child").css('background-image','none');


	$('#slideshow').width(get_total_width); 
	$('.scroll-pane').jScrollPane(jscrollsettings);
	$('#slideshow li').hover(show_overlay, hide_overlay);     


	$('#sub-nav a').click(function(){
		//alert("filter images for" + $(this).attr("href"));
		return false;
	})
	
	$('.button').hover(
		function () {
			$(this).addClass(".button-hover");
		}, 
		function () {                         
			$(this).removeClass(".button-hover");
		}
	);
	
	
	

});


function show_overlay(e){
	$(this).children('.slideshow-overlay').show();
	
}

function hide_overlay(e){
	//$(this).children('.slideshow-overlay').fadeOut('slow');        
	$(this).children('.slideshow-overlay').hide();        
	//setTimeout("alert('foo')",200);
}

//This function finds the outer width each element in a list
//and sets the width of the div to that.
//For horizontal scrolling justice
//by Lindsey Mysse

function get_total_width() {
	var totalwidth = 0; 
	$('#slideshow li').each(function(e){
		totalwidth += $(this).outerWidth(true); 		
	});
	return totalwidth;
}