var tooltipTimers = new Array();

document.observe("dom:loaded", function() {
	var items = $$('.slim span.content');
	items.invoke('observe', 'mouseover', showSlimItemsMetaData);
	items.invoke('observe', 'mousemove', adjustSlimItemMetaDataPosition)
	items.invoke('observe', 'mouseout', hideSlimItemsMetaData);	
	
	var meta_datas = $$('.meta_data');
	meta_datas.invoke('observe', 'mouseover', function(e){
		tooltipTimers[this.id].stop();
	});
	
	meta_datas.invoke('observe', 'mouseout', function(e){
		// We want to close the metadata box when the user mouses off it. However, we can't just assign that observer to the div itself,
		// because it gets triggered even if the user mouses to an element within the div. This code checks what the user mouses too, after mousing out.
		if (!e) var e = window.event;
		var relTarg = e.relatedTarget || e.toElement;
		// We can tell if the user moused off the actual metadata box by checking the class of the element it landed on.
		// All the elements in the metadata box have 'meta_data_element' class, so if the thing it moused to doesn't then close it up.
		if(relTarg && !relTarg.hasClassName('meta_data_element')){
			this.hide();
		}
	});
	
});

function hideAllOtherMetaData(){
	var meta_datas = $$('.meta_data');
	meta_datas.invoke('hide');
}



function showSlimItemsMetaData(e){	
	hideAllOtherMetaData();
	var meta_data = $(this.up().id + '_meta_data');
	meta_data.addClassName('active_meta_data');
	meta_data.setStyle({left: (e.pointerX()-10) + 'px', top: (e.pointerY()+15) + 'px'});	
	$(this.up().id + '_meta_data').show();	
	// Kill the timer if it's running.
	if(tooltipTimers[meta_data.id]){
		tooltipTimers[meta_data.id].stop();
	}	
}

function adjustSlimItemMetaDataPosition(e){
	var meta_data = $(this.up().id + '_meta_data');		
	meta_data.setStyle({left: (e.pointerX()-10) + 'px', top: (e.pointerY()+15) + 'px'});		
}


function hideSlimItemsMetaData(e){
	
	var meta_data = $(this.up().id + '_meta_data');
	var p = new PeriodicalExecuter(function(pe){
		meta_data.hide();
		pe.stop();
	}, 1);
	
	// Stop the old timer, if there was one.
	if(tooltipTimers[meta_data.id]){
		tooltipTimers[meta_data.id].stop();
	}
	
	// Tuck away the new timer.
	tooltipTimers[meta_data.id] = p;
}