var number_of_elements = 6;

var first = 1;

var actual = first;

var clicat = false;


  function changepromo(){

    if (actual < number_of_elements){
      actual = actual + 1;
    }else{
      actual = 1;
    }
    
    move(actual);
    
  }
  
  function removeClassButtons(id){
      
    $('#1').removeClass('pbutton_active');
    $('#2').removeClass('pbutton_active');
    $('#3').removeClass('pbutton_active');
    $('#4').removeClass('pbutton_active');
    $('#5').removeClass('pbutton_active');
    $('#6').removeClass('pbutton_active');

    $('#1').addClass('pbutton');
    $('#2').addClass('pbutton');
    $('#3').addClass('pbutton');
    $('#4').addClass('pbutton');
    $('#5').addClass('pbutton');
    $('#6').addClass('pbutton');
    
    $('#'+id).removeClass('pbutton');
    $('#'+id).addClass('pbutton_active');
      
  }

  
  function move(label){
    
    switch(label){
      
      case 1:
    
      $('#promo1_1').animate({left: '1000px'}, 2300 );
      $('#promo1_2').animate({left: '1550px' }, 2000 );
      
      
      $('#promo2_1').animate({left: '-500px'}, 2300 );
      $('#promo2_2').animate({left: '1500px' }, 2000 );
      
      $('#promo3_1').animate({left: '-500px'}, 2300 );
      $('#promo3_2').animate({left: '1500px' }, 2000 );

      $('#promo4_1').animate({left: '-500px'}, 2300 );
      $('#promo4_2').animate({left: '1500px' }, 2000 );

      $('#promo5_1').animate({left: '-500px'}, 2300 );
      $('#promo5_2').animate({left: '1500px' }, 2000 );

      $('#promo6_1').animate({left: '-500px'}, 2300 );
      $('#promo6_2').animate({left: '1500px' }, 2000 );
      
      actual = 1;
      
      removeClassButtons(actual);

      break;
      
      
      case 2:
      
      $('#promo6_1').animate({left: '-10px'}, 2300 );
      $('#promo6_2').animate({left: '368px' }, 2000 );
      
      
      $('#promo2_1').animate({left: '-500px'}, 2300 );
      $('#promo2_2').animate({left: '1500px' }, 2000 );      
      
      $('#promo3_1').animate({left: '-500px'}, 2300 );
      $('#promo3_2').animate({left: '1500px' }, 2000 );
            
      $('#promo4_1').animate({left: '-500px'}, 2300 );
      $('#promo4_2').animate({left: '1500px' }, 2000 );

      $('#promo5_1').animate({left: '-500px'}, 2300 );
      $('#promo5_2').animate({left: '1500px' }, 2000 );
      
      $('#promo1_1').animate({left: '-500px'}, 2300 );
      $('#promo1_2').animate({left: '2090px' }, 2000 );
      
      
      actual = 2;

      removeClassButtons(actual);
      
      break;

      
      case 3:
        
      $('#promo2_1').animate({left: '-10px'}, 2300 );
      $('#promo2_2').animate({left: '328px' }, 2000 );
      
      
      $('#promo1_1').animate({left: '-500px'}, 2300 );
      $('#promo1_2').animate({left: '2090px' }, 2000 );
      
      $('#promo3_1').animate({left: '-500px'}, 2300 );
      $('#promo3_2').animate({left: '1500px' }, 2000 );

      $('#promo4_1').animate({left: '-500px'}, 2300 );
      $('#promo4_2').animate({left: '1500px' }, 2000 );
      
      $('#promo5_1').animate({left: '-500px'}, 2300 );
      $('#promo5_2').animate({left: '1500px' }, 2000 );
      
      $('#promo6_1').animate({left: '-500px'}, 2300 );
      $('#promo6_2').animate({left: '1500px' }, 2000 );
      
      
      
      actual = 3;
      
      removeClassButtons(actual);
      
      break;
  

      case 4:
      
      $('#promo3_1').animate({left: '-10px'}, 2300 );
      $('#promo3_2').animate({left: '328px' }, 2000 );
      
  
      $('#promo2_1').animate({left: '-500px'}, 2300 );
      $('#promo2_2').animate({left: '1500px' }, 2000 );
      
      $('#promo4_1').animate({left: '-500px'}, 2300 );
      $('#promo4_2').animate({left: '1500px' }, 2000 );

      $('#promo5_1').animate({left: '-500px'}, 2300 );
      $('#promo5_2').animate({left: '1500px' }, 2000 );
      
      $('#promo1_1').animate({left: '-500px'}, 2300 );
      $('#promo1_2').animate({left: '2090px' }, 2000 );
      
      $('#promo6_1').animate({left: '-500px'}, 2300 );
      $('#promo6_2').animate({left: '1500px' }, 2000 );
      
      
      actual = 4;
      
      removeClassButtons(actual);
      
      break;

      
      case 5:
      
      $('#promo4_1').animate({left: '-10px'}, 2300 );
      $('#promo4_2').animate({left: '345px' }, 2000 );
      
      
      $('#promo2_1').animate({left: '-500px'}, 2300 );
      $('#promo2_2').animate({left: '1500px' }, 2000 );

      $('#promo3_1').animate({left: '-500px'}, 2300 );
      $('#promo3_2').animate({left: '1500px' }, 2000 );

      $('#promo5_1').animate({left: '-500px'}, 2300 );
      $('#promo5_2').animate({left: '1500px' }, 2000 );
      
      $('#promo1_1').animate({left: '-500px'}, 2300 );
      $('#promo1_2').animate({left: '2090px' }, 2000 );
      
      $('#promo6_1').animate({left: '-500px'}, 2300 );
      $('#promo6_2').animate({left: '1500px' }, 2000 );
      
      
      actual = 5;
      
      removeClassButtons(actual);
      
      break;

      
      case 6:
      
      $('#promo5_1').animate({left: '-10px'}, 2300 );
      $('#promo5_2').animate({left: '309px' }, 2000 );
      
      
      $('#promo2_1').animate({left: '-500px'}, 2300 );
      $('#promo2_2').animate({left: '1500px' }, 2000 );      
      
      $('#promo3_1').animate({left: '-500px'}, 2300 );
      $('#promo3_2').animate({left: '1500px' }, 2000 );
            
      $('#promo4_1').animate({left: '-500px'}, 2300 );
      $('#promo4_2').animate({left: '1500px' }, 2000 );
      
      $('#promo1_1').animate({left: '-500px'}, 2300 );
      $('#promo1_2').animate({left: '2090px' }, 2000 );
      
      $('#promo6_1').animate({left: '-500px'}, 2300 );
      $('#promo6_2').animate({left: '1500px' }, 2000 );
      
      
      actual = 6;

      removeClassButtons(actual);
      
      break;
      
      
      
    }
  }


  $(document).ready(function(){
    
    
    var interval = self.setInterval("changepromo();",8000);
    
    
    $('#promos-buttons span').click(function(){
      
      var ida = Number(this.id);
   
      move(ida);
      
      interval = window.clearInterval(interval);
      
      interval = self.setInterval("changepromo();",8000);
      
   
    });

  });