/**
 * Tooltips fuer tecon Produktuebersicht
 */
Event.observe(window, 'load', function() {
    if ($('produktmenubox')) {
    new tecon_tooltips('produktmenubox', 'productstext');
    }
});

var tecon_tooltips = Class.create({
    
    initialize: function(ID_IMAGECONTAINER, ID_TEXTLINKSLIST)
    {
        this.imageBoxes = this.getListObject($(ID_IMAGECONTAINER));
        this.textLinks = this.getListObject($(ID_TEXTLINKSLIST));
        this.createTooltips();
        this.setEvents();
    },
    
    getListObject: function(container)
    {
        var arr = [];
        LI = container.getElementsByTagName('LI');
        
        for (var x=0; x < LI.length; x++) {
            arr[x] = {
                title: LI[x].firstChild.title,
                el: LI[x],
                id: this.extractId(LI[x].firstChild.href)
            };
        }
        
        return arr;
    },
    
    extractId: function(text)
    {
        var parts = text.split('.');
        return parts[parts.length-3];
    },
    
    setEvents: function()
    {
        for (var key=0; key < this.imageBoxes.length; key++) {
            Event.observe(this.imageBoxes[key].el.firstChild, "mouseover", this.show.bind(this, this.imageBoxes[key].id));
            Event.observe(this.imageBoxes[key].el.firstChild, "mouseout", this.hide.bind(this, this.imageBoxes[key].id));

            Event.observe(this.imageBoxes[key].el.firstChild, "mouseover", this.showToolTip.bind(this, this.imageBoxes[key].id));
            Event.observe(this.imageBoxes[key].el.firstChild, "mouseout", this.showToolTip.bind(this, "none"));
        }
        
        for (var key=0; key < this.textLinks.length; key++) {
            Event.observe(this.textLinks[key].el.firstChild, "mouseover", this.show.bind(this, this.textLinks[key].id));
            Event.observe(this.textLinks[key].el.firstChild, "mouseout", this.hide.bind(this, this.textLinks[key].id));
            
            
            Event.observe(this.textLinks[key].el.firstChild, "mouseover", this.showToolTip.bind(this, this.textLinks[key].id));
            Event.observe(this.textLinks[key].el.firstChild, "mouseout", this.showToolTip.bind(this, "none"));
        }
    },
    
    createTooltips: function()
    {
        for (var key=0; key < this.imageBoxes.length; key++) {
            var newDiv = new Element('div', { 'style': 'display:none', 'id': 'tt_'+this.imageBoxes[key].id });
            var newImg = new Element('img', { 'src': 'fileadmin/templates/tecon/img/tooltip_top.gif'});
            newDiv.addClassName('tooltip');
            newImg.addClassName('tt_top');
            newDiv.insert(newImg);
            newDiv.insert(this.imageBoxes[key].title);
            
            Element.insert(this.imageBoxes[key].el, newDiv);
            this.imageBoxes[key].el.firstChild.title = "";
        }
    },
    
    showToolTip: function(id)
    {   
        for (var key=0; key < this.imageBoxes.length; key++) {
            this.imageBoxes[key].el.className = this.imageBoxes[key].el.className.replace(/tooltipshow/g, "");
            if (this.imageBoxes[key].id == id) {
                this.imageBoxes[key].el.className = this.imageBoxes[key].el.className + ' tooltipshow';
            }
        }
        
        for (var key=0; key < this.imageBoxes.length; key++) {
            if (this.textLinks[key]) {
                this.textLinks[key].el.className = this.textLinks[key].el.className.replace(/tooltiplink/g, "");
                if (this.textLinks[key].id == id) {
                    this.textLinks[key].el.className = this.textLinks[key].el.className + ' tooltiplink';
                }
            }
        }
    },
    
    hide: function(keyid)
    {
        new Effect.Fade($('tt_'+ keyid), { 'duration': 0.3 });
    },
    
    show: function(keyid)
    {
        new Effect.Appear($('tt_'+ keyid), { 'duration': 0.3 });
    }
    
});