function findPos(obj) {
	var curleft = curtop = 0;
	if (obj.offsetParent) {
		curleft = obj.offsetLeft;
		curtop = obj.offsetTop;
		while (obj = obj.offsetParent) {
			curleft += obj.offsetLeft;
			curtop += obj.offsetTop;
		}
	}
	return [curleft, curtop]; /* x,y */
}

fade = {
    element: null,
    opacity: 0,
    current: 0,
    interval: null,
    
    init: function(delay, element, opacity) {
        this.delay = delay;
        this.element = element;
        this.opacity = opacity;
        this.current = 100;
        
        this.set();

        this.interval = setInterval(function() { fade.animate(); }, delay); // Achtung! Name des Objekts hier, da this. nicht möglich.
    },        
    set: function() {
        if(typeof this.element.style.MozOpacity != "undefined") this.element.style.MozOpacity = "0." + this.current; 
        else if(typeof this.element.style.filter != "undefined") this.element.style.filter = "alpha(opacity=" + this.current + ")";
    },
    animate: function() { 
        this.current = parseInt(this.current - 1);
        if(this.current > this.opacity) this.set();
        else clearInterval(this.interval);
    }
};


product_info = {
    the_target: null,
    trigger: null,

    show_info: function() {
        var wrapper = document.getElementById('info_box_wrapper');
        var holder = document.getElementById('info_box_inner');
        
        var trigger_pos = findPos(this.trigger);
        var body_width = document.documentElement.clientWidth;
        
        holder.innerHTML = this.the_target.innerHTML;
        wrapper.style.display = 'block';
        
        var pos_top = trigger_pos[1] - wrapper.offsetHeight;
        var pos_left = trigger_pos[0] + (this.trigger.offsetWidth / 2);
        
        if(pos_left + wrapper.offsetWidth > body_width) {
            wrapper.className = 'rtl';
            pos_left = (trigger_pos[0] - wrapper.offsetWidth) + (this.trigger.offsetWidth / 2);
        } else {
            wrapper.className = 'ltr';
        }
        
        wrapper.style.top =  pos_top + 'px';
        wrapper.style.left = pos_left + 'px';
        //alert(holder.offsetHeight);
        if(holder.offsetHeight < 150) {
        	holder.style.height = '150px';
        }
        
        fade.init(75, wrapper, 80);
    },
    
    hide_info: function() {
        document.getElementById('info_box_wrapper').style.display = 'none';
    },

    toogle: function(trigger, mode) {
        var target_id = trigger.id.replace('trigger_', 'text_');
        
        this.the_target = document.getElementById(target_id);
        this.trigger = trigger;
        
        if(mode == 'over') {
            this.show_info();
        } else {
            this.hide_info();
        }
    },

    init: function(id) {
        if(!document.getElementById && !document.documentElement.clientWidth) {
            alert('Ihr Browser ist leider mit dieser Anwendung nicht kompatibel.');
            return;
        } 
        
        var wrapper = document.getElementById(id);
        var triggers = wrapper.getElementsByTagName('a');
        
        for(var i = 0; i < triggers.length; i++) {
            triggers[i].onmouseover = function() {
                product_info.toogle(this, 'over');
            };
        
            triggers[i].onmouseout = function() {
                product_info.toogle(this, 'out');
            };

            triggers[i].onclick = function() {
                return false;
            }
        }
    }
};

window.onload = function() {
    product_info.init('vorteile');
};