$(document).ready( function() {
		
		$("#tabs-1 img").detach().appendTo("#tabs-2");
		
		 var widthimg = 200;  
		 var heightimg= 200;
		 
		var ratio = heightimg/widthimg;
		
		var browserwidth = $("#tabs-2").width();
		var browserheight = $("#tabs-2").height();

if ((browserheight/browserwidth) > ratio){
		    $("div #tabs-2 img").height(browserheight);
		    $("div #tabs-2  img").width(browserheight / ratio);
		} else {
		    $("div #tabs-2 img").width(browserwidth);
		    $("div #tabs-2 img").height(browserwidth * ratio);
		}

		$("div #tabs-2 img").css('left', (browserwidth - $("div #tabs-2 img").width())/2);
		$("div #tabs-2 img").css('top', (browserheight - $("div #tabs-2 img").height())/2);
		return this; 				
}); 


function slidesidebar() {
    var $active = $('#tabs-2 img.active');
    
    if ( $active.length == 0 ) $active = $('#tabs-2 img:last');

    var $next =  $active.next().length ? $active.next()
        : $('#tabs-2 img:first');
    $active.removeClass('active').addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('last-active');
        });       
   }

$(document).ready(function() {
    $('#tabs-2 img:first').show().addClass('active');  
   		var timer = setInterval( "slidesidebar()", 4000 );
   		
   		
   		// Script pour la fleches precedent
   $('div #prev').click(function() {
 
  clearInterval (timer);
     
     var $active = $('#tabs-2 img.active');
    
    if ( $active.length == 0 ) $active = $('#tabs-2 img:first');
   var $prev =  $active.prev().length ? $active.prev()
        : $('#tabs-2 img:last');

    $active.removeClass('active').addClass('last-active');

    $prev.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 500, function() {
            $active.removeClass('last-active');
            
        }
        
        );
                
      });
       
    // Script pour la fleche suivant
  $('div #next').click(function() {
  
   clearInterval (timer);
   var $active = $('#tabs-2 img.active');
    
    if ( $active.length == 0 ) $active = $('#tabs-2 img:last');

    var $next =  $active.next().length ? $active.next()
        : $('#tabs-2 img:first');

    $active.removeClass('active').addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 500, function() {
            $active.removeClass('last-active');
        });
      });

});