var BobImageScroll = function(id) {
    this.divID = id;
    this.n = 0;
    this.count = 2;
    this.t = 0;
    this.enable = true;
};

BobImageScroll.prototype.init = function() {
    var w = $('#' + this.divID).width();
    var h = $('#' + this.divID).height();

    this.count = $('#' + this.divID + ' li').size();
    if (this.count > 1) {
        var str = '<div style="position:absolute; left:' + (w - 10 - this.count * 20) + 'px; top:' + (h - 25) + 'px;">';

        for (var i = 1; i <= this.count; i++) {
            str += '<span class="bobScroll_text">' + i + '</span>';
        }

        str += '</div>';
        $('#' + this.divID).append(str);

        $('#' + this.divID + ' li:not(:first-child)').hide();
        $('#' + this.divID + ' span:first').addClass("selected");

        var id = this.divID;
        $('#' + this.divID + ' span').click(function(event) {
            var i = $(this).text() - 1;
            this.n = i;
            if (i >= this.count) return;

            $('#' + id + ' span').removeClass("selected");
            $(this).addClass('selected');

            $('#' + id + ' li').filter(':visible').fadeOut(500).parent().children().eq(i).fadeIn(1000);
        });

        var self = this;
        this.t = setTimeout(function() { self.showAuto(); }, 5000);
        $('#' + this.divID).hover(function() { self.enable = false; clearTimeout(self.t); }, function() { self.enable = true; clearTimeout(self.t); self.t = setTimeout(function() { self.showAuto(); }, 5000); });
    }
};

BobImageScroll.prototype.showAuto = function() {
    var self = this;
    if (this.enable) {
        this.n = this.n >= (this.count - 1) ? 0 : this.n + 1;
        $('#' + this.divID + ' span').eq(this.n).trigger('click');
        clearTimeout(this.t);
        this.t = setTimeout(function() { self.showAuto(); }, 5000);
    }
};