// *****   ------------   *****
// *****     Smoke.js     *****
// *****   ------------   *****

/**********************************************************************
*
* Created By:   TAKE
* Created Date: 2009-10-30
* Language:     JavaScript
* Description:  Smoke screen
* Usage:        <script type="text/javascript" src="/javascript/Smoke.js">
*               <input type="submit" onclick="smoke.show()">
*  
*               or
*
*               <script type="text/javascript" src="/javascript/Smoke.js">
*               <script type="text/javascript">
*                  var sm = new Smoke();
*                  sm.setHtml('Hello smoke!');
*                  sm.show('targetId');
*                  sm.remove();
*               </script>
*
* Win FX3: O
* Win IE6: O
* Win IE7: O
* Win IE8: O 
* Win SF3: O
* Win CH3: O
* Win OP10: O
*
**********************************************************************/

var smoke = new Smoke(); // generic instance
function Smoke() {

   // --- public methods ---
   this.setHtml = setHtml;
   this.remove = remove;
   this.show = show;

 
   // --- private variables --- 
   var bLock = 0;
   var sTargetId = '';
   var oBase = Object();
   var oScr = document.createElement('div'); // smoke screen


   // --- set the default message ---
   var sMessage = '';
   sMessage += '<table style="background-color:#ffffff; padding:10px">';
   sMessage += '<tr>';
   sMessage += '<td>';
   sMessage += '<img src="/gifs/ico_loader_24.gif" alt="" title="">';
   sMessage += '</td>';
   sMessage += '<td style="font-size:20px">';
   sMessage += ' Loading...';
   sMessage += '</td>';
   sMessage += '</tr>';
   sMessage += '</table>';


   // --- build message box ---
   var oMsgBoxTd = document.createElement('td');  
   oMsgBoxTd.align = 'center';
   oMsgBoxTd.valign = 'middle';
   oMsgBoxTd.innerHTML = sMessage;
   var oMsgBoxTr = document.createElement('tr');  
   oMsgBoxTr.appendChild(oMsgBoxTd);
   var oMsgBoxTbody = document.createElement('tbody');
   oMsgBoxTbody.appendChild(oMsgBoxTr);
   var oMsgBox = document.createElement('table'); 
   oMsgBox.appendChild(oMsgBoxTbody);


   function setHtml(myHtml) {
      if (!myHtml) return 0; 
      var sHtml = '';
      sHtml += '<table>';
      sHtml += '<tr>';
      sHtml += '<td class="bgwhite">';
      sHtml += myHtml; 
      sHtml += '</td>';
      sHtml += '</tr>';
      sHtml += '</table>';
      oMsgBoxTd.innerHTML = sHtml;
   }

   function remove() {
      if (!bLock) return 0;
      if (!oScr) return 0;
      oScr.parentNode.removeChild(oScr);
      if (!oMsgBox) return 0;
      oMsgBox.parentNode.removeChild(oMsgBox);
      bLock = 0;
   }
   
   function show(myTargetId) {

      sTargetId = myTargetId;

      if (bLock) return 0;


      // --- get base object ---
      if (sTargetId) {
         oBase = document.getElementById(sTargetId);
      } else {
         oBase = document.body;
      }


      // --- find message position ---
      if (sTargetId) {
         // -----------------------------------------
         //  this is really important for IE
         // -----------------------------------------
         if (navigator.userAgent.indexOf('MSIE') > -1) {
            oBase.style.display = 'inline-block'; 
         }
         oMsgBox.style.position = 'absolute';                                                   
         oMsgBox.style.width = oBase.clientWidth + 'px'; 
         oMsgBox.style.height = oBase.clientHeight + 'px';
         oMsgBox.style.left = getObjPos(oBase).x + 'px';                                        
         oMsgBox.style.top = getObjPos(oBase).y + 'px';                                         
      } else {
         var iMsgTop = document.documentElement.scrollTop || document.body.scrollTop;
            var iMsgHeight = document.documentElement.clientHeight || document.body.clientHeight;
            oMsgBox.style.position = 'absolute';
            oMsgBox.style.width = '100%';
            oMsgBox.style.height = iMsgHeight + 'px';
            oMsgBox.style.top = iMsgTop + 'px';
      }



      // --- find width & height ---
      var aPageSize = Object();
      var sBoxWidth = '0px';
      var sBoxHeight = '0px';
      if (sTargetId) {
         sBoxWidth = oBase.clientWidth;
         sBoxHeight = oBase.clientHeight;
      } else {
         // --- entire page ---
         aPageSize = getPageSize();
         sBoxWidth = aPageSize[0];
         sBoxHeight = aPageSize[1];
      }
//alert(oBase.tagName)
//alert(sTargetId)
//alert([sBoxWidth, sBoxHeight])

      // --- setup smoke screen ---
      oScr.style.backgroundColor = '#ffffff';
      oScr.style.position = 'absolute';
      oScr.style.width = '500px'; 
      oScr.style.height = '500px';
      oScr.style.width = sBoxWidth + 'px'; 
      oScr.style.height = sBoxHeight + 'px';
      oScr.style.left = getObjPos(oBase).x + 'px';
      oScr.style.top = getObjPos(oBase).y + 'px';
      oScr.style.opacity = '0.35';
      oScr.style.MozOpacity = '0.35';
      oScr.style.KhtmlOpacity = '0.35';
      oScr.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=35);';


      // --- put smoke screen & message ---
      document.body.appendChild(oScr);
      document.body.appendChild(oMsgBox);

      bLock = 1;

   }

   // *********************************************************************
   // obj getObjPos(obj) - reusable
   // *********************************************************************
   function getObjPos(oElement){
   
      var pos = {x:oElement.offsetLeft, y:oElement.offsetTop};
      
      while(oElement = oElement.offsetParent){
         pos.x += oElement.offsetLeft;
         pos.y += oElement.offsetTop;
      }
      
      return pos;
   }


   // *********************************************************************
   // arr getPageSize() - reusable
   // *********************************************************************
   function getPageSize() {
   
      // --- get scroll page size ---
      var scrollX, scrollY;
      if (window.innerHeight && window.scrollMaxY) {
         // Firefox
         scrollX = window.innerWidth + window.scrollMaxX;
         scrollY = window.innerHeight + window.scrollMaxY;
   
      } else if (document.body.scrollHeight > document.body.offsetHeight){
         // IE6,7
         scrollX = document.body.scrollWidth;
         scrollY = document.body.scrollHeight;
   
      } else {
         // --- Mac IE, IE6 strict, Mozilla and Safari ---                       
         scrollX = document.body.offsetWidth;                                    
         scrollY = document.body.offsetHeight;                                   
                                                                                 
      }                                                                          

                                                                                 
      // --- get viewable size ---                                               
      var windowWidth, windowHeight;                                             
      if (self.innerHeight) {                                                    
         // --- all except IE ---                                                
         if (document.documentElement.clientWidth){                              
            windowWidth = document.documentElement.clientWidth;                  
         } else {                                                                
            windowWidth = self.innerWidth;                                       
         }                                                                       
                                                                                 
         windowHeight = self.innerHeight;                                        
                                                                                 
      } else if (document.documentElement && document.documentElement.clientHeight) {
         // --- IE6 Strict Mode ---                                              
         windowWidth = document.documentElement.clientWidth;                     
         windowHeight = document.documentElement.clientHeight;                   
                                                                                 
      } else if (document.body) {                                                
         // --- other IE ---                                                     
         windowWidth = document.body.clientWidth;                                
         windowHeight = document.body.clientHeight;                              
      }                                                                          
                                                                                 
                                                                                 
      // --- choose the larger width ---                                         
      if (scrollX > windowWidth){                                                    
         pageWidth = scrollX;                                                        
      } else {                                                                       
         pageWidth = windowWidth;                                                    
      }                                                                          
                                                                                 
                                                                                 
      // --- choose the larger height ---                                        
      if (scrollY > windowHeight){                                               
         pageHeight = scrollY;                                                   
      } else {                                                                   
         pageHeight = windowHeight;                                              
      }                                                                          
                                                                                 
                                                                                 
      return [pageWidth, pageHeight];                                            
                                                                                 
   }   

}