$(document).ready(function()
{
	$('#slideshow').css('display', 'block');
	
	var currentPosition = 1; // 0 element is the last slide duplicated
	var numberOfSlides = $('.slide').length + 2; // add one for the copied first slide
	
	var slideshowWidth = $('#slideshow').css('width');
	var slideshowHeight = $('#slideshow').css('height');
	var slideshowHeight = $('#slideshow').css('height');
	var slideViewContainerWidth = $('.slideViewContainer').css('width');
	var slideWidth = slideViewContainerWidth;
	var slideMargin = '100px';
	var interval;
	
	// Duplicate the first slide and add it to the end
	// Duplicate the last slide and add it to the beginning
	// Varibales must be declared before any changes are made
	var firstSlide = $('.slidesContainer .slide:first');
	var lastSlide = $('.slidesContainer .slide:last');
	$('.slidesContainer').append('<div class="slide">' + firstSlide.html() + '</div>');
	$('.slidesContainer').prepend('<div class="slide">' + lastSlide.html() + '</div>');
	
	// Remove scrollbar
	$('#slideshow').css('overflow', 'hidden');
	
	
	$('.slideViewContainer')
		.css({
			'overflow' : 'hidden',
			'float' : 'left',
			'height' : slideshowHeight
		});
	
	
	$('.slidesContainer').css('width', (parseInt(slideWidth) + parseInt(slideMargin)) * numberOfSlides);
	
	
	// set slidesContainer margin so the correct starting slide is shown
	$('.slidesContainer').css('margin-left', calculateMargin());
	
	
	$('.slide')
		.css({
			'float' : 'left',
			'margin-right' : slideMargin,
			'width' : parseInt(slideWidth)
		});
	
	
	// Hook mouse click events
	$('.leftArrow').click(leftArrowClicked);
	$('.rightArrow').click(rightArrowClicked);
	
	startInterval();
	$('#slideshow').mouseleave(startInterval).mouseenter(stopInterval);
	
	
	
	
	
		$('.slideimg').each(function(index) {
			var src = $(this).attr('src').replace('/lo_res', '');
			$(this).attr('src', src);
		});
	
	
	
	
	
	function startInterval() { interval = setInterval(doInterval, 5000); }
	function stopInterval() { clearInterval(interval); }
	
	function doInterval()
	{
		rightArrowClicked();
	}
	
	function leftArrowClicked()
	{
		// make sure the ends loop around even if the animation is still in progress
		manageEnds();
		
		currentPosition -= 1;
		animateSlide();
	}
	
	function rightArrowClicked()
	{
		// make sure if there is an animation already going on, the movement is completed
		var newLocation = (parseInt(slideWidth) + parseInt(slideMargin)) * (-currentPosition);
		$('.slidesContainer').css('margin-left', calculateMargin() + 'px');
		
		currentPosition += 1;
		animateSlide();
	}
	
	function animateSlide()
	{
		$('.slidesContainer').stop().animate
			({ 'margin-left' : calculateMargin() }, 600, manageEnds);
	}
	
	function manageEnds()
	{
		if(currentPosition <= 0)
		{
			currentPosition = numberOfSlides - 2;
			var newLocation = calculateMargin();
			$('.slidesContainer').css('margin-left', calculateMargin() + 'px');
			
			return true;
		}
		else if(currentPosition >= numberOfSlides - 1)
		{
			currentPosition = 1;
			var newLocation = calculateMargin();
			$('.slidesContainer').css('margin-left', calculateMargin() + 'px');
			
			return true;
		}
		
		return false;
	}
	
	function calculateMargin()
	{
		return (parseInt(slideWidth) + parseInt(slideMargin)) * (-currentPosition);
	}
	
	/*var currentPosition = 0;
	var slideWidth = 660;
	var slides = $('.slide');
	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);
	
	// Insert controls in the DOM
	$('#slideshow')
		.prepend('<span class="control" id="leftControl">Clicking moves left</span>')
		.append('<span class="control" id="rightControl">Clicking moves 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)
		});
	});
	
	// 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() }
	}*/
});