$(document).ready(function() {


    function selectNav() {
        $(this)
        .parents('ul:first')
        .find('a')
        .removeClass('active')
        .end()
        .end()
        .addClass('active');
    }	
	
    $('#tabMain').find('a').click(selectNav);
	
    function trigger(data) {
        var el = $('#tabMain').find('a[href$="' + data.id + '"]').get(0);
        selectNav.call(el);
    }		
	 
	 
    if (window.location.hash) {
        trigger({
            id: window.location.hash.substr(1)
        });
    } else {
        $('#tabMain a:first').click();
    }
var scrollOptions = {		
		target:'#main_scroll',
		items:'.scroller_sections', // Selector to the items ( relative to the matched elements, '#sections' in this case )
	
		navigation:'#tabMain a',
		
		prev:'#prev',// Selector to the 'prev' button (absolute!, meaning it's relative to the document)
		next:'#next',// Selector to the 'next' button (absolute too)
		axis:'xy',// The default is 'y' scroll on both ways
		
		onAfter: trigger,
		duration:700,// Length of the animation (if you scroll 2 axes and use queue, then each axis take half this time)
		force:true
	
	

	};
	$('#content_main').serialScroll(scrollOptions);
	
	$.localScroll(scrollOptions);

    // finally, if the URL has a hash, move the slider in to position,
    // setting the duration to 1 because I don't want it to scroll in the
    // very first page load.  We don't always need this, but it ensures
    // the positioning is absolutely spot on when the pages loads.
    scrollOptions.duration = 1;
    $.localScroll.hash(scrollOptions);

	
});