$(document).ready(function() {

    var horizontal = true;


    var $panels = $('.panel'); // Items the will be scrolled
    var $container = $('#scroller');  //Holds items to be scrolled
    var $mask = $('#scrollContainer');  //The Mask for overlapping

    $mask
//    .before('<img src="images/arrowLf.png" class="leftArrow"/>') //place left arrow
//    .after('<img src="images/arrowRt.png" class="rightArrow"/>') //place right arrow


    if (horizontal) {
        //        $panels.css('float', 'left');

        $container.css('width', $panels[0].offsetWidth * $panels.length);

    }

    function selectPanel() {
        $(this)
                .parents('ul:first')
                    .find('a')
                   .removeClass('selected')
                   .end()
                .end()
                .addClass('selected');
    }

    $('bannerNav li a').click(selectPanel);
    


//    $('img.leftArrow').hide();
    function hideShowNav(data) {       

        var currentPg = $('#bannerNav li').find('a[href$="' + data.id + '"]').get(0);
        //        console.log(currentPg);
        selectPanel.call(currentPg);
    }

    if (window.location.hash) {
        hideShowNav({ id: window.location.hash.substr(1) });
    }else{
    $('#bannerNav li a:first').click();
    }

    var scrollMain = {
        target: $mask,
        items: $panels,
        //navigation: '#bannerNav li a',  Item that is clicked to trigger the slide
        axis: 'x',
        easing: 'swing',
        duration: 500,
        force : true,
        interval : 5000,
        cycle : true,
        onAfter: hideShowNav
    };




    $('#siteWrapper').serialScroll(scrollMain);
//    $.localScroll(scrollMain);





});