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 = 4;
        this._doprev = function () {
            return _this.doprev.apply(_this)
        };
        this._donext = function () {
            return _this.donext.apply(_this)
        };
           this.options = [{
            width: 250,
            height: 436,
            top: 90,
            left: 0,
            zindex: 1,

        }, {
            width: 250,
            height: 436,
            top: 90,
            left: 0,
            zindex: 2,
		
        }, {
            width: 304,
            height: 510,
            top: 52,
            left: 342,
            zindex: 3,
			
        }, {
            width: 250,
            height: 436,
            top: 90,
            left: 737,
            zindex: 4,
        }]
        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 < 4) {
                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("div")[0], "opacity", 30)
                this.asort[i].onmouseover = function () {
                    _this.domove(this.getelementsbytagname("div")[0], {
                        opacity: 100
                    })
                };
                this.asort[i].onmouseout = function () {
                    _this.domove(this.getelementsbytagname("div")[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)
    }
};