$(function () {
    // Nav tool tip.. 
    $(".slideshow .slideshow-nav a").hoverIntent(function (event) { /*
        var pos = $(this).parents(".slideshow-nav-wrapper").position();
        pos.left += $(this).offsetParent().position().left;
        pos.left += $(this).parents(".slideshow-nav").position().left;

        $(".slideshow .slideshow-tooltip").html($(this).attr('title'));
        if ($(".slideshow .slideshow-tooltip-wrapper:visible").length == 0) {
            $(".slideshow .slideshow-tooltip-wrapper")
                    .css({
                        'top': (pos.top - $(".slideshow .slideshow-tooltip-wrapper").outerHeight() - 4),
                        'left': pos.left - ($(".slideshow .slideshow-tooltip-wrapper").outerWidth() / 2) + 8
                    })
                    .fadeIn();
        }
        else {
            $(".slideshow .slideshow-tooltip-wrapper")
                    .animate({
                        'top': (pos.top - $(".slideshow .slideshow-tooltip-wrapper").outerHeight() - 4),
                        'left': pos.left - ($(".slideshow .slideshow-tooltip-wrapper").outerWidth() / 2) + 8,
                        'width': 'auto'
                    }, 150, 'easeOutElastic')

        }
    */}, function (event) {/*
        window.setTimeout(function () { if ($(".slideshow .slideshow-nav a:hover").length == 0) $(".slideshow .slideshow-tooltip-wrapper").fadeOut(); }, 300);
    */});

    $(".slideshow-nav a").click(function (event) {
        event.preventDefault();
        var idx = (($(this).parent().index() == 0) ? $(".slideshow-nav a").length : $(this).parent().index());
        $(".slideshow .slides").trigger('goto', idx);


    });

    // Append the first to the last for a forever loop effect... 
    $(".slideshow .slides ul li:first").clone().appendTo(".slideshow .slides ul");
    $(".slideshow .slides ul").css({ 'width': ($(".slideshow .slides ul li").length * $(".slideshow .slides ul li").outerWidth()) + 'px' });

    $('.slideshow').serialScroll({
        target: '.slides',
        items: 'li', // Selector to the items ( relative to the matched elements, '#sections' in this case )
        axis: 'x', // The default is 'y' scroll on both ways
        duration: 600, // Length of the animation (if you scroll 2 axes and use queue, then each axis take half this time)
        force: true, // Force a scroll to the element specified by 'start' (some browsers don't reset on refreshes)
        interval: 5000, // It's the number of milliseconds to automatically go to the next
        onBefore: function (e, elem, $pane, $items, pos) {
            /**
            * 'this' is the triggered element 
            * e is the event object
            * elem is the element we'll be scrolling to
            * $pane is the element being scrolled
            * $items is the items collection at this moment
            * pos is the position of elem in the collection
            * if it returns false, the event will be ignored
            */
            //those arguments with a $ are jqueryfied, elem isn't.
        },
        onAfter: function (elem) {
            $(".slideshow-nav a").removeClass("active").eq($(elem).index()).addClass("active");
            if ($(elem).index() == $(this).find("li:last").index()) {
                $(".slideshow-nav a:first").addClass("active");
                $(".slideshow .slides").scrollTo($(".slideshow .slides ul li:first"), 0);
                $(".slideshow .slides").trigger('notify', [0]);
            }
        }
    });

});