/** 
* Author: uxspy<uxspy.bj@gmail.com>
* Slide is a simple javascript image slide control with play/pause feature written in jQuery.
* It create div wraper and some else divs from render the image
* Tested in Firefox3.5, IE8
*
* Version: 0.1
* 05/07/2010
**/

; (function($) {
    var _slider = {};

    _slider.stop = function() {
        window.clearInterval(_slider.intervalID);
    };

    _slider.play = function() {
        _slider.intervalID = window.setInterval(function() { _slider.slide(); }, _slider.opts.delay);
    };

    _slider.pause = function() {
        window.clearInterval(_slider.intervalID);
    };

    _slider.slide = function(opts) {
        if (opts) {
            _slider.currentIndex = opts.currentIndex || 0;
        }
        else {
            _slider.currentIndex = (_slider.currentIndex >= (_slider.itemCount - 1)) ? 0 : (++_slider.currentIndex);
        }

        var currentItem = _slider.items.eq(_slider.currentIndex);
        var currentTitle = _slider.titleTextArray[_slider.currentIndex];

        _slider.items.filter(":visible").fadeOut(_slider.opts.fadeOut, function() {
            currentItem.fadeIn(_slider.opts.fadeIn);
            _slider.title.empty();
            if (currentTitle != "") {
                _slider.title.html(currentTitle).click(function() {
                    location.href = currentItem.find("a").attr("href");
                }).show();
            }
            else {
                _slider.title.hide();
            }
            _slider.navigators.eq(_slider.currentIndex).attr("class", "active").siblings().removeAttr("class");
        });
    };

    _slider.goto = function(i) {
        _slider.stop();
        _slider.slide({ currentIndex: i });
        if (!_slider.isPaused) {
            _slider.play();
        }
    };

    _slider.prepare = function() {
        if (_slider.titleTextArray[0] != "") {
            _slider.title.html(_slider.titleTextArray[0]).click(function() {
                location.href = _slider.items.eq(_slider.currentIndex).find("a").attr("href");
            }).show();
        }
        else {
            _slider.title.hide();
        }
        _slider.navigators.eq(0).attr("class", "active");

        _slider.navigators.each(function(i) {
            $(this).click(function() {
                _slider.goto(i);
            });
        });

        _slider.controller.toggle(function() {
            $(this).attr("class", "controller play").attr("title", "Play");
            _slider.isPaused = true;
            _slider.pause();
        }, function() {
            $(this).attr("class", "controller pause").attr("title", "Pause");
            _slider.isPaused = false;
            _slider.play();
        });
    };

    $.fn.slide = function(options) {
        var _opts = $.extend({}, $.fn.slide.defaults, options);

        _slider.opts = _opts;
        return this.each(function() {
            $(this).removeClass("noscript");
            _slider.currentIndex = 0;

            var _wraper = $(document.createElement("div")).addClass("slide");
            var _title = $(document.createElement("div")).addClass("title");
            var _navigator = $(document.createElement("div")).addClass("navigator");
            var _controller = $(document.createElement("div")).addClass("controller").addClass("pause").attr("title", "Pause");
            var _thisCopy = $(this).clone().removeAttr("id");


            _thisCopy.children("li").removeAttr("id").html("&nbsp;").show(); //we juest need a schema of the right ul like '<ul><li></li>...</ul>' but not any data
            $(this).wrap(_wraper).before(_title).after(_controller).after(_navigator.append(_thisCopy)); //build dom

            _slider.title = _title;
            _slider.navigators = _navigator.find("li");
            _slider.controller = _controller;
            _slider.items = $(this).find("li");
            _slider.itemCount = _slider.navigators.size();
            _slider.titleTextArray = new Array();
            _slider.items.find("img").each(function() {
                _slider.titleTextArray.push($(this).attr("alt"));
                $(this).attr("alt", "");
            });

            _slider.prepare();
            _slider.play();
        });
    };

    $.fn.slide.defaults = {
        delay: 4000,
        fadeIn: 'slow',
        fadeOut: 'slow'
    };
}
)(jQuery);