/* 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({
 default_css: false,
 margin: "0px",
 padding: "5px",
 backgroundColor: "#d6d6fc",
 min_distance_x: 5,
 min_distance_y: 5,
 delta_x: 0,
 delta_y: 0,
 zindex: 1000
 }, 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(event);
 // get Mouse position
 var mouse_x = Event.pointerX(event);
 var mouse_y = Event.pointerY(event);
 
 // 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;
 
 if ( (element_width + mouse_x) >= ( this.getWindowWidth() - this.options.min_distance_x) ){ // too big for X
 mouse_x = mouse_x - element_width;
 // apply min_distance to make sure that the mouse is not on the tool-tip
 mouse_x = mouse_x - this.options.min_distance_x;
 } else {
 mouse_x = mouse_x + this.options.min_distance_x;
 }
 
 if ( (element_height + mouse_y) >= ( this.getWindowHeight() - this.options.min_distance_y) ){ // too big for Y
 mouse_y = mouse_y - element_height;
 // apply min_distance to make sure that the mouse is not on the tool-tip
 mouse_y = mouse_y - this.options.min_distance_y;
 } else {
 mouse_y = mouse_y + this.options.min_distance_y;
 } 
 
 // now set the right styles
 this.setStyles(mouse_x, mouse_y);
 },
 
 
 showTooltip: function(event) {
 Event.stop(event);
 this.moveTooltip(event);
 new Element.show(this.tool_tip);
 },
 
 setStyles: function(x, y){
 // set the right styles to position the tool tip
 Element.setStyle(this.tool_tip, { position:'absolute',
 top:y + this.options.delta_y + "px",
 left:x + this.options.delta_x + "px",
 zindex:this.options.zindex
 });
 
 // apply default theme if wanted
 if (this.options.default_css){
 Element.setStyle(this.tool_tip, { margin:this.options.margin,
 padding:this.options.padding,
 backgroundColor:this.options.backgroundColor,
 zindex:this.options.zindex
 }); 
 } 
 },

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

 getWindowHeight: function(){
 var innerHeight;
 if (navigator.appVersion.indexOf('MSIE')>0) {
 innerHeight = document.body.clientHeight;
 } else {
 innerHeight = window.innerHeight;
 }
 return innerHeight; 
 },
 
 getWindowWidth: function(){
 var innerWidth;
 if (navigator.appVersion.indexOf('MSIE')>0) {
 innerWidth = document.body.clientWidth;
 } else {
 innerWidth = window.innerWidth;
 }
 return innerWidth; 
 }

}