$(function (){	
	var horizontal = true;
	
	var $panels = $('#slider .panel');
	var $container = $('#slider .scrollContainer');
	var $scroll = $('#slider .scroll').css('overflow', 'hidden');
	
	if(horizontal){
		$panels.css({
			'float': 'left',
			'position': 'relative'			
		});
		
		$container.css('width', $container.offsetWidth * $panels.length);
	}
	
	$('#slider .navigation a').click(selectNav);
	
	function selectNav(){
		$(this)			
			.parent('ul:first')
				.find('a')
					.removeClass('selected')
				.end()
			.end()
			.addClass('selected');			
	}	
	
	var scrollOptions = {
		target: $scroll,
		items: $panels,
		navigation: '.navigation a',
		axis: 'xy',
		duration: 1000,
		easing: 'swing',
		onAfter: trigger
	};	
		
	function trigger(data) {
	  // within the .navigation element, find the A element
	  // whose href ends with ID ($= is ends with)
	  var el = $('#slider .navigation').find('a[href$="' + data.id + '"]').get(0);
	  
	  // we're passing the actual element, and not the jQuery instance.
	  selectNav.call(el);
	}
	
	if (window.location.hash) {
	  trigger({ id : window.location.hash.substr(1)});
	} else {
	  $('#slider .navigation a:first').click();
	}	
	
	$('#slider').serialScroll(scrollOptions);
	$.localScroll(scrollOptions);
});