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("pre")[0];
		this.next = this.wrap.getelementsbytagname("pre")[1];
		this.timer = null;
		this.asort = [];
		this.icenter = 3;
		this._doprev = function() {
			return _this.doprev.apply(_this)
		};
		this._donext = function() {
			return _this.donext.apply(_this)
		};
		this.options = [{
			width: 421,
			height: 237,
			top: 50,
			left: 0,
			zindex: 1
		}, {
			width: 421,
			height: 237,
			top: 50,
			left: 0,
			zindex: 2
		}, {
			width: 421,
			height: 237,
			top: 50,
			left: 0,
			zindex: 3
		}, {
			width: 769,
			height: 432,
			top: 0,
			left: 191,
			zindex: 4
		}, {
			width: 421,
			height: 237,
			top: 50,
			left: 834,
			zindex: 3
		}, {
			width: 421,
			height: 237,
			top: 50,
			left: 834,
			zindex: 2
		}, {
			width: 421,
			height: 237,
			top: 50,
			left: 834,
			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 < 7) {
				this.css(this.asort[i], "display", "block");
				
				if( i ==3  ) {
					_this.asort[i].getelementsbytagname("span")[0].style.display="block";
				}else{
					_this.asort[i].getelementsbytagname("span")[0].style.display="none";
				}
				
				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", 50);
				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", 30);
				//this.css(this.asort[i].getelementsbytagname("img")[0], "opacity", 0);
				//_this.asort[i].getelementsbytagname("span")[0].style.display="none";
				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: 35
					})
				};
				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;
			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)
	}
};