$(function () {
    // Navigation
    var $scrollNav = $('#slider .scroll-container #scroll-nav');
    var $scrollNavPanels = $scrollNav.children();
    var $scrollNavContainer = $scrollNav.parent().css('overflow', 'hidden');

    $scrollNavContainer.before('<div class="scroll-buttons prev"><img id="scroll-buttons-prev" src="/images/home-page-hero-spot/navActiveArrowPrev.png" /></div>')
                       .before('<div class="scroll-buttons next"><img id="scroll-buttons-next" src="/images/home-page-hero-spot/navActiveArrowNext.png" /></div>');

    navSerialScrollOptions = {
        items: 'li',
        prev: '#scroll-buttons-prev',
        next: '#scroll-buttons-next',
        duration: 600,
        stop: true,
        cycle: false,
        exclude: 2,
        lock: false,
        easing: 'easeOutCirc',
        onAfter: navTrigger
    }
    $scrollNavContainer.serialScroll(navSerialScrollOptions);


    // Content Panels
    var $contenPanelContainer = $('#slider .scroll-container #content-panel-container');
    var $contentPanels = $contenPanelContainer.children();
    var $contenPanelScrollContainer = $contenPanelContainer.parent().css('overflow', 'hidden');
    $contenPanelContainer.css('width', $contentPanels.eq(1).outerWidth() * $contentPanels.length);
    var scrollToOptions = {
        axis: 'x',
        duration: 750,
        constant: true
    }
    // Scroll panel when nav image is clicked
    $scrollNavPanels.children().click(function () {
        var target = $(this).attr('href');
        $contenPanelScrollContainer.scrollTo(target, scrollToOptions);

        // Buttons - Panel - Add / Remove class on click
        $scrollNavPanels.find('img').removeClass('active').addClass('inactive');
        $(this).find('img').removeClass('inactive').addClass('active');
        return false;
    });

    // Functions - If URL has hash tag
    $scrollNavPanels.find('img').removeClass('active').addClass('inactive');
    if (window.location.hash) {
        // Add class to correct button
        var hashLoc = $('a[href="' + window.location.hash + '"]').find('img').removeClass('inactive').addClass('active');
        if (hashLoc.length > 0) {
            // Scroll panel to correct location
            $contenPanelScrollContainer.scrollTo(window.location.hash);
            // Scroll button panel to correct location
            var btnIndex = $('a[href="' + window.location.hash + '"]').parent().index();
            $scrollNavContainer.trigger('goto', [btnIndex]);
        } else {
            $scrollNavPanels.find('img').eq(0).removeClass('inactive').addClass('active');
        }
    } else {
        $scrollNavPanels.find('img').eq(0).removeClass('inactive').addClass('active');
    }

    // Buttons - Prev & Next
    $('#scroll-buttons-prev').addClass('inactive').attr('src', '/images/home-page-hero-spot/navInactiveArrowPrev.png');
    if ($scrollNavPanels.children().size() <= 3) {
        $('#scroll-buttons-next').addClass('inactive').attr('src', '/images/home-page-hero-spot/navInactiveArrowNext.png');
    }
    // OnAfter event of nav scroll
    function navTrigger() {
        var navPanelW = (($scrollNavPanels.eq(1).outerWidth(true) * $scrollNavPanels.length) - 3 * $scrollNavPanels.eq(1).outerWidth(true));
        var scrollPos = $scrollNavContainer.scrollLeft();
        scrollPos == 0 ?
            $('#scroll-buttons-prev').attr('src', '/images/home-page-hero-spot/navInactiveArrowPrev.png').addClass('inactive') :
            $('#scroll-buttons-prev').attr('src', '/images/home-page-hero-spot/navActiveArrowPrev.png').removeClass('inactive');
        navPanelW != scrollPos ?
            $('#scroll-buttons-next').attr('src', '/images/home-page-hero-spot/navActiveArrowNext.png').removeClass('inactive') :
            $('#scroll-buttons-next').attr('src', '/images/home-page-hero-spot/navInactiveArrowNext.png').addClass('inactive');
    }

    // auto rotate for hero panels
    var autoAdvStop;

    function autoAdv() {
        // set timeout
        var timeoutLen = 8000;

        // get anchor count
        var $navItems = $scrollNavPanels.children();
        var navCount = ($navItems.length) - 1;
        var navCurr = $scrollNavPanels.find('img.active').parent().parent();
        navCurr = $scrollNavPanels.index(navCurr);

        // set loop count
        var loop = 0;
        var loopMax = (2 * (navCount + 1)) + 1;

        function timeout() {
            if (navCurr > navCount) {
                navCurr = 0;
            }
            if (loop < loopMax && autoAdvStop != true) {
                // nav arrows - nav buttons past the first 3
                if (navCurr > 2) {
                    $scrollNavContainer.trigger('next');
                    navTrigger();
                } else {
                    $scrollNavContainer.trigger('goto', 0);
                    navTrigger();
                }
                // click on the current nav item
                $scrollNavPanels.find('a').eq(navCurr).trigger('click');
                loop++;
                navCurr++;
                autoAdvStop = false;
                var tid = setTimeout(timeout, timeoutLen);
            } else {
                return false;
            }
        }
        timeout();
    }
    autoAdv();

    $('#scroll, #scroll-nav a').click(function () {
        autoAdvStop = true;
    });
});