// when the DOM is ready.
$(document).ready(function () {
    var $panels = $('#slider .scrollContainer > div');
    var $container = $('#slider .scrollContainer');
    
    $(".navLink").css({'opacity': '0.7'});

    // 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' // IE fix to ensure overflow is hidden
        });

        // 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 = $('#slider .scroll').css('overflow', 'hidden');

    var $navLink;
    function loading(evt, tgt, screl, items, tgtpos) {
	if (tgtpos == 4)
		swap();
	$navLink = $('#'+$('#promonav').children()[tgtpos].id);
	$('#promonav').children().removeClass('selected');
        $navLink.addClass('selected');
        if ($navLink) {
            $navLink.css({'background-position': '-25px'});
            $navLink.animate({
                'background-position': 0
            }, 10600, 'linear');
        }

	return;
    }

    var $swap = true;
    function swap() {
	if ($swap) {
            $('#swap').attr('src', 'images/slider/banner6.jpg');
            $swap = false;
        } else {
            $('#swap').attr('src', 'images/slider/banner5.jpg');
            $swap = true;
        }
    }

    function loaded() {
        if ($navLink) {
            $navLink.animate({
                'background-position': 0
            }, 11000, 'linear');
        }
    }

    $("#promonav li").click(function() {
        $(this).siblings().removeClass('selected').end().addClass('selected');
        $(this).stop();
        $(this).css({'background-position': '-25px'}); 
    });
    var scrollOptions = {
        target: $scroll, // the element that has the overflow
        start: 0,
	cycle: true,
	stop: true,
        lock: false,
        items: $panels,
	navigation: '#promonav li',
	interval: 10000,
        axis: 'x',
        duration: 500,
        constant: false,
        onBefore: loading
    };
    $('#slider').serialScroll(scrollOptions);

    $scroll.trigger('goto', [0]);
    $("#promonav li:first").addClass('selected');
});