/*
 * Copyright (c) 2006 Jonathan Weiss <jw@innerewut.de>
 *
 * Permission to use, copy, modify, and distribute this software for any
 * purpose with or without fee is hereby granted, provided that the above
 * copyright notice and this permission notice appear in all copies.
 *
 * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
 * WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
 * MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
 * ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
 * WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
 * ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
 * OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
 */


/* tooltip-0.2.js - Small tooltip library on top of Prototype 
 * by Jonathan Weiss <jw@innerewut.de> distributed under the BSD license. 
 *
 * This tooltip library works in two modes. If it gets a valid DOM element 
 * or DOM id as an argument it uses this element as the tooltip. This 
 * element will be placed (and shown) near the mouse pointer when a trigger-
 * element is moused-over.
 * If it gets only a text as an argument instead of a DOM id or DOM element
 * it will create a div with the classname 'tooltip' that holds the given text.
 * This newly created div will be used as the tooltip. This is usefull if you 
 * want to use tooltip.js to create popups out of title attributes.
 * 
 *
 * Usage: 
 *   <script src="/javascripts/prototype.js" type="text/javascript"></script>
 *   <script src="/javascripts/tooltip.js" type="text/javascript"></script>
 *   <script type="text/javascript">
 *     // with valid DOM id
 *     var my_tooltip = new Tooltip('id_of_trigger_element', 'id_of_tooltip_to_show_element')
 *
 *     // with text
 *     var my_other_tooltip = new Tooltip('id_of_trigger_element', 'a nice description')
 *
 *     // create popups for each element with a title attribute
 *    Event.observe(window,"load",function() {
 *      $$("*").findAll(function(node){
 *        return node.getAttribute('title');
 *      }).each(function(node){
 *        new Tooltip(node,node.title);
 *        node.removeAttribute("title");
 *      });
 *    });
 *    
 *   </script>
 * 
 * Now whenever you trigger a mouseOver on the `trigger` element, the tooltip element will
 * be shown. On o mouseOut the tooltip disappears. 
 * 
 * Example:
 * 
 *   <script src="/javascripts/prototype.js" type="text/javascript"></script>
 *   <script src="/javascripts/scriptaculous.js" type="text/javascript"></script>
 *   <script src="/javascripts/tooltip.js" type="text/javascript"></script>
 *
 *   <div id='tooltip' style="display:none; margin: 5px; background-color: red;">
 *     Detail infos on product 1....<br />
 *   </div>
 *
 *   <div id='product_1'>
 *     This is product 1
 *   </div>
 *
 *   <script type="text/javascript">
 *     var my_tooltip = new Tooltip('product_1', 'tooltip')
 *   </script>
 *
 * You can use my_tooltip.destroy() to remove the event observers and thereby the tooltip.
 */

var Tooltip = Class.create();
Tooltip.prototype = {
  initialize: function(element, tool_tip) {
    var options = Object.extend({
	  min_distance_x: 10,
      min_distance_y: 10,
      arrow_pos_x:'',
      arrow_pos_y:'',      
      zindex: 100000
    }, arguments[2] || {});

    this.element      = $(element);

    this.options      = options;
    
    // use the supplied tooltip element or create our own div
    if($(tool_tip)) {
      this.tool_tip = $(tool_tip);
    } else {
      this.tool_tip = $(document.createElement("div")); 
      document.body.appendChild(this.tool_tip);
      this.tool_tip.addClassName("tooltip");
      this.tool_tip.appendChild(document.createTextNode(tool_tip));
    }

    // hide the tool-tip by default
    this.tool_tip.hide();

    this.eventMouseOver = this.showTooltip.bindAsEventListener(this);
    this.eventMouseOut   = this.hideTooltip.bindAsEventListener(this);
    this.eventMouseMove  = this.moveTooltip.bindAsEventListener(this);

    this.registerEvents();
  },

  destroy: function() {
    Event.stopObserving(this.element, "mouseover", this.eventMouseOver);
    Event.stopObserving(this.element, "mouseout", this.eventMouseOut);
    Event.stopObserving(this.element, "mousemove", this.eventMouseMove);
  },

  registerEvents: function() {
    Event.observe(this.element, "mouseover", this.eventMouseOver);
    Event.observe(this.element, "mouseout", this.eventMouseOut);
    Event.observe(this.element, "mousemove", this.eventMouseMove);
  },

  moveTooltip: function(event){
	  event.stop();
		var scroll = document.viewport.getScrollOffsets();
	  // get Mouse position
      var mouse_x = event.pointerX();
	  var mouse_y = event.pointerY();

	
	  // decide if wee need to switch sides for the tooltip
	  var dimensions = Element.getDimensions( this.tool_tip );
	  var element_width = dimensions.width;
	  var element_height = dimensions.height;

		var win = document.viewport.getDimensions();
	
// X-Achse überprüfen - Horizontale Positionierung		
		
		if ((win.width - ((mouse_x + this.options.min_distance_x) - scroll.left)) <= (element_width / 2)){
			mouse_x = mouse_x - element_width; // links neben mauszeiger
			this.options.arrow_pos_x = 'right';
			
			if (this.options.arrow_pos_y != 'center') {
				mouse_x = mouse_x + (3 * this.options.min_distance_x); // min_distance hinzufügen
			}
			else {
				mouse_x = mouse_x - this.options.min_distance_x; // min_distance hinzufügen
			}
		} 
		else if ((mouse_x - scroll.left ) <= ((element_width/2) + this.options.min_distance_x ) ){
			mouse_x = mouse_x; // rechts neben mauszeiger
			this.options.arrow_pos_x = 'left';
			
			if (this.options.arrow_pos_y != 'center') {
				mouse_x = mouse_x - (3 * this.options.min_distance_x); // min_distance hinzufügen
			}
			else {
				mouse_x = mouse_x + this.options.min_distance_x; // min_distance hinzufügen
			}
			
		} 
		else {
			mouse_x = mouse_x - (element_width / 2);
			this.options.arrow_pos_x = 'center';
		}


		// Y-Achse überprüfen - Vertikale Positionierung
		
		if (this.options.arrow_pos_x != 'center') {

			if ((mouse_y - scroll.top ) <= ((element_height / 2) + this.options.min_distance_y )){
				mouse_y = mouse_y; // unter mauszeiger
				mouse_y = mouse_y + this.options.min_distance_y; // min_distance hinzufügen
				this.options.arrow_pos_y = 'top';
			}
			else if ((win.height - ((mouse_y + this.options.min_distance_y) - scroll.top)) <= (element_height / 2)) {
				mouse_y = mouse_y - element_height ; // über mauszeiger	
				mouse_y = mouse_y - this.options.min_distance_y; // min_distance hinzufügen
				this.options.arrow_pos_y = 'bottom';
			}
			else {
				mouse_y = mouse_y - (element_height / 2); // zentral
				this.options.arrow_pos_y = 'center';
			}
		}
		else {
			if ((mouse_y - scroll.top ) <= ((element_height) + this.options.min_distance_y )){
				mouse_y = mouse_y; // unter mauszeiger
				mouse_y = mouse_y + this.options.min_distance_y; // min_distance hinzufügen
				this.options.arrow_pos_y = 'top';
			}
			else {
				mouse_y = mouse_y - element_height ; // über mauszeiger	
				mouse_y = mouse_y - this.options.min_distance_y; // min_distance hinzufügen
				this.options.arrow_pos_y = 'bottom';
			}	 
		}

	
	  // now set the right styles
	  this.setStyles(mouse_x, mouse_y);
  },
	
		
  showTooltip: function(event) {
    Event.stop(event);
    this.moveTooltip(event);
	  this.tool_tip.show();
  },
  
  setStyles: function(x, y){
    // set the right styles to position the tool tip
	  Element.setStyle(this.tool_tip, { 		position:'absolute',
												top:y + "px",
												left:x + "px",
												zindex:this.options.zindex
	 								  });
	 								  
	this.tool_tip.removeClassName('top-left');
	this.tool_tip.removeClassName('top-center');
	this.tool_tip.removeClassName('top-right');
	this.tool_tip.removeClassName('bottom-left');
	this.tool_tip.removeClassName('bottom-center');
	this.tool_tip.removeClassName('bottom-right');
	this.tool_tip.removeClassName('center-left');
	this.tool_tip.removeClassName('center-right');
	this.tool_tip.addClassName(this.options.arrow_pos_y + '-' + this.options.arrow_pos_x ); 

  },

  hideTooltip: function(event){
	  this.tool_tip.hide();
  }
}