var timer = ShowReferencesInfo.delay(1);

window.addEvent('domready', function () {   
   DesaturateItems();
});  

function DesaturateItems(){
   $$('.reference_box').each(function(element,index) {  
        element.setStyle('opacity', 0.5);
        
        element.addEvent('mouseenter', function(e) {
	        this.setStyle('opacity', 1);
            $clear(timer);
            $('references_info').setStyle('display','none');
            
            var newTop = this.getPosition().y - $('frame_middle').getPosition().y -10;
            var max_height = window.getHeight() + getScrollTop() - $('testimonials').getPosition().y -20 ;
            $(this.getProperty('name')).setStyle('display','block');
    
            if ((newTop + $(this.getProperty('name')).getHeight()) > max_height){
                var newTop = max_height - $(this.getProperty('name')).getHeight();
                
                if (newTop < $('frame_middle').getPosition().y)
                    newTop = $('frame_middle').getPosition().y;
            }
            
            $(this.getProperty('name')).setStyle('top', newTop);
	    });
	
	    element.addEvent('mouseleave', function(e) {
            this.setStyle('opacity', 0.5);
            $(this.getProperty('name')).setStyle('display','none');
            timer = ShowReferencesInfo.delay(400);
        });  
   });  
}

function ShowReferencesInfo(){
    $('references_info').setStyle('display','block');
}

function getWindowHeight() {	
	return document.all ? Math.max(Math.max(document.documentElement.offsetHeight, document.documentElement.scrollHeight), Math.max(document.body.offsetHeight, document.body.scrollHeight)) : (document.body ? document.body.scrollHeight : ((document.documentElement.scrollHeight != 0) ? document.documentElement.scrollHeight : 0));
}

function getScrollTop() {
    return document.all ? (!document.documentElement.scrollTop ? document.body.scrollTop : document.documentElement.scrollTop) : ((window.pageYOffset != 0) ? window.pageYOffset : 0);
}