// David Ferris - 2014

$(function(){
  /***************************************************************************
                            Word 1's Click Handler
  ----------------------------------------------------------------------------
      When the word1 element is clicked, the sentences div that contains
      sentences will be toggled between hidden and visible states, and
      word1 highlighting will also be toggled. Also, if any other sentences
      are being displayed, they will be hidden and the word's highlighting
      will be removed.
  ***************************************************************************/
  $('#word1').click(function(){

    // Hide all displayed sentences
    for(var i = 1; i < 6; i++)
    {
      if($('#sentences' + i).css('display') == 'block' && i != 1)
      {
        $('#sentences' + i).toggle();
      }
    }

    // Remove any present highlighting
    for(var i = 1; i < 6; i++)
    {
      if($('#word' + i).css('color') == 'rgb(135, 206, 250)' && i != 1)
      {
        $('#word' + i).css('color', '#428bca');
      }
    }

    // Toggle highlighting of the word
    if($(this).css('color') == 'rgb(66, 139, 202)')
      $(this).css('color', '#87CEFA');
    else
      $(this).css('color', '#428bca');

    // Toggle display of sentences div
    $('#sentences1').toggle();
  });

  /***************************************************************************
                            Word 2's Click Handler
  ----------------------------------------------------------------------------
      When the word2 element is clicked, the sentences div that contains
      sentences will be toggled between hidden and visible states, and
      word1 highlighting will also be toggled. Also, if any other sentences
      are being displayed, they will be hidden and the word's highlighting
      will be removed.
  ***************************************************************************/
  $('#word2').click(function(){

    // Hide all displayed sentences
    for(var i = 1; i < 6; i++)
    {
      if($('#sentences' + i).css('display') == 'block' && i != 2)
      {
        $('#sentences' + i).toggle();
      }
    }

    // Remove any present highlighting
    for(var i = 1; i < 6; i++)
    {
      if($('#word' + i).css('color') == 'rgb(135, 206, 250)' && i != 2)
      {
        $('#word' + i).css('color', '#428bca');
      }
    }

    // Toggle highlighting of the word
    if($(this).css('color') == 'rgb(66, 139, 202)')
      $(this).css('color', '#87CEFA');
    else
      $(this).css('color', '#428bca');

    // Toggle display of sentences div
    $('#sentences2').toggle();
  });

  /***************************************************************************
                            Word 3's Click Handler
  ----------------------------------------------------------------------------
      When the word3 element is clicked, the sentences div that contains
      sentences will be toggled between hidden and visible states, and
      word1 highlighting will also be toggled. Also, if any other sentences
      are being displayed, they will be hidden and the word's highlighting
      will be removed.
  ***************************************************************************/
  $('#word3').click(function(){

    // Hide all displayed sentences
    for(var i = 1; i < 6; i++)
    {
      if($('#sentences' + i).css('display') == 'block' && i != 3)
      {
        $('#sentences' + i).toggle();
      }
    }

    // Remove any present highlighting
    for(var i = 1; i < 6; i++)
    {
      if($('#word' + i).css('color') == 'rgb(135, 206, 250)' && i != 3)
      {
        $('#word' + i).css('color', '#428bca');
      }
    }

    // Toggle highlighting of the word
    if($(this).css('color') == 'rgb(66, 139, 202)')
      $(this).css('color', '#87CEFA');
    else
      $(this).css('color', '#428bca');

    // Toggle display of sentences div
    $('#sentences3').toggle();
  });

  /***************************************************************************
                            Word 4's Click Handler
  ----------------------------------------------------------------------------
      When the word4 element is clicked, the sentences div that contains
      sentences will be toggled between hidden and visible states, and
      word1 highlighting will also be toggled. Also, if any other sentences
      are being displayed, they will be hidden and the word's highlighting
      will be removed.
  ***************************************************************************/
  $('#word4').click(function(){

    // Hide all displayed sentences
    for(var i = 1; i < 6; i++)
    {
      if($('#sentences' + i).css('display') == 'block' && i != 4)
      {
        $('#sentences' + i).toggle();
      }
    }

    // Remove any present highlighting
    for(var i = 1; i < 6; i++)
    {
      if($('#word' + i).css('color') == 'rgb(135, 206, 250)' && i != 4)
      {
        $('#word' + i).css('color', '#428bca');
      }
    }

    // Toggle highlighting of the word
    if($(this).css('color') == 'rgb(66, 139, 202)')
      $(this).css('color', '#87CEFA');
    else
      $(this).css('color', '#428bca');

    // Toggle display of sentences div
    $('#sentences4').toggle();
  });

  /***************************************************************************
                            Word 5's Click Handler
  ----------------------------------------------------------------------------
      When the word5 element is clicked, the sentences div that contains
      sentences will be toggled between hidden and visible states, and
      word1 highlighting will also be toggled. Also, if any other sentences
      are being displayed, they will be hidden and the word's highlighting
      will be removed.
  ***************************************************************************/
  $('#word5').click(function(){

    // Hide all displayed sentences
    for(var i = 1; i < 6; i++)
    {
      if($('#sentences' + i).css('display') == 'block' && i != 5)
      {
        $('#sentences' + i).toggle();
      }
    }

    // Remove any present highlighting
    for(var i = 1; i < 6; i++)
    {
      if($('#word' + i).css('color') == 'rgb(135, 206, 250)' && i != 5)
      {
        $('#word' + i).css('color', '#428bca');
      }
    }

    // Toggle highlighting of the word
    if($(this).css('color') == 'rgb(66, 139, 202)')
      $(this).css('color', '#87CEFA');
    else
      $(this).css('color', '#428bca');

    // Toggle display of sentences div
    $('#sentences5').toggle();
  });
});