/*
---

name: tip.drag.js

provides: [WA.Components.DragTip]

Creates a drag-and-droppable version of a bubble tooltip

<a id='anchor'>Click Me!</a>
<span class='bContent w200'>This is the tool tip content!</span>

<script type='text/javascript'>
new WA.Components.DragTip( $('anchor') );
</script>  
 
...
*/

WA.Components.DragTip = new Class({
    Extends : WA.Components.Tip,
    
    options : {
        draggable : true,
        title     : null,
        cache     : false //FIXME: update this class to support overlay caching
    },
    
    show: function() {
        this.parent();
        if( this.options.draggable && !this.drag ) {
            this.detach();   
        }
        if ( this.titleElement ) {
            this.titleElement.setStyle('display', 'none');
        }
    },
    
    detach: function() {
        var overlay = $(this.overlay);
        this.handle = new Element('div', { 'class':'bHandle' });
        this.shim = new Element('div', { 'class': 'bShim' });
        
        // place the handle inside the tip container
        this.shim.inject(overlay);
        this.handle.inject(overlay);
        
        // create a drag object for the tip
        if( !this.drag ) {
            this.drag = new Drag(overlay, {
                snap    : 0,
                handle  : this.handle,
                onStart : function() {
                    this.carets.addClass('hide');
                    this.tipTitle(overlay);
                }.bind(this)
            });
        }
        
        // hide event for close button
        this.shim.addEvent('click', function() {
            this.hide();
        }.bind(this));
    },
    
    tipTitle: function( overlay ) {
        // if title is set and the element has not been created yet
        if ( this.options.title ) {
            if ( !this.titleElement ) {
                this.titleElement = new Element('div', {
                    'html' : '<p>' + this.options.title + '</p>',
                    'class': 'bTitle'
                });
    
                // place element into the bubble
                this.titleElement.inject(overlay);
            }
            else {
                this.titleElement.setStyle('display', 'block');
            }
        }
    }
});