$(document).ready(function(){
	var slideInnerWidth = $('#slideInner').width();

  	var currentPosition = 0;
  	var slides = $('.slides');
  	var numberOfSlides = slides.length;

  	// Wrap all .slides with #slideInner div
  	slides.wrapAll('<div id="slideInner" class="clearfix"></div>');	
	
	var slideInnerWidth = $('#slideInner').width();
	
	if (slideInnerWidth > 1000){
		layout = 4;
		marginRightVal = 40;
	} else if (slideInnerWidth > 700 && slideInnerWidth < 730 ){
			layout = 3;
			marginRightVal = 15;
	} else if (slideInnerWidth > 430 && slideInnerWidth < 440 ){
			layout = 3;
			marginRightVal = 15;
	} else if (slideInnerWidth > 100 && slideInnerWidth < 430 ){
			layout = 1;
			marginRightVal = 15;
	} else { 
			layout = 1;
			marginRightVal = 0;  
			}
	
	//*** Resize
	$('#slidesContainer').resize(function(e){
		elem = $('#slidesContainer');
		if (elem.width() > 1000){
			layout = 4;
			marginRightVal = 40;
		} else if (elem.width() > 700 && elem.width() < 730 ){
				layout = 3;
				marginRightVal = 15;
		} else if (elem.width() > 430 && elem.width() < 440 ){
				layout = 3;
				marginRightVal = 15;
		} else if (elem.width() > 100 && elem.width() < 430 ){
				layout = 1;
				marginRightVal = 15;
		} else { 
				layout = 1;
				marginRightVal = 0;  
				}
		
	// Float left to display horizontally, readjust .slides width
	$('.slides').css({
      'float' : 'left',
	  'width' : '230px',
	  'margin-right' : marginRightVal
    })
		
	lastSlideElem = '.slides:nth-child('+ layout + 'n)';
	
	$(lastSlideElem).css({'margin-right' : '0px'});

  	// Set #slideInner width equal to total width of all slides
  	var innerWidth = (numberOfSlides * 230) + (numberOfSlides * marginRightVal) - (Math.ceil(numberOfSlides/layout)*marginRightVal) + marginRightVal;
  	$('#slideInner').css('width', innerWidth);
  
  	//Create event listeners for Keyboard press
  	$(document.documentElement).keyup(function (event) {
		var direction = null;

		if (event.keyCode == 37) {
	  	// Left Key
	  
	  	if (currentPosition != 0 ){
			currentPosition = currentPosition-1;
	  		$('#slideInner').animate({
		  	//'marginLeft' : 100*(-currentPosition)+"%"
		  	'marginLeft' : 100*(-currentPosition)+"%"
			});
	  	} 
	  
		} else if (event.keyCode == 39) {
	  	// Right Key
	  
	  	if (currentPosition >= 0 && currentPosition <= (numberOfSlides/layout)-1 ){
			currentPosition = currentPosition+1;
		
	  		$('#slideInner').animate({
		  	'marginLeft' : 100*(-currentPosition)+"%"
			});
	  	} 
		}
		manageControls(currentPosition);
  	});
	
	});
	
	lastSlide = (Math.ceil(numberOfSlides/layout))-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==lastSlide){ $('#rightControl').hide() } else{ $('#rightControl').show() }
  	}	
	
	// Insert controls in the DOM
  	$('#slideshow')
    .append('<div class="controller clearfix"><span class="control" id="leftControl">&lt;</span><span class="control" id="rightControl">&gt;</span></div>');
	
	// 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' : 100*(-currentPosition)+"%"
    	});
  	});
	
  	$('#slidesContainer').resize();
  
});