var LOverlay = function(dom_element)
{
  this._dom_element = dom_element;
};

LOverlay.prototype._calculateSize = function()
{
  var height = $(this._dom_element).height();
  var width = $(this._dom_element).width();
  return {width:width,height:height};
};

LOverlay.prototype.draw = function()
{
  if ( !this._overlay_element )
  {
    var size = this._calculateSize();
    this._overlay_element = document.createElement('div');
    $(this._overlay_element).css(
    {
      background:'#fff',
      position:'absolute',
      top:0,
      left:0,
      opacity:0.8,
      width: size.width,
      height: size.height
    });
    var img = document.createElement('img');
    $(img).attr('src', '/js/jquery-astrata/images/loading.gif');
    var img_size = {};
    img_size.width = $(img).width();
    img_size.height = $(img).height();
    $(img).css(
    {
      position:'absolute',
      top:(size.height/2-16),
      left:(size.width/2-16)
    });
    if ( $(this._dom_element).css('position') == 'static' )
    {
      $(this._dom_element).css('position','relative');
    }
    $(this._overlay_element).append(img);
    $(this._dom_element).append(this._overlay_element);
  }
  $(this._overlay_element).show();
};

LOverlay.prototype.clear = function()
{
  $(this._overlay_element).fadeOut();
};

var LoadingMask = {
  'add': function(el) {
    var overlay = $(el).data('overlay');
    if (!overlay) {
      var overlay = new LOverlay(el);
      $(el).data('overlay', overlay);
    }
    overlay.draw();
    return overlay;
  },
  'remove': function(el) {
    var overlay = $(el).data('overlay');
    if (overlay) {
      overlay.clear();
    }
  }
}