function Thumbs(thumblist){
    var _thumbs       = thumblist;

    /**
     *speichert die Thumb Eigenschaften
     * 0 Overlay Grafik
     * 1 start Opacity
     * 2 Thumb direkt
     * 3 startgeschwindigkeit für Berchnung des ein ausblendens
     */
    var _thumbhash    = [];

    var fadein  = null;
    var fadeout = {};
    var fadeoutTimer = null;

    var velocity = 0.1;
    
    var _curthumb = 0;
    
    var _displayimage = 0;

    var _obs = [];

    function addEvent(element,type,callback){

        if(element.attachEvent) {
            if(!type.match(/^on(.*)/)) type = "on"+type;
            element.attachEvent(type,handleEvent,false);
        } else {
            element.addEventListener(type,handleEvent,false);
        }

        function handleEvent(event){
            var e = event || window.event;
            callback.call(e);
        };

    };

    function stopEvent(event){
        if(event.stopPropagation) event.stopPropagation();
        else                      event.cancleBubble = true;

        if(event.preventDefault)  event.preventDefault();
        else                      event.returnValue = false;
    };

    /**
     * Constructor
     */
    (function (){
        
        var li  = _thumbs.getElementsByTagName("li");
        var len = li.length;

        for(var i = 0 ; i < len;i++) {

            var thumbImage = li[i].getElementsByTagName("img")[0];

            var img = new Image();
            img.src = '../../http/img/thumb_overlay.gif';
            img.style.position = "absolute";
            img.style.zIndex = 1;

            if(i > 0) {
                setOpacity(img,0.8);
                _thumbhash[i] = [img,0.8,thumbImage,0];
            } else {
                setOpacity(img,0);
                _thumbhash[i] = [img,0,thumbImage,0];
            }

            var thumb = new Image();
            thumb.src = thumbImage.src;

            img.style.width  = thumb.width+"px";
            img.style.height = thumb.height+"px";

            li[i].insertBefore(img,li[i].firstChild);
            li[i].style.position = 'relative';

            (function(){
                var key = i;
                
                addEvent(img,'mouseover', function(){
                    imgHover(key);
                });

                addEvent(img,'mouseout'  , function(){
                    imgOut(key);
                });

                addEvent(img,'click', function(){

                    if(!isNaN(_displayimage) && _displayimage == key)
                        return;

                    displayImage(key);
                });
                
            })();
        }
    })();

    function setOpacity(node,value){

        if(!navigator.userAgent.match(/msie/i) ) {
            node.style.opacity = value;
        } else {
            node.style.filter = "alpha(opacity="+(Math.round(value*100))+")";
        }
    };

    function fadeIn(){

        var opa   = _thumbhash[_curthumb][1];
        var over  = _thumbhash[_curthumb][0];
        var speed = _thumbhash[_curthumb][3]+velocity;

        var new_opacity = opa*Math.sin(speed);

        if(Math.PI/2 <= speed) {

            setOpacity(over,0);
            stopFadeIn();

            _thumbhash[_curthumb][1] = 0;
            _thumbhash[_curthumb][3] = 0;

        } else {
            _thumbhash[_curthumb][3] = speed;
            setOpacity(over,0.8-new_opacity);
            fadein = window.setTimeout(fadeIn,50);
        }

    };

    function fadeOut(){
        
        var count = 0;

        for(var key in fadeout) {
            count++;

            var opa   = 1;
            var speed = _thumbhash[key][3]+velocity;

            var new_opacity = opa*Math.sin(speed);

            if(new_opacity >= 0.8) {
                setOpacity(_thumbhash[key][0],0.8);
                _thumbhash[key][1]               = 0.8;
                _thumbhash[key][3]               = 0;

                delete fadeout[key];

                count--;
            } else {
                setOpacity(_thumbhash[key][0],new_opacity);
                _thumbhash[key][3]               = speed;
            }
        }

        if(count > 0) {
            fadeoutTimer = window.setTimeout(fadeOut,50);
        } else {
            fadeoutTimer = null;
        }

    };

    function stopFadeIn(){
        window.clearTimeout(fadein);
        fadein = null;
    };

    function imgHover(thumbkey){

        if(_displayimage == thumbkey)
            return;

        /**
         * sollte es eben eingefaded werden dann aus dem einfaden löschen
         */
        fadeIn(_curthumb = thumbkey);
    };

    function imgOut(thumbkey){

        if(_displayimage == thumbkey)
            return;

        if(fadein) {
            stopFadeIn();
            _thumbhash[_curthumb][1] = _thumbhash[_curthumb][0].style.opacity;
        }

        fadeout[thumbkey] = _thumbhash[thumbkey];

        if(!fadeoutTimer)
            fadeOut();
    };

    function displayImage(key){
        
        if(_displayimage > -1 && _displayimage != key) {
            fadeout[_displayimage] = _thumbhash[_displayimage];

            if(!fadeoutTimer)
                fadeOut();
        }
        
        _displayimage = key;

        // der Galerie sagen welches Bild nun geladen werden soll
        for(var i = 0 ; i < _obs.length;i++)
            _obs[i].update(_thumbhash[key][2]);
        
    };

    this.displayThumb = function(curId,modi){
        
        var _next = 0;

        switch ( curId+modi ) {
            case -1:
                _next = _thumbhash.length-1;
                break;
            case _thumbhash.length:
                _next = 0;
                break;
            default:
                _next = curId+modi;
                
        }
        
        if(_next != _curthumb){
            imgHover(_next);
            displayImage(_next);
        }
    };

    this.addObserver = function( obs ){
        _obs.push(obs);
    };
    
};