﻿        var numb = 1;
        var slide = 1;
        
        $(document).ready(function(){            
                   
                
                fadeslideshow = setInterval ( 'playFadeSlideShow()', 10000);    
                slideShow = setInterval ( 'playSlideShow()', 22000 );      
                //$("#navigation-control").hide();          
                   
        });
        
        function playFadeSlideShow()
        {
            //slide 5 up to 1 are on top of each other.
        
            if (slide < 5) 
            {               
                //fading all slides from 1 to 4 
                $("#slideshow" + slide).fadeOut('slow', function() {
                    // Animation complete.
                });                  
            }            
            else if (slide == 5)
            {           
                //the last one (5) is never touched, instead we fade in the 1st one again on top of it
                //while slides in between the first one and the last still remain hidden.       
                $("#slideshow1").fadeIn('slow', function() {
                    // Animation complete.
                });                 
            }            
            else if (slide == 6)
            {
                //since the middle slides are hidden, they are set to shown again.
                $("#slideshow4").show();
                $("#slideshow3").show();
                $("#slideshow2").show();
                
                //this way we can fade out the first one again and continue the loop and fade out the others
                 $("#slideshow1").fadeOut('slow', function() {
                    // Animation complete.
                });  
                
                slide = 1;
            } 
                     
            slide++;
        }
        
        function playSlideShow()
        {    
        
               
            if (numb == 5)
			{
                $("#bottom-wrapper").animate({"left": "+=" + (800*2) + "px"}, "fast");
                numb = 1;                
			}
			else
            {
                
                $("#bottom-wrapper").animate({"left": "-=400px"}, "slow");
                numb++;                
            }
            
        }
        

