var imgPop = new Class({
    initialize: function () {
        $$(".imgPop").each(function (imgPop) {
            var imgId = imgPop.get("id");
            var LQ;
            var HQ;
            var imgUrl = imgPop.get("rel");
            if (imgPop.get("rel").contains('?')) {
                LQ = imgUrl + "&quality=5&colors=256";
                HQ = imgUrl;
            }
            else {
                LQ = imgUrl + "?quality=5&colors=256";
                HQ = imgUrl;
            }
            new Element("div", { "class": "loadingZoom", "text": "loading zoom image" }).inject(imgPop);
            new Asset.image(LQ, { "class": "zoomImg", styles: { "opacity": 0 }, onload: function (e) { this._LQLoaded(HQ, imgId, e) } .bind(this) });
        }, this);
    },
    _zoom: function (imgId) {
        $(imgId).getElement("img.zoomImg").fade("in");
    },
    _zoomFull: function (imgId) {
        $(imgId).addClass("imgPopFull");
        $("body").addClass("noscroll");
    },
    _addZoomEvent: function (imgId, zoomImg) {
        $(imgId).addEvents({
            "mouseenter": this._zoom.pass(imgId, this),
            "mouseleave": this._unzoom.pass(imgId, this),
            "mousedown": function (e) { e.preventDefault(); this._zoomFull(imgId); } .bind(this),
            "mouseup": this._unzoomFull.pass(imgId, this)
        });
        if (Browser.ie)
            $(imgId).ondragstart = function () { return false; };
        $(imgId).adopt(zoomImg);
        var size = $(imgId).getSize();
        var Size = zoomImg.getDimensions();
        var coor = $(imgId).getCoordinates();
        var offX = (size.x - Size.width);
        var offY = (size.y - Size.height);
        $(imgId).addEvent("mousemove", function (e) {
            zoomImg.setPosition({
                x: (e.client.x - coor.left) / size.x * offX,
                y: (e.client.y - coor.top) / size.y * offY
            });
        });
    },
    _unzoom: function (imgId) {
        $(imgId).getElement("img.zoomImg").fade("out");
        this._unzoomFull(imgId);
    },
    _unzoomFull: function (imgId) {
        $(imgId).removeClass("imgPopFull");
        $(document.body).removeClass("noscroll");
    },
    _LQLoaded: function (HQurl, imgId, image) {
        this._addZoomEvent(imgId, image);
        new Asset.image(HQurl, { onload: function (e) { this._HQLoaded(imgId, HQurl); } .bind(this) });
    },
    _HQLoaded: function (imgId, HQurl) {
        $(imgId).getElement("img.zoomImg").set('src', HQurl);
        $(imgId).getElement("div.loadingZoom").destroy();
    }
});