var Popup = {

    start: function(){
    
        //get the productrange elements
        var ranges = document.getElements('div[class=productrange]');
        var note = $('Note');
        
        ranges.each(function(el, i){
        
            //find the hyperlink which is the link surrounding the image
            var range = el.getElement('a[class=rangeimage]');
            //also find the noteDescription hidden field
            var noteDescription = el.getElement('input[class=noteDescription]');
            
            range.addEvent('mouseover', function(event){
                if ( noteDescription.getProperty('value') != '' ) 
                {
                    note.set('opacity', 0);
                    note.setStyle('visibility', 'visible');
                    note.set('text', noteDescription.getProperty('value'));
                    note.setStyle('left', event.client.x - 166); //for now tracking mouse, but use 300 for absolute central image position
                    note.setStyle('top', event.client.y + 10); //for now tracking mouse, but use 320 for absolute central image position
                    note.fade(0.95);
                }
            });
            
            //mouse tracking
            range.addEvent('mousemove', function(event){
                note.setStyle('left', event.client.x - 166);
                note.setStyle('top', event.client.y + 10);
            });
            
            range.addEvent('mouseout', function(event){
                note.set('opacity', 0);
            });
            
        });
    
    }
    
}

window.addEvent('load', Popup.start);