// Add javascript to the elements with the correct classes

/*
To use the showItem function function (which uses a link to hide/unhide an HTML element, do the following:

  1. add the class of "show_item" to the link that you want to toggle the hiding/unhiding
    <a href="#empty" class="show_item">Add doc</a>
  2. create the item that you want to hide/unhide, and put an id on it
    <div id="add_document">...form for adding document in here</div>
  3. add an attribute called elementId to the link that is equal to the id of the element you just created
    <a href="#empty" class="show_item" elementId="add_document">Add doc</a>
*/

function initPage() {
  var anchors = document.getElementsByTagName('a');
  var divs = document.getElementsByTagName('div');

  // updated swapping code - this makes show_item, swap_item and hide_item obsolete
  for (var i=0;i<anchors.length;i++) {
    if (anchors[i].className == 'move_items') {
      anchors[i].onclick = moveItems;
    }
  }  
  
  // this is needed to make sure that the checks for the status of the item are working
  for (var i=0;i<divs.length;i++) {
    if (divs[i].className == 'hidden_action') {
      divs[i].style.display = 'none';
    }
  }
  
}

addEventSimple(window,'load',initPage);


// Updated function for swapping, hiding and showing items on a page that is much easier to use
/***************
This function has four things that it does.  To get it to work, you must add a class of "move_items" to a link.  When this link is clicked, it will trigger the actions specific by attributes you place on the anchor tag.

To hide any items on the page with this JS function, you need to put a class of "hidden_action" on it.

1. Hide any items on the page with an id that is the same as the hideId attributes
          For example: <a href="#empty" hideId1="big_item">Text</a>
          This will hide the item on the page with an id of big_item when the link is clicked
          
2. Show any items on the page with an id that is the same as the showId attributes
          For example: <a href="#empty" showId1="big_item">Text</a>
          This will show the item on the page with an id of big_item when the link is clicked
          
3. Toggle the display state (block/none) of any items on the page with an id that is the same as the toggleId attributes
          For example: <a href="#empty" toggleId1="big_item">Text</a>
          This will switch the display state of the item on the page with an id of big_item when the link is clicked.  If big_item is display:none, now it will be visible, display: block, and vice versa
          
          This is generally used to hide/show an item on the page such as instructions on clicking the link, or to swap two items (such as a form for editing content and the display of that content in its current state with a text link to edit/view the content)
          
4. Swap the text of the link with the class of "move_items" if attributes of swapText1 and swapText2 are defined
          For example: <a href="#empty" swapText1="Text" swapText2="Text Alt">Text</a>
          Once the link is clicked, it will detect the text of the link currently and it will replace it with the other swapText content.  In this case, the link text is "Text" and so it will be replaced with "Text Alt"

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

function moveItems() {
  
  // Hide any of these items if an attribute is set and they exist
  if (this.getAttribute('hideId1') != undefined) {
    if (document.getElementById(this.getAttribute('hideId1')) != undefined) document.getElementById(this.getAttribute('hideId1')).style.display = 'none';
  }
  if (this.getAttribute('hideId2') != undefined) {
    if (document.getElementById(this.getAttribute('hideId2')) != undefined) document.getElementById(this.getAttribute('hideId2')).style.display = 'none';
  }
  if (this.getAttribute('hideId3') != undefined) {
    if (document.getElementById(this.getAttribute('hideId3')) != undefined) document.getElementById(this.getAttribute('hideId3')).style.display = 'none';
  }  


  // Show any of these items if they exist and an attribute is set
  if (this.getAttribute('showId1') != undefined) {
    if (document.getElementById(this.getAttribute('showId1')) != undefined) document.getElementById(this.getAttribute('showId1')).style.display = 'block';
  }
  if (this.getAttribute('showId2') != undefined) {
    if (document.getElementById(this.getAttribute('showId2')) != undefined) document.getElementById(this.getAttribute('showId2')).style.display = 'block';
  }
  if (this.getAttribute('showId3') != undefined) {
    if (document.getElementById(this.getAttribute('showId3')) != undefined) document.getElementById(this.getAttribute('showId3')).style.display = 'block';
  }

  
  // If there are toggleId attributes set, check to see their current state (displaying or not), and switch it to the opposite.  Basically this will hide any items that are currently shown (display: block;) and show any items that are hidden (display: none;)
  if (this.getAttribute('toggleId1') != undefined) document.getElementById(this.getAttribute('toggleId1')).style.display = (document.getElementById(this.getAttribute('toggleId1')).style.display == 'none') ? 'block' : 'none';
  if (this.getAttribute('toggleId2') != undefined) document.getElementById(this.getAttribute('toggleId2')).style.display = (document.getElementById(this.getAttribute('toggleId2')).style.display == 'none') ? 'block' : 'none';
  
  // if the text in the link that triggers this action is to be swapped, swap it.  You MUST define attributes for both swapText1 and swapText 2 for this to work.
  if (this.getAttribute('swapText1') != undefined && this.getAttribute('swapText2') != undefined) {
    this.innerHTML = (this.innerHTML == this.getAttribute('swapText1')) ? this.getAttribute('swapText2') : this.getAttribute('swapText1');
  }
}