// usage notes at the bottom of the plugin
/*
 *	elCarousel plugin v0.5
 * a carousel that autoplays and allows
 * for clicking on each item as they move
 * from pane to pane
 */
(function ($) {
    // plugin Definition
    $.fn.elCarousel = function (options) {
        var defaults = {
            controlContainer: 'carousel-controls',
            playTime: 9000,
            className: "selected"
        };
        var options = $.extend(defaults, options);
        var autoPlay = true,
            repeater = "",
            currentControl = 0,
            controlCollection = "",
            container = $('#testimonials-slideshow'),
            collection = container.children('li'),
            currentEl = collection.filter('li:not(:hidden)'),
            nextEl = "";
        if (collection.length > 0) {
            init();
        }
        // setup the styles needed for the gallery

        function init() {
            collection.css({
                "position": "absolute",
                "top": 0,
                "left": 0,
                "z-index": 1
            });
            collection.not(":first").css("display", "none");
            // create the controls out of each pane
            // that's in the container HTML
            createControls();
            // setup the event listeners to 
            // change pane and stop autoplay
            // on click
            events();
            // select correct item in arrow list
            changeArrow(collection[0]);
            // start the slideshow process, 
            // now that everthing is created
            // and we are ready to go
            startSlideshow();
        };
        // build the controls from scratch
        // and append them to the page.
        // they have links to each pane
        // the links control how the click event works

        function createControls() {
            var html = '<div id="' + defaults.controlContainer + '" class="' + defaults.controlContainer + '">';
            collection.each(function (index) {
                var paneID = "pane-" + index,
                    name = "Quote " + (index + 1);
                $(this).attr("id", paneID);
                html += '<a href="#' + paneID + '" title="' + name + '">' + name + '</a>';
            });
            html += '</div>';
            container.after(html);
            controlCollection = $("#" + defaults.controlContainer).find('a');
            controlCollection.first().addClass("selected");
        };
        // create event listeners, 
        // now that the controls are created
        // the click gets the url from the link and 
        // changes the pane related to that link
        // ie.  <a href="#pane-1"></a> changes pane <div id="pane-1">...</div>

        function events() {
            $("#" + defaults.controlContainer + " a").live('click', function (event) {
                autoPlay = false;
                // remove the current classed element
                changeSelected(controlCollection.eq(currentControl));
                // change the pane of the clicked link's Pane
                changePane(getTarget(event.currentTarget));
                // add className to the clicked Link
                changeSelected(event.currentTarget);
                // select correct item in arrow list
                changeArrow(getTarget(event.currentTarget));
                event.preventDefault();
            });
        };

        function startSlideshow() {
            timer();
        };
        // this controls the slideshow's autoplay
        // as long as autoplay is true, this runs
        // the timer is: defaults.playTime

        function timer() {
            var repeater = setInterval(function () {
                autoPlay ? nextControl() : clearInterval(repeater);
            }, defaults.playTime);
        };
        // does the job of moving the control
        // to the next one and calling to change
        // the next pane

        function nextControl(el) {
            // remove the selected classname from the control
            changeSelected(controlCollection.eq(currentControl));
            // change the currentControl element to the next one
            (currentControl + 1) === controlCollection.length ? currentControl = 0 : currentControl++;
            // add selected class to the next element
            changeSelected(controlCollection.eq(currentControl));
            changePane(getTarget(controlCollection.eq(currentControl)));
            // select correct item in arrow list
            changeArrow(getTarget(controlCollection.eq(currentControl)));
        };

        function changeSelected(el) {
            klass = defaults.className;
            el = $(el);
            // checks to see if the element has the classname, then
            // adds or removes it accordingly
            el.hasClass(klass) ? el.removeClass(klass) : el.addClass(klass);
            currentControl = el.index();
        };

        function changeArrow(el) {
            el = $(el);
            // checks to see if the element has the classname, then
            // adds or removes it accordingly
            $(".dotted-arrow li").each(function () {
                $(this).removeClass("arrow");
            });
            if (el.hasClass("repair-shops")) {
                $(".dotted-arrow li.repair-shops").addClass("arrow");
            }
            if (el.hasClass("part-dealers")) {
                $(".dotted-arrow li.part-dealers").addClass("arrow");
            }
            if (el.hasClass("fleets")) {
                $(".dotted-arrow li.fleets").addClass("arrow");
            }
            if (el.hasClass("manufacturers")) {
                $(".dotted-arrow li.manufacturers").addClass("arrow");
            }
        };

        function changePane(el) {
            // changes the value of nextEl 
            // so it can be used further down this func
            nextPane(el);
            // fade out the current pane
            currentEl.fadeOut("slow");
            // fade in the nextEl pane that we just valued
            nextEl.fadeIn("slow");
            // make everything current
            currentEl = nextEl;
        };

        function nextPane(el) {
            // test to see if this came from a click event
            // or the autoplay and changes the value
            // of nextEl accordingly
            if (el) {
                nextEl = $(el);
            } else {
                // this has to be fixed.
                currentEl.index() === collection.filter("li:last").index() ? nextEl = collection.first('li') : nextEl = currentEl.next();
            }
        };
    }; // $.fn.elCarousel
    // private function
    // getTarget grabs the href 
    // from the element passed to it

    function getTarget(el) {
        var href = $(el).attr('href');
        href = href.substring(href.indexOf('#'));
        return href;
    }
})(jQuery);
// fire the carousel without arguments
// options can be added via a hash in the 
// arguments.
// usage:
// $().elCarousel({controlContainer: 'id-of-container', playTime: 3000})
jQuery().elCarousel();