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

(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': 20,
            'arrow_width': 20,
            'animation_duration_ms': 300
            //,'direction': settings.direction  // left or right
        };
        if (settings) $.extend(config, settings);

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

        /**
        * Positions the dialog box based on the target
        * element's location
        **/
        function _show(target_elm) {
            dialog_content = $(target_elm).find(config.dialog_content_selector)

            dialog_box = _create(dialog_content);

            target_elm_position = $(target_elm).offset();

            // coming from the bottom right
            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: "span.left_arrow"
            }
            $(dialog_box).find("span.left_arrow").css({ top: $(dialog_box).outerHeight() - (config.arrow_top_offset * 2) + "px" });


            if (settings.direction == null) {
                settings.direction = 'right';
            }

            // position and show the box
            $(dialog_box).css({
                top: (position.start.top - 200) + "px",
                left: (position.start.left) + "px",
                opacity: config.opacity
            });
            $(".arrow").hide();
            $(dialog_box).find(position.arrow_class).show();

            if (settings.direction == 'left') {
                $(dialog_box).css('left', (position.start.left - 800) + 'px')
                $(dialog_box).css('top', (position.start.top - 200) + 'px')
                $('.right_arrow').show();
                $('.left_arrow').hide();

                $(dialog_box).find("span.right_arrow").css({ top: $(dialog_box).outerHeight() - (235) + "px" });
            }


            // begin animation
            $(dialog_box).animate({
                top: position.end.top + ((settings.direction == 'left') ? 180 : 0),
                left: position.end.left - ((settings.direction == 'left') ? 577 : 0),
                opacity: "toggle"
            }, config.animation_duration_ms);



        }; // -- end _show function

        /**
        * Stop the animation (if any) and remove from dialog box from the DOM
        */
        function _hide(target_elm) {
            $("body").find("span.tooltip").stop().remove();
        };

        /**
        * Creates the dialog box element
        * and appends it to the body
        **/
        function _create(content_elm) {

            return $("<span class='tooltip' style='position:absolute;'>\
         <span class='up_arrow arrow' ></span>\
         <span class='right_arrow arrow'></span>\
         <span class='left_arrow arrow'></span>\
         <span class='content' sytle='position:relative;' >" + $(content_elm).html() + "</span>\
         <span style='clear:both' ></span>\
         <span class='down_arrow arrow'></span>\
       </span>").appendTo('body');
        };

        return this;
    };

})(jQuery);