$(document).ready(function () {
    $('.PageSidePictureItem').click(function (e) {
        e.preventDefault();
        ShowImage($(this).index());

        // transition effect     
        $('#ModalMask').fadeIn(500);
        $('#ModalMask').fadeTo("slow", 0.8);

        // transition effect
        $('#dialog').fadeIn(1000);
    });

    $('#ModalMask').click(function () {
        $(this).hide();
        $('.window').hide();
    });
});

function ShowImage(index) {
    var id = '#dialog';
    var image = '.PageSidePictureItem:eq(' + index + ')'
    var html = '';
    var lastImage = $('.PageSidePictureItem:last').index();

    // Mount the content
    html += '<img src="' + $(image).attr('rel') + '" border="0" />';
    html += '<div class="ModalCount">Foto ' + (index + 1) + ' de ' + (lastImage + 1) + '</div>';
    html += '<a class="ModalClose" href="#">[X] Fechar</a>';
    html += '<div class="ModalPrevious"></div>';
    html += '<div class="ModalNext"></div>';
    $(id).html(html);

    // Functions
    $('.ModalPrevious').click(function (e) {
        var prevIndex = index - 1;
        if (prevIndex < 0) { prevIndex = lastImage; }

        ShowImage(prevIndex);
    });

    $('.ModalNext').click(function (e) {
        var nextIndex = index + 1;
        if (nextIndex > lastImage) { nextIndex = 0; }

        ShowImage(nextIndex);
    });

    $('.ModalClose').click(function (e) {
        e.preventDefault();
        $('#ModalMask, .window').hide();
    });


    // Get the screen height and width
    var maskHeight = $(document).height();
    var maskWidth = $(window).width();

    // Set height and width to mask to fill up the whole screen
    $('#ModalMask').css({ 'width': maskWidth, 'height': maskHeight });

    // Get the window height and width
    var winH = $(window).height();
    var winW = $(window).width();

    // Set the popup window to center
    var topPos = 580;
    var leftPos = ((winW - $(id).width()) / 2) - 20;

    $(id).css('top', topPos);
    $(id).css('left', leftPos);
}