1 // Message box system

     2 

     3 function darken(nofade)

     4 {

     5   if(IE)

     6     nofade = true;

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

     8   {

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

    10     if(nofade)

    11     {

    12       document.getElementById('specialLayer_darkener').style.opacity = '0.7';

    13       document.getElementById('specialLayer_darkener').style.filter = 'alpha(opacity=70)';

    14     }

    15     else

    16     {

    17       opacity('specialLayer_darkener', 0, 70, 1000);

    18     }

    19   } else {

    20     w = getWidth();

    21     h = getHeight();

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

    23     if(IE)

    24       thediv.style.position = 'absolute';

    25     else

    26       thediv.style.position = 'fixed';

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

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

    29     thediv.style.opacity = '0';

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

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

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

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

    34     thediv.zIndex = getHighestZ() + 5;

    35     thediv.id = 'specialLayer_darkener';

    36     if(nofade)

    37     {

    38       thediv.style.opacity = '0.7';

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

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

    41       body = body[0];

    42       body.appendChild(thediv);

    43     } else {

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

    45       body = body[0];

    46       body.appendChild(thediv);

    47       opacity('specialLayer_darkener', 0, 70, 1000);

    48     }

    49   }

    50 }

    51 

    52 function enlighten(nofade)

    53 {

    54   if(IE)

    55     nofade = true;

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

    57   {

    58     if(nofade)

    59     {

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

    61     }

    62     opacity('specialLayer_darkener', 70, 0, 1000);

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

    64   }

    65 }

    66 

    67 /**

    68  * The ultimate message box framework for Javascript

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

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

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

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

    73  * Properties:

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

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

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

    77  * Example:

    78  *   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');

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

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

    81  *     };

    82  * Deps:

    83  *   Modern browser that supports DOM

    84  *   darken() and enlighten() (above)

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

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

    87  */

    88 

    89 var mb_current_obj;

    90 

    91 function messagebox(type, title, message)

    92 {

    93   var y = getScrollOffset();

    94   if(document.getElementById('messageBox')) return;

    95   darken(true);

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

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

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

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

   100   w = getWidth();

   101   h = getHeight();

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

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

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

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

   106   z = getHighestZ(); // document.getElementById('specialLayer_darkener').style.zIndex;

   107   mydiv.style.zIndex = parseInt(z) + 1;

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

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

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

   111   mydiv.id = 'messageBox';

   112   mydiv.style.overflow = 'auto';

   113   

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

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

   116   w = getWidth();

   117   h = getHeight();

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

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

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

   121   z = getHighestZ(); // document.getElementById('specialLayer_darkener').style.zIndex;

   122   buttondiv.style.zIndex = parseInt(z) + 1;

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

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

   125   buttondiv.style.textAlign = 'right';

   126   buttondiv.style.verticalAlign = 'middle';

   127   buttondiv.id = 'messageBoxButtons';

   128   

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

   130   

   131   if(type & MB_ICONINFORMATION || type & MB_ICONSTOP || type & MB_ICONQUESTION || type & MB_ICONEXCLAMATION || type & MB_ICONLOCK)

   132   {

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

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

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

   136   }

   137   

   138   if(type & MB_ICONINFORMATION)

   139   {

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

   141   }

   142   

   143   if(type & MB_ICONQUESTION)

   144   {

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

   146   }

   147   

   148   if(type & MB_ICONSTOP)

   149   {

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

   151   }

   152   

   153   if(type & MB_ICONEXCLAMATION)

   154   {

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

   156   }

   157   

   158   if(type & MB_ICONLOCK)

   159   {

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

   161   }

   162   

   163   if(type & MB_OK)

   164   {

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

   166     btn.type = 'button';

   167     btn.value = 'OK';

   168     btn.onclick = this.clickHandler;

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

   170     buttondiv.appendChild(btn);

   171   }

   172   

   173   if(type & MB_OKCANCEL)

   174   {

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

   176     btn.type = 'button';

   177     btn.value = 'OK';

   178     btn.onclick = this.clickHandler;

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

   180     buttondiv.appendChild(btn);

   181     

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

   183     btn.type = 'button';

   184     btn.value = 'Cancel';

   185     btn.onclick = this.clickHandler;

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

   187     buttondiv.appendChild(btn);

   188   }

   189   

   190   if(type & MB_YESNO)

   191   {

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

   193     btn.type = 'button';

   194     btn.value = 'Yes';

   195     btn.onclick = this.clickHandler;

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

   197     buttondiv.appendChild(btn);

   198     

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

   200     btn.type = 'button';

   201     btn.value = 'No';

   202     btn.onclick = this.clickHandler;

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

   204     buttondiv.appendChild(btn);

   205   }

   206   

   207   if(type & MB_YESNOCANCEL)

   208   {

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

   210     btn.type = 'button';

   211     btn.value = 'Yes';

   212     btn.onclick = this.clickHandler;

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

   214     buttondiv.appendChild(btn);

   215     

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

   217     btn.type = 'button';

   218     btn.value = 'No';

   219     btn.onclick = this.clickHandler;

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

   221     buttondiv.appendChild(btn);

   222     

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

   224     btn.type = 'button';

   225     btn.value = 'Cancel';

   226     btn.onclick = this.clickHandler;

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

   228     buttondiv.appendChild(btn);

   229   }

   230   

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

   232   heading.innerHTML = title;

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

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

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

   236   heading.style.fontWeight = 'lighter';

   237   heading.style.textTransform = 'lowercase';

   238   heading.style.marginTop = '0';

   239   mydiv.appendChild(heading);

   240   

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

   242   text.innerHTML = String(message);

   243   this.text_area = text;

   244   mydiv.appendChild(text);

   245   

   246   this.updateContent = function(text)

   247     {

   248       this.text_area.innerHTML = text;

   249     };

   250   

   251   //domObjChangeOpac(0, mydiv);

   252   //domObjChangeOpac(0, master_div);

   253   

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

   255   body = body[0];

   256   master_div.appendChild(mydiv);

   257   master_div.appendChild(buttondiv);

   258   

   259   body.appendChild(master_div);

   260   

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

   262   

   263   this.onclick = new Array();

   264   this.onbeforeclick = new Array();

   265   mb_current_obj = this;

   266 }

   267 

   268 function mb_runFlyIn()

   269 {

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

   271   var maindiv = mydiv.parentNode;

   272   fly_in_top(maindiv, true, false);

   273 }

   274 

   275 function messagebox_click(obj, mb)

   276 {

   277   val = obj.value;

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

   279   {

   280     var o = mb.onbeforeclick[val];

   281     var resp = o();

   282     if ( resp )

   283       return false;

   284     o = false;

   285   }

   286   

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

   288   var maindiv = mydiv.parentNode;

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

   290   

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

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

   293   {

   294     o = mb.onclick[val];

   295     o();

   296     o = false;

   297   }

   298 }

   299 

   300 function testMessageBox()

   301 {

   302   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');

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

   304     {

   305       alert('You clicked OK!');

   306     }

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

   308     {

   309       alert('You clicked Cancel!');

   310     }

   311 }

   312 

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

   314 

   315 function fadeInfoBoxes()

   316 {

   317   var divs = new Array();

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

   319   j = 0;

   320   for(var i in d)

   321   {

   322     if ( !d[i].tagName )

   323       continue;

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

   325     {

   326       divs[j] = d[i];

   327       j++;

   328     }

   329   }

   330   if(divs.length < 1) return;

   331   for(i in divs)

   332   {

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

   334     switch(divs[i].className)

   335     {

   336       case 'info-box':

   337       default:

   338         from = '#3333FF';

   339         break;

   340       case 'error-box':

   341         from = '#FF3333';

   342         break;

   343       case 'warning-box':

   344         from = '#FFFF33';

   345         break;

   346       case 'question-box':

   347         from = '#33FF33';

   348         break;

   349     }

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

   351   }

   352 }

   353 

   354 // Alpha fades

   355 

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

   357     //speed for each frame

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

   359     var timer = 0;

   360 

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

   362     if(opacStart > opacEnd) {

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

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

   365             timer++;

   366         }

   367     } else if(opacStart < opacEnd) {

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

   369             {

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

   371             timer++;

   372         }

   373     }

   374 }

   375 

   376 //change the opacity for different browsers

   377 function changeOpac(opacity, id) {

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

   379     object.opacity = (opacity / 100);

   380     object.MozOpacity = (opacity / 100);

   381     object.KhtmlOpacity = (opacity / 100);

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

   383 }

   384 

   385 function mb_logout()

   386 {

   387   var mb = new messagebox(MB_YESNO|MB_ICONQUESTION, 'Are you sure you want to log out?', 'If you log out, you will no longer be able to access your user preferences, your private messages, or certain areas of this site until you log in again.');

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

   389     {

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

   391     }

   392 }

   393