﻿function DisplayModalWindow(content, dialogClosed)
{
    var background = new Element('div', { 'id': 'ModalBoxBackground', 'style': 'display:block;' });
    var modalContainer = new Element('div', { 'class': 'ModalContainer', 'style': 'display:none;' }).addClassName('ModalContainer');
    var modalClose = new Element('a', { 'href': 'javascript:void(0);', 'class': 'ModalClose' }).addClassName('ModalClose');
    var modalTop = new Element('div', { 'class': 'Modaltop' }).addClassName('Modaltop');
    var modalTopLeft = new Element('div', { 'class': 'ModalTopLeft' }).addClassName('ModalTopLeft').update('&nbsp;');
    var modalTopMiddle = new Element('div', { 'class': 'ModalTopMiddle' }).addClassName('ModalTopMiddle');
    var modalTopRight = new Element('div', { 'class': 'ModalTopRight' }).addClassName('ModalTopRight').update('&nbsp;');
    var modalCenter = new Element('div', { 'class': 'ModalCenter' }).addClassName('ModalCenter');
    var modalCenterRight = new Element('div', { 'class': 'ModalCenterRight' }).addClassName('ModalCenterRight');
    var modalContent = new Element('div', { 'class': 'ModalContent' }).addClassName('ModalContent');
    var modalBottom = new Element('div', { 'class': 'ModalBottom' }).addClassName('ModalBottom');
    var modalBottomLeft = new Element('div', { 'class': 'ModalBottomLeft' }).addClassName('ModalBottomLeft').update('&nbsp;');
    var modalBottomMiddle = new Element('div', { 'class': 'ModalBottomMiddle' }).addClassName('ModalBottomMiddle');
    var modalBottomRight = new Element('div', { 'class': 'ModalBottomRight' }).addClassName('ModalBottomRight').update('&nbsp;');
    var closeDelegate = function() { 
        modalContainer.fade({ duration:.3, afterFinish: function() { 
                content.remove();
                
                background.style.display = 'none'; 
                
                if(dialogClosed != null)
                {
                    dialogClosed(false); 
                }
            }
        })
    };
    
    modalContainer.insert(modalClose);
    modalContainer.insert(modalTop);
    modalContainer.insert(modalCenter);
    modalContainer.insert(modalBottom);
    
    modalTop.insert(modalTopLeft);
    modalTop.insert(modalTopMiddle);
    modalTop.insert(modalTopRight);
    
    modalCenter.insert(modalCenterRight);
    
    modalCenterRight.insert(modalContent);
    
    modalContent.update(content);
    modalContent.insert(new Element('div', { 'style': 'height:1px; font-size:1px; line-height:1px; display:block;' }));
    
    modalBottom.insert(modalBottomLeft);
    modalBottom.insert(modalBottomMiddle);
    modalBottom.insert(modalBottomRight);
    
    background.update(modalContainer);
    
    modalContainer.appear({ duration: .3 });
    
    modalClose.observe('click', closeDelegate);
    
    $$('body')[0].insert(background);
    
    return closeDelegate;
}