﻿
Base.UI = Class.create();

Base.UI.itemMaskIndex = 0;

Base.UI.itemMask = function(item)
{
   var itemBounds = Sd.Common.getElementPos(item);
   var div = document.createElement('div');
   div.id = '_ItemMask' + Base.UI.itemMaskIndex.toString();
   div.style.height = itemBounds.height + 'px';
   div.style.width = itemBounds.width + 'px';
   div.style.position = 'absolute';
   div.style.left = itemBounds.left + 'px';
   div.style.top = itemBounds.top + 'px';
   div.style.zIndex = Math.max(100, (item.zIndex + 1));
   div.className = 'itemmask';

   document.body.appendChild(div);

   Base.UI.itemMaskIndex ++;
   
   return div.id;
};

Base.UI.killMask = function(maskId)
{
   var mask = $id(maskId);
   if(!mask) return;
   document.body.removeChild(mask);
};

Base.UI.waitMask = function(item, message)
{
   var maskId = Base.UI.itemMask(item);
   var mask = $id(maskId);
   var div = document.createElement('div');
   var img = document.createElement('img');
   var divText = document.createElement('div');
   
   div.className = 'waitmask';
   img.src = '/images/Base/ajax.loading.gif';
   divText.innerHTML = '<br/>Please wait...';
   if(message) divText.innerHTML += '<br/>' + messsage;
      
   div.appendChild(img);
   div.appendChild(divText);
   
   mask.appendChild(div);
   
   var maskBounds = Sd.Common.getElementPos(mask);
   var divBounds = Sd.Common.getElementPos(div);
   
   div.style.marginTop = ((maskBounds.height - divBounds.height) /2) + 'px';
   
   return maskId;
};

Base.UI.Dialog = Class.create();
Base.UI.Dialog.type = {small: 0, large: 1};
Base.UI.Dialog.prototype =
{
   
   initialize: function(id, type, buttons, x, y, caption, content, onClose)
   {
      switch(type)
      {
         case Base.UI.Dialog.type.small:
            this.className = 'dialog';
            break;
         case Base.UI.Dialog.type.large:
            this.className = 'dialoglg';
            break;
      }
      
      this.id = id;
      this.content = content;
      this.caption = caption;
      this.x = x;
      this.y = y;
      this.onClose = onClose;
      this.initButtons = buttons;
      
      this.render();
   },
   
   render: function()
   {
      var dialog = $new('div', this.id, this.className);
      var top = $new('div', null, 'top');
      var caption = $new('div', null, 'caption');
      var mid = $new('div', null, 'mid');
      var content = $new('div', null, 'content');
      var bot = $new('div', null, 'bot');
      var buttons = $new('div', '_Buttons', 'buttons');
    
      caption.innerHTML = this.caption;
      top.appendChild(caption);
    
      mid.appendChild(content);
      if(this.content) content.appendChild(this.content);
    
      this.buttons = buttons;  
      this.addButtons(this.initButtons);
      
      bot.appendChild(buttons);
    
      dialog.appendChild(top);
      dialog.appendChild(mid);
      dialog.appendChild(bot);
      dialog.style.left = this.x + 'px';
      dialog.style.top = this.y + 'px';
     
      this.content = content;
      this.dialog = dialog;
      
      document.body.appendChild(dialog);
   },
   
   close: function()
   {
      if(this.maskId && this.maskId.length > 0) Base.UI.killMask(this.maskId);
      this.maskId = null;
      document.body.removeChild(this.dialog);
      if(this.onClose) this.onClose();
   },
   
   disable: function()
   {
      this.maskId = Base.UI.waitMask(this.content);
      var c = this.buttons._children();
      for(var i=0;i<c.length;i++)
         Sd.UI.disableButton(c[i], false, true);
   },
   
   clearContent: function()
   {
      this.content._children().clear();
   },

   clearMask: function()
   {
      if(this.maskId && this.maskId.length > 0) Base.UI.killMask(this.maskId);
      this.maskId = null;
   },
   
   clearButtons: function()
   {
      this.buttons._children().clear();
   },
   
   addContent: function(content)
   {
      this.content.appendChild(content);
   },
   
   addButtons: function(buttons)
   {
      for(var button in buttons)
      {
         var b = $new('input', null, button);
         b.type = 'image';
         b.src = '/images/base/space.gif';
         b.buttonClick = buttons[button];
         b.onclick = function(){ if(this.buttonClick){ this.buttonClick(); }; return false; };
         b.dialog = this;
         this.buttons.appendChild(b);
      }   
   },
   
   addResult: function(result, message)
   {
      var res = $new('div', null, 'result');
      var msg = $new('span');
      var cheeky = $new('span', null, ((result == true) ? 'score' : 'fail'));

      cheeky.innerHTML = (result == true) ? 'Huzzah! ' : 'Oh Bother. ';
      msg.innerHTML = message;
      
      res.appendChild(cheeky);
      res.appendChild(msg);
      
      this.addContent(res);
   }
}

