(function($){

    $.carousel = {
        count: 0
    };
    $.fn.carousel = function(delay, parent) {
        parent = parent || 'body';
       $(this).show().each(function() {
            // give id to carousel ...
            // if original element has an id, use it,
            // otherwise use a counter.
            var id = 'carousel';
            if(this.id) {
                id += '-'+this.id;
                $(this).removeAttr('id');
            } else {
                id += '-'+$.carousel.count;
                $.carousel.count++;
            }
            // fade out all images
            var images = $(this).find('li').css({position:'absolute', opacity: '0'});
            $(this).wrap('<div id="'+id+'" class="carousel">');
            $(this).parent().appendTo( $(parent) );
            
            // create slideshow navigation with numbered buttons
            var slideshowButtons = $('<ul class="slideshow">');
            for(var imgCounter=0; imgCounter<images.length; imgCounter++) {
                slideshowButtons.append('<li>'+(imgCounter+1)+'</li>');
            }
            $(this).after(slideshowButtons);
            
            
            // flags
            var control = {
                loaded: false,
                active: 0,
                amount: images.length,
                delay: delay || 1000,
                timeout: false
            }
            
            // left/right-buttons
            var left = $('<div class="left">').bind('click', function() {
                if(control.timeout) clearTimeout(control.timeout);
                control.active--;
                if(control.active<0) control.active = control.amount-1;
                $(images[control.active]).animate({opacity: 1});
                $(images[control.active]).siblings().animate({opacity:0});
                highlight();
                control.timeout = setTimeout(cycle, control.delay);
            });
            var right = $('<div class="right">').bind('click', function() {
                if(control.timeout) clearTimeout(control.timeout);
                control.active++;
                if(control.active==control.amount) control.active = 0;
                $(images[control.active]).animate({opacity: 1});
                $(images[control.active]).siblings().animate({opacity:0});
                highlight();
                control.timeout = setTimeout(cycle, control.delay);
            });
            
            $(this).after(left,right);
            
            // highlighting active slideshow button
            var highlight = function() {
                $(slideshowButtons).find('li')
                    .removeClass('active')
                    .eq(control.active)
                    .addClass('active');
                
            }
            
            // clicking a slideshow button
            $(slideshowButtons).find('li').bind('click', function() {
                if(control.timeout) clearTimeout(control.timeout);
                control.active = $(this).index();
                $(images[control.active]).animate({opacity: 1});
                $(images[control.active]).siblings().animate({opacity:0});
                highlight();
                control.timeout = setTimeout(cycle, control.delay);
            });
            
            // slideshow function
            var cycle = function() {
                $(images[control.active]).animate({opacity: 1});
                var fadeoutIndex = control.active-1;
                if(fadeoutIndex<0) fadeoutIndex = control.amount-1;
                $(images[fadeoutIndex]).animate({opacity: 0});
                highlight();
                control.active++;
                if(control.active==control.amount) control.active = 0;
                control.timeout = setTimeout(cycle, control.delay);
            }
            
            // check for loading state
            var loadedCheck = function() {
                loaded = true;
                $(images).find('img').each(function() {
                    if(!this.complete) loaded = false;
                });
                if(loaded)
                    cycle()
                else
                    setTimeout(loadedCheck, 200);
            }
            loadedCheck();
            
            
        });
    }

})(jQuery);


// call your own carousel:
$(function() {
    // find all ul-elements with the class "carousel"
    // and make them into carousels with a 5 second slideshow delay
    $('ul.carousel').carousel(5000, '.bild1');
});