dojo.provide('ew.modal');
dojo.provide('ew.modal.bodyRestore');

ew.modal.close = function(id){
    var modal = dojo.byId(id);
    var overlay = dojo.byId(id + '_overlay');

    dojo.style(modal, 'display', 'none');
    dojo.style(overlay, 'display', 'none');

    dojo.style(document.body, 'overflow', ew.modal.bodyRestore.overflow);
}

ew.modal.show = function(id){
    var modal = dojo.byId(id);
    var overlay = dojo.byId(id + '_overlay');

    var scroll = (window.pageYOffset ? window.pageYOffset : document.scrollTop);
    if(!scroll){
        scroll = document.documentElement.scrollTop;
    }
    var innerHeight = (window.innerHeight ? window.innerHeight : document.documentElement.clientHeight);

    var overlayBox = dojo.marginBox(document.body);
    dojo.style(overlay, 'width', overlayBox.w + 20 + 'px');
    dojo.style(overlay, 'height', overlayBox.h + 20 + 'px');
    dojo.style(overlay, 'display', 'block');
    dojo.style(document.body, 'overflow', 'hidden');

    var width = dojo.style(modal, 'width');
    var height = dojo.style(modal, 'height');
    var left = Math.floor((overlayBox.w - width) / 2);
    var top = Math.floor((innerHeight - height) / 2) + scroll;
    
    dojo.style(modal, 'left', left + 'px');
    dojo.style(modal, 'top', top + 'px');
    dojo.style(modal, 'display', 'block');
}

dojo.addOnLoad(function(){
    //record the body overflow settings to restore them later
    ew.modal.bodyRestore.overflow = dojo.style(document.body, 'overflow');

    //fix the modal links
    dojo.query('a.ew_modal').onclick(function(e){
        dojo.stopEvent(e);
        var id = dojo.attr(this, 'ew_modal_id');
        ew.modal.show(id);
    });

    //format the modal window
    dojo.query('div.ew_modal').forEach(function(e){
        var width = dojo.style(e, 'width');
        var height = dojo.style(e, 'height');

        dojo.style(e, 'display', 'none');
        dojo.style(e, 'position', 'absolute');
        dojo.style(e, 'z-index', '300');
        dojo.style(e, 'border', '1px solid black');
        dojo.style(e, 'background', 'white');

        //get the content
        var content = e.innerHTML;
        e.innerHTML = '';

        //create the title
        var titleDiv = dojo.create('div');
        dojo.addClass(titleDiv, 'ew_modal_title');
        dojo.style(titleDiv, 'width', '100%');
        dojo.style(titleDiv, 'height', '20px');
        dojo.style(titleDiv, 'color', 'white');
        dojo.style(titleDiv, 'background', '#666666');
        dojo.place(titleDiv, e, 'first');

        var title = dojo.create('div');
        dojo.style(title, 'float', 'left');
        dojo.style(title, 'margin', '0 0 0 5px');
        title.innerHTML = dojo.attr(e, 'title');
        dojo.place(title, titleDiv, 'first');

        var close = dojo.create('div');
        dojo.style(close, 'float', 'right');
        dojo.style(close, 'margin', '0 5px 0 0');
        close.innerHTML = '<a style="color: white; font-weight: bold;" href="#" onclick="ew.modal.close(\'' + e.id + '\'); return false;">x</a>';
        dojo.place(close, titleDiv, 'last');

        //create the content
        var contentDiv = dojo.create('div');
        contentDiv.id = e.id + '_content';
        dojo.style(contentDiv, 'width', (width - 20) + 'px');
        dojo.style(contentDiv, 'height', (height - 40) + 'px');
        dojo.style(contentDiv, 'overflow', 'auto');
        dojo.style(contentDiv, 'padding', '10px');
        dojo.addClass(contentDiv, 'ew_modal_content');
        contentDiv.innerHTML = content;
        dojo.place(contentDiv, e, 'last');

        //style the modal
        dojo.style(e, 'position', 'absolute');
        dojo.style(e, 'z-index', '200');

        //create the overlay
        var overlay = dojo.create('div');
        
        overlay.id = e.id + '_overlay';
        dojo.addClass(overlay, 'ew_modal_overlay');
        dojo.style(overlay, 'display', 'none');
        dojo.style(overlay, 'background', '#ffffff');
        dojo.style(overlay, 'opacity', '0.7');
        dojo.style(overlay, 'position', 'absolute');
        dojo.style(overlay, 'top', '0px');
        dojo.style(overlay, 'left', '0px');
        dojo.style(overlay, 'z-index', '200');
        dojo.place(overlay, e, 'before');

        //look for the close button or link and assign the action
        dojo.query('.ew_modal_close', contentDiv).onclick(function(evt){
            dojo.stopEvent(evt);
            ew.modal.close(e.id);
        });
    });
});