$(document).ready(function() {

  var counter = 0;
  var countsImg = ($('.slide').length) - 1;
  var widthImgs = 730 * ($('.slide').length);
  
  //en = #c181 / de = #c32
  $('#c32, #c181')
    .wrapInner('<div id="bodySlider"></div>')
  .append('<div id="leftControl"></div>')
  .append('<div id="rightControl"></div>')
    .append('<div id="over_buttons"><span id="but1"><a href="?id=4" title="Rohrsanierung" alt="Rohrsanierung"><img src="fileadmin/template/layout/Button_Rohrsanierung.png" alt="" /></a></span><span id="but2"><a href="?id=5" title="Auskleidung" alt="Auskleidung"><img src="fileadmin/template/layout/button_auskleidung.png" alt="" /></a></span><span id="but3"><a href="?id=22" title="Schachtsanierung" alt="Schachtsanierung"><img src="fileadmin/template/layout/Button_Schachtsanierung.png" alt="" /></a></span></div>');  
  
  $('#bodySlider')
    .css({
    'display' : 'inline',
    'float' : 'left',
    'position' : 'relative',
    'width' : widthImgs,
    'height' : '436px',
    'overflow' : 'hidden'
  });
  
  
  $('.slide')
    .css({
    'display' : 'inline',
    'float' : 'left',
    'width' : '730px',
    'height' : '436px'
  });
  
  
  $('#leftControl')
    .css({
    'display' : 'none',
    'position' : 'absolute',
    'top' : '80%',
    'left' : '84%',
    'width' : '40px',
    'height' : '40px',
    'cursor' : 'pointer',
    'backgroundImage' : 'url("fileadmin/template/layout/control_l.png")',
    'backgroundImage-repeat' : 'no-repeat',
    'backgroundImage-position' : 'left center'
  });
  
  
  $('#rightControl')
    .css({
    'display' : 'block',
    'position' : 'absolute',
    'top' : '80%',
    'right' : '4%',
    'width' : '40px',
    'height' : '40px',
    'cursor' : 'pointer',
    'backgroundImage' : 'url("fileadmin/template/layout/control_r.png")',
    'backgroundImage-repeat' : 'no-repeat',
    'backgroundImage-position' : 'left center'
  });
  
  $('#over_buttons')
    .css({
    'display' : 'block',
    'position' : 'absolute',
    'top' : '30%',
    'left' : '20px',
    'width' : '690px',
    'height' : '40px'
  });
  
  $('#over_buttons span')
    .css({
    'display' : 'inline',
    'float' : 'left',
    'position' : 'relative',
    'width' : '223px',
    'height' : '40px',
    'marginRight' : '7px'
  });
  
  $('#over_buttons span img')
    .css({
    'border' : '0px'
  });
  
  
  
  slide = setInterval(function() {
  
    if (counter < countsImg) {
    
      counter = counter + 1;
  
        $('#bodySlider').animate({"marginLeft" : "-=730"},600,'linear');
    
    $('#leftControl').css('display','block');
    
    }else {
    
      window.clearInterval(slide);
    
    }
    
    if(counter == 0) {
    
      $('#leftControl').css('display','none');
    
    }
    
    if(counter == countsImg) {
    
      $('#rightControl').css('display','none');
    
    }
    
    },6000);
  
  
  
  $('#rightControl').click(function() {
  
    window.clearInterval(slide);
    
    if (counter < countsImg) {
    
      counter = counter + 1;
    
      $('#bodySlider').animate({"marginLeft" : "-=730"},600,'linear');
    
    $('#leftControl').css('display','block');
    
    }
    
    if(counter == countsImg) {
    
      $('#rightControl').css('display','none');
    
    }
    
    
  });
  
  
  $('#leftControl').click(function() {
  
    window.clearInterval(slide);
    
    if (counter <= countsImg && counter != 0) {
    
      counter = counter - 1;
    
      $('#bodySlider').animate({"marginLeft" : "+=730"},600,'linear');
    
    $('#leftControl').css('display','block');
    
    }
    else {
    
      $('#leftControl').css('display','none');
    
    }
    
    if(counter < countsImg) {
    
      $('#rightControl').css('display','block');
    
    }
    
    if(counter == 0) {
    
      $('#leftControl').css('display','none');
    
    }
    
    
  });
  
  
  

});