/*
Require: jQuery
*/

$(document).ready(function() {
    $(".ImagenContorno").each(function(i) {
        var margin_right = "20px";

        // Calculate the size of the frame based on the image's size
        var frameWidth = $(this).width() + 22;
        var frameHeight = $(this).height();
        var framePosition = "0px";

        // fix decorated image when having uls
        if ($(this).parent().siblings("ul").length > 0) {
            margin_right = "40px";
        }

        $(this).load(function() {
            // Get the position of the image
            framePosition = $(this).position();

            $(this).after(
                '<div class="photoc_left_top" style="width:' + frameWidth + 'px;position:absolute;top:' + (framePosition.top - 12) + 'px;left:' + (framePosition.left) + 'px">' +
                    '<div class="photoc_right_top">' +
                        '<div class="photoc_mid_top">' +
                            '<div class="photoc_left_bottom">' +
                                '<div class="photoc_right_bottom">' +
                                    '<div class="photoc_mid_bottom">' +
                                        '<div class="photoc_right_mid">' +
                                            '<div class="photoc_left_mid" style="height:' + frameHeight + 'px;">' +
                                            '</div>' +
                                        '</div>' +
                                    '</div>' +
                                '</div>' +
                            '</div>' +
                        '</div>' +
                    '</div>' +
                '</div>'
            );
        });

        var src = this.src;
        this.src = "";
        this.src = src; // Triggers onload if image is cached (see comments)

        $(this).css({ "margin": "9px " + margin_right + " 10px 20px" });
    });
});