// JavaScript Document

$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 950;
  var slides = $('.slide');
  var numberOfSlides = slides.length;
  var navigation_block = '<div class="nav_block"></div>';
  var autoplay_enable = true;
  var interval = 6; // in seconds to next slide
  var timer;

  // 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);

  // Insert left and right arrow controls in the DOM
  $('#slideshow')
    .prepend('<span class="control" id="leftControl">Move left</span>')
	.append('<span class="navigation" id="slide_nav"></span>')
    .append('<span class="control" id="rightControl">Move right</span>');
	
  // add blocks to navihation
  if(numberOfSlides > 1) {
	  slides.each(function(index) {
		var div = document.createElement('div');
		$(div).addClass('nav_block').attr('id','b'+index);
		if(index == currentPosition) {
			$(div).addClass('blue');
		}
		$('#slide_nav').append(div);  
		
	  })
  }
	
  // Hide left arrow control on first load
  manageControls(currentPosition);

  // Create event listeners for .controls clicks
  $('.control')
    .bind('click', function(){
	  
      clearTimeout(timer);
	  
      // Determine new position
      currentPosition = ($(this).attr('id')=='rightControl')
      ? currentPosition+1 : currentPosition-1;
	  
      manageNavigation(currentPosition);
	  
      // Hide / show controls
      manageControls(currentPosition);
      
      // animate the slides
      slideshowAnimate();
    });
	
  $('.nav_block')
    .bind('click', function() {
	  
      clearTimeout(timer);
	  
      // Determine new position
      currentPosition = Number($(this).attr('id').substr(1));
	  
      manageNavigation(currentPosition);
	  
      // Hide / show controls
      manageControls(currentPosition);
     
      // animate the slides
      slideshowAnimate();
  });

  function slideshowAnimate() {	
    // Move slideInner using margin-left
    $('#slideInner').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    });  
  }

  function manageNavigation(position) {
    $('.blue').removeClass('blue');
    $('#b'+position).addClass('blue');  
  }

  // 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() }
    }
	
  function autoplay() {
    clearTimeout(timer);
    currentPosition++;
    if(currentPosition == numberOfSlides) {
      // last slide
      currentPosition = 0;	
    }
    manageNavigation(currentPosition);
	  
    // Hide / show controls
    manageControls(currentPosition);
     
    // animate the slides
    slideshowAnimate();  
	  
    // set timer
    //if(autoplay_enable) {
      //clearTimeout(timer);
      //timer = setTimeout(function() { autoplay() }, interval*1000)     
     //}
     setTimer();
   }
  function setTimer() {	
    if(autoplay_enable) {
      //timer = setTimeout(function() { autoplay() }, interval*1000)
      timer = setTimeout(autoplay, interval*1000)   
    }
  }
  
	$(window).blur(function(e) {
		// Do Blur Actions Here
		clearTimeout(timer);
	});
	
	$(window).focus(function(e) {
		// Do Focus Actions Here
		timer = setTimeout(autoplay, interval*1000)   
	});
  
  setTimer();
   
});