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

  -------------------------------
  |  Script:    fontChanger.js  |
  |-----------------------------|
  |  By:        Justin Johnson  |
  |-----------------------------|
  |  Created:   10/04/2007      |
  |-----------------------------|
  |  Modified:  10/09/2007      |
  -------------------------------

  -----------
  |  Usage  |
  -----------

  <script type="text/javascript" src="/js/fontChanger.js"></script>
  ...
  <div id="fontChanger">
    <h1>Change Font Size</h1>
    <p>
      <a href="#" onClick="fontChanger(0);">Font +</a>&nbsp;&nbsp;
      <a href="#" onClick="fontChanger(1);">Font -</a>&nbsp;&nbsp;
      <a href="#" onClick="fontChanger(2);">Reset Font</a>
    </p>
  </div>

  NOTE:  Use one of the following values as the argument
  0 = Increase font size
  1 = Decrease font size
  2 = Reset font size (12px by default)
  Anything else = nothing
  
  NOTE: You need to define what container the text you want to alter lies in.
        If you want it to apply to the whole page, you can comment out line 83
        and change line 84 from "var allTags = content.getElem..." to 
        "var allTags = document.getElem..."

  ------------
  |  Styles  |
  ------------

  #fontChanger
  {
    text-align: center;
    padding: 5px;
    width: 200px;
    border: 0px solid #000000;
  }

  #fontChanger h1
  {
    color: #990000;
    font-size: 12px;
    margin-bottom: 7px;
  }

  #fontChanger a
  {
    text-decoration: none;
    display: inline;
    padding: 2px 5px 2px 5px;
    border: 1px solid #999999;
  }

  #fontChanger a:hover
  {
    text-decoration: none;
    background-color: #F6F6F6;
    border: 1px solid #000000;
  }

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

function fontChanger(operation, div_name)
{
  // Setting up array of tags, use as many as you want.
  var tagList = new Array('p', 'td', 'li', 'label');

  // Looping through array of tags
  for(var i = 0; i < tagList.length; i++)
  {
    var content = document.getElementById(div_name);
    var allTags = content.getElementsByTagName(tagList[i]);
    for(var j = 0; j < allTags.length; j++)
    {
      // If a font size is set, use it, else use 11px by default
      if(allTags[j].style.fontSize)
      {
        var size = parseInt(allTags[j].style.fontSize.replace('px', ''));
      }
      else
      {
        var size = 11;
      }

      // Based on what value operation is, do that operation
      // 0 = Increase font size by 1
      // 1 = Decrease font size by 1
      // 2 = Reset font size (12px by default)
      // Anything else, do nothing...
      switch(operation)
      {
        case 0:
          size += 1;
          break;

        case 1:
          size -= 1;
          break;

        case 2:
          size = 11;
          break;

        default:
          break;
      }
      
      // Finally, re-write style with new font size
      allTags[j].style.fontSize = size + 'px';
    }
  }
}