/* AJAX Loading Class
 * Pass a div id and a loading message
 * get size and position of div
 * create overlay with same size as div containing loading gif and message.
 * insert overlay into dom
 * change display variables on show and hide loading functions
 */
function Loading(divId, message, scroll) {

   if (scroll === undefined || scroll === false)
      this.scroll = false;
   else
      this.scroll = true;

   // Based on: http://www.quirksmode.org/js/findpos.html
   var getDivOffset = function (obj) {
       var left, top;
       left = top = 0;
       if (obj.offsetParent) {
           do {
               left += obj.offsetLeft;
               top  += obj.offsetTop;
           } while (obj = obj.offsetParent);
       }
       return {
           x : left,
           y : top
       };
   };

   this.divId = divId;
   this.message = message;
   this.div = document.getElementById(this.divId);
   this.pageOffset = getDivOffset(this.div);
   this.parent = this.div.parentNode;
   this.width = this.div.offsetWidth;
   this.height = this.div.offsetHeight;
   this.offsetLeft = this.div.offsetLeft;
   this.offsetTop = this.div.offsetTop;
   
   // Build loading overlay and message
   this.overlayId = divId + '-overlay';
   this.overlay = document.createElement('div');
   this.overlay.setAttribute('id', this.overlayId);
   this.overlay.setAttribute('class', 'loading-overlay');
   this.overlay.style.position = 'absolute';
   this.overlay.style.top = this.offsetTop + 'px';
   this.overlay.style.left = this.offsetLeft + 'px';
   this.overlay.style.width = this.width + 'px';
   this.overlay.style.height = this.height + 'px';
   this.overlay.style.display = "none";

   
   // Build loading message wrapper div
   this.loadingWrapper = document.createElement('div');
   this.loadingWrapper.setAttribute('class', 'loading-wrapper');
   this.loadingWrapper.style.width = (this.width * .45) + 'px';
   this.loadingWrapper.style.height = (this.height < 500) ? '150px' : '200px';
   this.loadingWrapper.style.position = 'absolute';
   this.loadingWrapper.style.top = '50px';
   this.loadingWrapper.style.left = ((this.width - parseInt(this.loadingWrapper.style.width))  / 2) + 'px'; // Put div in middle of overlay
   
   // Append to DOM
   this.loadingWrapper.innerHTML = '<h3 class="loading-msg">' + message + '</h3><img src="/graphics/lightbox/loading.gif" alt="Loading..." />';
   this.overlay.appendChild(this.loadingWrapper);  
   this.parent.appendChild(this.overlay);
}

Loading.prototype = {
   show: function () {
      this.width = this.div.offsetWidth;
      this.height = this.div.offsetHeight;
      this.overlay.style.width = this.width + 'px';
      this.overlay.style.height = this.height + 'px';
      
      var ie7 = (navigator.appVersion.indexOf("MSIE 7.") != -1) ? true : false;
      
      if (!ie7) {
         this.overlay.style.display = "block";
      }
      
      if (this.scroll === true) {
         var wrapperTop = (this.height < 800) ? Math.ceil((this.height - this.loadingWrapper.offsetHeight) * .2) : '50';
         this.loadingWrapper.style.top = (window.pageYOffset > this.pageOffset['y']) ? window.pageYOffset + 'px' : wrapperTop + 'px';
      }
   },
   
   hide: function () {
      this.overlay.style.display = "none";
   }
};