/**
 * Helper object to toggle elements visibility and show a single
 * item or all items in the list.
 * 
 * To initialise the object:
 * 
 *  <script type="text/javascript" src="/js/hideshow.js"></script>
 *  <script type="text/javascript">
 *  var myItemIds = new Array();
 *  myItemIds[0] = 'item1';
 *  myItemIds[1] = 'item2';
 *  //...
 *
 *  var myItems = new HideShowBlocks( myItemIds );
 *  </script>
 *
 * To add a link to each item row to view that item only:
 *
 *  <a href="#" onclick="myItems.show('item1')">Item 1</a>
 *  <a href="#" onclick="myItems.show('item2')">Item 2</a>
 *
 * To add a link to view all items:
 *
 *  <a href="#" onclick="myItems.showAll()">View All</a>
 *
 * Each item description needs to be wrapped in a e.g. div tag
 * with the appropriate id set:
 *
 *  <div id="item1">Item 1 description...</div>
 */
function HideShowBlocks( itemIds ) {

  this.itemIds = itemIds;
  this.currentItemId = null;  // null means all visible

  /**
   * Show only the selected item and hide all the others
   */  
  this.show = function( selectedItemId ) {
    if ( this.currentItemId != null ) {
      this._hideElement( this.currentItemId );
      this._showElement( selectedItemId );
    } else {
      for (var i = 0; i < this.itemIds.length; i++ ) {
        var itemId = this.itemIds[i];
        if ( itemId == selectedItemId ) {
          this._showElement( itemId );
        } else {
          this._hideElement( itemId );
        }
      }
    }
    this.currentItemId = selectedItemId;
  }

  /**
   * Show all items
   */
  this.showAll = function() {
    for (var i = 0; i < this.itemIds.length; i++ ) {
      var itemId = this.itemIds[i];
      this._showElement( itemId );
    }
    this.currentItemId = null;
  }

  this._showElement = function( elementId ) {
    var element = document.getElementById( elementId );
    element.style.display = '';
  }

  this._hideElement = function( elementId ) {
    var element = document.getElementById( elementId );
    element.style.display = 'none';
  }
}