function getElementsByStyleClass (className) 
{
   var all = document.all ? document.all :
      document.getElementsByTagName('*');
   var elements = new Array();
   for (var e = 0; e < all.length; e++)
   {
      if (all[e].className == className)
      {
         elements[elements.length] = all[e];
      }
   }
   return elements;
}

var selected;

function displayItem(element)
{
   selected.className='item';
   document.getElementById('itemImage').innerHTML = itemImages[element.id];
   element.className='selected';
   selected = element;

   /* 
   The "Other Products" page has items that are of different values.
   If a price for this item has been defined, make sure we use it.
   If a price for this item has not been defined, we assume that the price
   is same for all items. There is nothing to be done.
   */
   if ( prices[element.id] )
   {
      document.getElementById('price').innerHTML = prices[element.id];
      var form = document.cart;
      form.amount.value=prices[element.id];
   }
}

function initialize()
{
   var items = getElementsByStyleClass("item");
   for ( var i in items )
   {
      items[i].onmouseover = function()
      {
         if (selected != this)
         {
            displayItem(this);
         }
      };
   } 

   if ( items.length > 0 )
   {
      selected = items[0];
      document.getElementById('itemImage').innerHTML = itemImages[selected.id];
      selected.className='selected';
   }
}

function addSelectedItemToCart()
{
   var form = document.cart;
   form.item_name.value=itemNames[selected.id];
   form.submit();
}

function check1()
{
   alert(document.getElementById('itemImage').innerHTML);
}

function check2()
{
   alert(document.getElementById('display').innerHTML);
   alert(document.getElementById('display').style.visibility);
}

window.onload = initialize;