function $A(iterable) {
	var results = [];
	for (var i = 0; i < iterable.length; i++)results.push(iterable[i]);
	return results;
}
Function.prototype.bind = function() {
	var __method = this, args = $A(arguments), object = args.shift();
	return function() {
		return __method.apply(object, args.concat($A(arguments)));
	}
}
//var imgs = [
//		{max:'/Images/websites/eoutsourcing.net/1.gif', min:'1', url:'#'},
//		{max:'/Images/websites/eoutsourcing.net/2.gif', min:'2', url:'#'}
//	];
function Focus(){ this.initialize.apply(this, arguments) };
Focus.prototype = {
	initialize: function(imgObj, focus, tim, speed){
		this.imgs		= imgObj;
		this.tim		= tim*1000	||	2000;
		this.speed		= speed		||	0.3;
		this.img_m		= null;	// 大图
		this.img_m2		= null;	// 大图2
		this.lis		= [];	// 小图列表
		this.mask		= null;	// 蒙板
		this.title		= null; // 标题
		this.con		= null;	// 内容
		this.cur		= 0;	// 当前位置
		this.t			= null; // 整体计时
		this.tm			= null;	// mask位置
		this.ti			= null;	// img 切换
		this.stoped		= true;	// 停止状态
		this.tem		= 0;	// 临时数据
		this.loaded		= {imgs:[], num:0};	// 加载进度
		this.getElement(document.getElementById(focus));
		this.preload();
	},
	preload: function(){
		for(var i=0; i<this.imgs.length; i++){
			this.loaded.imgs[i]			= new Image();
			this.loaded.imgs[i].onload	= this.load_num.bind(this);
			this.loaded.imgs[i].src		= this.imgs[i].max;
		}
	},
	load_num: function(){
		this.loaded.num++;
		if(this.loaded.num == this.imgs.length)
			this.start();
	},
	getElement: function(focus){ // 获得蒙板，小图列表，标题/内容容器等。。。
		var ds = focus.getElementsByTagName('div');
		for(var i=0; i<ds.length; i++)
			switch(ds[i].className){
				case 'f_img_roll':
					this.img_m							= document.createElement('img');
					this.img_m2							= document.createElement('img');
					this.img_m.src						= this.imgs[0].max;
					this.img_m.style.zIndex				= 101;
					this.img_m2.style.zIndex			= 100;
					ds[i].onmouseover					= this.stop.bind(this);
					ds[i].onmouseout					= this.start.bind(this);
					ds[i].appendChild(this.img_m);
					ds[i].appendChild(this.img_m2);
					
				
				case 'f_img_tree':
					this.mask							= document.createElement('div');
					this.mask.onmouseover				= this.stop.bind(this);
					this.mask.onmouseout				= this.start.bind(this);
					var ul								= document.createElement('ul');
					var oThis							= this;
					for(var n=0; n<this.imgs.length; n++){
						this.lis[n]						= document.createElement('li');
						this.lis[n].n					= n;
						this.lis[n].innerHTML			= this.imgs[n].min;//'<img src="'+this.imgs[n].min+'" />'
						this.lis[n].onmouseover			= function(){ this.style.border = "2px solid #cc0000"; }
						this.lis[n].onmouseout			= function(){ this.style.border = "2px solid #0066cc"; }
						this.lis[n].onclick				= function(){ if(oThis.lis[oThis.cur]	!= this) oThis.nextFrame.call(oThis, this.n); }
						ul.appendChild(this.lis[n]);
					};
					ds[i].appendChild (this.mask);
					ds[i].appendChild (ul);
					break;
				case 'title':
					this.title							= ds[i]; 
					this.title.innerHTML				= this.imgs[0].title;
					this.title.parentNode.onmouseover	= this.stop.bind(this);
					this.title.parentNode.onmouseout	= this.start.bind(this);
					break;
				case 'con':
					this.con							= ds[i];
					this.con.innerHTML					= this.imgs[0].con;
					break;
			}
	},
	
	nextFrame: function(n){
		if	(this.t)	clearTimeout(this.t);
		if	(this.tm)	clearInterval(this.tm);
		if	(this.ti)	clearInterval(this.ti);
		if	(n)			this.cur = n-1;
		var top = 0, posTo = 0;
		if	(n!=0 && this.imgs[this.cur+1]){
			posTo = this.lis[this.cur+1].offsetTop;
			this.cur = this.cur+1;
		}else{
			posTo = this.lis[0].offsetTop;
			this.cur = 0;
		}
		this.tem = this.mask.offsetTop;
		this.tem > posTo? top = 1 : top = 0;
		this.tm  = setInterval(this.moveTo.bind(this, top, posTo), 25);
	},
	
	moveTo: function(top, posTo){
		if(!top){
			if((this.tem+2) >= posTo+1){
				clearInterval(this.tm);
				this.mask.style.top = posTo+'px';
				this.img_swap();
				return;
			}
			this.tem += (posTo - this.tem) * this.speed
		}else{
			if((this.tem-2) <= posTo-1){
				clearInterval(this.tm);
				this.mask.style.top = posTo+'px';
				this.img_swap();
				return;
			}
			this.tem -= (this.tem-posTo)*this.speed;
		}
		this.mask.style.top = this.tem+'px';
	},
	img_swap: function(){
		var t, b;
		if(this.img_m.style.zIndex > this.img_m2.style.zIndex){
			t = this.img_m;
			b = this.img_m2;
		}else{
			t = this.img_m2;
			b = this.img_m;
		}
		this.title.innerHTML	= '<a href="'+this.imgs[this.cur].url+'">'+this.imgs[this.cur].title+'</a>';
		this.con.innerHTML		= this.imgs[this.cur].con;
		b.src					= this.imgs[this.cur].max;
		/MSIE/.test(navigator.userAgent) ? 
			this.tem = t.style.filter ? t.style.filter.replace(/^.+=(\d+).+$/,'$1') : 100
			: this.tem = t.style.opacity ? t.style.opacity*100 : 100;
		if	(this.ti)	clearInterval(this.ti);
		this.ti	= setInterval(this.img_hid.bind(this, t, b), 25);
	},
	img_hid: function(t,b){
		this.tem -= 7;
		if (/MSIE/.test(navigator.userAgent))
			t.style.filter	= 'alpha(opacity='+this.tem+')';
		else
			t.style.opacity = this.tem/100;
		if(this.tem <=0){
			clearInterval(this.ti);
			var tz			= t.style.zIndex;
			var bz			= b.style.zIndex;
			t.style.zIndex	= bz
			b.style.zIndex	= tz;
			if (/MSIE/.test(navigator.userAgent))
				t.style.filter	= 'alpha(opacity=100)';
			else
				t.style.opacity	= 1;
			if(this.stoped) return;
			this.start(); // 继续循环
		}
	},
	start: function(){
		if(this.t) clearTimeout(this.t);
		this.t		= setTimeout(this.nextFrame.bind(this, null), this.tim);
		this.stoped = false;
	},
	stop: function(){
		clearTimeout(this.t);
		this.stoped = true;
	}
}
		window.onload = function(){
			var focus = new Focus(imgs,'focus_m');
			//focus.start();
		}