/// <reference path="jquery.1.4.1.js"/>

(function ($) {
    $.jHeadlines = function (el, options) {
        // To avoid scope issues, use 'base' instead of 'this'
        // to reference this class from internal events and functions.
        var base = this;

        // Access to jQuery and DOM versions of element
        base.$el = $(el);
        base.el = el;

        // Save some private variables for the current index and the elements
        base.elements = null;
        base.currentIndex = 0;
        base.previousIndex = 0;

        // Add a reverse reference to the DOM object
        base.$el.data("jHeadlines", base);

        base.init = function () {
            /// <summary>
            /// Initializes the headlines plugin
            /// </summary>

            base.options = $.extend({}, $.jHeadlines.defaultOptions, options);
            base.elements = base.$el.find(".headline");

            base.generateHeadlineSelectors();

            // Hide all elements in the headlines
            base.elements.each(function () {
                $(this).hide();
            });

            // Show the first element
            $(base.elements[0]).show();
            base.$el.find("#headlineSelector_0").addClass("activeHeadlineSelector");

            // Move to the next element
            base.moveToNextHeadline();
        };

        base.showNextHeadline = function () {
            /// <summary>
            /// Shows the next headline
            /// </summary>

            // Do not use the headlines plugin when 
            // you don't have enough elements!
            if (base.elements.length <= 1) {
                return;
            }

            base.$el.find(".headlineSelector").removeClass("activeHeadlineSelector");
            base.$el.find("#headlineSelector_" + base.currentIndex.toString()).addClass("activeHeadlineSelector");

            // Perform a fade-out animation on the previous element
            // and a fade-in animation on the current element when the fade-out animation completed.
            $(base.elements[base.previousIndex]).fadeOut(500, function () {
                // Perform a fade-in animation and move to the next element when
                // the animation is completed.
                $(base.elements[base.currentIndex]).fadeIn(500, base.moveToNextHeadline);
            });
        }

        base.moveToNextHeadline = function () {
            /// <summary>
            /// Moves to the next headline
            /// </summary>

            // Increase the current index
            base.previousIndex = base.currentIndex;
            base.currentIndex = base.currentIndex + 1;

            // Reset the current item index if it's out of bounds
            if (base.currentIndex >= base.elements.length) {
                base.currentIndex = 0;
            }

            // Wait a little while before actually showing the next headline
            setTimeout(base.showNextHeadline, base.options.duration);
        };

        base.generateHeadlineSelectors = function () {
            var selectorsElement = $('<div class="headlineSelectors"></div>');
            var index = 0;

            base.elements.each(function () {
                var itemNumber = (index + 1);
                var itemIndex = index.toString();
                var selectorElement = $('<div id="headlineSelector_' + itemIndex + '" class="headlineSelector">' + itemNumber.toString() + '</div>');

                selectorElement.appendTo(selectorsElement);

                index = index + 1;
            });

            selectorsElement.appendTo(base.$el);
        };

        // Run initializer
        base.init();
    };

    $.jHeadlines.defaultOptions = {
        duration: 5000
    };

    $.fn.jHeadlines = function (options) {
        return this.each(function () {
            (new $.jHeadlines(this, options));
        });
    };

})(jQuery);