$(window).load(function(){
    function changeSlide( newSlide ) {
       
        // change the currSlide value
        currSlide = newSlide;
        
        // make sure the currSlide value is not too low or high
        if ( currSlide > maxSlide ) currSlide = 0;
        else if ( currSlide < 0 ) currSlide = maxSlide;
        
        // animate the slide reel
        $mslideReel.animate({
            left : currSlide * -570
        }, 400, 'swing');
        
        //color the active dot
       $mslideShowNav.find(".mini-active-item").find("img").attr("src", "pics/miniDot_grey.png");
       $mslideShowNav.find(".mini-active-item").removeClass("mini-active-item");
       $($mslideShowNav.find("a.mini-nav-item").get(currSlide)).addClass("mini-active-item");
       $mslideShowNav.find(".mini-active-item").find("img").attr("src", "pics/miniDot_orange.png");
    }
    
    function nextSlide() {
        changeSlide( currSlide + 1 );
    }
    
    // define some variables / DOM references
    /////////////////////////////////////////////////////////////////////////////////////////////
    var activeSlideshow = true,
    currSlide = 0,
    $mslideshow = $('#mini-slideshow'),
    $mslideReel = $('#mini-slideshow-reel'),
    maxSlide = $mslideReel.children().length - 1,
    $mslideShowNav = $('#mini-slideshow-nav'),
    $mslideLeftNav = $('#mini-slideshow-left'),
    $mslideRightNav = $('#mini-slideshow-right');
    
    /////////////////////////////////////////////////////////////////////////////////////////////
    // set navigation click events
    /////////////////////////////////////////////////////////////////////////////////////////////
    
    // left arrow
    /////////////////////////////////////////////////////////////////////////////////////////////
    $mslideLeftNav.click(function(ev) {
        ev.preventDefault();
        
        activeSlideshow = false;
        
        changeSlide( currSlide - 1 );
    });
    
    // right arrow
    /////////////////////////////////////////////////////////////////////////////////////////////
    $mslideRightNav.click(function(ev) {
        ev.preventDefault();
        
        activeSlideshow = false;
        
        changeSlide( currSlide + 1 );
    });
    
    // main navigation
    /////////////////////////////////////////////////////////////////////////////////////////////
    $mslideShowNav.find('.mini-nav-item').click(function(ev) {
        ev.preventDefault();
        
        activeSlideshow = false;
        
        changeSlide( $(this).index() -1 );
    });
    
    
    /////////////////////////////////////////////////////////////////////////////////////////////
    // rollover des boutons et fleches
    /////////////////////////////////////////////////////////////////////////////////////////////
    	
    	
	//rollOver fleche nav droite
    /////////////////////////////////////////////////////////////////////////////////////////////
    $mslideRightNav.mouseover(function () {
      var src = ($(this).find("img").attr("src") === "pics/miniRightArrow.png")
                    ? "pics/miniRightArrowOver.png" 
                    : "pics/miniRightArrow.png";
      $(this).find("img").attr("src", src);
      });
      
   $mslideRightNav.mouseout(function () {
      var src = ($(this).find("img").attr("src") === "pics/miniRightArrowOver.png")
                    ? "pics/miniRightArrow.png" 
                    : "pics/miniRightArrowOver.png";
      $(this).find("img").attr("src", src);
      }); 
      
    //rollOver fleche nav gauche
    /////////////////////////////////////////////////////////////////////////////////////////////
    $mslideLeftNav.mouseover(function () {
      var src = ($(this).find("img").attr("src") === "pics/miniLeftArrow.png")
                    ? "pics/miniLeftArrowOver.png" 
                    : "pics/miniLeftArrow.png";
      $(this).find("img").attr("src", src);
      });
      
   $mslideLeftNav.mouseout(function () {
      var src = ($(this).find("img").attr("src") === "pics/miniLeftArrowOver.png")
                    ? "pics/miniLeftArrow.png" 
                    : "pics/miniLeftArrowOver.png";
      $(this).find("img").attr("src", src);
      });
      
    //rollOver Grey_Dots
    /////////////////////////////////////////////////////////////////////////////////////////////
    $mslideShowNav.find("a.mini-nav-item").mouseover(function () {
      var src = ($(this).find("img").attr("src") === "pics/miniDot_grey.png")
                    ? "pics/miniDot_black.png" 
                    : "pics/miniDot_orange.png";
      $(this).find("img").attr("src", src);
      });
      
   $mslideShowNav.find("a.mini-nav-item").mouseout(function () {
      var src = ($(this).find("img").attr("src") === "pics/miniDot_black.png")
                    ? "pics/miniDot_grey.png" 
                    : "pics/miniDot_orange.png";
      $(this).find("img").attr("src", src);
      }); 
    
});