//////////////////////////////////////////////////////////////
// First.js - demonstrate setting behaviors for specific    //
//            events, using Javascript                      //
//                                                          //
// Jim Fawcett, CSE686 - Internet Programming, Spring 2006  //
//////////////////////////////////////////////////////////////

//----< highlight list items on mouseover event >----

function highlightItems()
{
  if(!document.getElementsByTagName)
    return false;
  var items = document.getElementsByTagName("li");
  for (var i=0; i<items.length; i++)
  {
    items[i].onmouseover = function() 
    { 
       this.style.color = "#eee";        /* equivalent to #eeeeee, e.g., R=#ee, G=#ee, B=#ee */
       this.style.background = "#933";   /* equivalent to #99eeee */
    }
    items[i].onmouseout = function()
    {
      this.style.color = "#993333"; 
      this.style.background = "#eeeeee";
    }
  }
}

//----< display an alert when first h1 element is clicked >----

function headingClick()
{
  if(!document.getElementsByTagName)
    return false;
  var items = document.getElementsByTagName("h1");
  if(items.length > 0)
  {
    items[0].onclick = function()
    {
      alert("first heading has been clicked");
    }
  }
}

window.onload=function()
{
  headingClick();
  highlightItems();
}