(function($, box) {
    
    box.addPluginUI('tooltip', {
        version: '0.11',
        require: 'box 0.5.0',
        
        create:function(datas){
            return box.addPluginUI(new Tooltip(datas));
        },
        destroy:function(){
            box.removePluginUI('tooltip');
        }
    });
    
    var divToolTip, toolTipInner, trigger;
    
    box.bind({
        'beforeopen.tooltip': function(e) {
            box.addEscapeKey('tooltip'); 
        },    
        'close.tooltip': function(e) {
            box.removeEscapeKey('tooltip');
            trigger = null;
        }
    });
    
    var Tooltip = function(datas) {
        this.init(datas);
    };

    Tooltip.prototype = {
        init: function(datas) {
            // conserver le contexte du composant (instance de Tooltip)
            // pour utilisation au sein d'écouteurs d'événements
            var that = this;
            $(datas.reactArea).bind('click', function(e) {
                e.preventDefault();
            });
            $(datas.reactArea).bind('mouseover', function(e) {
                if (e.target.nodeName.toLowerCase() == 'a' && $(e.target).hasClass('tooltip')) {
                    trigger = e.target;
                    that.create();
                    that.datas = $(e.target).getBoxDatas();
                    that.setHTML(that.datas);
                    that.updatePos(e);
                }
            });
            $(datas.reactArea).bind('mousemove', function(e) {
                if (e.target.nodeName.toLowerCase() == 'a' && $(e.target).hasClass('tooltip')) {
                    that.updatePos(e);
                }
            });
            $(datas.element).bind('focus', function(e) {
                if (e.target.nodeName.toLowerCase() == 'a' && $(e.target).hasClass('tooltip')) {
                    trigger = e.target;
                    that.create();
                    that.datas = $(e.target).getBoxDatas();
                    that.setHTML(that.datas);
                    that.updatePos();
               }
            });
            
            // rend le tooltip de l'étape active visible
            if($('#raceMap .active').size()) {
                    var these = $('#raceMap .active')[0]; 
                    trigger = these;
                    that.create();
                    that.datas = $(these).getBoxDatas();
                    that.setHTML(that.datas);
                    that.updatePos();
               }            
            
        },
        
        create: function() {
            if($('#divToolTip').size() < 1){
                $('<div id="divToolTip"></div>').appendTo('body');
            }
            divToolTip = $('#divToolTip');
        },
        
        remove: function() {
            divToolTip.remove();
            divToolTip = null;
            if($('#raceMap .active').size()) {
                    isDefaultToolTipActive = true;
                    var these = $('#raceMap .active')[0]; 
                    trigger = these;
                    this.create();
                    this.datas = $(these).getBoxDatas();
                    this.setHTML(this.datas,isDefaultToolTipActive);
                    this.updatePos();
               } 
        },
    
        setHTML: function(datas) {
            this.html = $('#' + datas.id + ' span').outerHTML();
            divToolTip.html(this.html);
            if(this.html) {
                //this.manageDim(tH);
                this.open(datas);
            }
        },
    
        open: function(datas) {
            var that = this;
                
            box.fire({type: 'beforeopen', component: 'tooltip', id: that.datas.id, datas: that.datas, html: that.html});
            
            box.bind({
                'escape.key.tooltip': function() { 
                    that.close(datas, trigger)
                }
            });
            
            $(trigger).bind('mouseout blur', function() {
                that.close(datas, trigger);
            });
        },
        
        close: function(datas, trigger) {
            if (datas && trigger) {
                $(trigger).unbind('mouseout blur');
                this.remove();
                box.fire({type: 'close', component: 'tooltip', id: datas.id, datas: divToolTip});
            }
        },
        
        // autres méthodes du composant
        updatePos: function(e) {
            if(divToolTip){
                var toolTipWidth = divToolTip.getWidth();
                if(!e) {
                    var pos = $(trigger).offset();
                    divToolTip.css({
                        left: pos.left-(toolTipWidth/2),
                        top: pos.top-73
                    });
                } else {
                    divToolTip.css({
                        left: e.pageX-(toolTipWidth/2),
                        top: e.pageY-73
                    });
                }
            }
        },
        
        manageDim: function(arg) {
            if($('#divToolTip .boxMain .boxMainWrapper').size()) {
                var hToolTip = $('#divToolTip .boxMainWrapper').height();
                $('#divToolTip .boxMain .midLeft, #divToolTip .boxMain .midRight, #divToolTip .boxMainWrapper').css({height: arg+'px'});
            }
        }
    };
    
})(jQuery, box);