var modalBg = '#hypeModal';
var modalStage = '#hypeModal-stage';
var modalClose = '#hypeModal-close';
var modalContent = '#hypeModal-content';

function openModal(id) {

    var modalUrl = '/DetalheCase.aspx?id=' + id;

    $('<div id="hypeModal" />')
        .appendTo('body')
        .click(function () {
            closeModal();
        })
        .animate({ opacity:'show' }, 'fast', function () {
            var boxModal = '';

            boxModal += '<div id="hypeModal-stage">';
            boxModal += '<a id="hypeModal-close" href="javascript:closeModal();" title="Fechar"></a>';
            boxModal += '<div id="hypeModal-content"><iframe src="' + modalUrl + '" frameborder="0" id="iframeModal" width="100%" height="100%" scrolling="no"></iframe></div>';
            boxModal += '</div>';

            $("body").append(boxModal);
            centerModal();
            
            $('#hypeModal-stage').fadeIn('medium', function () {});
        });
}

function closeModal() {

    $(modalStage).fadeOut('fast', function () {
        $(modalBg).fadeOut('fast', function () {
            $(modalBg).remove();
            $(modalStage).remove();
        })
    });
}

function centerModal(){
    var wh = $(window).height();
    var ww = $(window).width();
    var mh = $(modalStage).height();
    var mw = $(modalStage).width();

    var x = (ww - mw) / 2;
    var y = (wh - mh) / 2;
    var marginTop = 15;

    $(modalStage).css('top', (y + marginTop) +'px');
    $(modalStage).css('left', x +'px');
}