(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'); 
            box.ui('scroll').create({
                element: '#tooltipScrollable',
                buttons: false
            }).compute().reposition();
        },    
        'close.tooltip': function(e) {
            box.removeEscapeKey('tooltip');
            trigger = null;
            box.ui('scroll').destroy('tooltipScrollable');
        }
    });
    
    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;
            $('.tooltip').bind('focus, click', function(e) {
                e.preventDefault();
                if (e.currentTarget.nodeName.toLowerCase() == 'a' && $(e.currentTarget).hasClass('tooltip')) {
                    trigger = e.currentTarget;
                    that.create();
                    that.setHTML();
                    that.updatePos(e);
                }
            });
        },
        
        create: function() {
            if( $('#divToolTip').size() < 1 ) {
                if(ie6){
                    $('<div id="divToolTip" class="toolTipContent"><!--div class="iframeWrap"><iframe width="1" src=""></iframe></div--><div class="start"></div><div class="boxMain"><span class="midLeft"></span><span class="midRight"></span><div id="tooltipScrollable" clas="box[id=tooltipScrollable]"><div id="toolTipInner" class="boxMainWrapper"></div></div></div><div class="end"></div></div>').appendTo('body');
                } else {
                    $('<div id="divToolTip" class="toolTipContent">'+
                        '<div class="start">'+
                            '<span class="startLeft"></span><span class="startRight"></span>'+
                        '</div>'+
                        '<div class="boxMain"><div id="tooltipScrollable" clas="box[id=tooltipScrollable]">'+
                            '<span class="midLeft"></span><span class="midRight"></span>'+
                            '<div id="toolTipInner" class="boxMainWrapper"></div>'+
                        '</div></div>'+
                        '<div class="end">'+
                            '<span class="endLeft"></span><span class="arrow"></span><span class="endRight"></span>'+
                        '</div>'+
                        '</div>').appendTo('body');
                }
        	}
            divToolTip = $('#divToolTip');
            toolTipInner = $('#toolTipInner');
        },
        
        remove: function() {
            divToolTip.remove();
            divToolTip = null;
        },
    
        setHTML: function() {
            this.html = $(trigger).next().html();
            toolTipInner.html(this.html);
            if(this.html) {
                this.manageDim(trigger);
                this.open();
            }
        },
    
        open: function() {
            var that = this;
            box.fire({type: 'beforeopen', component: 'tooltip'});
            box.bind({
                'escape.key.tooltip': function() { 
                    that.close(trigger)
                }
            });
            $('#divToolTip').bind('click', function(e) {
                if (e.target.className.indexOf('draggable') < 0) {
                    that.close(trigger);
                }
            });
        },
        
       close: function(trigger) {
           if (trigger) {
                $(trigger).unbind('mouseout blur');
                this.remove();
                box.fire({type: 'close', component: 'tooltip'});
            }
        },
        
        // autres méthodes du composant
        updatePos: function(e) {
            if(divToolTip){
                //10 & 75 are arbitrary values to fit this project needs
                if(!e) {
                    var pos = $(trigger).offset();
                    divToolTip.css({
                        left: pos.left + 10 + $(trigger).width()/2,
                        top: pos.top - 75 + $(trigger).height()/2
                    });
                } else {
                    /*
                    if (typeof(window.pageXOffset) !== 'undefined') {
                        var scroll = {
                            left : window.pageXOffset,
                            top: window.pageYOffset
                        }
                    } else if (typeof(document.documentElement.scrollLeft) !== 'undefined') {
                        var scroll = {
                            left: document.documentElement.scrollLeft,
                            top: document.documentElement.scrollTop
                        }
                    } else  {
                        */
                        var scroll = {
                            left:0,
                            top:0
                        }
                    //}
                    divToolTip.css({
                        left: e.pageX + 10 - scroll.left,
                        top: e.pageY - 75 - scroll.top
                    });
                }
            }
        },
        
        manageDim: function(t) {
            var conf = $(t).attr('class');
            if(conf.indexOf('conf')!= -1){
                var datas = {
                    "width" : /w:\d+/.test(conf) ? parseInt(conf.match(/w:(\d+)/)[1], 10) : null
                }
                if (datas.width != null) {
                    $('.toolTipContent, .toolTipContent .end').css('width', datas.width + 'px').addClass('toolTip'+datas.width);
                    if(ie6){
                        $('.toolTipContent .start').css('width', datas.width + 'px');
                        $('.toolTipContent .boxMainWrapper').css('width', (datas.width-30) + 'px');
                        $('.toolTipContent').addClass('toolTip'+datas.width);
                    }
                }
            }
            if($('#divToolTip .boxMain .boxMainWrapper').size()) {
                var hToolTip = $('#divToolTip .boxMainWrapper').height();

                $('#divToolTip .boxMain .midLeft, #divToolTip .boxMain .midRight').css({height: hToolTip+'px'});
            }
        }
    };
    
})(jQuery, box);