var abisztooltip = {

container: null, //die Tabelle, in der die A-Z Werte stehen (für max. Positionierung)
divtooltip: null, //div für tooltip
timer: null, //Timer ID
outtimer: null, //Timer für Schliessen des Tips
mycache: null, //Cache für einzelne Treffer

//Tooltip anzeigen
show : function(element, buchstabe) {

    var This = this;
    var elem = element;
    var bs = buchstabe;
    
    this.createTooltip();

    //offenes Fenster schließen
    window.clearTimeout(this.outtimer);
    this.outtimer=null;
    Element.hide(abisztooltip.divtooltip);

    Element.clonePosition(this.divtooltip, element, {
                    setHeight: false, 
                    setWidth: false, 
                    offsetTop: element.offsetTop + $(element).getHeight()
                    });
    this.timer = window.setTimeout(function() { showTip(buchstabe) }, 400);
    
    function showTip(buchstabe)
    {
        if (!this.mycache) mycache = new Array();
        
        if (this.mycache[buchstabe])
        {
            $(This.divtooltip).update(this.mycache[buchstabe]);
            This.fixTooltipPosition(elem); //Tooltip positionieren
            Element.show(This.divtooltip);  
            return;
        }
        
        $(This.divtooltip).update("<img src=\"/images/ajax-loader.gif\" alt=\"\" /> Laden...");
        Element.show(This.divtooltip);  
        
        var url = "/ashx/abisztooltip.ashx?q=" + buchstabe;
        new Ajax.Request(url, { asynchronous:true, onSuccess:handleAbisZRequest, method:'get' });
    }
    
    function handleAbisZRequest(response) {
        if (response.responseText=="") return;
        This.divtooltip.innerHTML = response.responseText;
        This.fixTooltipPosition(elem); //Tooltip positionieren
        //Element.show(This.divtooltip);  
        this.mycache[bs] = response.responseText;
        
    }
},

//Tooltip verbergen
hide : function() {
    if (!this.divtooltip) return;
    window.clearTimeout(this.timer);
    this.timer=null;
    this.outtimer = window.setTimeout(function() { Element.hide(abisztooltip.divtooltip); }, 300);
},

//Tooltip besser positioneren
fixTooltipPosition: function(basiselement) {
    //rechte Kante innerhalb plazieren
    abisztooltip.divtooltip = $(abisztooltip.divtooltip);

    var dLeft = $(basiselement).cumulativeOffset().left;
    var dWidth = $(abisztooltip.divtooltip).getWidth();
    var vieww = document.viewport.getWidth();

    if ( dLeft+dWidth > vieww - 20 ) {
        dLeft = vieww - dWidth - 20;  
        $(abisztooltip.divtooltip).setStyle( { left: dLeft + 'px' });
    }
    
},


//Tooltip Div erzeugen, falls er noch nicht vorhanden ist
createTooltip: function() {
    if (!this.divtooltip) {
        this.divtooltip = document.createElement("div");
	    this.divtooltip.style.position = "absolute";
	    this.divtooltip.id = "idabisztooltip";
	    this.divtooltip.className = "abisztooltip";
	    this.divtooltip.style.zIndex= "50";
	    this.divtooltip.style.display = 'none';
	    
	    document.body.appendChild(this.divtooltip);
	    //$("mainbox").appendChild(this.divtooltip);

        Event.observe(this.divtooltip, 'mouseover', function(e) {
            window.clearTimeout(abisztooltip.outtimer);
            abisztooltip.outtimer = null;
        });
	    
        Event.observe(this.divtooltip, 'mouseout', function(e) { abisztooltip.hide(); } );
    }
},

setupBuchstaben: function(elem) {
    this.container = $(elem);
    var elmlist = $A(this.container.getElementsByTagName("a"));
    for (var i = 0; i < elmlist.length; i++) {
        var a = elmlist[i];
        Element.observe(a, 'mouseover', function(e) { abisztooltip.show(this, Event.element(e).innerHTML); } );
        Element.observe(a, 'mouseout',  function(e) { abisztooltip.hide(); } );
    }
}

}


document.observe("dom:loaded", function() { abisztooltip.setupBuchstaben($("abisztable")); } );