var modal_callback = null;
// the modal_callback should return TRUE if the supplied data is correct, FALSE otherwise

function showModalInit(callback){
   $('modal_mask').style.height = document.body.scrollHeight + "px";      
   $('modal_mask').style.width = document.body.scrollWidth + "px";
   $('modal_mask').style.zIndex = 9999997;  //9999998 is the modal dialogue
   $('modal_mask').className = "modal_mask";

   $('modal').style.height = document.body.scrollHeight + "px";      
   $('modal').style.width = document.body.scrollWidth + "px";
   $('modal').style.zIndex = 9999998;  //9999999 is the blocker
   modal_callback = callback;
}

function hideModal(){
   $('modal').style.zIndex = -1;
   $('modal').style.cursor = '';
   $('modal').innerHTML = '';
   
   $('modal_mask').style.zIndex = -1;
   $('modal_mask').className = '';
   modal_callback = null;
}


// modals v.2
var modal_callbacks = new Array();
var modals = 0;

function createModalLayer(callback){
   modals++;                           // increasing the layer
   modal_callbacks[modals] = callback; // setting the callback for this layer
   var modalmask_name = 'modalmask_'+modals;   // new MASK DIV name
   var modal_name = 'modal_'+modals;           // new MODAL DIV name
   
   // create the mask layer
   $('modal').innerHTML += "<div id='"+modalmask_name+"' style='position:absolute;left:0px;top:0px'></div>";
   
   $(modalmask_name).style.height = document.body.scrollHeight + "px";      
   $(modalmask_name).style.width = document.body.scrollWidth + "px";
   
   // create the modal(content) layer
   $('modal').innerHTML += "<div id='"+modal_name+"' style='position:absolute;left:0px;top:0px'></div>";
   
   $(modal_name).style.height = document.body.scrollHeight + "px";      
   $(modal_name).style.width = document.body.scrollWidth + "px";   
   return modals;
}
function removeTopModalLayer(){
   if(modals == 0){ return }
   
   var modalmask_name = 'modalmask_'+modals;   // new MASK DIV name
   var modal_name = 'modal_'+modals;           // new MODAL DIV name
   
   // create the mask layer
   $('modal').removeChild($(modalmask_name));
   $('modal').removeChild($(modal_name));
   modal_callbacks[modals] = null;
   modals--;
   if(modals == 0){ hideModal() }   
}

   function createModalFrame(p){
      var ww = p.width || 360;
      var hh = p.height || 200;
      var ll = p.left || 200;
      var bgc = p.bgc || "#a00";
      var brdc = p.brdc || "#f00";
      var ss = p.scrolls || "hidden";
      var ttl = p.title || "";
      var tt = p.top || 50;
      var pp = p.parent;
      var bb = p.brd || 5;
      var bs = p.brds || "solid";
      var cp = p.pcont || false;
       
      var sh = document.createElement('div');
      sh.style.width = ((ww+20+bb*2)*1)+"px";
      sh.style.height = ((hh+20+bb*2)*1)+"px";
      sh.style.left = (ll-10)+"px";
      sh.style.top = (tt-10)+"px";
      sh.style.position = "absolute";
      sh.style.opacity = 0.3;
      sh.style.filter = "Alpha(opacity=30)";
      sh.innerHTML = "<img src='icons/c/tl.gif' style='position:absolute;left:0px;top:0px'/>"+
                     "<img src='./icons/c/tr.gif' style='position:absolute;right:0px;top:0px'/>"+
                     "<img src='./icons/c/bl.gif' style='position:absolute;left:0px;bottom:0px'/>"+
                     "<img src='./icons/c/br.gif' style='position:absolute;right:0px;bottom:0px'/>"+
                     "<img src='./icons/c/pix.gif' style='position:absolute;left:10px;top:0px;width:"+(ww+bb*2)*1+"px;height:"+(hh+20+bb*2)*1+"px'/>"+
                     "<img src='./icons/c/pix.gif' style='position:absolute;left:0px;top:10px;width:"+(ww+20+bb*2)*1+"px;height:"+(hh+bb*2)*1+"px'/>";
      var wp = document.createElement('div');
      if(cp){ var pcont = $(pp).innerHTML; $(pp).innerHTML = ''; }
      $(pp).appendChild(sh);
      $(pp).appendChild(wp);
      wp.style.width = ww+"px";
      wp.style.height = hh+"px";
      wp.style.left = ll+"px";
      wp.style.top = tt+"px";
      wp.style.position = "absolute";
      wp.className = "modal";
      wp.style.borderColor = brdc;
      wp.style.borderWidth = bb+"px";
      wp.style.borderStyle = bs;
	   wp.innerHTML = 
			"<img  src='./icons/x.png' title='close' class='png' style='cursor:pointer;float:right' " +
			"onclick='removeTopModalLayer()' " + 
         "onmouseover='this.src=\"./icons/x_red.png\"' " + 
         "onmouseout='this.src=\"./icons/x.png\"' />" + 
			"<h4 style='background-color:"+bgc+"'>"+ttl+"</h4>";
      var c = document.createElement('div');
      c.style.width = (ww-10) + "px";
      c.style.height = (hh-30) + "px";
      c.style.padding = "5px";
      c.style.position = "relative";
      c.style.overflowY = ss;
      c.className = "content";
      wp.appendChild(c);
      if(cp){ c.innerHTML = pcont }
      return c;
   }

function showModalOCReg(callback){
   __api("html.modals","f=fbOCReg",function(r){
                                          showModalInit(callback);
                                          var divname = 'modal_' + createModalLayer(callback);
                                          parseScripts(r,divname) 
   })
}
function showModal_setRead(bid,callback){
   __api("html.modals","f=setRead&b="+bid,function(r){
                                          showModalInit(callback);
                                          var divname = 'modal_' + createModalLayer(callback);
                                          parseScripts(r,divname) 
   })
}

function showModalTest(callback){
   __api("html.modals","f=test",function(r){
                                          showModalInit(callback);
                                          var divname = 'modal_' + createModalLayer(callback);
                                          parseScripts(r,divname) 
   })
}
function showModalAlert(cont,callback){
	// callback is usually null, as this is only an alert
	showModalInit(callback);
	var divname='modal_' + createModalLayer(callback);
   
	var mw_div = document.createElement('div'); // mw = modal wrapper
	mw_div.style.position = 'absolute';
	mw_div.style.left = '200px';
   mw_div.style.width = '360px';
   mw_div.style.height = '200px';
	mw_div.className = 'modal';
	mw_div.innerHTML = 
			"<img  src='/icons/x.png' title='close' class='png' style='cursor:pointer;float:right' " +
			"onclick='removeTopModalLayer()' " + 
         "onmouseover='this.src=\"/icons/x_red.png\"' " + 
         "onmouseout='this.src=\"/icons/x.png\"' />" + 
			"<h4>System message</h4>";
	var mc_div = document.createElement('div'); // mc = modal content
	mc_div.className = 'content';
	mc_div.style.width = '350px';
	mc_div.style.height = '170px';
	mc_div.style.position = 'relative';
	mc_div.style.padding = '5px';
	mw_div.appendChild(mc_div);

   var modpu_height = 210;
   if(userFrom == 2){
      mw_div.style.top = "50px";
   }else{
      mw_div.style.top = ( scrollTop()*1 + ( windowHeight() - modpu_height ) / 2 )+"px";  // center the modal vertically
   }
   
	
	
	cont = "<div style='margin:auto;text-align:center'><p style='padding:5px;margin:5px;font-size:13px'>"+cont+"</p><input type='button' value='OK' onclick='if(modal_callbacks[modals]!=null){if(modal_callbacks[modals]()){removeTopModalLayer()}}else{removeTopModalLayer()}'/></div>";
	mc_div.innerHTML = cont;
	$(divname).appendChild(mw_div);
	//parseScripts(cont,divname);
}