//*****************************************************************************************************
//*** Author:     Ruediger von Creytz     ruediger.creytz@globalbit.net                             ***
//*** Copyright:  globalBIT, LLC          http://www.globalbit.net                                  ***
//*** Version:    20090905                                                                          ***
//*****************************************************************************************************


//*****************************************************************************************************
//*** Implement following lines into the head of your template: ***************************************
//*****************************************************************************************************
/*

<script src="JS/popup.js" type="text/javascript"></script>

*/
//*****************************************************************************************************
//*****************************************************************************************************

var popupCallbacks = new Array();
var popupClicked = "";
var popupMouseX = 0;
var popupMouseY = 0;
var popupValues = new Array();

//*****************************************************************************************************

/**
 * Displays a popup that has been created by "writePopupLayer(id, width, height)".
 * @param id ID used to identify the popup.
 * @param caption Caption to put into the popup.
 * @param content Content to put into the popup.
 * @param callback A function to call on hiding the popup. E.g.: "alert('Hiding popup')".
 */
function displayPopupLayer(id, caption, content, callback) {
  for(var i=0; i<popupCallbacks.length; i++) {
    if(popupCallbacks[i] != null && popupCallbacks[i][0] == id) {
      if(popupCallbacks[i][1] == callback)
        return;
      window.setTimeout(popupCallbacks[i][1], 1);
      popupCallbacks[i] = null;
    }
  }

  for(var i=0; i<popupValues.length; i++) {
    if(popupValues[i][0] == id) {
      width = popupValues[i][1];
      height = popupValues[i][2];
    }
  }

  if(content != null)
    document.getElementById("popupContent" + id).innerHTML = content;
  if(caption != null)
    document.getElementById("popupCaption" + id).innerHTML = "<b>" + caption + "</b>";
  var filterDivObj = document.getElementById("popup" + id);
  if(window.event) {
    filterDivObj.style.left = (document.body.clientWidth/2)-(width/2)+document.body.scrollLeft;
    filterDivObj.style.top = (document.body.clientHeight/2)-(height/2)+10+document.body.scrollTop;
  }
  else {
    filterDivObj.style.left = (document.body.clientWidth/2)-(width/2)+document.body.scrollLeft + "px";
    filterDivObj.style.top = (document.body.clientHeight/2)-(height/2)+10+document.body.scrollTop + "px";
  }
  filterDivObj.style.display = "block";

  if(callback != null && callback != "")
    popupCallbacks[popupCallbacks.length] = new Array(id, callback);
}

//*****************************************************************************************************

/**
 * Hides a popup layer created by "writePopupLayer(id, width, height)".
 * @param id ID used to identify the popup.
 */
function hidePopupLayer(id) {
  document.getElementById("popup" + id).style.display = "none";

  for(var i=0; i<popupCallbacks.length; i++) {
    if(popupCallbacks[i] != null && popupCallbacks[i][0] == id) {
      window.setTimeout(popupCallbacks[i][1], 100);
      popupCallbacks[i] = null;
    }
  }
}

//*****************************************************************************************************

/**
 * Prepares for moving a popup layer.
 * @param id ID used to identify the popup.
 */
function preMovePopupLayer(event, id) {
  popupClicked = id;
  if(window.event) {
    popupMouseX = window.event.x;
    popupMouseY = window.event.y;
  }
  else if(event) {
    popupMouseX = event.layerX;
    popupMouseY = event.layerY;
  }

  document.onmousemove = movePopupLayer;
  document.onmouseup = postMovePopupLayer;
}

/**
 * Moves a popup layer.
 */
function movePopupLayer(event) {
  var filterDivObj = document.getElementById("popup" + popupClicked);
  if(window.event) {
    filterDivObj.style.pixelLeft = filterDivObj.style.pixelLeft + window.event.x - popupMouseX;
    filterDivObj.style.pixelTop = filterDivObj.style.pixelTop + window.event.y - popupMouseY; 

    popupMouseX = window.event.x;
    popupMouseY = window.event.y;
  }
  else if(event) {
    filterDivObj.style.left = event.pageX - popupMouseX + "px";
    filterDivObj.style.top = event.pageY - popupMouseY + "px";
  }
}

/**
 * Stops moving a popup layer.
 */
function postMovePopupLayer() {
    popupClicked = "";
    popupMouseX = 0;
    popupMouseY = 0;

    document.onmousemove = null;
    document.onmouseup = null;
}

//*****************************************************************************************************

/**
 * Writes the basis for a popup layer.
 * @param id ID used to identify the popup.
 * @param width Width the popup shall have.
 * @param height Height the popup shall have.
 */
function writePopupLayer(id, width, height) {
  writePopupLayerHeader(id, width, height);
  writePopupLayerFooter(id, width, height);
}

//*****************************************************************************************************

/**
 * Writes the footer for a popup layer.
 * @param id ID used to identify the popup.
 * @param width Width the popup shall have.
 * @param height Height the popup shall have.
 */
function writePopupLayerFooter(id, width, height) {
  document.write(""
            + "</div>"
          + "</td>"
        + "</tr>"
      + "</table>"
      + "</td></tr></table>"
    + "</div>"
  );
}

//*****************************************************************************************************

/**
 * Writes the header for a popup layer.
 * @param id ID used to identify the popup.
 * @param width Width the popup shall have.
 * @param height Height the popup shall have.
 */
function writePopupLayerHeader(id, width, height) {
  popupValues[popupValues.length] = new Array(id, width, height);

  document.write(""
    + "<div id=\"popup" + id + "\" style=\"background-color:#000000;display:none;height:169px;left:0px;position:absolute;top:0px;width:"+width+"px;z-index:90\">"
      + "<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" style=\"background-color:#000000;border-spacing:0px;padding:0px\"><tr><td style=\"padding:1px\">"
      + "<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" style=\"background-color:#d6d2ce;border-top:1px solid #ffffff;border-left:1px solid #ffffff;border-right:1px solid #848284;border-bottom:1px solid #848284;border-spacing:1px;padding:2px\">"
        + "<tr>"
          + "<td nowrap>"
            + "<table border=\"0\" cellpadding=\"0\" cellspacing=\"1\" style=\"background-color:#21387b;border:0;padding:0px\">"
              + "<tr>"
                + "<td id=\"popupCaption" + id + "\" align=\"left\" onmousedown=\"preMovePopupLayer(event,'"+id+"'); return false;\""
                + " style=\"color:#ffffff;cursor:pointer;font-family:arial,helvetica,sans-serif;font-size:12px;font-style:normal;font-weight:normal;padding:3px;text-align:left;white-space:nowrap\" width=\"100%\">"
                  + "<b>Filter</b>"
                + "</td>"
                + "<td style=\"color:#ffffff;vertical-align:middle;padding-top:1px;padding-right:2px;padding-bottom:1px;text-align:left;width:18px\">"
                  + "<a href=\"JavaScript:hidePopupLayer('" + id + "')\">"
                    + "<img border=\"0\" src=\"/layout/close2_16x16.gif\">"
                  + "</a>"
                + "</td>"
              + "</tr>"
            + "</table>"
          + "</td>"
        + "</tr>"
        + "<tr>"
          + "<td style=\"background-color:#ffffff;color:#000000;font-family:arial,helvetica,sans-serif;font-size:0.7em;font-style:normal;font-weight:normal;margin:0px 0px;padding:0px;text-align:left\" align=\"center\" nowrap>"
            + "<div id=\"popupContent"+id+"\" style=\"background-color:#ffffff;color:#000000;font-family:arial,helvetica,sans-serif;font-style:normal;font-weight:normal;height:"+height+"px;margin:1px 1px;overflow:scroll;padding-bottom:1px;padding-left:3px;padding-right:3px;padding-top:1px;text-align:left;width:"+width+"px;white-space:nowrap\">"
//            + "<div id=\"popupContent"+id+"\" nowrap style=\"background-color:#ffffff;color:#000000;font-family:arial,helvetica,sans-serif;font-style:normal;font-weight:normal;height:"+height+"px;margin:0px 0px;overflow:scroll;padding-bottom:1px;padding-left:3px;padding-right:3px;padding-top:1px;text-align:left;scrollbar-face-color:#ddeaf5;scrollbar-shadow-color:#306898;scrollbar-3dlight-color:#306898;scrollbar-arrow-color:#303047;scrollbar-track-color:#e8f1f8;scrollbar-darkshadow-color:#e8f1f8;scrollbar-base-color:#e8f1f8;width:"+width+"px\">"
  );
}

//*****************************************************************************************************