var glr = {
    onchange: function() { },
    gallery: null,
    nw: 0, // Width of the gallery (also width of each image)
    nh: 0, // Height of the gallery
    ci: 0, // Current Index
    N: 0, // Total count of images
    bigImg: null, // The enlarged image
    bigImgContainer: null, // The enlarged image container
    imgs: null,    // Array 

    load: function() {
        glr.gallery = id("glr-images");
        glr.nw = glr.gallery.offsetWidth;
        glr.nh = glr.gallery.offsetHeight;
        glr.bigImgContainer = id("glr-bigImgContainer");
        glr.bigImg = id("glr-bigImg");
        // Moving the image to the body, so it will be higher than the background
        document.body.appendChild(glr.bigImgContainer);

        // Gouig over all the images and thumbnails, and positioning them
        glr.imgs = id("glr-slider").getElementsByTagName("img");
        var thumbs = id("glr-thumbnails").getElementsByTagName("a");
        glr.N = glr.imgs.length;
        for (var i = 0; i < glr.N; i++) {
            // Images
            var img = glr.imgs[i];
            img.index = i;
            img.width = glr.nw;
            img.onclick = new Function("glr.enlarge(" + i + ")");
            img.style.left = px(i * glr.nw);
            //img.style.top = px((img.offsetHeight - glr.nh) * -0.5); // Setting the image at the middle (we don't need this since we have the crop in the image resizer)
            // Thumbnails
            var thumb = thumbs[i];
            thumb.href = "javascript:glr.slideTo(" + i + ")";
        }
    },

    enlarge: function(index) {
        ShowBackground();

        // Calculating the gallery distance from the screen
        var left;
        var top;
        var o = glr.gallery;
        var originalHeight = 0;
        var originalWidth = 0;

        for (left = 0, top = 0; o != null; o = o.offsetParent) {
            left += o.offsetLeft;
            top += o.offsetTop;
        }
        glr.bigImg.onload = function() {
            // Reset
            glr.bigImgContainer.style.display = "block";
            glr.bigImgContainer.style.borderWidth = "0px";
            $(".close", glr.bigImgContainer).css({ height: 0, width: 0, right: -10, top: -10 });

            // Saving the original size, and making the image to fit the small image
            originalWidth = glr.bigImg.offsetWidth;
            originalHeight = glr.bigImg.offsetHeight;
            glr.bigImg.style.height = glr.nh + "px";

            // Putting the big image on the small image
            glr.bigImgContainer.style.left = (left + (glr.nw - this.offsetWidth) / 2) + "px";
            glr.bigImgContainer.style.top = top + "px";

            // Enlargin and moving the image
            var targetLeft = (document.body.clientWidth - originalWidth) / 2;
            var targetTop = (document.body.clientHeight - originalHeight) / 2;
            $(glr.bigImg).animate({ height: originalHeight }, 800, "easeInCubic");
            $(glr.bigImgContainer).animate({ left: targetLeft, top: targetTop }, 800, "easeInCubic", function() {
                $(this).animate({ borderWidth: 10, left: "-=10px", top: "-=10px" }, function() {
                    $(".close", glr.bigImgContainer).animate({ height: 26, width: 26, right: -20, top: -20 }, 800, "easeOutElastic");
                });
            });

        };
        glr.bigImg.src = $(glr.imgs[index]).attr("bigSrc");
    },

    closeEnlarge: function() {
        glr.bigImgContainer.style.display = "none";
        HideBackground();
        glr.bigImg.src = "#";
    },

    slideTo: function(index) {
        glr.ci = index;
        glr.onchange();
        $("#glr-slider").animate({ left: -glr.ci * glr.nw }, "fast", "easeInSine");
    },

    glideTo: function(imgId) {
        glr.slideTo($("#" + imgId).attr("index"));
    },

    next: function() {
        if (glr.ci < glr.N - 1) {
            glr.ci++;
            glr.slideTo(glr.ci);
        }
    },

    prev: function() {
        if (glr.ci > 0) {
            glr.ci--;
            glr.slideTo(glr.ci);
        }
    }
}

$(document).ready(glr.load);