var outer_window_height;
var dialog_state = "off";
var md_width  = 1;
var md_height = 1;
var md_page_depth = 1100;  // another part of the app should try and calculate this

function  get_element(element_name) {
return document.getElementById(element_name);
}

function  make_transparent(element_name) {
new Effect.Opacity(element_name, { from: 1.0, to: 0.7, duration: 0.5 });
}

//---------------------------------------------------------------------------------
// INITIALISE
//---------------------------------------------------------------------------------

function initialise_modal_dialog (){
//var v_body        = document.body;
//v_body.style.background = "#222222";

var new_outer_div                     = document.createElement('div');
new_outer_div.setAttribute('id', 'newouterdiv');
new_outer_div.setAttribute('onClick','dialog_off()');
new_outer_div.style.position          = "absolute";
new_outer_div.style.left              = "0px";
new_outer_div.style.top               = "0px";
new_outer_div.style.background        = "#222222";
new_outer_div.style.visibility        = "hidden";
new_outer_div.style.cursor            = "pointer";
document.body.appendChild(new_outer_div);
new Effect.Opacity('newouterdiv', { from: 0, to: 0, duration: 0 })

var new_modal_div                     = document.createElement('div');
new_modal_div.setAttribute('id', 'newmodaldiv');
new_modal_div.style.position          = "absolute";
new_modal_div.style.background        = "#ffffff";

new_modal_div.style.visibility        = "hidden";
document.body.appendChild(new_modal_div);
Effect.BlindUp('newmodaldiv', { duration: 0 });

var modal_content                     = document.createElement('div');
modal_content.setAttribute('id', 'modalcontent');
modal_content.style.position          = "absolute";
modal_content.style.overflow          = "visible";
modal_content.style.visibility        = "hidden";
modal_content.style.top               = "0px";
modal_content.style.left              = "0px";
new_modal_div.appendChild(modal_content);

var off_button = document.createElement('div');
off_button.setAttribute('id', 'offbutton');
off_button.style.position            = "absolute";
off_button.style.width               = "84px";
off_button.style.height              = "30px";
off_button.style.visibility          = "hidden";
off_button.innerHTML                 = '<img src="blue_engine_modal_dialog/images/close.jpg" alt="" onClick=dialog_off() style="cursor:pointer">';
new_modal_div.appendChild(off_button);
}

//---------------------------------------------------------------------------------
// RESIZE
//---------------------------------------------------------------------------------

function resize_modal_dialog (){
var window_width                      = document.documentElement.clientWidth;
var new_outer_div                     = get_element('newouterdiv');
var outer_window_width                = window_width;
if ( outer_window_width < md_width )
{
     outer_window_width = md_width;
}
new_outer_div.style.width             = outer_window_width + "px";
if (dialog_state == "on")
{
    new_outer_div.style.height = md_page_depth + "px";
}
}

//---------------------------------------------------------------------------------
// DIALOG ON
//---------------------------------------------------------------------------------
function reveal_outer_div () {
resize_modal_dialog ()
var new_outer_div                     = get_element('newouterdiv');
//new_outer_div.style.height            = md_page_depth + "px";
new_outer_div.style.visibility        = "visible";
new Effect.Opacity('newouterdiv', { from: 0.7, to: 0.9, duration: 0.3 });
}

function reveal_modal_div () {
  
// ScrollTop - distance the current top of physical screen is down the window
var ScrollTop = document.body.scrollTop;
if (ScrollTop == 0)
{
    if (window.pageYOffset)
        ScrollTop = window.pageYOffset;
    else
        ScrollTop = (document.body.parentElement) ? document.body.parentElement.scrollTop : 0;
}

var new_modal_div                     = get_element('newmodaldiv');
var new_outer_div                     = get_element('newouterdiv');
var off_button                        = get_element('offbutton');
var modal_content                     = get_element('modalcontent');
modal_content.style.visibility        = "visible";
new_modal_div.style.visibility        = "visible";

new_modal_div.style.top               = (ScrollTop + 30) + "px";
off_button.style.top                  = (md_height - 35) + "px";
off_button.style.left                 = (md_width  - 90) + "px";
off_button.style.visibility           = "visible";
Effect.BlindDown('newmodaldiv',{ duration: 0.3 });
}

function dialog_on (html){
dialog_state = "on";
var modal_content                     = get_element('modalcontent');
var new_modal_div                     = get_element('newmodaldiv');
var md_supplied_html                  = get_element(html);
modal_content.innerHTML               = md_supplied_html.innerHTML;

new_modal_div.style.border            = md_supplied_html.style.border;

md_height                             = md_supplied_html.style.height;
new_modal_div.style.height            = md_height;
modal_content.style.height            = md_height;
md_height = md_height.replace(/px/, "");

md_width                              = md_supplied_html.style.width;
new_modal_div.style.width             = md_width;
modal_content.style.width             = md_width;
md_width = md_width.replace(/px/, "");

var window_width                      = document.documentElement.clientWidth;
var outer_window_width                = window_width;
if ( outer_window_width < md_width )
{
     outer_window_width = md_width;
}
var left_displacement                 =  Math.round((outer_window_width - md_width)/2) + "px" ;
new_modal_div.style.left              = left_displacement;

reveal_outer_div()
setTimeout('reveal_modal_div()', 300)
}

//---------------------------------------------------------------------------------
// DIALOG OFF
//---------------------------------------------------------------------------------
function hide_new_outer_div () {
var new_outer_div                     = get_element('newouterdiv');
var new_modal_div                     = get_element('newmodaldiv');
new_outer_div.style.visibility        = "hidden";
new_modal_div.style.visibility        = "hidden";
new_outer_div.style.height            = "1px";
new Effect.Opacity('newouterdiv', { from: 0.9, to: 0.7, duration: 0.3 });
}

function dialog_off (){
dialog_state = "off";
Effect.BlindUp('newmodaldiv', { duration: 0.3 });
setTimeout('hide_new_outer_div()', 500)
}