function zoompic ()
{
	this.initialize.apply(this, arguments)
}
zoompic.prototype =
{
	initialize : function (opt)
	{
		var _this = this;
		_this.wrap = $('#'+opt.container);
		_this.tabbox = $('#'+opt.tabbox);
		_this.oul = _this.wrap.find("ul");
		_this.ali = _this.wrap.find("ul li");
		_this.prev = _this.wrap.find(".prev");
		_this.next = _this.wrap.find(".next");
		_this.timer = null;
		_this.containerwidth = _this.wrap.width();
		_this.itemwidth = _this.ali.width();
		_this.itemsize = _this.ali.size();
		_this.prevleft = 0; // 上一项位置
		_this.nextleft = _this.containerwidth - _this.itemwidth; // 下一项位置
		_this.interval = 3000; // 轮播间隙
		_this.index = 0; // 当前播放索引
		_this.domove('init');
		_this.bind();
		_this.timer = setinterval(function () { _this.donext(); }, _this.interval);
		_this.wrap.on('mouseover', function(){
			clearinterval(_this.timer)
		});
		_this.wrap.on('mouseout', function(){
			_this.timer = setinterval(function (){ _this.donext(); }, _this.interval);
		});
	},
	bind : function () {
		var _this = this;
			
		_this.ali.on('click', function(e){
			var index=$(this).index(),
				centerindex = $(this).parent().find('.center').index();
			if(index==centerindex)return false;
			_this.autoaction(index, centerindex);
			
		})
		_this.ali.on('mouseover', _this.debounce(function(e){
			var index=$(this).index(),
				centerindex = $(this).parent().find('.center').index();
			if(index==centerindex)return false;
			_this.autoaction(index, centerindex);
		}, 600))
		_this.prev.on('click', function(e){
			_this.doprev();
		});
		
		_this.next.on('click', function(e){
			_this.donext();
		});
		/*_this.prev.on('mouseover', function(e){
			_this.doprev();
		});
		_this.next.on('mouseover', function(e){
			_this.donext();
		});*/
		_this.tabbox.on('click', 'span', function(){
			var index=$(this).index();
			if(index==_this.index)return false;
			_this.autoaction(index, _this.index);
		})
	},
	autoaction : function(index, centerindex) {
		var _this = this,
			size = _this.itemsize;
		if (centerindex==0) {
			if (index == size - 1) {
				_this.doprev();
			} else {
				_this.donext();
			}
		} else if(centerindex == size - 1) {
			if (index == 0) {
				_this.donext();
			} else {
				_this.doprev();
			}
		} else {
			if (index < centerindex) {
				_this.doprev();
			} else if (index > centerindex) {
				_this.donext();
			}
		}
	},
	doprev : function ()
	{
		this.index--;
		if(this.index < 0) {
			this.index = this.itemsize - 1;
		}
		this.domove('prev');
	},
	donext : function ()
	{
		this.index++;
		if(this.index >= this.itemsize) {
			this.index = 0;
		}
		this.domove('next');
	},
	dotab:function(index,previndex){
		var _this = this;
		_this.tabbox.children().removeclass('cur');
		_this.tabbox.children().eq(index).addclass('cur');
	},
	domove : function (action, index)
	{
		var _this = this,
			prevzindex = 3,
			nextzindex = 2;
		_this.index = index ? index : _this.index;
		if (action == 'prev') {
			prevzindex = 2;
			nextzindex = 3;
		}
		_this.dotab(_this.index);
		_this.ali.removeclass('center');
		$.each(_this.ali, function(key, item){
			var ele = $(item);
			if (_this.index == key) {
				ele.attr('style', '');
				ele.addclass('center');
				if(_this.index == 0) {
					_this.ali.not(_this.ali.eq(_this.itemsize-1), _this.ali.eq(1)).attr('style', '');
					_this.ali.eq(_this.itemsize-1).css({'left': _this.prevleft, 'zindex': prevzindex});
					_this.ali.eq(1).css({'left': _this.nextleft, 'zindex': nextzindex});
				} else if(_this.index == _this.itemsize-1) {
					_this.ali.not(_this.ali.eq(_this.index-1), _this.ali.eq(0)).attr('style', '');
					_this.ali.eq(_this.index-1).css({'left': _this.prevleft, 'zindex': prevzindex});
					_this.ali.eq(0).css({'left': _this.nextleft, 'zindex': nextzindex});
				} else {
					_this.ali.not(_this.ali.eq(_this.index-1), _this.ali.eq(_this.index+1)).attr('style', '');
					_this.ali.eq(_this.index-1).css({'left': _this.prevleft, 'zindex': prevzindex});
					_this.ali.eq(_this.index+1).css({'left': _this.nextleft, 'zindex': nextzindex});
				}
			}
		});
	},
	debounce: function (fn, delay) {
		var timer
		// 返回一个函数，这个函数会在一个时间区间结束后的 delay 毫秒时执行 fn 函数
		return function () {
		// 保存函数调用时的上下文和参数，传递给 fn
		var context = this
		var args = arguments
		// 每次这个返回的函数被调用，就清除定时器，以保证不执行 fn
		cleartimeout(timer)
		// 当返回的函数被最后一次调用后（也就是用户停止了某个连续的操作），
		// 再过 delay 毫秒就执行 fn
		timer = settimeout(function () {
			  fn.apply(context, args)
			}, delay)
		}
	}
};
window.onload = function ()
{
	var pic=new zoompic({
		container: 'focus_box',
		tabbox: 'focus_tab'
	});
};