(function($, box) {
    
    box.addPluginUI('tooltip', {
        version: '0.1',
        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('mouseover', function(e) {
                if (($(e.target).hasClass('tooltip') || $(e.target).hasClass('mediaImg') || $(e.target).hasClass('mediaType') || $(e.target).hasClass('mediaTitle') || $(e.target).hasClass('mediaDesc')) && ($(e.target).hasClass('tooltip') || $(e.target).parent().hasClass('tooltip'))) {
                    trigger = e.target;
                    that.create();
                    that.datas = ($(e.target).hasClass('tooltip')) ? $(e.target).getBoxDatas() : $(e.target).parents('a').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();
               }
            });
        },
        
        create: function() {
            if($('#divToolTip').size() < 1){
                $('<div id="divToolTip"><div id="toolTipInner"></div></div>').appendTo('body');
            }
            
            divToolTip = $('#divToolTip');
            toolTipInner = $('#toolTipInner');
        },
        
        remove: function() {
            divToolTip.remove();
            divToolTip = null;
        },
    
        setHTML: function(datas) {
            this.html = $('#' + datas.id).html();
            toolTipInner.html(this.html);
            if(this.html) {
                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){
                if(!e) {
                    var pos = $(trigger).offset();
                    divToolTip.css({
                        left: pos.left-40,
                        top: pos.top+10
                    });
                } else {
                    divToolTip.css({
                        left: e.pageX-170,
                        top: e.pageY+10
                    });
                }
            }
        }
    };
    
})(jQuery, box);