// when the DOM is ready...
function setupSlider() {
 
    var $panels = $('#content div.pane-scroll > div.pane');
    var $container = $('#content div.pane-scroll');

	if ( ($panels).length < 2 ) {
		setupProjectSlider();
		return false;
	}


    // 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',
			position: 'relative'
		});

        // calculate a new width for the container (so it holds all panels)
		$container.css('width', $panels[0].offsetWidth * $panels.length);
    }
 
    // collect the scroll object, at the same time apply the hidden overflow
    // to remove the default scrollbars that will appear
	var $scroll = $('#content .pane-wrap').css('overflow', 'hidden');
	
    // apply our left + right buttons
    // $scroll
    //     .before('<img class="scrollButtons left" src="images/scroll_left.png" />')
    //     .after('<img class="scrollButtons right" src="images/scroll_right.png" />');

	//	add a nav link for each pane
	$nav_wrap = $('<div id="pane-scroll-nav" class="pane-nav" />').prependTo($("div#content"));
	$nav_list = $('<ul />').prependTo($nav_wrap);
	$panels.each(function(i, elem) {
		var label = (i < 10) ? '0' + (i + 1) : i + 1;
		var a = $('<a />');
		a.attr('href', '#' + $(this).attr('id'))
			.text(label)
			.wrap("<li />")
			.parent()
			.appendTo($nav_list);
	});
	
	
	//	add the pane-scroll highlight
	$('<div id="pane-nav-highlight"><div id="pane-nav-highlight-bar" /></div>').prependTo($nav_wrap);
 
    // handle nav selection
    function selectNav() {
		$(this).parent().siblings().children('a').removeClass('selected');
		$(this).addClass('selected');
		
		//	pane-nav highlight
		if ( $(this).attr('href') ) {
			$("div#pane-nav-highlight-bar").animate({
				left: ($(this).position().left) + "px",
				width: $(this).width() + "px",
				opacity: 1
			},
			350);
		}
		else {
			$nav_list.find('a:first').click();
		}
	} 
	
	$nav_list.find('a').click(selectNav);

	// go find the navigation link that has this target and select the nav
	function trigger(data) {
		var el = $nav_list.find('a[href$="' + data.id + '"]').get(0);
		selectNav.call(el);
    }
	selectNav.call($nav_list.find("a:first"));
 //   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

		// can be a selector which will be relative to the target
        items: $panels,
 
        navigation: 'ul#pane-scroll-nav a',
 
        // selectors are NOT relative to document, i.e. make sure they're unique
       // prev: 'img.left', 
       // next: 'img.right',
 
        // allow the scroll effect to run both directions
        axis: 'xy',
 
        onAfter: trigger, // our final callback
 
        offset: offset,
 
        // duration of the sliding effect
        duration: 500,
 
        // easing - can be used with the easing plugin: 
        // http://gsgd.co.uk/sandbox/jquery/easing/
        easing: 'swing'
    };
 
    // 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.
    $container.serialScroll(scrollOptions);
 
    // now apply localScroll to hook any other arbitrary links to trigger 
    // the effect
    $.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.
    // lines 138 - 141 inserted 10-20-2009 to cause second panel to load first then slide back to first panel
    scrollOptions.duration = 1;
    $.localScroll.hash(scrollOptions);
		if ($panels.length > 1) {
			$scroll.scrollTo($panels[0].offsetWidth * ($panels.length - 1),
	{axis: 'x', duration: 1}).scrollTo(0, {axis: 'x', duration: 500});
		}
 
};