function initScroll(){
	var $scroll = $('#Scroll');
	var $container = $('#ScrollContainer');
	var $panels = $('#ScrollContainer .Panel');
	
	var horizontal = true;

	// floating panels for scrolling
	if (horizontal) {
		$panels.css({
			'display' : 'inline',
			'float' : 'left',
			'position' : 'relative' //  hack in IE to hide the overflow 
		});
		//  calculate the new width of the container so that it moves horizontally 
		$container.css('width', $panels[0].offsetWidth * $panels.length);
	}	
	
	
	//select the home link initially
	//selectNav.call($('#NavHome'));

	function selectNav() {
		$('.NavLink').removeClass('NavSelected');
		$(this).addClass('NavSelected');
	}

	//find the current nav link and set the selected state
	function trigger(data){
		var el = $('#NavInner').find('a[href$="' + data.id + '"]').get(0);
		selectNav.call(el);
	}
	
	if (window.location.hash) {
		trigger({ id : window.location.hash.substr(1)});
	} else {
		$('#nav a:first').click();
	}

	//calculates exactly the place to the right to move the container
	var offset = parseInt((horizontal ? $container.css('paddingTop') :  $container.css('paddingLeft')) || 0) * -1;
	
	var scrollOptions = {
		target: $scroll, // the element that has the overflow
		items: $panels,
		navigation: '#nav a',
		prev: $('.NavBack'), 
	    next: $('.NavNext'),
		cycle: 1,
		// permite moverse en ambos ejes
		axis: 'xy',
		onAfter: trigger, // at the end of this function calls
		offset: offset,
		duration: 500,
		constant: 0
		// easing plugin: 
		// http://gsgd.co.uk/sandbox/jquery/easing/
		//easing: 'swing'
	};

	$('#Scroll').serialScroll(scrollOptions);
	$('#PageWrapper').localScroll(scrollOptions);
	//scrollOptions.duration = 1;
	//$.localScroll.hash(scrollOptions);
	
	$(document).keydown(function(e){
		if (e.keyCode == 39) {
			$('#NavNext').click(); 
			};
		if (e.keyCode == 37) {
			$('#NavBack').click(); 
		};
	});
}


/*==============*/
$(document).ready(function(){
	initScroll();
});