/*
* 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.
*/

/*
element : elemento sobre el cual al posarse se muestra el tooltip
tool_tip : el div que se muestra como tooltip al posarse sobre element
*/

function Tooltip(element, tool_tip) {

    var that = this;

    this.registerEvents = function() {
        that.element.mouseover(that.showTooltip);
        that.element.mouseout(that.hideTooltip);
        that.element.mousemove(that.moveTooltip);
    }


    this.unregisterEvents = function() {
        that.element.unbind('mouseover', that.showTooltip);
        that.element.unbind('mouseout', that.hideTooltip);
        that.element.unbind('mousemove', that.moveTooltip);
    }


    this.moveTooltip = function(eventObject) {
        eventObject.stopPropagation();
        //eventObject.preventDefault();  	  

        // get Mouse position
        //var mouse_x = Event.pointerX(eventObject);
        //var mouse_y = Event.pointerY(eventObject);
        var mouse_x = eventObject.pageX;
        var mouse_y = eventObject.pageY;

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

        if ((element_width + mouse_x) >= (that.getWindowWidth() - that.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 - that.options.min_distance_x;
        } else {
            mouse_x = mouse_x + that.options.min_distance_x;
        }

        if ((element_height + mouse_y) >= (that.getWindowHeight() - that.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 - that.options.min_distance_y;
        } else {
            mouse_y = mouse_y + that.options.min_distance_y;
        }

        // now set the right styles
        that.setStyles(mouse_x, mouse_y);
    }


    this.showTooltip = function(eventObject) {
        eventObject.stopPropagation();
        //eventObject.preventDefault();

        that.moveTooltip(eventObject);
        that.tool_tip.show();
    }

    this.setStyles = function(x, y) {
        // set the right styles to position the tool tip
        that.tool_tip.css(
                    {
                        position: 'absolute',
                        top: y + that.options.delta_y + "px",
                        left: x + that.options.delta_x + "px",
                        zindex: that.options.zindex
                    });

        // apply default theme if wanted
        if (that.options.default_css) {
            that.tool_tip.css(
              {
                  margin: that.options.margin,
                  padding: that.options.padding,
                  backgroundColor: that.options.backgroundColor,
                  zindex: that.options.zindex
              });
        }
    }

    this.hideTooltip = function(eventObject) {
        that.tool_tip.hide();
    }

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

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

    //Init---------------------
    //-----------------------------
    element = "#" + element;
    tool_tip = "#" + tool_tip;


    this.options = {
        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
    };

    this.element = $(element);

    // use the supplied tooltip element or create our own div
    if ($(tool_tip)) {
        this.tool_tip = $(tool_tip);
    } else {
        alert('no me pasaste un div master!!');
        /*this.tool_tip = $(document.createElement("div"));
        document.body.appendChild(this.tool_tip);
        this.tool_tip.addClass("tooltip");
        this.tool_tip.appendChild(document.createTextNode(tool_tip));*/
    }

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

    this.registerEvents();

    //End Init---------------------
    //-----------------------------
}