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: 196,
			height: 196,
			top: 10,
			left: 0,
			zindex: 1
		}, {
			width: 196,
			height: 196,
			top: 26,
			left: 126,
			zindex: 2
		}, {
			width: 196,
			height: 196,
			top: 43,
			left: 250,
			zindex: 3
		}, {
			width: 248,
			height: 248,
			top: 0,
			left: 425,
			zindex: 4
		}, {
			width: 196,
			height: 196,
			top: 43,
			left: 643,
			zindex: 3
		}, {
			width: 196,
			height: 196,
			top: 26,
			left: 780,
			zindex: 2
		}, {
			width: 196,
			height: 196,
			top: 10,
			left: 902,
			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()
//		}, 10000);
//		this.wrap.onmouseover = function() {
//			clearinterval(_this.timer)
//		};
//		this.wrap.onmouseout = function() {
//			_this.timer = setinterval(function() {
//				_this.donext()
//			}, 10000);
//		}
	},
	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.settab('con',i,7);
			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()
				}
			}
		}
	},
//	settab: function (name,cursel,n){
//		for(ii=1;ii<=n;ii++){
//			var menu=document.getelementbyid(name+ii);
//			var con=document.getelementbyid("con_"+name+"_"+ii);
//			//menu.classname=i==cursel?"hover":"";
//				if(ii==cursel){
//					$('#'+name+ii).addclass('active');
//					
//				}else{
//					$('#'+name+ii).removeclass('active');
//					
//				}
//				
//			con.style.display=ii==cursel?"block":"none";
//			}
//			console.log(name+cursel)
//	},
	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");
				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", 152);
				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.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;
				console.log($(this.asort[i]).addclass('active').siblings().removeclass('active'))
			}
		}
	},
	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)
	}
};