diff -r 460e483987ab -r ab6f55abb17e includes/clientside/static/faders.js
--- a/includes/clientside/static/faders.js Sat Jul 12 00:31:44 2008 -0400
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,821 +0,0 @@
-// Message box and visual effect system
-
-/**
- * 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().
- * @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.
- * @param int When specified, represents the numeric opacity value to set the fade layer to. 1-100.
- */
-
-var darkener_index = 0;
-
-function darken(nofade, opacVal)
-{
- if(IE)
- nofade = true;
- if ( !opacVal )
- opacVal = 70;
- darkener_index++;
- if(document.getElementById('specialLayer_darkener'))
- {
- if(nofade)
- {
- changeOpac(opacVal, 'specialLayer_darkener');
- document.getElementById('specialLayer_darkener').style.display = 'block';
- document.getElementById('specialLayer_darkener').myOpacVal = opacVal;
- }
- else
- {
- if ( document.getElementById('specialLayer_darkener').style.display != 'none' )
- {
- var currentOpac = document.getElementById('specialLayer_darkener').myOpacVal;
- opacity('specialLayer_darkener', currentOpac, opacVal, 1000);
- document.getElementById('specialLayer_darkener').myOpacVal = opacVal;
- }
- else
- {
- document.getElementById('specialLayer_darkener').style.display = 'block';
- document.getElementById('specialLayer_darkener').myOpacVal = opacVal;
- opacity('specialLayer_darkener', 0, opacVal, 1000);
- }
- }
- } else {
- w = getWidth();
- h = getHeight();
- var thediv = document.createElement('div');
- if(IE)
- thediv.style.position = 'absolute';
- else
- thediv.style.position = 'fixed';
- if ( IE )
- {
- var top = getScrollOffset();
- thediv.style.top = String(top) + 'px';
- }
- else
- {
- thediv.style.top = '0px';
- }
- thediv.style.left = '0px';
- thediv.style.opacity = '0';
- thediv.style.filter = 'alpha(opacity=0)';
- thediv.style.backgroundColor = '#000000';
- thediv.style.width = '100%';
- thediv.style.height = '100%';
- thediv.zIndex = getHighestZ() + 5;
- thediv.id = 'specialLayer_darkener';
- thediv.myOpacVal = opacVal;
- if(nofade)
- {
- thediv.style.opacity = ( parseFloat(opacVal) / 100 );
- thediv.style.filter = 'alpha(opacity=' + opacVal + ')';
- body = document.getElementsByTagName('body');
- body = body[0];
- body.appendChild(thediv);
- } else {
- body = document.getElementsByTagName('body');
- body = body[0];
- body.appendChild(thediv);
- opacity('specialLayer_darkener', 0, opacVal, 1000);
- }
- }
-}
-
-/**
- * Un-darkens the screen and re-enables clicking of on-screen controls.
- * @param bool If true, disables the fade effect. Fades are always disabled if aclDisableTransitionFX is true and on IE.
- */
-
-function enlighten(nofade)
-{
- if(IE)
- nofade = true;
- darkener_index -= 1;
- if ( darkener_index > 0 )
- return false;
- if(document.getElementById('specialLayer_darkener'))
- {
- if(nofade)
- {
- document.getElementById('specialLayer_darkener').style.display = 'none';
- }
- else
- {
- var from = document.getElementById('specialLayer_darkener').myOpacVal;
- // console.info('Fading from ' + from);
- opacity('specialLayer_darkener', from, 0, 1000);
- setTimeout("document.getElementById('specialLayer_darkener').style.display = 'none';", 1000);
- }
- }
-}
-
-/**
- * The ultimate message box framework for Javascript
- * Syntax is (almost) identical to the MessageBox command in NSIS
- * @param int type - a bitfield consisting of the MB_* constants
- * @param string title - the blue text at the top of the window
- * @param string text - HTML for the body of the message box
- * Properties:
- * onclick - an array of functions to be called on button click events
- * NOTE: key names are to be strings, and they must be the value of the input, CaSe-SeNsItIvE
- * onbeforeclick - same as onclick but called before the messagebox div is destroyed
- * Methods:
- * destroy: kills the running message box
- * Example:
- * 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');
- * my_message.onclick['OK'] = function() {
- * document.getElementById('password').value = '';
- * };
- * Deps:
- * Modern browser that supports DOM
- * darken() and enlighten() (above)
- * opacity() - required for darken() and enlighten()
- * MB_* constants are defined in enano-lib-basic.js
- */
-
-var mb_current_obj;
-var mb_previously_had_darkener = false;
-
-function MessageBox(type, title, message)
-{
- var y = getScrollOffset();
-
- // Prevent multiple instances
- if ( document.getElementById('messageBox') )
- return;
-
- if ( document.getElementById('specialLayer_darkener') )
- if ( document.getElementById('specialLayer_darkener').style.display == 'block' )
- mb_previously_had_darkener = true;
- if ( !mb_previously_had_darkener )
- darken(true);
- if ( aclDisableTransitionFX )
- {
- document.getElementById('specialLayer_darkener').style.zIndex = '5';
- }
- var master_div = document.createElement('div');
- master_div.style.zIndex = String(getHighestZ() + 5);
- var mydiv = document.createElement('div');
- mydiv.style.height = '200px';
- w = getWidth();
- h = getHeight();
- if ( aclDisableTransitionFX )
- {
- master_div.style.left = ((w / 2) - 200)+'px';
- master_div.style.top = ((h / 2) + y - 120)+'px';
- master_div.style.position = 'absolute';
- }
- else
- {
- master_div.style.top = '-10000px';
- master_div.style.position = ( IE ) ? 'absolute' : 'fixed';
- }
- z = ( aclDisableTransitionFX ) ? document.getElementById('specialLayer_darkener').style.zIndex : getHighestZ();
- mydiv.style.backgroundColor = '#FFFFFF';
- mydiv.style.padding = '10px';
- mydiv.style.marginBottom = '1px';
- mydiv.id = 'messageBox';
- mydiv.style.overflow = 'auto';
-
- var buttondiv = document.createElement('div');
-
- mydiv.style.width = '400px';
- buttondiv.style.width = '400px';
-
- w = getWidth();
- h = getHeight();
- if ( aclDisableTransitionFX )
- {
- //buttondiv.style.left = ((w / 2) - 200)+'px';
- //buttondiv.style.top = ((h / 2) + y + 101)+'px';
- }
- //buttondiv.style.position = ( IE ) ? 'absolute' : 'fixed';
- z = ( aclDisableTransitionFX ) ? document.getElementById('specialLayer_darkener').style.zIndex : getHighestZ();
- buttondiv.style.backgroundColor = '#C0C0C0';
- buttondiv.style.padding = '10px';
- buttondiv.style.textAlign = 'right';
- buttondiv.style.verticalAlign = 'middle';
- buttondiv.id = 'messageBoxButtons';
-
- this.clickHandler = function() { messagebox_click(this, mb_current_obj); };
-
- if( ( type & MB_ICONINFORMATION || type & MB_ICONSTOP || type & MB_ICONQUESTION || type & MB_ICONEXCLAMATION ) && !(type & MB_ICONLOCK) )
- {
- mydiv.style.paddingLeft = '50px';
- mydiv.style.width = '360px';
- mydiv.style.backgroundRepeat = 'no-repeat';
- mydiv.style.backgroundPosition = '8px 8px';
- }
- else if ( type & MB_ICONLOCK )
- {
- mydiv.style.paddingLeft = '50px';
- mydiv.style.width = '360px';
- mydiv.style.backgroundRepeat = 'no-repeat';
- }
-
- if(type & MB_ICONINFORMATION)
- {
- mydiv.style.backgroundImage = 'url(\''+scriptPath+'/images/info.png\')';
- }
-
- if(type & MB_ICONQUESTION)
- {
- mydiv.style.backgroundImage = 'url(\''+scriptPath+'/images/question.png\')';
- }
-
- if(type & MB_ICONSTOP)
- {
- mydiv.style.backgroundImage = 'url(\''+scriptPath+'/images/error.png\')';
- }
-
- if(type & MB_ICONEXCLAMATION)
- {
- mydiv.style.backgroundImage = 'url(\''+scriptPath+'/images/warning.png\')';
- }
-
- if(type & MB_ICONLOCK)
- {
- mydiv.style.backgroundImage = 'url(\''+scriptPath+'/images/lock.png\')';
- }
-
- if(type & MB_OK)
- {
- btn = document.createElement('input');
- btn.type = 'button';
- btn.value = $lang.get('etc_ok');
- btn._GenericName = 'OK';
- btn.onclick = this.clickHandler;
- btn.style.margin = '0 3px';
- buttondiv.appendChild(btn);
- }
-
- if(type & MB_OKCANCEL)
- {
- btn = document.createElement('input');
- btn.type = 'button';
- btn.value = $lang.get('etc_ok');
- btn._GenericName = 'OK';
- btn.onclick = this.clickHandler;
- btn.style.margin = '0 3px';
- buttondiv.appendChild(btn);
-
- btn = document.createElement('input');
- btn.type = 'button';
- btn.value = $lang.get('etc_cancel');
- btn._GenericName = 'Cancel';
- btn.onclick = this.clickHandler;
- btn.style.margin = '0 3px';
- buttondiv.appendChild(btn);
- }
-
- if(type & MB_YESNO)
- {
- btn = document.createElement('input');
- btn.type = 'button';
- btn.value = $lang.get('etc_yes');
- btn._GenericName = 'Yes';
- btn.onclick = this.clickHandler;
- btn.style.margin = '0 3px';
- buttondiv.appendChild(btn);
-
- btn = document.createElement('input');
- btn.type = 'button';
- btn.value = $lang.get('etc_no');
- btn._GenericName = 'No';
- btn.onclick = this.clickHandler;
- btn.style.margin = '0 3px';
- buttondiv.appendChild(btn);
- }
-
- if(type & MB_YESNOCANCEL)
- {
- btn = document.createElement('input');
- btn.type = 'button';
- btn.value = $lang.get('etc_yes');
- btn._GenericName = 'Yes';
- btn.onclick = this.clickHandler;
- btn.style.margin = '0 3px';
- buttondiv.appendChild(btn);
-
- btn = document.createElement('input');
- btn.type = 'button';
- btn.value = $lang.get('etc_no');
- btn._GenericName = 'No';
- btn.onclick = this.clickHandler;
- btn.style.margin = '0 3px';
- buttondiv.appendChild(btn);
-
- btn = document.createElement('input');
- btn.type = 'button';
- btn.value = $lang.get('etc_cancel');
- btn._GenericName = 'Cancel';
- btn.onclick = this.clickHandler;
- btn.style.margin = '0 3px';
- buttondiv.appendChild(btn);
- }
-
- heading = document.createElement('h2');
- heading.innerHTML = title;
- heading.style.color = '#50A0D0';
- heading.style.fontFamily = 'trebuchet ms, verdana, arial, helvetica, sans-serif';
- heading.style.fontSize = '12pt';
- heading.style.fontWeight = 'lighter';
- heading.style.textTransform = 'lowercase';
- heading.style.marginTop = '0';
- mydiv.appendChild(heading);
-
- var text = document.createElement('div');
- text.innerHTML = String(message);
- this.text_area = text;
- mydiv.appendChild(text);
-
- this.updateContent = function(text)
- {
- this.text_area.innerHTML = text;
- };
-
- this.destroy = function()
- {
- var mbdiv = document.getElementById('messageBox');
- mbdiv.parentNode.removeChild(mbdiv.nextSibling);
- mbdiv.parentNode.removeChild(mbdiv);
- if ( !mb_previously_had_darkener )
- enlighten(true);
- };
-
- //domObjChangeOpac(0, mydiv);
- //domObjChangeOpac(0, master_div);
-
- body = document.getElementsByTagName('body');
- body = body[0];
- master_div.appendChild(mydiv);
- master_div.appendChild(buttondiv);
-
- body.appendChild(master_div);
-
- if ( !aclDisableTransitionFX )
- setTimeout('mb_runFlyIn();', 100);
-
- this.onclick = new Array();
- this.onbeforeclick = new Array();
- mb_current_obj = this;
-}
-
-var messagebox = MessageBox;
-
-function mb_runFlyIn()
-{
- var mydiv = document.getElementById('messageBox');
- var maindiv = mydiv.parentNode;
- fly_in_top(maindiv, true, false);
-}
-
-function messagebox_click(obj, mb)
-{
- val = ( typeof ( obj._GenericName ) == 'string' ) ? obj._GenericName : obj.value;
- if(typeof mb.onbeforeclick[val] == 'function')
- {
- var o = mb.onbeforeclick[val];
- var resp = o();
- if ( resp )
- return false;
- o = false;
- }
-
- var mydiv = document.getElementById('messageBox');
- var maindiv = mydiv.parentNode;
-
- if ( aclDisableTransitionFX )
- {
- var mbdiv = document.getElementById('messageBox');
- mbdiv.parentNode.removeChild(mbdiv.nextSibling);
- mbdiv.parentNode.removeChild(mbdiv);
- if ( !mb_previously_had_darkener )
- enlighten(true);
- }
- else
- {
- var to = fly_out_top(maindiv, true, false);
- setTimeout("var mbdiv = document.getElementById('messageBox'); mbdiv.parentNode.removeChild(mbdiv.nextSibling); mbdiv.parentNode.removeChild(mbdiv); if ( !mb_previously_had_darkener ) enlighten(true);", to);
- }
- if(typeof mb.onclick[val] == 'function')
- {
- o = mb.onclick[val];
- o();
- o = false;
- }
-}
-
-function testMessageBox()
-{
- mb = new MessageBox(MB_OKCANCEL|MB_ICONINFORMATION, 'Javascripted dynamic message boxes', 'This is soooooo coool, now if only document.createElement() worked in IE!
this is some more text
this is some more text
this is some more text
this is some more text
this is some more text
this is some more text
this is some more text
this is some more text');
- mb.onclick['OK'] = function()
- {
- alert('You clicked OK!');
- }
- mb.onbeforeclick['Cancel'] = function()
- {
- alert('You clicked Cancel!');
- }
-}
-
-/**
- * The miniPrompt function, for creating small prompts and dialogs. The window will be flown in and the window darkened with opac=0.4.
- * @param function Will be passed an HTMLElement that is the body of the prompt window; the function can do with this as it pleases
- */
-
-function miniPrompt(call_on_create)
-{
- if ( document.getElementById('specialLayer_darkener') )
- {
- if ( document.getElementById('specialLayer_darkener').style.display != 'none' )
- {
- var opac = parseFloat(document.getElementById('specialLayer_darkener').style.opacity);
- opac = opac * 100;
- darken(aclDisableTransitionFX, opac);
- }
- else
- {
- darken(aclDisableTransitionFX, 40);
- }
- }
- else
- {
- darken(aclDisableTransitionFX, 40);
- }
-
- var wrapper = document.createElement('div');
- wrapper.className = 'miniprompt';
- var top = document.createElement('div');
- top.className = 'mp-top';
- var body = document.createElement('div');
- body.className = 'mp-body';
- var bottom = document.createElement('div');
- bottom.className = 'mp-bottom';
- if ( typeof(call_on_create) == 'function' )
- {
- call_on_create(body);
- }
- wrapper.appendChild(top);
- wrapper.appendChild(body);
- wrapper.appendChild(bottom);
- var left = ( getWidth() / 2 ) - ( 388 / 2 );
- wrapper.style.left = left + 'px';
- var top = getScrollOffset() - 27;
- wrapper.style.top = top + 'px';
- domObjChangeOpac(0, wrapper);
- var realbody = document.getElementsByTagName('body')[0];
- realbody.appendChild(wrapper);
-
- if ( aclDisableTransitionFX )
- {
- domObjChangeOpac(100, wrapper);
- }
- else
- {
- fly_in_top(wrapper, true, true);
-
- setTimeout(function()
- {
- domObjChangeOpac(100, wrapper);
- }, 40);
- }
-}
-
-/**
- * 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.
- * @param object:HTMLElement Child node to scan
- * @return object
- */
-
-function miniPromptGetParent(obj)
-{
- while ( true )
- {
- // prevent infinite loops
- if ( !obj || obj.tagName == 'BODY' )
- return false;
-
- if ( $dynano(obj).hasClass('miniprompt') )
- {
- return obj;
- }
- obj = obj.parentNode;
- }
- return false;
-}
-
-/**
- * Destroys the first miniPrompt div encountered by recursively checking all parent nodes.
- * Usage: click
- * @param object:HTMLElement a child of the div.miniprompt
- * @param bool If true, does not call enlighten().
- */
-
-function miniPromptDestroy(obj, nofade)
-{
- obj = miniPromptGetParent(obj);
- if ( !obj )
- return false;
-
- // found it
- var parent = obj.parentNode;
- if ( !nofade )
- enlighten(aclDisableTransitionFX);
- if ( aclDisableTransitionFX )
- {
- parent.removeChild(obj);
- }
- else
- {
- var timeout = fly_out_top(obj, true, true);
- setTimeout(function()
- {
- parent.removeChild(obj);
- }, timeout);
- }
-}
-
-/**
- * Simple test case
- */
-
-function miniPromptTest()
-{
- miniPrompt(function(div) { div.innerHTML = 'hello world! destroy me'; });
-}
-
-/**
- * Message box system for miniPrompts. Less customization but easier to scale than the regular messageBox framework.
- * @example
-
- miniPromptMessage({
- title: 'Delete page',
- message: 'Do you really want to delete this page? This is reversible unless you clear the page logs.',
- buttons: [
- {
- text: 'Delete',
- color: 'red',
- style: {
- fontWeight: 'bold'
- },
- onclick: function() {
- ajaxDeletePage();
- miniPromptDestroy(this);
- }
- },
- {
- text: 'cancel',
- onclick: function() {
- miniPromptDestroy(this);
- }
- }
- ]
- });
-
- */
-
-function miniPromptMessage(parms)
-{
- if ( !parms.title || !parms.message || !parms.buttons )
- return false;
-
- return miniPrompt(function(parent)
- {
- try
- {
- var h3 = document.createElement('h3');
- h3.appendChild(document.createTextNode(parms.title));
- var body = document.createElement('p');
- var message = parms.message.split(unescape('%0A'));
- for ( var i = 0; i < message.length; i++ )
- {
- body.appendChild(document.createTextNode(message[i]));
- if ( i + 1 < message.length )
- body.appendChild(document.createElement('br'));
- }
-
- parent.style.textAlign = 'center';
-
- parent.appendChild(h3);
- parent.appendChild(body);
- parent.appendChild(document.createElement('br'));
-
- // construct buttons
- for ( var i = 0; i < parms.buttons.length; i++ )
- {
- var button = parms.buttons[i];
- button.input = document.createElement('a');
- button.input.href = '#';
- button.input.clickAction = button.onclick;
- button.input.className = 'abutton';
- if ( button.color )
- {
- button.input.className += ' abutton_' + button.color;
- }
- button.input.appendChild(document.createTextNode(button.text));
- if ( button.style )
- {
- for ( var j in button.style )
- {
- button.input.style[j] = button.style[j];
- }
- }
- button.input.onclick = function(e)
- {
- try
- {
- this.clickAction(e);
- }
- catch(e)
- {
- console.error(e);
- }
- return false;
- }
- parent.appendChild(button.input);
- }
- if ( parms.buttons[0] )
- {
- setTimeout(function()
- {
- parms.buttons[0].input.focus();
- }, 300);
- }
- }
- catch ( e )
- {
- console.error(e);
- }
- });
-}
-
-function testMPMessageBox()
-{
- miniPromptMessage({
- title: 'The Game of LIFE question #73',
- message: 'You just got your girlfriend pregnant. Please select an option:',
- buttons: [
- {
- text: 'Abort',
- color: 'red',
- style: {
- fontWeight: 'bold'
- },
- onclick: function() {
- miniPromptDestroy(this);
- }
- },
- {
- text: 'Retry',
- color: 'blue',
- onclick: function() {
- miniPromptDestroy(this);
- }
- },
- {
- text: 'Ignore',
- color: 'green',
- onclick: function() {
- miniPromptDestroy(this);
- }
- }
- ]
- });
-}
-
-// Function to fade classes info-box, warning-box, error-box, etc.
-
-function fadeInfoBoxes()
-{
- var divs = new Array();
- d = document.getElementsByTagName('div');
- j = 0;
- for(var i in d)
- {
- if ( !d[i] )
- continue;
- if ( !d[i].tagName )
- continue;
- if(d[i].className=='info-box' || d[i].className=='error-box' || d[i].className=='warning-box' || d[i].className=='question-box')
- {
- divs[j] = d[i];
- j++;
- }
- }
- if(divs.length < 1) return;
- for(i in divs)
- {
- if(!divs[i].id) divs[i].id = 'autofade_'+Math.floor(Math.random() * 100000);
- switch(divs[i].className)
- {
- case 'info-box':
- default:
- from = '#3333FF';
- break;
- case 'error-box':
- from = '#FF3333';
- break;
- case 'warning-box':
- from = '#FFFF33';
- break;
- case 'question-box':
- from = '#33FF33';
- break;
- }
- Fat.fade_element(divs[i].id,30,2000,from,Fat.get_bgcolor(divs[i].id));
- }
-}
-
-// Alpha fades
-
-function opacity(id, opacStart, opacEnd, millisec) {
- //speed for each frame
- var speed = Math.round(millisec / 100);
- var timer = 0;
-
- //determine the direction for the blending, if start and end are the same nothing happens
- if(opacStart > opacEnd) {
- for(i = opacStart; i >= opacEnd; i--) {
- setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
- timer++;
- }
- } else if(opacStart < opacEnd) {
- for(i = opacStart; i <= opacEnd; i++)
- {
- setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
- timer++;
- }
- }
-}
-
-var opacityDOMCache = new Object();
-function domOpacity(obj, opacStart, opacEnd, millisec) {
- //speed for each frame
- var speed = Math.round(millisec / 100);
- var timer = 0;
-
- // unique ID for this animation
- var uniqid = Math.floor(Math.random() * 1000000);
- opacityDOMCache[uniqid] = obj;
-
- //determine the direction for the blending, if start and end are the same nothing happens
- if(opacStart > opacEnd) {
- for(i = opacStart; i >= opacEnd; i--) {
- setTimeout("var obj = opacityDOMCache["+uniqid+"]; domObjChangeOpac(" + i + ",obj)",(timer * speed));
- timer++;
- }
- } else if(opacStart < opacEnd) {
- for(i = opacStart; i <= opacEnd; i++)
- {
- setTimeout("var obj = opacityDOMCache["+uniqid+"]; domObjChangeOpac(" + i + ",obj)",(timer * speed));
- timer++;
- }
- }
- setTimeout("delete(opacityDOMCache["+uniqid+"]);",(timer * speed));
-}
-
-//change the opacity for different browsers
-function changeOpac(opacity, id) {
- var object = document.getElementById(id).style;
- object.opacity = (opacity / 100);
- object.MozOpacity = (opacity / 100);
- object.KhtmlOpacity = (opacity / 100);
- object.filter = "alpha(opacity=" + opacity + ")";
-}
-
-function mb_logout()
-{
- var mb = new MessageBox(MB_YESNO|MB_ICONQUESTION, $lang.get('user_logout_confirm_title'), $lang.get('user_logout_confirm_body'));
- mb.onclick['Yes'] = function()
- {
- window.location = makeUrlNS('Special', 'Logout/' + csrf_token + '/' + title);
- }
-}
-
-function whiteOutElement(el)
-{
- var top = $(el).Top();
- var left = $(el).Left();
- var width = $(el).Width();
- var height = $(el).Height();
-
- var blackout = document.createElement('div');
- blackout.style.position = 'absolute';
- blackout.style.top = top + 'px';
- blackout.style.left = left + 'px';
- blackout.style.width = width + 'px';
- blackout.style.height = height + 'px';
-
- blackout.style.backgroundColor = '#FFFFFF';
- domObjChangeOpac(60, blackout);
- blackout.style.backgroundImage = 'url(' + scriptPath + '/includes/clientside/tinymce/themes/advanced/skins/default/img/progress.gif)';
- blackout.style.backgroundPosition = 'center center';
- blackout.style.backgroundRepeat = 'no-repeat';
- blackout.style.zIndex = getHighestZ() + 2;
-
- var body = document.getElementsByTagName('body')[0];
- body.appendChild(blackout);
-
- return blackout;
-}
-