/**
 * Images slide widget base on jQuery.
 *
 * @param modId {String} The module id for attach to.
 * @param ds {Array} Data source for this slider.
 *      var ds = [
 *          {src: 'abc/s0.jpg', alt: '', href: ''},
 *          {src: 'abc/s1.jpg', alt: '', href: ''},
 *      ]
 * @param opts {Object} Manally options to set.
 *
 * @author Allex, 12/17/2009 Thu
 * $Id: jui_template.js 4 2009-12-16 02:01:14Z allex $
 */
var SlideImage = function(modId, ds, opts) {
    opts = jQuery.extend(opts, {speed: 5});
    this.img = null;
    this._cfg = opts;
    this._modId = modId;
    this.currentIndex = 0;
    this.slider = null;
    this.slideNav = null;
    if (ds && ds.length > 0) {
        this._ds = ds;
        this._size = ds.length;
        this._init();
    }
};
SlideImage.prototype = {
    // pre cache these image to slide show.
    _init: function() {
        var img = null, l = this._size, ds = this._ds;
        while (l--) {
            img = new Image();
            img.src = ds[l].src;
        }
    },
    play: function() {
        var container = document.getElementById(this._modId);
        if (!container) return;

        var _ctx = this, slider, slideNav, slideImage, aHtml = [], ds = this._ds, l = this._size, k = l, i = 0;

        jQuery(container).css({'position':'relative', 'overflow':'hidden'});
        slider = jQuery('.slider', container);
        aHtml[aHtml.length] = '<div class="slider"></div>';

        // Generate the navigation items.
        aHtml[aHtml.length] = '<ul class="slideNav">';
        while (k) { i = l - k--;
            aHtml[aHtml.length] = '<li index="' + i + '">' + (i + 1) + '</li>';
        }
        aHtml[aHtml.length] = '</ul>';
        container.innerHTML = aHtml.join('');

        slider = this.slider = jQuery('.slider', container)[0];
        slideNav = this.slideNav = jQuery('.slideNav li', container);

        // Default item to display.
        slider.innerHTML = '<a href="' + ds[0].href + '" target="_blank"><img src="' + ds[0].src + '" alt="' + ds[0].alt + '" class="img" /></a>';
        slideNav[0].className = 'curr';

        // Retrieve the slide image object.
        slideImage = jQuery('img', slider);
        this.slideImage = slideImage[0];
        this.timer = setTimeout(function(o) { return function(){o.next();}; }(this), this._cfg.speed * 1000);

        slideNav.mouseover(function(e, ctx) {
            _ctx.next(parseInt(this.getAttribute('index'), 10));
            clearTimeout(_ctx.timer);
        }).mouseout(function(e) {
            clearTimeout(_ctx.timer);
            _ctx.timer = setTimeout(function() { _ctx.next(); }, _ctx._cfg.speed * 1000);
        });

        slideImage.mouseover(function() {
            clearTimeout(_ctx.timer);
        }).mouseout(function() {
            _ctx.timer = setTimeout(function() { _ctx.next(); }, _ctx._cfg.speed * 1000);
        });
    },
    next: function(index) {
        clearTimeout(this.timer);

        var _img = this.slideImage, _ds = this._ds, index =  index || this.currentIndex;
        _img.src = _ds[index].src;
        _img.alt = _ds[index].alt;
        jQuery('a', this.slider)[0].href = _ds[index].href;
        this.slideNav.removeClass('curr').get(index).className = 'curr';

        if (++index >= this._size) index = 0;
        this.currentIndex = index;
        this.timer = setTimeout(function(o) { return function(){o.next();}; }(this), this._cfg.speed * 1000);
    }
}