function swap(id){
    switch(id){
      case 'login':
        if (document.getElementById(id).className == "hideContent"){
          document.getElementById(id).style.top = "100px";
          document.getElementById(id).style.left = "200px";
          document.getElementById(id).style.width = "450px";
          document.getElementById(id).style.height = "125px";
          document.getElementById(id).className = "showContent";
        } else {
          document.getElementById(id).className = "hideContent"; 
        }        
        break;
      default:
        var el = document.getElementById(id);
        el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
        el.style.display = (el.style.display == "inline") ? "none" : "inline";
        break;
    }
    pageScroll();//%%%%%%%%%%%%%% -- CALL TO PAGE SCROLL
  }
    
  function pageScroll() {
    window.scroll(0,0);
  }

  function addListElement(innerId, listId){
    var list_length = document.getElementById(listId).childNodes.length;    
    var parentParagraph = document.getElementById(listId);
    var uniqueId = new Date().getTime();
    var newSpan = document.createElement("span");
    newSpan.innerHTML = '<textarea class="list_element" name="list_content_' + uniqueId + '" rows="" cols=""></textarea><input type="hidden" name="position_' + uniqueId + '" value="' + list_length + '" id="position_' + uniqueId + '"/><input type="button" value="Delete" onclick="deleteListElement(\'' + listId + '\', \'listElId_' + uniqueId + '\');"/><input type="button" value="up" onclick="listElementUp(\'' + listId + '\', \'listElId_' + uniqueId + '\');"/><input type="button" value="Down" onclick="listElementDown(\'' + listId + '\', \'listElId_' + uniqueId + '\');"/><br/>';
    newSpan.id = 'listElId_' + uniqueId;
    parentParagraph.appendChild(newSpan);
  }


  function deleteListElement(listId, listElId){
    var parentParagraph = document.getElementById(listId);
    var spanToRemove = document.getElementById(listElId);
    var lastSpan = document.getElementById(listId).lastChild;
    
    if (spanToRemove == lastSpan){//last one was picked
      parentParagraph.removeChild(spanToRemove);
    } else {
      parentParagraph.removeChild(spanToRemove);
      var list_length = document.getElementById(listId).childNodes.length;
      var i;    
      var idArray = new Array();
      for (i = 0; i < list_length; i++){
        idArray[i] = document.getElementById(listId).childNodes[i].id;
      }
      var splitId;
      var uniqueId;
      var findId;
      //we've just deleted a list element and don't know which one.  iterate throught the entire list and renumber the value for position
      for (i = 0; i < list_length; i++){
        splitId = idArray[i].split("_");
        uniqueId = splitId[1];
        findId = 'position_' + uniqueId;
        document.getElementById(findId).value = i; 
      }
    }    
  }


  function listElementUp(listId, listElId){
    var parentNode = document.getElementById(listId);//p element that contains the list items(span elements)
    var nodeToGoUp = document.getElementById(listElId);//id of span element to move up
    var nodeToGoUPId;//variable to compare to listElId in loop to find id of the reference element--the element that insertBefore() will reference
    var referenceElement;//element that insertBefore() will reference
    var referenceElementId;
    var i;
    var numNodes = parentNode.childNodes.length;

    for (i = 0; i < numNodes; i++){
      nodeToGoUpId = parentNode.childNodes[i].id;  
      if (nodeToGoUpId == listElId){//we found the one we want to go up
        if (i != 0){//we didn't pick the first one in the list
          referenceElementId = parentNode.childNodes[i - 1].id;
          referenceElement = document.getElementById(referenceElementId);
          parentNode.insertBefore(nodeToGoUp, referenceElement);
          var list_length = document.getElementById(listId).childNodes.length;
          var i;    
          var idArray = new Array();

          for (i = 0; i < list_length; i++){
            idArray[i] = document.getElementById(listId).childNodes[i].id;
          }
          //we've just moved a list element and they are out of order.  iterate throught the entire list and renumber the value for position
          var splitId;
          var uniqueId;
          var findId;
          for (i = 0; i < list_length; i++){
            splitId = idArray[i].split("_");
            uniqueId = splitId[1];
            findId = 'position_' + uniqueId;
            document.getElementById(findId).value = i; 
          }
        }  
      }
    }
  }

  function listElementDown(listId, listElId){
    var parentNode = document.getElementById(listId);//p element that contains the list items(span elements)
    var nodeClickedOn = document.getElementById(listElId);//id of span element clicked on
    var nodeClickedOnId;
    var referenceElementId;//ID OF ELEMENT AFTER THE ONE CLICKED ON
    var i;
    var numNodes = parentNode.childNodes.length;
    for (i = 0; i < numNodes; i++){
      nodeClickedOnId = parentNode.childNodes[i].id;  
      if (nodeClickedOnId == listElId){//we found the one we clicked on
        if (i < numNodes - 1){//we didn't click on the last one in the list
          referenceElementId = parentNode.childNodes[i + 1].id;//GET THE ID OF THE ELEMENT AFTER THE ONE CLICKED ON
          listElementUp(listId, referenceElementId);/////////////////FUNCTION CALL TO listElementUp -- INSTEATD OF A NEW FUNCTION TO MOVE ELEMENST DOWN
          //WE ARE CALLING THE UP FUNCTION WITH THE ID OF THE ELEMENT OF THE ONE BELOW THE ONE WE CLICKED
          break;
        }  
      }
    }
  }