$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 974;
  var slides = $('.slide');
  var duration = 8000;
  var numberOfSlides = slides.length;

  // Remove scrollbar in JS
  $('#slidesContainer').css('overflow', 'hidden');

  // 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);
  
  // Balls code
  $('#HeaderBalls').html(getBalls(numberOfSlides, 1));
  
  
  
  // Insert left and right arrow controls in the DOM
  $('#slidesContainer')
    .prepend('<span class="control" id="leftControl">Move left</span>')
    .append('<span class="control" id="rightControl">Move right</span>');

  // Hide left arrow control on first load
  manageControls(currentPosition);

  // Create event listeners for .controls clicks
  $('.control')
    .bind('click', function(){
    // Determine new position
      currentPosition = ($(this).attr('id')=='rightControl')
    ? currentPosition+1 : currentPosition-1;

      // Hide / show controls
      manageControls(currentPosition);
      // Move slideInner using margin-left
      $('#slideInner').animate({
        'marginLeft' : slideWidth*(-currentPosition)
      });
	  
	  $('#HeaderBalls').html(getBalls(numberOfSlides, currentPosition + 1));
	  
	  
    });

  // manageControls: Hides and shows controls depending on currentPosition
  function manageControls(position){
    // Hide left arrow if position is first slide
    if(position==0){ $('#leftControl').hide() }
    else{ $('#leftControl').show() }
    // Hide right arrow if position is last slide
    if(position==numberOfSlides-1){ $('#rightControl').hide() }
    else{ $('#rightControl').show() }
    }


 //animator function
    var stopper = false;
    var animator = function(time, slideCount, currentPos) {

        if (stopper != true) { 
            var nextslide = currentPos + 1;
            if (nextslide >= slideCount) {
                nextslide = 0;
            }
            currentPosition = nextslide;
            // Move slideInner using margin-left
            $('#slideInner').animate({
                'marginLeft': slideWidth * (-nextslide)
            });
            $('.BannerContainer .Offer').hide();

            // Hide / show controls
            manageControls(nextslide);
			
			$('#HeaderBalls').html(getBalls(numberOfSlides, nextslide + 1));
			
			
            //restart animation
            
                setTimeout(function() { animator(time, slideCount, nextslide); }, time);
        }
    }

    //start anim
    //animator(duration, numberOfSlides, 0, stop);
    setTimeout(function() { animator(duration, numberOfSlides, 0); }, duration);

    $(".slide").hover(function() {
        stopper = true;
    });

  });

function getBalls(iNumOfBalls, iSelectedBall) {
	
	sBalls = '';
	for (iCount = 1; iCount <= iNumOfBalls; iCount++)
	{
		if (iCount == iSelectedBall) {
			sState = 'on';
		} else {
			sState = 'off';
		}
		sBalls = sBalls + getBall(sState);
	}
	
	return sBalls;
	
}

function getBall(sState){
	sBall = '<img src="images/circle_' + sState + '.png" />';
	return sBall;
}