// 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="margin-top:3px;" />');
			//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 = $j('body').height();
				var winW = $j('body').width();
				if (!(winH > 0) || !(winW>0))
				{
					// For IE.
					winH = document.body.clientHeight;
					winW = document.body.clientWidth;
				}
				
				var top = e.pageY+10;
				var left = e.pageX+10;
				var padding = 10;
				var popupHeight = d.height() + padding;
				var popupWidth = d.width() + padding;

				if (e.pageY > (winH - popupHeight))
				{
					top = e.pageY - popupHeight;
					//left = e.pageX-20;
				}
				
				if (e.pageX > (winW - popupWidth)){
					left = e.pageX - popupWidth;
				}

				// 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);

		}
	});
};