/**
 * JQuery Tooltip Plugin
 *
 * Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
 *
 * Written by Shahrier Akram <shahrier.akram@gmail.com>
 *
 * Tooltip is a jQuery plugin implementing unobtrusive javascript interaction that appears
 * near DOM elements, wherever they may be, that require extra information. 
 *
 * Visit http://gdakram.github.com/JQuery-Tooltip-Plugin for demo.
**/
var current = null;

(function($) {
   $.fn.tooltip = function(settings) {
     // Configuration setup
		
     config = { 
       'dialog_content_selector' : 'span.tooltip_description',
       'animation_distance' : 50,
       'opacity' : 1,
       'arrow_left_offset' : 70,
       'arrow_top_offset' : 50,
       'arrow_height' : 0,
       'arrow_width' : 20,
       'animation_duration_ms' : 300,
			 'auto_hide' : true,
			 'css_class' : '',
			 'target_loc_x' : -1,
			 'target_loc_y' : -1
     };  /* auto_hide, LM modification */
     if (settings) $.extend(config, settings);

     /**
      * Apply interaction to all the matching elements
      **/
     this.each(function() {
       $(this).bind("mouseover",function(){
         _show(this);
       });

			if (config.auto_hide)
			{
       $(this).bind("mouseout",function(){
         _hide(this);
       });
			}
     });
          
     /**
      * Positions the dialog box based on the target
      * element's location
      **/
     function _show(target_elm) {
			 if (current==target_elm && $('#tooltip').is(':visible')) return false; current = target_elm;
			
       dialog_content = $(target_elm).find(config.dialog_content_selector)
       dialog_box = _create(dialog_content);
			
       target_elm_position = $(target_elm).offset();
			
			 if (config.target_loc_x>=0) target_elm_position.left = config.target_loc_x;
			 if (config.target_loc_y>=0) target_elm_position.top = config.target_loc_y;
			
       // coming from the top right
       if (target_elm_position.top < $(dialog_box).outerHeight() && target_elm_position.top >= config.arrow_top_offset) {
         position = { 
           start : { 
             left : target_elm_position.left + $(target_elm).outerWidth() + config.animation_distance,
             top  : target_elm_position.top + ($(target_elm).outerHeight() / 2) - config.arrow_top_offset
           },
           end : {
             left : target_elm_position.left + $(target_elm).outerWidth(),
             top  : target_elm_position.top + ($(target_elm).outerHeight() / 2) - config.arrow_top_offset
           },
           arrow_class : "div.left_arrow"
         }
       }
       // coming from the bottom right
       else if (target_elm_position.left < config.arrow_left_offset + $(target_elm).outerWidth() && target_elm_position.top > $(dialog_box).outerHeight()) {
         position = { 
           start : { 
             left : target_elm_position.left + $(target_elm).outerWidth() + config.animation_distance,
             top  : target_elm_position.top + ($(target_elm).outerHeight() / 2) + config.arrow_top_offset - $(dialog_box).outerHeight() + config.arrow_height
           },
           end : {
             left : target_elm_position.left + $(target_elm).outerWidth(),
             top  : target_elm_position.top + ($(target_elm).outerHeight() / 2) + config.arrow_top_offset - $(dialog_box).outerHeight() + config.arrow_height
           },
           arrow_class : "div.left_arrow"
         }
         $(dialog_box).find("div.left_arrow").css({ top: $(dialog_box).outerHeight() - (config.arrow_top_offset * 2) + "px" });
       }
       // coming from the top (!)
       else if (target_elm_position.top + config.animation_distance > $(dialog_box).outerHeight() && target_elm_position.left >= config.arrow_left_offset) {
         position = { 
           start : { 
             left : target_elm_position.left + ($(target_elm).outerWidth() / 2) - config.arrow_left_offset,
             top  : target_elm_position.top - config.animation_distance - $(dialog_box).outerHeight()
           },
           end : {
             left : target_elm_position.left + ($(target_elm).outerWidth() / 2) - config.arrow_left_offset,
             top  : target_elm_position.top - $(dialog_box).outerHeight() + config.arrow_height
           },
           arrow_class : "div.down_arrow"
         }
       }       
       // coming from the bottom
       else if (target_elm_position.top + config.animation_distance < $(dialog_box).outerHeight()) {
         position = { 
           start : { 
             left : target_elm_position.left + ($(target_elm).outerWidth() / 2) - config.arrow_left_offset,
             top  : target_elm_position.top + $(target_elm).outerHeight() + config.animation_distance
           },
           end : {
             left : target_elm_position.left + ($(target_elm).outerWidth() / 2) - config.arrow_left_offset,
             top  : target_elm_position.top + $(target_elm).outerHeight()
           },
           arrow_class : "div.up_arrow"
         }
       }
       
       // position and show the box
       $(dialog_box).css({ 
         top : position.start.top + "px", 
         left : position.start.left + "px"
       });

			$(dialog_box).show();
			 // Arrow support disabled - LM
       //$(dialog_box).find("div.arrow").hide();
       //$(dialog_box).find(position.arrow_class).show();
       
       // begin animation
       $(dialog_box).animate({
         top : position.end.top,
         left: position.end.left
       }, config.animation_duration_ms);
       
     }; // -- end _show function
     
     /**
      * Stop the animation (if any) and remove from dialog box from the DOM
      */
     function _hide(target_elm) {
		 	 $('#tooltip').hide();
       $("body").find("div.tooltip").stop().remove();
     };
     
     /**
      * Creates the dialog box element
      * and appends it to the body
      **/
     function _create(content_elm) {
			var closebtn = '<a href="#" class="closebtn" onclick="$(\'#tooltip\').notooltip(); return false;">&nbsp;</a>';
	
			if ($('#tooltip').length) {
				$('#tooltip').hide();
				$('#tooltip .content').html( '' + $(content_elm).html() );
				return $('#tooltip');
			}
			
       return $("<div id='tooltip' class='tooltip"+(config.css_class!=''?' '+config.css_class:'')+"'>\
         <div class='inner'>"+closebtn+"<div class='content'>" + $(content_elm).html() + "</div></div>\
       </div>").appendTo('body');

       header = ($(content_elm).attr("title")) ? "<h1>" + $(content_elm).attr("title") + "</h1>" : '';

       return $("<div class='tooltip'>\
         <div class='up_arrow arrow'></div>\
         <div class='left_arrow arrow'></div>\
         <div class='content'>" + header + $(content_elm).html() + "</div>\
         <div style='clear:both'></div>\
         <div class='down_arrow arrow'></div>\
       </div>").appendTo('body');
     };
          
     return this; 
   };
 
   $.fn.notooltip = function() {
		 $('#tooltip').hide();
		
     this.each(function() {
				_hide(this);
     });

     function _hide(target_elm) {
       $("body").find("div.tooltip").stop().remove();
			 current = null;
     };
	}

 })(jQuery);