var timer;
$(document).ready(function(){
   timer = window.setTimeout(automaticslite, 7000);
  var currentPosition = 0;
  var slideWidth = 974;
  var myslides = $('.slide');
  var countslides = myslides.length;
  $('#slidesContainer').css('overflow', 'hidden');
  myslides
  .wrapAll('<div id="slideInner"></div>')
  .css({
    'float' : 'left',
    'width' : slideWidth
  });
  $('#slideInner').css('width', slideWidth * countslides);
  $('#slideshow')
    .prepend('<span class="control" id="leftControl">Move left</span>')
    .append('<span class="control" id="rightControl">Move right</span>');
  manageControls(currentPosition);
  $('.control')
    .bind('click', function(){
      currentPosition = ($(this).attr('id')=='rightControl')
    ? currentPosition+1 : currentPosition-1;
      manageControls(currentPosition);
      $('#slideInner').animate({
        'marginLeft' : slideWidth*(-currentPosition)
      });
    });
  function manageControls(position){
    if(position==0){ $('#leftControl').hide() }
    else{ $('#leftControl').show() }
    if(position==countslides-1){ $('#rightControl').hide() }
    else{ $('#rightControl').show() }
    }
    
       function automaticslite(){
       currentPosition++;
       if(currentPosition==countslides){currentPosition=0;}
       manageControls(currentPosition);
      $('#slideInner').animate({
        'marginLeft' : slideWidth*(-currentPosition)
      });
      timer = window.setTimeout(automaticslite, 7000);
      }    
  });