/*
 * modal.js: create modal windows with ease
 *
 * Requirements:
 * To create a modal window from an element,
 * it is assumed that it has an id and a fixed width value.
 * Also, display:none is highly recommended :)
 *
 * Usage:
 * <!--[if IE 6]>
 *   <script type="text/javascript">
 *     var IE6 = true;
 *   </script>
 * <![endif]-->
 * <script src="http://static.orolix.com.br/web/commons/js/modal.js"
 *     type="text/javascript" defer="defer"></script>
 * 
 * Available functions:
 * makeModal(elementId)    turns an element into a modal window
 * makeModals(arrayOfIds)  turns all elements on the array into modal windows
 * openModal(elementId)    displays the modal window with id elementId
 * closeModal(elementId)   hides the modal window with id elementId
 *
 * Notes:
 * - makeModal and makeModals also creates the translucid background
 *   and sets its ID to "modal_background".
 * - All functions return false.
 * 
 * TODO:
 * - set z-indexes based on other z-indexes found on the page
 *   (right now bg defaults to 10001 and modal windows to 10002)
 * FIXME:
 * - buggy onresize, guess which browser and version
 * - buggy onscroll on the same UA as above
 *
 * Kudos to Luke Breuer @
 *   http://luke.breuer.com/tutorial/javascript-modal-dialog.aspx
 */

var IE6;var IE7;

function makeBackground () {
  var bg = document.createElement("DIV");
  bg.id = "modal_background";
  bg.style.zIndex = "10001";
  bg.style.display = "none";
  bg.style.backgroundColor = "#000000";
  bg.style.filter = "alpha(opacity=60)";
  
  if (IE6) {
    bg.style.position = "absolute";
    var doc = document.documentElement;
    bg.style.left = Math.min(doc.scrollLeft, doc.clientLeft) + "px";
    bg.style.top = Math.min(doc.scrollTop, doc.clientTop) + "px";
    bg.style.width = Math.max(doc.scrollWidth, doc.clientWidth) + "px";
    bg.style.height = Math.max(doc.scrollHeight, doc.clientHeight) + "px";
  } else {
    if (navigator.platform.indexOf("Linux") == -1) {
      bg.style.opacity = "0.60";
    }
    bg.style.position = "fixed";
    bg.style.left = "0";
    bg.style.top = "0";
    bg.style.width = "100%";
    bg.style.height = "100%";
  }
  document.body.appendChild(bg);
}

function makeModals (arrayOfIds) {
  for (var i=0; i < arrayOfIds.length; i++) {
    makeModal(arrayOfIds[i]);
  };
  return false;
}

function makeModal (elementId) {
  if (!document.getElementById("modal_background")) {
    makeBackground();
  }
  var el = document.getElementById(elementId);
  if (!el) return false;
  el.style.position = (IE6 ? "absolute" : "fixed");
  el.style.top = "50%";
  el.style.left = "50%";
  el.style.zIndex = "10002";
  return false;
}

function __displayBaddies (visibility) {
  var badguys = ["SELECT", "IFRAME", "OBJECT"];
  for (var i=0; i < badguys.length; i++) {
    var collection = document.getElementsByTagName(badguys[i]);
    for (var j=0; j < collection.length; j++) {
      if (collection[j].id != "linkLogin") { /* login iframe's ID */
        collection[j].style.visibility = visibility;
      };
    };
  };
}

function openModal (elementId) {
  if (IE6) { __displayBaddies("hidden") };
  if (IE7) { __displayBaddies("hidden") }; 
  document.getElementById("modal_background").style.display = "block";
  var el = document.getElementById(elementId);
  el.style.display = "block";
  el.style.marginLeft = -(el.clientWidth/2) + (IE6 ? document.documentElement.scrollLeft : "") + "px";
  el.style.marginTop = -(el.clientHeight/2) + (IE6 ? document.documentElement.scrollTop : "") + "px";
  return false;
}

function closeModal (elementId) {
  if (IE6) { __displayBaddies("visible") };
  if (IE7) { __displayBaddies("visible") }
  document.getElementById(elementId).style.display = "none";
  document.getElementById("modal_background").style.display = "none";
  return false;
}