var headerAnimationSpeed = 'normal',
            headerAnimationTimeoutTime = 15000,
            headerAnimationTimeout = null;
        
        /**
         * Start the automatic animation
         */
        function startAnimationTimeout() {
            resetAnimationTimeout();
            headerAnimationTimeout = window.setTimeout(function(){
                // find the next, or first link
                var $nLink = jQuery('#themepic_animation .links a.active').next();
                if(!$nLink.is('a')) {
                    $nLink = jQuery('#themepic_animation .links a:first');
                }
                activateLink($nLink);
                startAnimationTimeout();
            },headerAnimationTimeoutTime);
        }
        
        
        /**
         * Reset the automatic animation
         */
        function resetAnimationTimeout() {
            window.clearTimeout(headerAnimationTimeout);
        }
        
        /**
         * hide the container with the current textmessage and image
         * @param callback (after finished animation)
         */
        function hideTextContainer(callback){
            var $toHide = jQuery('#themepic_animation').find('.texte > div:not(.hidden)');
            if($toHide.length > 0) {
            
                // IE Fix
                $toHide.find('ul,img').animate({
                    opacity: 0
                },headerAnimationSpeed,function(){
                    $toHide.find('ul,img').css('opacity',1);
                });
                
                $toHide.animate({
                    opacity: 0
                },headerAnimationSpeed,function(){
                    $toHide.addClass('hidden');
                    $toHide.find('img').addClass('hidden');
                    callback();
                });
            }else{
                callback();
            }
        };
        
        /**
         * show the given text container
         * @param $container jQuery selector of the text-container
         * @param $link jQuery selector of clicked tab on the left side
         * @param callback callback (after finished animation)
         */
        function showTextContainer($container,$link,callback){
        
            var pos = $link.position();
            
            // first animation: show the text container
            $container.css('opacity',0).removeClass('hidden').animate({
                opacity: 1
            },headerAnimationSpeed,function(){
                callback();
            });
            
            var bgTopPos = pos.top;
            if(bgTopPos > 0) {
                bgTopPos += 1;
            }
            
            // second animation: animate the background of the $link
            jQuery('#themepic_animation .links .bg').attr('class','bg').addClass($link.attr('class')).css('top',bgTopPos).animate({
                width: $link.outerWidth()
            },headerAnimationSpeed,function(){
                $link.addClass('active');
            });
            
        };
        
        /**
         * change the background image
         * @param className name of the class to show
         */
        function showAnimationBackground(className) {
            jQuery('#themepic_animation .images > img').removeClass('hidden').addClass('hidden');
            jQuery('#themepic_animation .images .' + className).removeClass('hidden');
        }
        
        /**
         * Click event of the link
         * @param $link jQuery selector of clicked tab on the left side
         */
        function activateLink($link) {
            resetAnimationTimeout();
            
            // break if in current animation progress
            if(jQuery('#themepic_animation').find(':animated').length == 0) {
            
                var $bg = jQuery('#themepic_animation .links .bg'),
                    cbfunc = function(){
                        var className = $link.attr('class'),
                            $container = jQuery('#themepic_animation').find('.texte .'+className);
                            
                        hideTextContainer(function(){
                            showAnimationBackground(className);
                            showTextContainer($container, $link ,function(){
                                $container.find('img').css('opacity',0).removeClass('hidden').animate({
                                    opacity: 1
                                },headerAnimationSpeed);
                            });
                        });

                    };
                    
                jQuery('#themepic_animation .links a.active').removeClass('active');
                
                if($bg.width() > 0) {
                    $bg.animate({
                        width: 0
                    },headerAnimationSpeed,cbfunc);
                }else{
                    cbfunc();
                }
                
            }
            
            startAnimationTimeout();
        }
        
        jQuery(function(){
            var $container = jQuery('#themepic_animation'),
                $links = $container.find('.links > a');
                
            $links.on('click',function(){
                activateLink(jQuery(this));
            });
            
            activateLink($container.find('.links > a:first'));
            
            startAnimationTimeout();
        });