(function ($) {
    var _$lis
    var _size
    var _selected = 0
    var _clicked = 1
    var _timerId = -1

    $.slide = function () {
        _$lis = $("#slide ul li")
        _size = _$lis.length

        _appendNav()
        _hideExceptSelected()

        $("a.slide-link").click(function (e) {
            e.preventDefault()
            if (this.id == "slide-arrow-left") {
                _clicked = (_selected == 0) ? _size - 1 : _selected - 1;
            }
            else if (this.id == "slide-arrow-right") {
                _clicked = (_selected == _size - 1) ? 0 : _selected + 1;
            }
            else {
                _clicked = parseInt(this.id.replace("slide-nav-", ""))
            }
            if (_clicked != _selected) {
                _transition()
            }
            if (_timerId >= 0) {
                clearInterval(_timerId)
                _timerId = setInterval(__automatic, 5000)
            }
        })

        _timerId = setInterval(__automatic, 5000)
        function __automatic() {
            _clicked = (_selected == _size - 1) ? 0 : _selected + 1;
            _transition()
        }
    }

    function _automatic() {
        //$("a#slide-arrow-right").trigger('click')
        
    }

    function _appendNav() {
        $("div#slide").append('<div id="slide-panel"><div id="slide-panel-nav"></div></div>')

        var $panel = $("div#slide-panel-nav")
        var size = _$lis.length

        //$panel.append('<a href="#" id="slide-arrow-left" class="slide-link"><div class="slide-arrow-left pngfix"></div></a>')
        for (var i = 0; i < size; i++) {
            $panel.append('<a href="#" id="slide-nav-' + i + '" class="slide-link"><div class="slide-nav slide-nav-' + i + ' pngfix"></div></a>')
            //if (i != size - 1)
            //    $panel.append('<div class="slide-separator pngfix"></div>')
        }
        //$panel.append('<a href="#" id="slide-arrow-right" class="slide-link"><div class="slide-arrow-right pngfix"></div></a>')
    }

    function _transition() {
        _changeButtonColor(_selected, false)
        _changeButtonColor(_clicked, true)
        _$lis.each(function (i) {
            if (i == _selected) {
                $(this).fadeOut(1000)
            }
            if (i == _clicked) {
                $(this).fadeIn(1000)
            }
        })
        _selected = _clicked
    }
    function _hideExceptSelected() {
        _$lis.each(function (i) {
            if (i == _selected) {
                $(this).show()
                _changeButtonColor(i, true)
            }
            else {
                $(this).hide()
                _changeButtonColor(i, false)
            }
        })
    }
    function _changeButtonColor(i, blue) {
        var $btn = $("div.slide-nav-" + i)
        //var x = -1 * (21 + i * 14) + "px"
        var x = "0px"
        var y = (blue ? " bottom" : " top")

        if (typeof ($btn.css("background-position")) == 'undefined') {
            if (blue)
                $btn.css('background-image', 'url(/framework/images/slide/button_selected.png)')
            else 
                $btn.css('background-image', 'url(/framework/images/slide/button.png)')
            //$btn.css("background-position-x", x)
            //$btn.css("background-position-y", y)

        }
        else {
            $btn.css("background-position", x + y)
        }
    }
})(jQuery)

jQuery(function () {
    jQuery.slide()
})