﻿/*
jQuery Coda-Slider v2.0 - http://www.ndoherty.biz/coda-slider
Copyright (c) 2009 Niall Doherty
This plugin available for use in all personal or commercial projects under both MIT and GPL licenses.
*/

$(function() {
    // Remove the coda-slider-no-js class from the body
    $("body").removeClass("coda-slider-no-js");
    // Preloader
    $(".coda-slider").children('.panel').hide().end().prepend('<p class="loading">Loading...<br /><img src="images/ajax-loader2.gif" alt="loading..." /></p>');
});

var sliderCount = 1;
// since we allow for nested sliders,
// this is a hack to stop the parent slider
// from auto sliding when the child tabs are clicked
var sliderId = '';

$.fn.codaSlider = function(settings) {

    settings = $.extend({
        autoHeight: true,
        autoHeightEaseDuration: 1000,
        autoHeightEaseFunction: "easeInOutExpo",
        autoSlide: false,
        autoSlideInterval: 7000,
        autoSlideStopWhenClicked: true,
        crossLinking: true,
        dynamicArrows: true,
        dynamicArrowLeftText: "&#171; left",
        dynamicArrowRightText: "right &#187;",
        dynamicTabs: true,
        dynamicTabsAlign: "center",
        dynamicTabsPosition: "top",
        externalTriggerSelector: "a.xtrig",
        firstPanelToLoad: 1,
        panelTitleSelector: "h2.title",
        slideEaseDuration: 1000,
        slideEaseFunction: "easeInOutExpo",
        navInPanel: false,
        navClass: "coda-nav",
        carousel: false,
        panelContainer: 'panel-container',
        nestedParent: ""
    }, settings);

    return this.each(function() {

        // Uncomment the line below to test your preloader
        //alert("Testing preloader");

        var slider = $(this);

        // If we need arrows
        if (settings.dynamicArrows) {
            slider.parent().addClass("arrows");
            slider.before('<div class="coda-nav-left" id="coda-nav-left-' + sliderCount + '"><a href="#">' + settings.dynamicArrowLeftText + '</a></div>');
            slider.after('<div class="coda-nav-right" id="coda-nav-right-' + sliderCount + '"><a href="#">' + settings.dynamicArrowRightText + '</a></div>');
        };

        var panelWidth = slider.find(".panel").width();

        var $items = $('> div.panel', this)

        // if we want to show first item after the last one
        // and last item before first one, carousel style
        if (settings.carousel) {
            // add the first item after the last for smooth scroll to the left
            $items.filter(':last').after($items.slice(0, 1).clone());
        };

        var panelCount = $items.size();

        var panelContainerWidth = panelWidth * panelCount;
        // we made the container bigger by 1 panel in carousel mode
        if (settings.carousel) panelContainerWidth += panelWidth;

        var navClicks = 0; // Used if autoSlideStopWhenClicked = true

        // Surround the collection of panel divs with a container div (wide enough for all panels to be lined up end-to-end)
        $('> div.panel', this).wrapAll('<div class="' + settings.panelContainer + '"></div>');
        // Specify the width of the container div (wide enough for all panels to be lined up end-to-end)
        $("." + settings.panelContainer, slider).css({ width: panelContainerWidth });

        // Specify the current panel.
        // If the loaded URL has a hash (cross-linking), we're going to use that hash to give the slider a specific starting position...
        if (settings.crossLinking && location.hash && parseInt(location.hash.slice(1)) <= panelCount) {
            var currentPanel = parseInt(location.hash.slice(1));
            var offset = -(panelWidth * (currentPanel - 1));
            $('.' + settings.panelContainer, slider).css({ marginLeft: offset });
            // If that's not the case, check to see if we're supposed to load a panel other than Panel 1 initially...
        } else if (settings.firstPanelToLoad != 1 && settings.firstPanelToLoad <= panelCount) {
            var currentPanel = settings.firstPanelToLoad;
            var offset = -(panelWidth * (currentPanel - 1));
            $('.' + settings.panelContainer, slider).css({ marginLeft: offset });
            // Otherwise, we'll just set the current panel to 1...
        } else {
            var currentPanel = 1;
        };

        // Left arrow click -- NOT USED HERE
        $("#coda-nav-left-" + sliderCount + " a").click(function() {
            navClicks++;
            if (currentPanel == 1) {
                offset = -(panelWidth * (panelCount - 1));
                alterPanelHeight(panelCount - 1);
                currentPanel = panelCount;
                slider.siblings('.' + settings.navClass).find('a.current').removeClass('current').parents('ul').find('li:last a').addClass('current');
            } else {
                currentPanel -= 1;
                alterPanelHeight(currentPanel - 1);
                offset = -(panelWidth * (currentPanel - 1));
                slider.siblings('.' + settings.navClass).find('a.current').removeClass('current').parent().prev().find('a').addClass('current');
            };
            $('.' + settings.panelContainer, slider).animate({ marginLeft: offset }, settings.slideEaseDuration, settings.slideEaseFunction);
            if (settings.crossLinking) { location.hash = currentPanel }; // Change the URL hash (cross-linking)
            return false;
        });

        // Right arrow click -- NOT USED HERE
        $('#coda-nav-right-' + sliderCount + ' a').click(function() {
            navClicks++;
            if (currentPanel == panelCount) {
                offset = 0;
                currentPanel = 1;
                alterPanelHeight(0);
                slider.siblings('.' + settings.navClass).find('a.current').removeClass('current').parents('ul').find('a:eq(0)').addClass('current');
            } else {
                offset = -(panelWidth * currentPanel);
                alterPanelHeight(currentPanel);
                currentPanel += 1;
                slider.siblings('.' + settings.navClass).find('a.current').removeClass('current').parent().next().find('a').addClass('current');
            };
            $('.' + settings.panelContainer, slider).animate({ marginLeft: offset }, settings.slideEaseDuration, settings.slideEaseFunction);
            if (settings.crossLinking) { location.hash = currentPanel }; // Change the URL hash (cross-linking)
            return false;
        });

        // If we need a dynamic menu
        if (settings.dynamicTabs) {
            var dynamicTabs = '<div class="' + settings.navClass + '" id="coda-nav-' + sliderCount + '"><ul></ul></div>';
            switch (settings.dynamicTabsPosition) {
                case "bottom":
                    slider.parent().append(dynamicTabs);
                    break;
                default:
                    slider.parent().prepend(dynamicTabs);
                    break;
            };
            ul = $('#coda-nav-' + sliderCount + ' ul');
            // Create the nav items
            //////////////////////////////////// Start to modify ...right here //////////////////////////
            $('.panel', slider).each(function(n) {
                if ($(this).find(settings.panelTitleSelector).html() == null)
                    ul.append('<li class="tab"><a href="#' + (n + 1) + '" onclick="sliderId=\'' + settings.nestedParent + '\';"></a></li>');
                else
                    ul.append('<li class="tab"><a href="#' + (n + 1) + '" onclick="sliderId=\'' + settings.nestedParent + '\';">' + $(this).find(settings.panelTitleSelector).html() + '</a></li>');
            });
            navContainerWidth = slider.width() + slider.siblings('.coda-nav-left').width() + slider.siblings('.coda-nav-right').width();
            ul.parent().css({ width: navContainerWidth });
            switch (settings.dynamicTabsAlign) {
                case "center":
                    ul.css({ width: ($("li", ul).width() + 2) * panelCount });
                    break;
                case "right":
                    ul.css({ float: 'right' });
                    break;
            };
        };

        // if we want navigation inside the panel (like the Studentawards dots, for example)
        if (settings.navInPanel) {
            var dynamicTabs = '<div class="' + settings.navClass + '" id="coda-nav-' + sliderCount + '"><ul></ul></div>';
            slider.parent().append(dynamicTabs);

            ul = $('#coda-nav-' + sliderCount + ' ul');
            // Create the nav items
            //////////////////////////////////// Start to modify ...right here //////////////////////////
            $('.panel', slider).each(function(n) {
                if (settings.carousel) {
                    if (n < panelCount) {
                        ul.append('<li class="tab"><a href="#' + (n + 1) + '"></a></li>');
                    }
                } else {
                    ul.append('<li class="tab"><a href="#' + (n + 1) + '"></a></li>');
                }
            });
            navContainerWidth = slider.width() + slider.siblings('.coda-nav-left').width() + slider.siblings('.coda-nav-right').width();
            ul.parent().css({ width: navContainerWidth });

            switch (settings.dynamicTabsAlign) {
                case "center":
                    ul.css({ width: ($("li", ul).width() + 2) * panelCount });
                    break;
                case "right":
                    ul.css({ float: 'right' });
                    break;
            };
        };

        // If we need a tabbed nav
        $('#coda-nav-' + sliderCount + ' a').each(function(z) {
            // What happens when a nav link is clicked
            $(this).bind("click", function() {

                if (z != currentPanel - 1) {
                    navClicks++;
                    $(this).addClass('current').parents('ul').find('a').not($(this)).removeClass('current');

                    offset = -(panelWidth * z);
                    alterPanelHeight(z);
                    currentPanel = z + 1;
                    if (settings.carousel) {
                        //reset the position of the slider to 0
                        slider.scrollLeft(0)
                        $('.' + settings.panelContainer, slider).animate({ marginLeft: offset }, 0);
                    } else {
                        $('.' + settings.panelContainer, slider).animate({ marginLeft: offset }, settings.slideEaseDuration, settings.slideEaseFunction);
                    }
                }

                if (!settings.crossLinking) { return false }; // Don't change the URL hash unless cross-linking is specified
            });
        });

        // External triggers (anywhere on the page)
        $(settings.externalTriggerSelector).each(function() {
            // Make sure this only affects the targeted slider
            if (sliderCount == parseInt($(this).attr("rel").slice(12))) {
                $(this).bind("click", function() {
                    navClicks++;
                    targetPanel = parseInt($(this).attr("href").slice(1));
                    offset = -(panelWidth * (targetPanel - 1));
                    alterPanelHeight(targetPanel - 1);
                    currentPanel = targetPanel;
                    // Switch the current tab:
                    slider.siblings('.' + settings.navClass).find('a').removeClass('current').parents('ul').find('li:eq(' + (targetPanel - 1) + ') a').addClass('current');
                    // Slide
                    $('.' + settings.panelContainer, slider).animate({ marginLeft: offset }, settings.slideEaseDuration, settings.slideEaseFunction);
                    if (!settings.crossLinking) { return false }; // Don't change the URL hash unless cross-linking is specified
                });
            };
        });

        // Specify which tab is initially set to "current". Depends on if the loaded URL had a hash or not (cross-linking).
        if (settings.crossLinking && location.hash && parseInt(location.hash.slice(1)) <= panelCount) {
            $("#coda-nav-" + sliderCount + " a:eq(" + (location.hash.slice(1) - 1) + ")").addClass("current");
            // If there's no cross-linking, check to see if we're supposed to load a panel other than Panel 1 initially...
        } else if (settings.firstPanelToLoad != 1 && settings.firstPanelToLoad <= panelCount) {
            $("#coda-nav-" + sliderCount + " a:eq(" + (settings.firstPanelToLoad - 1) + ")").addClass("current");
            // Otherwise we must be loading Panel 1, so make the first tab the current one.
        } else {
            $("#coda-nav-" + sliderCount + " a:eq(0)").addClass("current");
        };

        // Set the height of the first panel
        if (settings.autoHeight) {
            panelHeight = $('.panel:eq(' + (currentPanel - 1) + ')', slider).height();
            slider.css({ height: panelHeight });
        };

        // Trigger autoSlide
        if (settings.autoSlide) {
            slider.ready(function() {
                setTimeout(autoSlide, settings.autoSlideInterval);
            });
        };

        function alterPanelHeight(x) {
            if (settings.autoHeight) {
                panelHeight = $('.panel:eq(' + x + ')', slider).height()
                slider.animate({ height: panelHeight }, settings.autoHeightEaseDuration, settings.autoHeightEaseFunction);
            };
        };

        var offset = 0;
        function autoSlide() {
            if ((navClicks == 0 && slider.attr('id') != sliderId) || !settings.autoSlideStopWhenClicked) {
                if (currentPanel == panelCount) {
                    if (!settings.carousel) offset = 0;
                    currentPanel = 1;
                } else {
                    if (!settings.carousel) offset = -(panelWidth * currentPanel);
                    currentPanel += 1;
                };
                alterPanelHeight(currentPanel - 1);

                // Switch the current tab:
                var $tabs = slider.siblings('.' + settings.navClass);
                $tabs.find('a').removeClass('current');
                //.parents('ul').find('li:eq(' + (currentPanel - 1) + ') a').addClass('current');
                $tabs.find("li").eq(currentPanel - 1).find("a").addClass("current");

                // Slide:
                if (settings.carousel) {
                    offset += panelWidth;
                    if (offset > panelCount * panelWidth) { offset = panelWidth; slider.scrollLeft(0); }
                    //stringing effects - opacity-scrollLeft-opacity
                    if (jQuery.support.opacity) {
                        $('.' + settings.panelContainer, slider).animate({ opacity: 0 }, 1000,
                        function() {
                            slider.scrollLeft(offset);
                            $('.' + settings.panelContainer, slider).animate({ opacity: 1.0 }, 1000);
                        });
                    } else {
                        // Trying to fix IE pixel shift during animation
                        $('.' + settings.panelContainer, slider).fadeOut(1000, function() { slider.scrollLeft(offset); });
                        $('.' + settings.panelContainer, slider).fadeIn(1000);
                    }
                } else {
                    $('.' + settings.panelContainer, slider).animate({ marginLeft: offset }, settings.slideEaseDuration, settings.slideEaseFunction);
                }
                setTimeout(autoSlide, settings.autoSlideInterval);
            };
        };
        // Kill the preloader
        $('.panel', slider).show().end().find("p.loading").remove();
        slider.removeClass("preload");

        sliderCount++;

    });
};
