/*************************************************************************************************
* Toggles a DHTML layer
* - src The image element clicked to calculate the position
* - targetList The list to with values
* - hiddenField The form-field to set the selected value
* - elemId The id of the layer to toggle(default: 'dhtmlPopup')
**************************************************************************************************/
function dhtmlPopup(src, targetList, hiddenField, elemId) {
  elemId = (elemId) ? elemId : "dhtmlPopup";
  var elem = document.getElementById(elemId);
  if (elem.active) {
    elem.style.display = "none";
    elem.active = false;
  } else {
    var spans = src.getElementsByTagName("SPAN");
    //use an array for better performance
    var innerSrc = new Array();
    for (i = 0; i < spans.length; i++) {
      innerSrc.push("<li><a href=\"##\" onclick=\"return !dhtmlSelectAndPopdown(\'");
      innerSrc.push(elemId);
      innerSrc.push("\', \'");
      innerSrc.push(targetList);
      innerSrc.push("\', ");
      innerSrc.push(String(i));
      innerSrc.push(" , \'");
      innerSrc.push(hiddenField);
      innerSrc.push("\')\">");
      innerSrc.push(spans[i].innerHTML);
      innerSrc.push("</a></li>\r\n");
    }
    //fix for width problem on ie mac
    elem.innerHTML = "";
    elem.innerHTML = innerSrc.join("");

    //calculate the offset
    if (src.nodeName != "IMG") {
      src = src.getElementsByTagName("IMG")[0]
    }
    var xpos = src.offsetLeft + src.width; 
    var ypos = src.offsetTop + src.height;

    var parentElem = src.offsetParent;    
    while (parentElem != null) {
      xpos += parentElem.offsetLeft;
      ypos += parentElem.offsetTop;
      parentElem = parentElem.offsetParent;
    }
  
    elem.style.left= xpos + "px";
    elem.style.top= ypos + "px";
    
    //display the layer
    elem.style.display = "block";
    elem.active = true;
  }
  return true;
}

/*************************************************************************************************
* Select a value from a dhtmlPopup and closes it
* - layerId the dhtml layer to close
* - listId The list to get the value from
* - itemnr The position of the value in the list
* - name The name of the field to set
* - className The className to set an item in the list selected
**************************************************************************************************/
function dhtmlSelectAndPopdown(layerId, listId, itemnr, name, className) {
  var elem = document.getElementById(layerId);
  if (elem.active) {
    //first close layer
    elem.style.display = "none";
    elem.active = false;
    var box = document.getElementById(listId);
    var spans = box.getElementsByTagName("SPAN");
    if (spans.length > 0) {
      className = (className) ? className : "defaultChoice"
      for (i = 0; i < spans.length; i++) {
        if (i == itemnr) {
          addCSSClass(spans[i], className);
          value = spans[i].innerHTML.trim();
        } else {
          removeCSSClass(spans[i], className);
        }
      }
    }
    if (name && document.getElementById(name)) {
      document.getElementById(name).value = value.trim();
    }
  }
  return true;
}

/*************************************************************************************************
* Utility methods for changing class attributes of html elements
* - elemId The value of the elements id
* - className The className to use
**************************************************************************************************/

/* Add className value to elements class attribute
------------------------------------------- */
function addCSSClass(elem, className) {
  removeCSSClass(elem, className);
  //var elem = document.getElementById(elemId);
  elem.className = ( elem.className + " " + className ).trim();
}

/* Removes className value from the elements class attribute
------------------------------------------- */
function removeCSSClass(elem, className) {
  //var elem = document.getElementById(elemId);
  elem.className = elem.className.replace( className, "" ).trim();
}

/* Changes the class attribute value into className
------------------------------------------- */
function changeCSSClass(elemId, className) {
  var elem = document.getElementById(elemId);
  elem.className = className;
}

/*  Trims leading and trailing whitespace from string
------------------------------------------- */
String.prototype.trim = function() {
  return this.replace( /^\s+|\s+$/, "" );
}