// add the descriptors to the page
$j(document).ready(function() {
	// add descriptor labels to all the features (where applicable)
	$j('.desc-feature').FeatureDescriptor();
});


$j.fn.FeatureDescriptor = function(){
	return this.each(function(){
		var tag = $j(this);
		var mf_id = tag.metadata().mf_id;
		var descriptor = window.constants.features[mf_id];
		var d = null;
		
		// is there a detailed description for this?
		if (descriptor) {
			// yup, create the label
			elm = $j('<img src="/images/infomark.png" alt="More detail on this feature" class="feature-hover" style="float:left;" />');
			//elm = $j('#descIdon'+mf_id);

			// add the mouse hover events
			elm.bind("mouseover", function(e) {
				// display the descriptor box
				d = $j('<div class="descCont" style="position:absolute;"><img src="' + descriptor.image +'"><div class="descText"><h3>'+ descriptor.label +'</h3>'+ descriptor.description +'</div></div>');
				d.appendTo('body');
				
				// Get the window height and width and check if near the bottom of the page.
				var winH = window.innerHeight;
				if (!(winH > 0))
				{
					// For IE.
					winH = document.body.clientHeight;
				}
				var top = e.pageY+10;
				var left = e.pageX+10;

				if (e.pageY > (winH - 230))
				{
					top = e.pageY - 230;
					left = e.pageX-20;
				}

				// positioned near the cursor
				d.css({ left:(left)+'px', top:(top)+'px' });

				if(parseInt(d.css('width'))+ e.pageX+10 > 700){
					d.css({ left:((e.pageX-parseInt(d.css('width')))+10)+'px'});
				}

				if(parseInt(d.css('height'))+ e.pageY-10 > 1100){
					d.css({ top:((e.pageY-parseInt(d.css('height')))-10)+'px'});
				}
			});
			
			elm.bind("mouseout", function(e) {
				// kill the descriptor box
				d.remove();
			});
			
			elm.appendTo(tag);
			//tag.html(tag.html() + elm);

		}
	});
};