$(function() {

	var $controls = $('#slider #slider-bg');
	var $mask = $('#slider #slider-mask');
	var $panels = $('#slider .slider-item');
	var $container = $('#slider .slider-group');

	$panels.css({
		'float' : 'left',
		'position' : 'relative' // IE fix to ensure overflow is hidden
	});
  
	// calculate a new width for the container (so it holds all panels)
	$container.css({'width': $panels[0].offsetWidth * $panels.length, 'background':'transparent'});

	// collect the scroll object, at the same time apply the hidden overflow
	// to remove the default scrollbars that will appear
	var $mask = $('#slider #slider-mask').css('overflow', 'hidden');

	// apply our left + right buttons
	$controls
		.before('<a id="prev" class="slider-nav" href="#" title="Previous slide">Previous slide</a>')
		.after('<a id="next" class="slider-nav" href="#" title="Next slide">Next slide</a>');
		
	
	var offset = parseInt($container.css('paddingLeft')|| 0) * -1;

	var scrollOptions = {
			
		target: $mask, // the element that has the overflow
  
		// can be a selector which will be relative to the target
		items: $panels,
	
		// 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: 'xy',
				
		offset: offset,
	  
		// duration of the sliding effect
		duration: 500,
		 
		cycle: false,
  
		// easing - can be used with the easing plugin: 
		// http://gsgd.co.uk/sandbox/jquery/easing/
		easing: 'swing',
		
		onAfter:function(elem){
			var index = $('.slider-item').index(elem);
			if ( index == 0 ) { 
				$("a#prev").css('visibility', 'hidden'); 
			} else { 
				$("a#prev").css('visibility', 'visible');
			}
			if ( index == $('.slider-item').length-1 ) { 
				$("a#next").css('visibility', 'hidden'); 
			} else { 
				$("a#next").css('visibility', 'visible');
			}			
		}
	};

	// apply serialScroll to the slider - we chose this plugin because it 
	// supports// the indexed next and previous scroll along with hooking 
	// in to our navigation.
	$('#slider').serialScroll(scrollOptions);  
	
	$.localScroll(scrollOptions);
  
});