var horizontal = true;					    	// if false, we'll float all the panels left and fix the width of the container
var $panels 	= $('.scrollContainer > div');
var $container 	= $('.scrollContainer');
var $scroll 	= $('.scroll')
 	.css('overflow', 'hidden')					// remove the default scrollbars that will appear
;

$(document).ready(function ()
{
    if (horizontal)
        $panels.css({
            'float' 	: 'left',
            'position' 	: 'relative' 										// IE fix to ensure overflow is hidden
        });

    // handle nav selection
    function selectNav()
    {
        $(this)
            .parents('ul:first')
                .find('a')
                    .removeClass('selected')
                .end()
            .end()
            .addClass('selected')
		;
    }
    $('.navigation').find('a').click(selectNav);

    // go find the navigation link that has this target and select the nav
    function trigger(data)
    {
        var el = $('.navigation').find('a[href$="' + data.id + '"]').get(0);
        selectNav.call(el);
    }

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

    // offset is used to move to *exactly* the right place, since I'm using padding on my example, I need to subtract the amount of padding to the offset.  Try removing this to get a good idea of the effect
    var offset = parseInt((horizontal ?
        $container.css('paddingTop') :
        $container.css('paddingLeft'))
        || 0) * -1
	;

    var scrollOptions =
    {
        target		: $scroll, 				// the element that has the overflow
        items		: $panels,				// can be a selector which will be relative to the target
        navigation	: '.navigation a',
        prev		: '.arrow-left',
        next		: '.arrow-right',
		axis		: 'xy',					// allow the scroll effect to run both directions
        onAfter		: trigger, 				// our final callback
        offset		: offset,
		duration	: 500,					// duration of the sliding effect
		easing		: 'swing'				// easing - can be used with the easing plugin: http://gsgd.co.uk/sandbox/jquery/easing/
    };

    $('td#dsgn-content').serialScroll(scrollOptions);	// 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.
	$.localScroll(scrollOptions);				// now apply localScroll to hook any other arbitrary links to trigger the effect
	scrollOptions.duration = 1;					// 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.
    $.localScroll.hash(scrollOptions);
});