// Simple jquery tooltip 
// Allows css formatted pop up tool tip to be added to any object (a, span, div etc)
// requires jquery obviously
//
// simply include the script in web page and initialize it with a call in $(document).ready(function()
// identify the target object with standard jquery selectors and define css class to control the look of the tool tip.
//
// syntax:
// simple_tooltip("target","popup cssclass");
// 
// usage example:
//
// simple_tooltip("#ETCHINGPROCESSContainer .tooltip","tip");
//
// The above example adds a popup tool tip for objects in #ETCHINGPROCESSContainer with a class of tooltip
// it extracts the title attribute and put's it into a div with the css class of tip. 
// When the mouse hovers over the target object the new div is displayed and the layout is controled via it's css class of tip displayed based on the style
// 
// the tool tips can display images etc. the default width of the tool tip is 360px. If the tooltip contains a narrower image you can override the default with
// by setting the data attribute of the tooltip object to the image width + 10px  
//    ex: <span class="tooltip" data="260" title="<img src='myimage.jpg'><p>This is a popup tooltip</p>">Target Text</span>
// The target Text can also be another object or image
//  
function simple_tooltip(target_items, name){
//  $("body").append("<div id='debugoutput' style='text-align:left'></div>");
//  var debugoutput = $("#debugoutput");

 $(target_items).each(function(i){

		var curr_tooltip = $(this)
// 		debugoutput.append("curr_tooltip id="+curr_tooltip.attr('id')+"<br />");
// 		debugoutput.append("curr_tooltip data="+curr_tooltip.attr('data')+"<br />");

		//create the new popup div
        $("body").append("<div class='"+name+"' id='"+name+i+"'><p>"+$(this).attr('title')+"</p>");
        var newpopup = $("#"+name+i);
        
        //data attribute contains a custom width if specified otherwise use default
        tooltip_width=curr_tooltip.attr('data');
//         debugoutput.append("tooltip_width ="+tooltip_width+"<br />");
        if (tooltip_width) {
            newpopup.width(tooltip_width);
//             debugoutput.append("custom newpopup.width ="+newpopup.width()+"<br />");
        } else {
            newpopup.width(360);
//             debugoutput.append("default newpopup.width ="+newpopup.width()+"<br />");
        }
		        		
		if(curr_tooltip.attr("title") != "" && curr_tooltip.attr("title") != "undefined" ){

		curr_tooltip.removeAttr("title");
        
        curr_tooltip.mouseover(function(){
            $(".tip").css({display:"none"});
            newpopup.css({opacity:1, display:"none"}).fadeIn(400);
            })
        
        curr_tooltip.mousemove(function(kmouse){
				var border_top = $(window).scrollTop();
				var border_right = $(window).width();
				var left_pos;
				var top_pos;
				var offset = 15;
				if(border_right - (offset *2) >= newpopup.width() + kmouse.pageX){
					left_pos = kmouse.pageX+offset;
					} else{
					left_pos = border_right-newpopup.width()-offset;
					}

				if(border_top + (offset *2)>= kmouse.pageY - newpopup.height()){
					top_pos = border_top +offset;
					} else{
					top_pos = kmouse.pageY-newpopup.height()-offset;
					}

				newpopup.css({left:left_pos, top:top_pos});
		})
		
        curr_tooltip.mouseout(function(){
				newpopup.css({display:"none"});
		});

		}
	});
}