$(document).ready(function () {
    var images = $("#awFancyBox").find("img");

    $.each(images, function (i, image) {
        var title = $(this).attr("title");
        var link = $("<a rel=\"picture_group\" href=\"" + image.src + "\" title=\"" + title + "\" class=\"picture\" />");

        var containerWidth = $("#containerWidth").attr("innerHTML");
        var containerHeight = $("#containerHeight").attr("innerHTML");

        var marginBottom = $("#marginBottom").attr("innerHTML");
        var marginRight = $("#marginRight").attr("innerHTML");

        var imagesEachRow = $("#imagesEachRow").attr("innerHTML");

        var imageWidth = parseInt($("#imageWidth").attr("innerHTML"));
        var imageHeight = parseInt($("#imageHeight").attr("innerHTML"));

        var multiplyWith;

        //get/set image height based on image width
        multiplyWith = imageWidth / $(image).width();


        //count image height if not set by user
        if (isNaN(imageHeight)) {
            imageHeight = parseInt($(image).height() * multiplyWith);
        }

        //get/set image width based on image
        if (parseInt(imageHeight) > $(image).width()) {
            multiplyWith = $(image).height() / imageHeight;
        }
        else {
            multiplyWith = imageHeight / $(image).height();
        }

        //count image width if not set in code
        if (isNaN(imageWidth)) {
            imageWidth = $(image).width() / imageWidth;
        }

        var pictureContainer = $("<div class=\"pictureContainer\" />");

        //set image container width
        if (containerWidth == undefined) {
            $(pictureContainer).css("width", imageWidth);
        }
        else {
            $(pictureContainer).css("width", containerWidth);
        }

        //set image container height
        if (containerHeight == undefined) {
            $(pictureContainer).css("height", imageHeight);
        }
        else {
            $(pictureContainer).css("height", containerHeight);
        }

        //set image container margin right,bottom
        if (marginRight == undefined) {
            marginRight = 0;
        }
        else {
            $(pictureContainer).css("margin-right", marginRight);
        }

        if (marginBottom == undefined) {
            marginBottom = 0;
        }
        else {
            $(pictureContainer).css("margin-bottom", marginBottom);
        }

        $(image).css("width", imageWidth);
        $(image).css("height", imageHeight);

        $("#awFancyBox").append(pictureContainer);
        $(pictureContainer).append(link);
        $(link).append(image);

        if (imagesEachRow != undefined) {
            var v = (i + 1) % parseInt(imagesEachRow);
            if (v == 0) {
                $("#awFancyBox").append("<br clear=\"all\" />");
            }
        }
    });

    $("a[rel=picture_group]").fancybox({
        'transitionIn': 'none',
        'transitionOut': 'none',
        'titlePosition': 'over',
        'titleFormat': function (title, currentArray, currentIndex, currentOpts) {
            return '<span id="fancybox-title-over">Picture ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
        }
    });
    $("#awFancyBox").show();
    $("#loadingImages").hide();
});