var JsFocus = function(data, options){
    this.options = {
        id: 'jsFocus',
        auto: true,
        interval: 5000,
        index: 0,
        bImgW: 688,
        bImgH: 261,
        sImgW: 147,
        sImgH: 66,
        splitH: 4,
        currentClass: 'selected'
    };
    $.extend(this.options, options);
    if (data.constructor == Array) {
        this.data = data;
        this.count = this.data.length;
        if (this.count > 0) {
        	this.timer = null;
			this.moving=false;
            this.init();
        };
    }
    else {
        
    };
};

JsFocus.prototype = {
    init: function(){
		var _this=this;
        var html = '<div class="pic"><a href="' + this.data[this.options.index].link + '" onclick="adClickLog(\'' + this.data[this.options.index].ad + '\')" target="_blank" class="link" title="' + this.data[this.options.index].title + '"><img src="' + this.data[this.options.index].bImg + '" width="' + this.options.bImgW + '" height="' + this.options.bImgH + '"/></a></div>';
        html += '<div class="items">';
        html += '<ul>';
        for (var i = 0; i < this.count; i++) {
            html += '<li><a><img src="' + this.data[i].sImg + '" width="' + this.options.sImgW + '" height="' + this.options.sImgH + '"/></a><span class="border"></span></li>'
        };
        html += '</ul></div>';
        html += '<div class="handler"><a class="up"></a><a class="down"></a></div>';
        
        this.obj = $('#' + this.options.id);
        this.obj.html(html);
        this.olink = $('#' + this.options.id + '>div.pic>a.link');
        this.oImg = $('#' + this.options.id + '>div.pic>a.link>img');
        this.oItem = this.obj.find('div.items>ul');
        this.oUp = this.obj.find('div.handler>a.up');
        this.oDown = this.obj.find('div.handler>a.down');
        this.oItemLI = this.oItem.find('li');
        this.currentIndex = -1;
        this.bindEvent();
        this.change(this.options.index);
        if (this.options.auto == true) {
            this.auto();
			this.obj.mouseenter(function(){
				_this.stop();
			});
			this.obj.mouseleave(function(){
				_this.auto();
			});
        };
    },
    auto: function(){
        var _this = this;
        this.timer = setInterval(function(){
            var index=_this.currentIndex+1;
            if (index == _this.count) {
                index = 0;
            };
            _this.change(index);
        }, _this.options.interval);
    },
    stop: function(){
        clearInterval(this.timer);
    },
    bindEvent: function(){
        var _this = this;
		
        this.oUp.click(function(){
            if (_this.currentIndex > 0) {
                _this.change(_this.currentIndex-1);
            };
        });
        this.oDown.click(function(){
            if (_this.currentIndex < _this.count - 1) {
                _this.change(_this.currentIndex+1);
            };
        });
        this.oItemLI.mousemove(function(){
            for (var i = 0; i < _this.oItemLI.size(); i++) {
                if (this == _this.oItemLI.get(i)) {
                    _this.change(i);
                };
            };
        });
		this.oItemLI.click(function(){
            for (var i = 0; i < _this.oItemLI.size(); i++) {
                if (this == _this.oItemLI.get(i)) {
                    //window.open(_this.data[i].link);
					//eval(_this.data[i].link);
                };
            };						
		});
		
    },
    change: function(index){
		if(this.moving==true||this.currentIndex==index){
			return false;
		};
		this.moving=true;
        this.oImg.hide();
        var _this = this;
        this.currentIndex = index;
        this.oImg.attr('src', _this.data[index].bImg);
        this.oImg.fadeIn('slow',function(){_this.moving=false;});
        this.olink.attr('href', this.data[index].link);
		this.olink.attr('title', this.data[index].title);
        this.oItemLI.removeClass(this.options.currentClass);
        this.oItemLI.eq(index).addClass(this.options.currentClass);
        
        if (index > 0) {
            if (index > this.count - 3) {
                this.oItem.animate({
                    top: -(this.options.sImgH + this.options.splitH) * (this.count - 3)
                }, {
                    duration: "slow"
                });
            }
            else {
                this.oItem.animate({
                    top: -(this.options.sImgH +  this.options.splitH) * (index - 1)
                }, {
                    duration: "slow"
                });
            };
        }
        else 
            if (index == 0) {
                this.oItem.animate({
                    top: -(this.options.sImgH +  this.options.splitH) * (index)
                }, {
                    duration: "slow"
                });
            };
       }
};