var TWP_Scroll = {
	setup: function() {
		var $panels = $('#carousel li.panel');
		var $container = $('#carousel .s_wide');
		var $scroll = $('#carousel .s_window');
		
	
		var scrollOptions = {
		  target: $scroll, // the element that has the overflow
		  // can be a selector which will be relative to the target
		  items: $panels,
		  navigation: '#overview_nav li a',

		  // selectors are NOT relative to document, i.e. make sure they're unique
		  prev: '#prev',
		  next: '#next',

		  // allow the scroll effect to run both directions
		  axis: 'x',
		  onAfter: TWP_Scroll.trigger, // our final callback

		  offset: 0,

		  // duration of the sliding effect
		  duration: 500

		  // easing - can be used with the easing plugin: 
		  // http://gsgd.co.uk/sandbox/jquery/easing/
		  // easing: 'swing'
		};
		$('#carousel').serialScroll(scrollOptions);
		$.localScroll(scrollOptions);

		if (window.location.hash) {
		  TWP_Scroll.trigger({ id : window.location.hash.substr(1) });
		} else {
		  $('#overview_nav a:first').click();
		}

	},	
	selectNav: function() {
	  $(this)
	    .parents('ul:first')
	      .find('li')
	        .removeClass('selected')
	      .end()
	    .end()
	    .parents('li:first')
			.addClass('selected');
	},
	trigger: function(data) {
	  var el = $('#overview_nav').find('a[href$="' + data.id + '"]').get(0);
		pageTracker._trackEvent('Overview', 'Overview select', $(el).attr('href'));
	  TWP_Scroll.selectNav.call(el);
	}
	
}
	

jQuery(document).ready(function() {	
	TWP_Scroll.setup();
});