$(document).ready( function(){
	
	var imgWidth = $('#image-viewer #images li img').width();
	
	var $myLi = $('#image-viewer #images li');
	var totalimage = $myLi.length;
	var index = 0;	
	
	var $prevButton = $('#img-controller a#prev');
	var $nextButton = $('#img-controller a#next');
		
	$('#image-viewer #images').css( {'overflow':'hidden'}).find('li').css({'position': 'absolute', 'float': 'none', 'left': 1000});
		
	$myLi.eq(0).css('left', 0);
	$myLi.eq(1).css('left', imgWidth);
	$myLi.eq(2).css('left', imgWidth * 2);
	
	// update the image count
	updateImgCount();
		
	$prevButton.click( function(){
												
		index --;
		slideImage(index);
		
		return false;
		
	}).css('visibility', 'hidden');
	
	
	$nextButton.click(function(){
								
		index ++;
		
		slideImage(index);

		return false;
	});
	
	function slideImage(countNum){
		if (countNum <= 0 ){
			$prevButton.css('visibility', 'hidden');
			index = 0;
			
		} else {
			$prevButton.css('visibility', 'visible');	
		}
		
		
		if (countNum >= totalimage - 1){
			$nextButton.css('visibility', 'hidden');
			index = totalimage - 1;
			
		} else {
			$nextButton.css('visibility', 'visible');
		}
		
		// move everything outside the viewing area		
		$('#image-viewer #images li').each(function(){			
			$(this).css('left', imgWidth);	
		});
		

		//$myLi.eq(countNum).animate({'left': 0} , 'slow');
		$myLi.eq(countNum).css('left', 0);
		
		// update the image count
		updateImgCount();
	}
	
	function updateImgCount(){
		var $imgCount = $('#img-controller #img-count p');
		$imgCount.empty();
		$imgCount.text('Image ' + (index + 1) + ' of ' + totalimage);
	}

});