// JavaScript Document

if((document.getElementById && document.getElementsByTagName) && (navigator.appName != 'Opera')) // Apply this code to all browsers except Opera, which does not display it properly.
{
// Find the <div> "js-popups" and set its visibility to "visible":
	document.getElementById('js-popups').style.visibility='visible';  
    function hide_all()
    {
// POPUPS: Find all <div> tags nested inside the <div#js-popups> and give each the classname "hide":
        var js_popups=document.getElementById('js-popups').getElementsByTagName('div');
        for(var i=0; i<js_popups.length; i++)
        {
            js_popups[i].className='hide';
        }
    }
    hide_all();
// PRODUCTS: Find all <a> tags nested inside the <div#items> and
//    1. Remove the "href" attribute from each;
//    2. When the mouse hovers over an <a> tag... (continued)
    var items=document.getElementById('items').getElementsByTagName('a'); 
    for(var i=0; i<items.length; i++)
    {
       	items[i].removeAttribute('href'); 
	    items[i].onmouseover=function()
        {
            hide_all();			
//     3. ...find the corresponding <a> Popup tag with the id "js-xxx" (xxx=the same id) and "show" it;
            document.getElementById('js-'+this.id).className='show';
//     4. Change the colour of the hovered <a> element:     
            document.getElementById(this.id).style.color='#CC8000';
        }
        items[i].onmouseout=function()
        {
            hide_all();
//	   5. When the mouse moves out of the hovered <a> tag, hide the Popup and change the colour back.
            document.getElementById('js-'+this.id).className='hide'; 
            document.getElementById(this.id).style.color='#3366CC';
        }
    }
}