/**
 * TModalWin create a transparent div that covers the entire document
 * (or the element supplied in param) and display a custom content
 * in the middle of the screen
 *
 * @param {String | Element} modal: element to modal (document if null)
 */
var TModalWin = function(clickclose) {
  this.modal = null;
  this.color = '#000';
  this.opacity = 0.8;
  this.content = null;

  // Create Background DIV
  this.back = document.createElement('div');
  this.back.style.zIndex = TModalWin.nextZIndex++;
  this.back.style.display = 'none';
  this.back.style.position = 'absolute';

  // If click close enabled add event to back
  if (clickclose) {
    TEvents.listen(this.back, 'click', this.close, this);
  }

  // Create Front DIV
  this.front = document.createElement('div');
  this.front.style.zIndex = TModalWin.nextZIndex++;
  this.front.style.display = 'none';
  this.front.style.position = 'absolute';
  this.front.style.textAlign = 'center';
};
TModalWin.nextZIndex = 99998;
TModalWin.prototype.createBackFront = function() {
  document.body.appendChild(this.back);
  document.body.appendChild(this.front);
}

/**
 * Show the modal win displaying any content
 * Content can be an string or html code, or an
 * existing element in document.
 * Existing elements will be moved from their actual
 * parent node to the this.front node.
 *
 * @param {String | Element} content: something to display as modal win
 */
TModalWin.prototype.show = function(content) {
  // Erase any previous content
  if (this.content) {
    this.front.removeChild(this.content);
    this.content = null;
  }
  // String or HTML code
  if (typeof content == "string") {
    this.content = document.createElement('div');
    this.content.innerHTML = content;
  } else {
    this.content = content;
  }
  this.open();
}

/**
 * Open the modal win
 * If no content set it means there is nothing to show
 * and modal win will not be opened
 */
TModalWin.prototype.open = function() {
  // Nothing to show
  this.createBackFront();
  if (!this.content) { return; }
  this.resize();
  // If modal to entire document then add event for scroll and resize
  if (!this.modal) {
    TEvents.listen(window, 'resize', this.resize, this);
    TEvents.listen(window, 'scroll', this.resize, this);
  }
}

TModalWin.prototype.resize = function() {
  // Get rec in wich modal will show
  if (this.modal) {
    var rec2 = TDOM.getBounds(this.modal, true);
    if (TUserAgent.IE) {
      rec2.top -= 2;
      rec2.left -= 2;
    }
  } else {
    var size = TDOM.getDocumentSize();
    var rec2 = {top:0, left:0, width:'100%', height:size.height};
  }

  // Center content vertically
  this.front.style.top = '';
  this.front.style.left = '';
  this.front.style.width = '';
  this.front.style.height = '';
  this.front.appendChild(this.content);
  var rec1 = TDOM.getBounds(this.front, true);

  // Center content vertically (if no modal element center in viewport)
  if (this.modal) {
    this.front.style.top = rec2.top + Math.round(rec2.height / 2) - Math.round(rec1.height / 2) + 'px';
    this.front.style.left = rec2.left + Math.round(rec2.width / 2) - Math.round(rec1.width / 2) + 'px';
  } else {
    var rec3 = TDOM.getViewportBounds();
    this.front.style.top = rec3.top + Math.round(rec3.height / 2) - Math.round(rec1.height / 2) + 'px';
    this.front.style.left = rec3.left + Math.round(rec3.width / 2) - Math.round(rec1.width / 2) + 'px';
  }

  // Display both front and back DIV
  this.back.style.top = rec2.top + 'px';
  this.back.style.left  = rec2.left + 'px';
  this.back.style.height = rec2.height + 'px';
  this.back.style.width = typeof rec2.width == "string" ? rec2.width : rec2.width + 'px';
  TDOM.setStyle(this.back, 'opacity', this.opacity);
  TDOM.setStyle(this.back, 'backgroundColor', this.color);
  this.back.style.display = 'block';
  this.front.style.display = 'block';
}

/**
 * Close teh modal win
 */
TModalWin.prototype.close = function() {
  this.back.style.display = 'none';
  this.front.style.display = 'none';
  TEvents.unlisten(window, 'resize', this.resize, this);
  TEvents.unlisten(window, 'scroll', this.resize, this);
}