jQuery(function( $ ){

	var $panels = $('#container #scrollContainer div.panel');
	var $subcontentelement = $('#container #scrollContainer div.subcontent')
	var $holdingelement = $('#scroll');
	var $headerelement = $('#header');
	var $footerelement = $('#footer');
	var $footercontent = $('#footer p')
	var $spacerelement = $('#scrollContainer .spacer');
	var $subspacerelement = $('#scrollContainer .subcontent .spacer');
	var $textcontent = $('#scrollContainer .textcontent');
	var $container = $('#container');

	// if false, we'll float all the panels left and fix the width 
	// of the container
	var horizontal = true;

	// float the panels left if we're going horizontal
	if (horizontal) {
		$panels.css({
			'float' : 'left',
			'height' : '45em',
			'background' : '#fff url(/images/yellowstripe.png) left top repeat',
			'position' : 'relative' // IE fix to ensure overflow is hidden
		});
		
		$subcontentelement.css ({
			'background' : '#fff url(/images/greystripe.png) left top repeat'
		});
		
		$holdingelement.css({
			'height' : '45em',
			'overflow' : 'hidden',
			'position' : 'relative', 
			'border-width' : '1px',
			'border-style' : 'solid',
			'border-color' : '#a8a6a6'
		});
		
		$headerelement.css({
				'position':'fixed'
		});
		
		$spacerelement.css({
				'width':'115px',
				'height':'41em',
				'padding-top' : '30px',
				'padding-bottom' : '30px',
				'margin-right':'34px'
		});
		
		$subspacerelement.css({
				'width':'131px',
				'height':'41em',
				'padding-top' : '30px',
				'padding-bottom' : '30px',
				'margin-right':'19px'
		});
		
		$textcontent.css({
				'height' : '41em',
				'float' : 'left'
		});
		
		$footerelement.css({
				'position' : 'absolute'
		});
		
		$footercontent.css({
				'position' : 'fixed'
		});
		
		// calculate a new width for the container (so it holds all panels)
		$container.css('width', $panels[0].offsetWidth * $panels.length - 700);
	}
	
	// The default axis is 'y', but in this demo, I want to scroll both
	// You can modify any default like this
	$.localScroll.defaults.axis = 'x';
	
	// Scroll initially if there's a hash (#something) in the url 
	$.localScroll.hash({
		//target: '#content', // Could be a selector or a jQuery object too.
		queue:true,
		stop:true,
		duration:1500
	});
	
	/**
	 * NOTE: I use $.localScroll instead of $('#navigation').localScroll() so I
	 * also affect the >> and << links. I want every link in the page to scroll.
	 */
	$.localScroll({
		//target: '#content', // could be a selector or a jQuery object too.
		queue:true,
		duration:1000,
		stop:true,
		hash:true,
		onBefore:function( e, anchor, $target ){
			// The 'this' is the settings object, can be modified
		},
		onAfter:function( anchor, settings ){
			// The 'this' contains the scrolled element (#content)
		}
	});
});