function zoompic ()
{
	this.initialize.apply(this, arguments)	
}
zoompic.prototype = 
{
	initialize : function (id)
	{
		var _this = this;
		this.wrap = typeof id === "string" ? document.getelementbyid(id) : id;
		this.oul = this.wrap.getelementsbytagname("ul")[0];
		this.ali = this.wrap.getelementsbytagname("li");
		this.prev = this.wrap.getelementsbytagname("span")[0];
		this.next = this.wrap.getelementsbytagname("span")[1];
		this.timer = 1000;
		this.asort = [];
		this.icenter = 2;
		this._doprev = function () {return _this.doprev.apply(_this)};
		this._donext = function () {return _this.donext.apply(_this)};
		this.options = [
			/*{width:476, height:210, top:40, left:0, zindex:1},
			{width:426, height:250, top:20, left:50, zindex:2},
			{width:654, height:290, top:0, left:150, zindex:3},
			{width:426, height:250, top:20, left:480, zindex:2},
			{width:476, height:210, top:40, left:476, zindex:1},*/
			{width:365, height:252, top:40, left:0, zindex:1},
			{width:405, height:280, top:20, left:60, zindex:2},
			{width:445, height:308, top:0, left:130, zindex:3},
			{width:405, height:280, top:20, left:240, zindex:2},
			{width:366, height:252, top:40, left:345, zindex:1},
		];
		for (var i = 0; i < this.ali.length; i++) this.asort[i] = this.ali[i];
		this.asort.unshift(this.asort.pop());
		this.setup();
		this.addevent(this.prev, "click", this._doprev);
		this.addevent(this.next, "click", this._donext);
		this.doimgclick();		
		this.timer = setinterval(function ()
		{
			_this.donext()	
		}, 3000);		
		this.wrap.onmouseover = function ()
		{
			clearinterval(_this.timer)	
		};
		this.wrap.onmouseout = function ()
		{
			_this.timer = setinterval(function ()
			{
				_this.donext()	
			}, 3000);	
		}
	},
	doprev : function ()
	{
		this.asort.unshift(this.asort.pop());
		this.setup()
	},
	donext : function ()
	{
		this.asort.push(this.asort.shift());
		this.setup()
	},
	doimgclick : function ()
	{
		var _this = this;
		for (var i = 0; i < this.asort.length; i++)
		{
			this.asort[i].onclick = function ()
			{
				if (this.index > _this.icenter)
				{
					for (var i = 0; i < this.index - _this.icenter; i++) _this.asort.push(_this.asort.shift());
					_this.setup()
				}
				else if(this.index < _this.icenter)
				{
					for (var i = 0; i < _this.icenter - this.index; i++) _this.asort.unshift(_this.asort.pop());
					_this.setup()
				}
			}
		}
	},
	setup : function ()
	{
		var _this = this;
		var i = 0;
		for (i = 0; i < this.asort.length; i++) this.oul.appendchild(this.asort[i]);
		for (i = 0; i < this.asort.length; i++)
		{
			this.asort[i].index = i;
			if (i < 5)
			{
				this.css(this.asort[i], "display", "block");
				this.domove(this.asort[i], this.options[i], function ()
				{
					_this.domove(_this.asort[_this.icenter].getelementsbytagname("img")[0], {opacity:100}, function ()
					{
						_this.domove(_this.asort[_this.icenter].getelementsbytagname("img")[0], {opacity:100}, function ()
						{
							_this.asort[_this.icenter].onmouseover = function ()
							{
								_this.domove(this.getelementsbytagname("div")[0], {bottom:0})
							};
							_this.asort[_this.icenter].onmouseout = function ()
							{
								_this.domove(this.getelementsbytagname("div")[0], {bottom:-100})
							}
						})
					})
				});
			}
			else
			{
				this.css(this.asort[i], "display", "none");
				this.css(this.asort[i], "width", 0);
				this.css(this.asort[i], "height", 0);
				this.css(this.asort[i], "top", 37);
				this.css(this.asort[i], "left", this.oul.offsetwidth / 2)
			}
			if (i < this.icenter || i > this.icenter)
			{
				this.css(this.asort[i].getelementsbytagname("img")[0], "opacity", 100)
				this.asort[i].onmouseover = function ()
				{
					_this.domove(this.getelementsbytagname("img")[0], {opacity:100})	
				};
				this.asort[i].onmouseout = function ()
				{
					_this.domove(this.getelementsbytagname("img")[0], {opacity:100})
				};
				this.asort[i].onmouseout();
			}
			else
			{
				this.asort[i].onmouseover = this.asort[i].onmouseout = null
			}
		}		
	},
	addevent : function (oelement, seventtype, fnhandler)
	{
		return oelement.addeventlistener ? oelement.addeventlistener(seventtype, fnhandler, false) : oelement.attachevent("on" + seventtype, fnhandler)
	},
	css : function (oelement, attr, value)
	{
		if (arguments.length == 2)
		{
			return oelement.currentstyle ? oelement.currentstyle[attr] : getcomputedstyle(oelement, null)[attr]
		}
		else if (arguments.length == 3)
		{
			switch (attr)
			{
				case "width":
				case "height":
				case "top":
				case "left":
				case "bottom":
					oelement.style[attr] = value + "px";
					break;
				case "opacity" :
					oelement.style.filter = "alpha(opacity=" + value + ")";
					oelement.style.opacity = value / 100;
					break;
				default :
					oelement.style[attr] = value;
					break
			}	
		}
	},
	domove : function (oelement, oattr, fncallback)
	{
		var _this = this;
		clearinterval(oelement.timer);
		oelement.timer = setinterval(function ()
		{
			var bstop = true;
			for (var property in oattr)
			{
				var icur = parsefloat(_this.css(oelement, property));
				property == "opacity" && (icur = parseint(icur.tofixed(2) * 100));
				var ispeed = (oattr[property] - icur) / 5;
				ispeed = ispeed > 0 ? math.ceil(ispeed) : math.floor(ispeed);
				
				if (icur != oattr[property])
				{
					bstop = false;
					_this.css(oelement, property, icur + ispeed)
				}
			}
			if (bstop)
			{
				clearinterval(oelement.timer);
				fncallback && fncallback.apply(_this, arguments)	
			}
		}, 30)
	}
};
window.onload = function ()
{
	new zoompic("focus_box");
};