$(document).ready(function(){
	//VARIABLES
	var currentPosition = 0;
	var imageWidth = 1000;
	var imageHeight = 720
	var images = $('.image');
	var numberOfimages = images.length;
	
	// Remove scrollbar in JS
	$('#imageContainer').css('overflow', 'hidden');
	
	// Wrap all .images with #imageInner div
	images.wrapAll('<div id="slideContainer"></div>')
	
	// Float left to display horizontally, readjust .slides width
	.css({
		'float' : 'left',
		'width' : imageWidth
	});
	
	// Set #slideInner width equal to total width of all slides
	$('#slideContainer').css('width', imageWidth * numberOfimages);
	
	// Hide left arrow control on first load
	manageControls(currentPosition);
	
	// Create event listeners for #controls clicks
	$('#backArrow').click(backImage);
	$('#nextArrow').click(nextImage);
	
	function nextImage(){
		currentPosition += 1;
		
		if(currentPosition > numberOfimages-1){
			currentPosition = numberOfimages-1;
		}
		
		manageControls(currentPosition);
	}
	
	function backImage(){
		currentPosition -= 1;
		
		if(currentPosition < 0){
			currentPosition = 0;
		}
		
		manageControls(currentPosition);
	}
	
	// hides and shows controls depending on currentPosition
	function manageControls(position){
		if(position == 0){ 
			$('#backArrow').fadeTo(200,0);
		} else if(position == numberOfimages - 1){
			$('#nextArrow').fadeTo(200,0);
		}else{ 
			$('#backArrow').fadeTo(200,1);
			$('#nextArrow').fadeTo(200,1);  
		}
		
		slideImages();
	}
	
	// slide images based on position
	function slideImages(){
		$('#slideContainer').stop().animate({'marginLeft' : imageWidth*(-currentPosition)},200);
	}
	
	//END OF CLASS
});