$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 523;
  var slides = $('.slide');
  var numberOfSlides = slides.length;
  var slideHover = false;
  


  // Wrap all .slides with #slideInner div
  slides
    .wrapAll('<div id="slideInner"></div>')
    // Float left to display horizontally, readjust .slides width
	.css({
      'float' : 'left',
      'width' : slideWidth
    });

  // Set #slideInner width equal to total width of all slides
  $('#slideInner').css('width', slideWidth * numberOfSlides);

  // Insert controls in the DOM
  $('#slideshow')
	.prepend('<span class="control" id="button1">Button one</span>')
	.prepend('<span class="control" id="button2">Button two</span>')
	.prepend('<span class="control" id="button3">Button three</span>')
	.prepend('<span class="control" id="button4">Button four</span>')
	.prepend('<span class="control" id="button5">Button five</span>');


  // Create event listeners for .controls clicks
  $('.control')
    .bind('click', function(){
    // Determine new position
	
	if(($(this).attr('id')=='button1')){
	currentPosition = 0;
	setSelected(currentPosition);
	}
	
	if(($(this).attr('id')=='button2')){
	currentPosition = 1;
	setSelected(currentPosition);
	}
	
	if(($(this).attr('id')=='button3')){
	currentPosition = 2;
	setSelected(currentPosition);
	}
	
	if(($(this).attr('id')=='button4')){
	currentPosition = 3;
	setSelected(currentPosition);
	}
	
	if(($(this).attr('id')=='button5')){
	currentPosition = 4;
	setSelected(currentPosition);
	}


    // Move slideInner using margin-left
    $('#slideInner').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    });
  });
  
  $('#slidesContainer').mouseover(function(){
        slideHover = true;
		});
		
  $('#slidesContainer').mouseout(function(){
        slideHover = false;
		});

		
  $('#button1').mouseover(function(){
        slideHover = true;
		});
		
  $('#button1').mouseout(function(){
        slideHover = false;
		});	
		
  $('#button2').mouseover(function(){
        slideHover = true;
		});
		
  $('#button2').mouseout(function(){
        slideHover = false;
		});	

  $('#button3').mouseover(function(){
        slideHover = true;
		});
		
  $('#button3').mouseout(function(){
        slideHover = false;
		});	

  $('#button4').mouseover(function(){
        slideHover = true;
		});
		
  $('#button4').mouseout(function(){
        slideHover = false;
		});			
		
  $('#button5').mouseover(function(){
        slideHover = true;
		});
		
  $('#button5').mouseout(function(){
        slideHover = false;
		});		

   function alertMe() {
   
   if(slideHover == false){
   // Determine new position
	var currNumber = slides.length - 1;
	if(currNumber == currentPosition){
	currentPosition = 0;
	setSelected(currentPosition);
	}else{
	currentPosition++;
	setSelected(currentPosition);
	}

    // Move slideInner using margin-left
    $('#slideInner').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    });
	}
   };
   
   function setSelected(curPos) {
		var looplength = 5;
		for(var i=0;i<looplength;i++) {
			var pos1 = (i + 1).toString();
			if(i == curPos) {
				document.getElementById("button" + (i+1)).className = "control b" + (i+1) + "selected";
			}
			else {
				document.getElementById("button" + (i+1)).className = "control";
			}
		}
   };

   function intervalTrigger() {
	  setInterval( alertMe, 7000 );
	  
   };

   intervalTrigger();
   
   setSelected(currentPosition);

 
});