/**
 *Display an overlay on the page with an associated message.
 */
 
function OverlayNotice(){
  
  this.overlay = false;
}

/** 
 *Display the overlay.
 */
OverlayNotice.prototype.display = function( message, category ){
  
  this.message  = message;
  this.category = category;
  
  this.overlay = document.createElement('div');
  this.overlay.className = 'OverlayNotice';
  
  var notice = document.createElement('div');
  notice.className = 'Notice';
  
  this.overlay.appendChild( notice );
  
  var table = document.createElement('table');
  table.className = this.category;
  
  notice.appendChild( table );
  
  var tbody = document.createElement( 'tbody' );
  
  table.appendChild( tbody );
  
  var tr1 = document.createElement( 'tr' );
  var tr2 = document.createElement( 'tr' );
  var tr3 = document.createElement( 'tr' );
  
  tr1.className = 'Head';
  tr2.className = 'Foot';
  
  var td1 = document.createElement( 'td' );
  var td2 = document.createElement( 'td' );
  var td3 = document.createElement( 'td' );
  var td4 = document.createElement( 'td' );
  var td5 = document.createElement( 'td' );
  var td6 = document.createElement( 'td' );
  var td7 = document.createElement( 'td' );
  var td8 = document.createElement( 'td' );
  var td9 = document.createElement( 'td' );
  
  var     topLeftImg = document.createElement( 'img' );
  var    topRightImg = document.createElement( 'img' );
  var  bottomLeftImg = document.createElement( 'img' );
  var bottomRightImg = document.createElement( 'img' );
  
  topLeftImg.alt    = "Rounded Corner";
  topLeftImg.src    = CapsoolGlobalVariables.AppBase + '/graphics/img/notice/' + this.category.toLowerCase() + '/topleft.png'
  topLeftImg.width  = '13';
  topLeftImg.height = '13';
  
  topRightImg.alt    = "Rounded Corner";
  topRightImg.src    = CapsoolGlobalVariables.AppBase + '/graphics/img/notice/' + this.category.toLowerCase() + '/topright.png'
  topRightImg.width  = '13';
  topRightImg.height = '13';
  
  bottomLeftImg.alt    = "Rounded Corner";
  bottomLeftImg.src    = CapsoolGlobalVariables.AppBase + '/graphics/img/notice/' + this.category.toLowerCase() + '/bottomleft.png'
  bottomLeftImg.width  = '13';
  bottomLeftImg.height = '13';
  
  bottomRightImg.alt    = "Rounded Corner";
  bottomRightImg.src    = CapsoolGlobalVariables.AppBase + '/graphics/img/notice/' + this.category.toLowerCase() + '/bottomright.png'
  bottomRightImg.width  = '13';
  bottomRightImg.height = '13';
  
  var header = document.createElement( 'h4');
  header.appendChild( document.createTextNode('Alert') );
  
  var button = document.createElement( 'img' );
  button.className = 'ButtonType';
  button.alt = 'Close button';
  button.src = CapsoolGlobalVariables.AppBase + '/graphics/img/buttons/noticeCloseButton.png';
  button.width = '56';
  button.height = '20';
  
  var self = this;
  button.onclick = function(){ self.tearDown();};
  
  //Set up the head.
  tbody.appendChild( tr1 );
  td1.className = 'CornerLeft';
  td2.className = 'Top';
  td3.className = 'CornerRight';
  
  td1.appendChild( topLeftImg );
  td3.appendChild( topRightImg );
  
  tr1.appendChild( td1 );
  tr1.appendChild( td2 );
  tr1.appendChild( td3 );
  
  //Set up the body.
  tbody.appendChild( tr3 );
  
  td7.className = 'Left';
  td8.className = 'Payload';
  td9.className = 'Right';
  
  td8.appendChild( header );
  td8.appendChild( document.createTextNode( this.message ) );
  td8.appendChild( document.createElement( 'br' ) );
  td8.appendChild( button ); 
  
  tr3.appendChild( td7 );
  tr3.appendChild( td8 );
  tr3.appendChild( td9 );
  
  //Setup the foot.
  tbody.appendChild( tr2 );
  td4.className = 'CornerLeft';
  td5.className = 'Bottom';
  td6.className = 'CornerRight';
  
  td4.appendChild( bottomLeftImg  );
  td6.appendChild( bottomRightImg );
  
  tr2.appendChild( td4 );
  tr2.appendChild( td5 );
  tr2.appendChild( td6 );
  
  //Last step show the overlay.
  var bodies = document.getElementsByTagName( 'body' );
  var body   = bodies.item(0);
  
  body.appendChild( this.overlay );
};

/**
 *Remove the overlay from the screen.
 */
OverlayNotice.prototype.tearDown = function(){
  
  if( this.overlay ){
    
    //Hide.
    this.overlay.style.display    = 'none';
    this.overlay.style.visibility = 'hidden';
    
    var bodies = document.getElementsByTagName( 'body' );
    var body   = bodies.item(0);
    body.removeChild( this.overlay );
    
    //Destroy
    var stack = new Array();
    
    stack.push( this.overlay );
    
    while( stack.length > 0){
      
      var element = stack.pop();
      
      //Add to stack.
      for( var k = 0; k < element.childNodes.length; k++){
        stack.push( element.childNodes.item(k) );
      }
      
      //Remove from element.
      for( var k = 0; k < element.childNodes.length; k++){
        element.removeChild( element.firstChild );
      }
    }
  }
  
  this.overlay = false;
};

CapsoolGlobalVariables.overlayNoticeInstance = false;

dojo.addOnLoad( 
  function(){
    
    CapsoolGlobalVariables.overlayNoticeInstance = new OverlayNotice();
    
    if( CapsoolGlobalVariables.overlayNoticeMessage  &&
        CapsoolGlobalVariables.overlayNoticeCategory   ){
      
      CapsoolGlobalVariables.overlayNoticeInstance.display(
          CapsoolGlobalVariables.overlayNoticeMessage,
          CapsoolGlobalVariables.overlayNoticeCategory
      );
    }
  }
);