// uses prototype.js

Event.observe( window, 'load', infoBulleInit );

if( Event.unloadCache )
    Event.observe( window, 'unload', function() { Event.unloadCache(); }, false );

function infoBulleInit( el ) {
    // el peut etre soit une collection d'objets,
    // soit un identifiant d'un noeud dom,
    // soit un noeud dom,
    // soit un objet event || undefined ( auquel cas tous les noeuds dont la classe est infobulle seront associés. )

    var elts = new Array();

    el = el || '';

    if( typeof el.type != 'undefinded' )
        elts = $$( '.infobulle' );
    
    if( typeof el == 'string' ) {
        if( $( el ) )
            elts.push( $( el ) );
    }
    else if( typeof el == 'object' && !el.type )
        elts.push( el );
    
    else if( typeof el == 'array' )
        elts.concat( el );
    
    for( var i = 0; i < elts.length; i++ ) {
        Event.observe( elts[i], 'mouseover', mouseover, false );
        Event.observe( elts[i], 'mouseout', mouseout, false );
    }

    if( ! $('infoBulle' ) ) {
        var infoBulle = document.createElement( 'div' );
        infoBulle.setAttribute( 'id', 'infoBulle' );
        $( infoBulle ).setStyle ( { top: '0px', left: '0px', display : 'none' } );

        var top = document.createElement( 'div' );
        top.className = 'top';
        
        var center = document.createElement( 'div' );
        center.className = 'center';
        center.setAttribute( 'id', 'infoBulleContent' );
        
        var bottom = document.createElement( 'div' );
        bottom.className = 'bottom';
        
        infoBulle.appendChild( top );
        infoBulle.appendChild( center );
        infoBulle.appendChild( bottom );

        document.body.appendChild( infoBulle );
    }
}

function mouseover( event ) {

    var el = Event.element( event );
    
    if( el.parentNode.nodeName.toLowerCase() == 'a' ) {
        var cl = el.parentNode.className;
        if( cl == 'infobulle' )
            el = el.parentNode;
    }
    
    Event.observe( el, 'mousemove', move.bindAsEventListener( move, $( 'infoBulle' ) ), false );
    
    var infoBulleContent = $( 'infoBulleContent' );
    var content = '';

    // dynamic content?
    if( el.hasClassName( 'getContent' ) ) {
        
        var urlToGet = el.getAttribute( 'href' );
        urlToGet = urlToGet.toQueryParams();

        var options = {
            parameters : urlToGet,
            onSuccess : function( transport, content ) {
                var json = transport.responseText.evalJSON();
                if( json.status == 'ok' ) {
                    content = json.value;
                    infoBulleContent.innerHTML = content.truncate( 1000, ' ...' );
                    infoBulleContent.focus();
                }
            }
        };

        var url = 'ajax.php?mod='+ urlToGet.mod;
        
        var responder = {
            onLoading : function( myAjax, transport ) {
                console.log( Ajax.activeRequestCount );
                transport.abort();
            }
        };

        var myAjax = new Ajax.Request( url, options );

    }
    else {
        content = el.getAttribute( 'title' );
        infoBulleContent.innerHTML = decodeURIComponent( content );
    }
        
    el.setAttribute( 'title', '' );
    infoBulleContent.setAttribute( 'title', content );
    
    
    var infoBulle = $( 'infoBulle' );
    infoBulle.setStyle( { display : 'block' } );

    move( event, infoBulle );

}

function mouseout( event ) {
    
    var infoBulleContent = $( 'infoBulleContent' );

    var el = Event.element( event );
    if( ! el.hasClassName( 'infobulle' ) )
        el = Event.findElement( event, 'a' );
    
    el.setAttribute( 'title', infoBulleContent.getAttribute( 'title' ) );
    
    Event.stopObserving( el, 'mousemove', move, false );
    
    infoBulleContent.up().setStyle( { display : 'none' } );
}

function move( event, infoBulle ) {
    
    // le pointeur de la bulle se retrouvera juste en dessous de la souris
    infoBulle.setStyle( {
        top : Event.pointerY( event ) + 20 +'px',
        left : Event.pointerX( event ) - 32 +'px'
    } );
        

}