1 // Message box and visual effect system

     2 

     3 /**

     4  * Darkens the browser screen. This will make the entire page un-clickable except for any floating divs created after this is called. Restore with enlighten().

     5  * @param bool Controls whether the fade should be disabled or not. aclDisableTransitionFX will override this if set to true, and fades are never fired on IE.

     6  * @param int When specified, represents the numeric opacity value to set the fade layer to. 1-100.

     7  */

     8 

     9 var darkener_index = 0;

    10 

    11 function darken(nofade, opacVal)

    12 {

    13   if(IE)

    14     nofade = true;

    15   if ( !opacVal )

    16     opacVal = 70;

    17   darkener_index++;

    18   if(document.getElementById('specialLayer_darkener'))

    19   {

    20     if(nofade)

    21     {

    22       changeOpac(opacVal, 'specialLayer_darkener');

    23       document.getElementById('specialLayer_darkener').style.display = 'block';

    24       document.getElementById('specialLayer_darkener').myOpacVal = opacVal;

    25     }

    26     else

    27     {

    28       if ( document.getElementById('specialLayer_darkener').style.display != 'none' )

    29       {

    30         var currentOpac = document.getElementById('specialLayer_darkener').myOpacVal;

    31         opacity('specialLayer_darkener', currentOpac, opacVal, 1000);

    32         document.getElementById('specialLayer_darkener').myOpacVal = opacVal;

    33       }

    34       else

    35       {

    36         document.getElementById('specialLayer_darkener').style.display = 'block';

    37         document.getElementById('specialLayer_darkener').myOpacVal = opacVal;

    38         opacity('specialLayer_darkener', 0, opacVal, 1000);

    39       }

    40     }

    41   } else {

    42     w = getWidth();

    43     h = getHeight();

    44     var thediv = document.createElement('div');

    45     if(IE)

    46       thediv.style.position = 'absolute';

    47     else

    48       thediv.style.position = 'fixed';

    49     if ( IE )

    50     {

    51       var top = getScrollOffset();

    52       thediv.style.top = String(top) + 'px';

    53     }

    54     else

    55     {

    56       thediv.style.top = '0px';

    57     }

    58     thediv.style.left = '0px';

    59     thediv.style.opacity = '0';

    60     thediv.style.filter = 'alpha(opacity=0)';

    61     thediv.style.backgroundColor = '#000000';

    62     thediv.style.width =  '100%';

    63     thediv.style.height = '100%';

    64     thediv.zIndex = getHighestZ() + 5;

    65     thediv.id = 'specialLayer_darkener';

    66     thediv.myOpacVal = opacVal;

    67     if(nofade)

    68     {

    69       thediv.style.opacity = ( parseFloat(opacVal) / 100 );

    70       thediv.style.filter = 'alpha(opacity=' + opacVal + ')';

    71       body = document.getElementsByTagName('body');

    72       body = body[0];

    73       body.appendChild(thediv);

    74     } else {

    75       body = document.getElementsByTagName('body');

    76       body = body[0];

    77       body.appendChild(thediv);

    78       opacity('specialLayer_darkener', 0, opacVal, 1000);

    79     }

    80   }

    81 }

    82 

    83 /**

    84  * Un-darkens the screen and re-enables clicking of on-screen controls.

    85  * @param bool If true, disables the fade effect. Fades are always disabled if aclDisableTransitionFX is true and on IE.

    86  */

    87 

    88 function enlighten(nofade)

    89 {

    90   if(IE)

    91     nofade = true;

    92   darkener_index -= 1;

    93   if ( darkener_index > 0 )

    94     return false;

    95   if(document.getElementById('specialLayer_darkener'))

    96   {

    97     if(nofade)

    98     {

    99       document.getElementById('specialLayer_darkener').style.display = 'none';

   100     }

   101     else

   102     {

   103       var from = document.getElementById('specialLayer_darkener').myOpacVal;

   104       // console.info('Fading from ' + from);

   105       opacity('specialLayer_darkener', from, 0, 1000);

   106       setTimeout("document.getElementById('specialLayer_darkener').style.display = 'none';", 1000);

   107     }

   108   }

   109 }

   110 

   111 /**

   112  * The ultimate message box framework for Javascript

   113  * Syntax is (almost) identical to the MessageBox command in NSIS

   114  * @param int type - a bitfield consisting of the MB_* constants

   115  * @param string title - the blue text at the top of the window

   116  * @param string text - HTML for the body of the message box

   117  * Properties:

   118  *   onclick - an array of functions to be called on button click events

   119  *             NOTE: key names are to be strings, and they must be the value of the input, CaSe-SeNsItIvE

   120  *   onbeforeclick - same as onclick but called before the messagebox div is destroyed

   121  * Methods:

   122  *   destroy: kills the running message box

   123  * Example:

   124  *   var my_message = new MessageBox(MB_OK|MB_ICONSTOP, 'Error logging in', 'The username and/or password is incorrect. Please check the username and retype your password');

   125  *   my_message.onclick['OK'] = function() {

   126  *       document.getElementById('password').value = '';

   127  *     };

   128  * Deps:

   129  *   Modern browser that supports DOM

   130  *   darken() and enlighten() (above)

   131  *   opacity() - required for darken() and enlighten()

   132  *   MB_* constants are defined in enano-lib-basic.js

   133  */

   134 

   135 var mb_current_obj;

   136 var mb_previously_had_darkener = false;

   137 

   138 function MessageBox(type, title, message)

   139 {

   140   var y = getScrollOffset();

   141   

   142   // Prevent multiple instances

   143   if ( document.getElementById('messageBox') )

   144     return;

   145   

   146   if ( document.getElementById('specialLayer_darkener') )

   147     if ( document.getElementById('specialLayer_darkener').style.display == 'block' )

   148       mb_previously_had_darkener = true;

   149   if ( !mb_previously_had_darkener )

   150     darken(true);

   151   if ( aclDisableTransitionFX )

   152   {

   153     document.getElementById('specialLayer_darkener').style.zIndex = '5';

   154   }

   155   var master_div = document.createElement('div');

   156   master_div.style.zIndex = String(getHighestZ() + 5);

   157   var mydiv = document.createElement('div');

   158   mydiv.style.height = '200px';

   159   w = getWidth();

   160   h = getHeight();

   161   if ( aclDisableTransitionFX )

   162   {

   163     master_div.style.left = ((w / 2) - 200)+'px';

   164     master_div.style.top = ((h / 2) + y - 120)+'px';

   165     master_div.style.position = 'absolute';

   166   }

   167   else

   168   {

   169     master_div.style.top = '-10000px';

   170     master_div.style.position = ( IE ) ? 'absolute' : 'fixed';

   171   }

   172   z = ( aclDisableTransitionFX ) ? document.getElementById('specialLayer_darkener').style.zIndex : getHighestZ();

   173   mydiv.style.backgroundColor = '#FFFFFF';

   174   mydiv.style.padding = '10px';

   175   mydiv.style.marginBottom = '1px';

   176   mydiv.id = 'messageBox';

   177   mydiv.style.overflow = 'auto';

   178   

   179   var buttondiv = document.createElement('div');

   180   

   181   mydiv.style.width = '400px';

   182   buttondiv.style.width = '400px';

   183   

   184   w = getWidth();

   185   h = getHeight();

   186   if ( aclDisableTransitionFX )

   187   {

   188     //buttondiv.style.left = ((w / 2) - 200)+'px';

   189     //buttondiv.style.top = ((h / 2) + y + 101)+'px';

   190   }

   191   //buttondiv.style.position = ( IE ) ? 'absolute' : 'fixed';

   192   z = ( aclDisableTransitionFX ) ? document.getElementById('specialLayer_darkener').style.zIndex : getHighestZ();

   193   buttondiv.style.backgroundColor = '#C0C0C0';

   194   buttondiv.style.padding = '10px';

   195   buttondiv.style.textAlign = 'right';

   196   buttondiv.style.verticalAlign = 'middle';

   197   buttondiv.id = 'messageBoxButtons';

   198   

   199   this.clickHandler = function() { messagebox_click(this, mb_current_obj); };

   200   

   201   if( ( type & MB_ICONINFORMATION || type & MB_ICONSTOP || type & MB_ICONQUESTION || type & MB_ICONEXCLAMATION ) && !(type & MB_ICONLOCK) )

   202   {

   203     mydiv.style.paddingLeft = '50px';

   204     mydiv.style.width = '360px';

   205     mydiv.style.backgroundRepeat = 'no-repeat';

   206     mydiv.style.backgroundPosition = '8px 8px';

   207   }

   208   else if ( type & MB_ICONLOCK )

   209   {

   210     mydiv.style.paddingLeft = '50px';

   211     mydiv.style.width = '360px';

   212     mydiv.style.backgroundRepeat = 'no-repeat';

   213   }

   214   

   215   if(type & MB_ICONINFORMATION)

   216   {

   217     mydiv.style.backgroundImage = 'url(\''+scriptPath+'/images/info.png\')';

   218   }

   219   

   220   if(type & MB_ICONQUESTION)

   221   {

   222     mydiv.style.backgroundImage = 'url(\''+scriptPath+'/images/question.png\')';

   223   }

   224   

   225   if(type & MB_ICONSTOP)

   226   {

   227     mydiv.style.backgroundImage = 'url(\''+scriptPath+'/images/error.png\')';

   228   }

   229   

   230   if(type & MB_ICONEXCLAMATION)

   231   {

   232     mydiv.style.backgroundImage = 'url(\''+scriptPath+'/images/warning.png\')';

   233   }

   234   

   235   if(type & MB_ICONLOCK)

   236   {

   237     mydiv.style.backgroundImage = 'url(\''+scriptPath+'/images/lock.png\')';

   238   }

   239   

   240   if(type & MB_OK)

   241   {

   242     btn = document.createElement('input');

   243     btn.type = 'button';

   244     btn.value = $lang.get('etc_ok');

   245     btn._GenericName = 'OK';

   246     btn.onclick = this.clickHandler;

   247     btn.style.margin = '0 3px';

   248     buttondiv.appendChild(btn);

   249   }

   250   

   251   if(type & MB_OKCANCEL)

   252   {

   253     btn = document.createElement('input');

   254     btn.type = 'button';

   255     btn.value = $lang.get('etc_ok');

   256     btn._GenericName = 'OK';

   257     btn.onclick = this.clickHandler;

   258     btn.style.margin = '0 3px';

   259     buttondiv.appendChild(btn);

   260     

   261     btn = document.createElement('input');

   262     btn.type = 'button';

   263     btn.value = $lang.get('etc_cancel');

   264     btn._GenericName = 'Cancel';

   265     btn.onclick = this.clickHandler;

   266     btn.style.margin = '0 3px';

   267     buttondiv.appendChild(btn);

   268   }

   269   

   270   if(type & MB_YESNO)

   271   {

   272     btn = document.createElement('input');

   273     btn.type = 'button';

   274     btn.value = $lang.get('etc_yes');

   275     btn._GenericName = 'Yes';

   276     btn.onclick = this.clickHandler;

   277     btn.style.margin = '0 3px';

   278     buttondiv.appendChild(btn);

   279     

   280     btn = document.createElement('input');

   281     btn.type = 'button';

   282     btn.value = $lang.get('etc_no');

   283     btn._GenericName = 'No';

   284     btn.onclick = this.clickHandler;

   285     btn.style.margin = '0 3px';

   286     buttondiv.appendChild(btn);

   287   }

   288   

   289   if(type & MB_YESNOCANCEL)

   290   {

   291     btn = document.createElement('input');

   292     btn.type = 'button';

   293     btn.value = $lang.get('etc_yes');

   294     btn._GenericName = 'Yes';

   295     btn.onclick = this.clickHandler;

   296     btn.style.margin = '0 3px';

   297     buttondiv.appendChild(btn);

   298     

   299     btn = document.createElement('input');

   300     btn.type = 'button';

   301     btn.value = $lang.get('etc_no');

   302     btn._GenericName = 'No';

   303     btn.onclick = this.clickHandler;

   304     btn.style.margin = '0 3px';

   305     buttondiv.appendChild(btn);

   306     

   307     btn = document.createElement('input');

   308     btn.type = 'button';

   309     btn.value = $lang.get('etc_cancel');

   310     btn._GenericName = 'Cancel';

   311     btn.onclick = this.clickHandler;

   312     btn.style.margin = '0 3px';

   313     buttondiv.appendChild(btn);

   314   }

   315   

   316   heading = document.createElement('h2');

   317   heading.innerHTML = title;

   318   heading.style.color = '#50A0D0';

   319   heading.style.fontFamily = 'trebuchet ms, verdana, arial, helvetica, sans-serif';

   320   heading.style.fontSize = '12pt';

   321   heading.style.fontWeight = 'lighter';

   322   heading.style.textTransform = 'lowercase';

   323   heading.style.marginTop = '0';

   324   mydiv.appendChild(heading);

   325   

   326   var text = document.createElement('div');

   327   text.innerHTML = String(message);

   328   this.text_area = text;

   329   mydiv.appendChild(text);

   330   

   331   this.updateContent = function(text)

   332     {

   333       this.text_area.innerHTML = text;

   334     };

   335     

   336   this.destroy = function()

   337     {

   338       var mbdiv = document.getElementById('messageBox');

   339       mbdiv.parentNode.removeChild(mbdiv.nextSibling);

   340       mbdiv.parentNode.removeChild(mbdiv);

   341       if ( !mb_previously_had_darkener )

   342         enlighten(true);

   343     };

   344   

   345   //domObjChangeOpac(0, mydiv);

   346   //domObjChangeOpac(0, master_div);

   347   

   348   body = document.getElementsByTagName('body');

   349   body = body[0];

   350   master_div.appendChild(mydiv);

   351   master_div.appendChild(buttondiv);

   352   

   353   body.appendChild(master_div);

   354   

   355   if ( !aclDisableTransitionFX )

   356     setTimeout('mb_runFlyIn();', 100);

   357   

   358   this.onclick = new Array();

   359   this.onbeforeclick = new Array();

   360   mb_current_obj = this;

   361 }

   362 

   363 var messagebox = MessageBox;

   364 

   365 function mb_runFlyIn()

   366 {

   367   var mydiv = document.getElementById('messageBox');

   368   var maindiv = mydiv.parentNode;

   369   fly_in_top(maindiv, true, false);

   370 }

   371 

   372 function messagebox_click(obj, mb)

   373 {

   374   val = ( typeof ( obj._GenericName ) == 'string' ) ? obj._GenericName : obj.value;

   375   if(typeof mb.onbeforeclick[val] == 'function')

   376   {

   377     var o = mb.onbeforeclick[val];

   378     var resp = o();

   379     if ( resp )

   380       return false;

   381     o = false;

   382   }

   383   

   384   var mydiv = document.getElementById('messageBox');

   385   var maindiv = mydiv.parentNode;

   386   

   387   if ( aclDisableTransitionFX )

   388   {

   389     var mbdiv = document.getElementById('messageBox');

   390     mbdiv.parentNode.removeChild(mbdiv.nextSibling);

   391     mbdiv.parentNode.removeChild(mbdiv);

   392     if ( !mb_previously_had_darkener )

   393       enlighten(true);

   394   }

   395   else

   396   {

   397     var to = fly_out_top(maindiv, true, false);

   398     setTimeout("var mbdiv = document.getElementById('messageBox'); mbdiv.parentNode.removeChild(mbdiv.nextSibling); mbdiv.parentNode.removeChild(mbdiv); if ( !mb_previously_had_darkener ) enlighten(true);", to);

   399   }

   400   if(typeof mb.onclick[val] == 'function')

   401   {

   402     o = mb.onclick[val];

   403     o();

   404     o = false;

   405   }

   406 }

   407 

   408 function testMessageBox()

   409 {

   410   mb = new MessageBox(MB_OKCANCEL|MB_ICONINFORMATION, 'Javascripted dynamic message boxes', 'This is soooooo coool, now if only document.createElement() worked in IE!<br />this is some more text<br /><br /><br /><br /><br />this is some more text<br /><br /><br /><br /><br />this is some more text<br /><br /><br /><br /><br />this is some more text<br /><br /><br /><br /><br />this is some more text<br /><br /><br /><br /><br />this is some more text<br /><br /><br /><br /><br />this is some more text<br /><br /><br /><br /><br />this is some more text');

   411   mb.onclick['OK'] = function()

   412     {

   413       alert('You clicked OK!');

   414     }

   415   mb.onbeforeclick['Cancel'] = function()

   416     {

   417       alert('You clicked Cancel!');

   418     }

   419 }

   420 

   421 /**

   422  * The miniPrompt function, for creating small prompts and dialogs. The window will be flown in and the window darkened with opac=0.4.

   423  * @param function Will be passed an HTMLElement that is the body of the prompt window; the function can do with this as it pleases

   424  */

   425 

   426 function miniPrompt(call_on_create)

   427 {

   428   if ( document.getElementById('specialLayer_darkener') )

   429   {

   430     if ( document.getElementById('specialLayer_darkener').style.display != 'none' )

   431     {

   432       var opac = parseFloat(document.getElementById('specialLayer_darkener').style.opacity);

   433       opac = opac * 100;

   434       darken(aclDisableTransitionFX, opac);

   435     }

   436     else

   437     {

   438       darken(aclDisableTransitionFX, 40);

   439     }

   440   }

   441   else

   442   {

   443     darken(aclDisableTransitionFX, 40);

   444   }

   445   

   446   var wrapper = document.createElement('div');

   447   wrapper.className = 'miniprompt';

   448   var top = document.createElement('div');

   449   top.className = 'mp-top';

   450   var body = document.createElement('div');

   451   body.className = 'mp-body';

   452   var bottom = document.createElement('div');

   453   bottom.className = 'mp-bottom';

   454   if ( typeof(call_on_create) == 'function' )

   455   {

   456     call_on_create(body);

   457   }

   458   wrapper.appendChild(top);

   459   wrapper.appendChild(body);

   460   wrapper.appendChild(bottom);

   461   var left = ( getWidth() / 2 ) - ( 388 / 2 );

   462   wrapper.style.left = left + 'px';

   463   var top = getScrollOffset() - 27;

   464   wrapper.style.top = top + 'px';

   465   domObjChangeOpac(0, wrapper);

   466   var realbody = document.getElementsByTagName('body')[0];

   467   realbody.appendChild(wrapper);

   468   

   469   if ( aclDisableTransitionFX )

   470   {

   471     domObjChangeOpac(100, wrapper);

   472   }

   473   else

   474   {

   475     fly_in_top(wrapper, true, true);

   476     

   477     setTimeout(function()

   478       {

   479         domObjChangeOpac(100, wrapper);

   480       }, 40);

   481   }

   482 }

   483 

   484 /**

   485  * For a given element, loops through the element and all of its ancestors looking for a miniPrompt div, and returns it. Returns false on failure.

   486  * @param object:HTMLElement Child node to scan

   487  * @return object

   488  */

   489 

   490 function miniPromptGetParent(obj)

   491 {

   492   while ( true )

   493   {

   494     // prevent infinite loops

   495     if ( !obj || obj.tagName == 'BODY' )

   496       return false;

   497     

   498     if ( $dynano(obj).hasClass('miniprompt') )

   499     {

   500       return obj;

   501     }

   502     obj = obj.parentNode;

   503   }

   504   return false;

   505 }

   506 

   507 /**

   508  * Destroys the first miniPrompt div encountered by recursively checking all parent nodes.

   509  * Usage: <a href="javascript:miniPromptDestroy(this);">click</a>

   510  * @param object:HTMLElement a child of the div.miniprompt

   511  * @param bool If true, does not call enlighten().

   512  */

   513 

   514 function miniPromptDestroy(obj, nofade)

   515 {

   516   obj = miniPromptGetParent(obj);

   517   if ( !obj )

   518     return false;

   519   

   520   // found it

   521   var parent = obj.parentNode;

   522   if ( !nofade )

   523     enlighten(aclDisableTransitionFX);

   524   if ( aclDisableTransitionFX )

   525   {

   526     parent.removeChild(obj);

   527   }

   528   else

   529   {

   530     var timeout = fly_out_top(obj, true, true);

   531     setTimeout(function()

   532       {

   533         parent.removeChild(obj);

   534       }, timeout);

   535   }

   536 }

   537 

   538 /**

   539  * Simple test case

   540  */

   541 

   542 function miniPromptTest()

   543 {

   544   miniPrompt(function(div) { div.innerHTML = 'hello world! <a href="#" onclick="miniPromptDestroy(this); return false;">destroy me</a>'; });

   545 }

   546 

   547 /**

   548  * Message box system for miniPrompts. Less customization but easier to scale than the regular messageBox framework.

   549  * @example

   550  <code>

   551  miniPromptMessage({

   552    title: 'Delete page',

   553    message: 'Do you really want to delete this page? This is reversible unless you clear the page logs.',

   554    buttons: [

   555      {

   556        text: 'Delete',

   557        color: 'red',

   558        style: {

   559          fontWeight: 'bold'

   560        },

   561        onclick: function() {

   562          ajaxDeletePage();

   563          miniPromptDestroy(this);

   564        }

   565      },

   566      {

   567        text: 'cancel',

   568        onclick: function() {

   569          miniPromptDestroy(this);

   570        }

   571      }

   572    ]

   573  });

   574  </code>

   575  */

   576 

   577 function miniPromptMessage(parms)

   578 {

   579   if ( !parms.title || !parms.message || !parms.buttons )

   580     return false;

   581   

   582   return miniPrompt(function(parent)

   583     {

   584       try

   585       {

   586         var h3 = document.createElement('h3');

   587         h3.appendChild(document.createTextNode(parms.title));

   588         var body = document.createElement('p');

   589         var message = parms.message.split(unescape('%0A'));

   590         for ( var i = 0; i < message.length; i++ )

   591         {

   592           body.appendChild(document.createTextNode(message[i]));

   593           if ( i + 1 < message.length )

   594             body.appendChild(document.createElement('br'));

   595         }

   596         

   597         parent.style.textAlign = 'center';

   598         

   599         parent.appendChild(h3);

   600         parent.appendChild(body);

   601         parent.appendChild(document.createElement('br'));

   602         

   603         // construct buttons

   604         for ( var i = 0; i < parms.buttons.length; i++ )

   605         {

   606           var button = parms.buttons[i];

   607           button.input = document.createElement('a');

   608           button.input.href = '#';

   609           button.input.clickAction = button.onclick;

   610           button.input.className = 'abutton';

   611           if ( button.color )

   612           {

   613             button.input.className += ' abutton_' + button.color;

   614           }

   615           button.input.appendChild(document.createTextNode(button.text));

   616           if ( button.style )

   617           {

   618             for ( var j in button.style )

   619             {

   620               button.input.style[j] = button.style[j];

   621             }

   622           }

   623           button.input.onclick = function(e)

   624           {

   625             try

   626             {

   627               this.clickAction(e);

   628             }

   629             catch(e)

   630             {

   631               console.error(e);

   632             }

   633             return false;

   634           }

   635           parent.appendChild(button.input);

   636         }

   637         if ( parms.buttons[0] )

   638         {

   639           setTimeout(function()

   640             {

   641               parms.buttons[0].input.focus();

   642             }, 300);

   643         }

   644       }

   645       catch ( e )

   646       {

   647         console.error(e);

   648       }

   649     });

   650 }

   651 

   652 function testMPMessageBox()

   653 {

   654   miniPromptMessage({

   655     title: 'The Game of LIFE question #73',

   656     message: 'You just got your girlfriend pregnant. Please select an option:',

   657     buttons: [

   658       {

   659         text: 'Abort',

   660         color: 'red',

   661         style: {

   662           fontWeight: 'bold'

   663         },

   664         onclick: function() {

   665           miniPromptDestroy(this);

   666         }

   667       },

   668       {

   669         text: 'Retry',

   670         color: 'blue',

   671         onclick: function() {

   672           miniPromptDestroy(this);

   673         }

   674       },

   675       {

   676         text: 'Ignore',

   677         color: 'green',

   678         onclick: function() {

   679           miniPromptDestroy(this);

   680         }

   681       }

   682     ]

   683   });

   684 }

   685 

   686 // Function to fade classes info-box, warning-box, error-box, etc.

   687 

   688 function fadeInfoBoxes()

   689 {

   690   var divs = new Array();

   691   d = document.getElementsByTagName('div');

   692   j = 0;

   693   for(var i in d)

   694   {

   695     if ( !d[i] )

   696       continue;

   697     if ( !d[i].tagName )

   698       continue;

   699     if(d[i].className=='info-box' || d[i].className=='error-box' || d[i].className=='warning-box' || d[i].className=='question-box')

   700     {

   701       divs[j] = d[i];

   702       j++;

   703     }

   704   }

   705   if(divs.length < 1) return;

   706   for(i in divs)

   707   {

   708     if(!divs[i].id) divs[i].id = 'autofade_'+Math.floor(Math.random() * 100000);

   709     switch(divs[i].className)

   710     {

   711       case 'info-box':

   712       default:

   713         from = '#3333FF';

   714         break;

   715       case 'error-box':

   716         from = '#FF3333';

   717         break;

   718       case 'warning-box':

   719         from = '#FFFF33';

   720         break;

   721       case 'question-box':

   722         from = '#33FF33';

   723         break;

   724     }

   725     Fat.fade_element(divs[i].id,30,2000,from,Fat.get_bgcolor(divs[i].id));

   726   }

   727 }

   728 

   729 // Alpha fades

   730 

   731 function opacity(id, opacStart, opacEnd, millisec) {

   732     //speed for each frame

   733     var speed = Math.round(millisec / 100);

   734     var timer = 0;

   735 

   736     //determine the direction for the blending, if start and end are the same nothing happens

   737     if(opacStart > opacEnd) {

   738         for(i = opacStart; i >= opacEnd; i--) {

   739             setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));

   740             timer++;

   741         }

   742     } else if(opacStart < opacEnd) {

   743         for(i = opacStart; i <= opacEnd; i++)

   744             {

   745             setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));

   746             timer++;

   747         }

   748     }

   749 }

   750 

   751 var opacityDOMCache = new Object();

   752 function domOpacity(obj, opacStart, opacEnd, millisec) {

   753     //speed for each frame

   754     var speed = Math.round(millisec / 100);

   755     var timer = 0;

   756     

   757     // unique ID for this animation

   758     var uniqid = Math.floor(Math.random() * 1000000);

   759     opacityDOMCache[uniqid] = obj;

   760 

   761     //determine the direction for the blending, if start and end are the same nothing happens

   762     if(opacStart > opacEnd) {

   763         for(i = opacStart; i >= opacEnd; i--) {

   764             setTimeout("var obj = opacityDOMCache["+uniqid+"]; domObjChangeOpac(" + i + ",obj)",(timer * speed));

   765             timer++;

   766         }

   767     } else if(opacStart < opacEnd) {

   768         for(i = opacStart; i <= opacEnd; i++)

   769             {

   770             setTimeout("var obj = opacityDOMCache["+uniqid+"]; domObjChangeOpac(" + i + ",obj)",(timer * speed));

   771             timer++;

   772         }

   773     }

   774     setTimeout("delete(opacityDOMCache["+uniqid+"]);",(timer * speed));

   775 }

   776 

   777 //change the opacity for different browsers

   778 function changeOpac(opacity, id) {

   779     var object = document.getElementById(id).style;

   780     object.opacity = (opacity / 100);

   781     object.MozOpacity = (opacity / 100);

   782     object.KhtmlOpacity = (opacity / 100);

   783     object.filter = "alpha(opacity=" + opacity + ")";

   784 }

   785 

   786 function mb_logout()

   787 {

   788   var mb = new MessageBox(MB_YESNO|MB_ICONQUESTION, $lang.get('user_logout_confirm_title'), $lang.get('user_logout_confirm_body'));

   789   mb.onclick['Yes'] = function()

   790     {

   791       window.location = makeUrlNS('Special', 'Logout/' + csrf_token + '/' + title);

   792     }

   793 }

   794 

   795 function whiteOutElement(el)

   796 {

   797   var top = $(el).Top();

   798   var left = $(el).Left();

   799   var width = $(el).Width();

   800   var height = $(el).Height();

   801   

   802   var blackout = document.createElement('div');

   803   blackout.style.position = 'absolute';

   804   blackout.style.top = top + 'px';

   805   blackout.style.left = left + 'px';

   806   blackout.style.width = width + 'px';

   807   blackout.style.height = height + 'px';

   808   

   809   blackout.style.backgroundColor = '#FFFFFF';

   810   domObjChangeOpac(60, blackout);

   811   blackout.style.backgroundImage = 'url(' + scriptPath + '/includes/clientside/tinymce/themes/advanced/skins/default/img/progress.gif)';

   812   blackout.style.backgroundPosition = 'center center';

   813   blackout.style.backgroundRepeat = 'no-repeat';

   814   blackout.style.zIndex = getHighestZ() + 2;

   815   

   816   var body = document.getElementsByTagName('body')[0];

   817   body.appendChild(blackout);

   818   

   819   return blackout;

   820 }

   821