$(function() {
	var currentSliderImage = 1;
	var totalNumberOfSliderImages = '';
	var extraBrowserPadding = 0;
	var imageSeperation = 22;
	var imageSetArray = [];	//Array holding all of the current images
	var slidingMovementComplete = true;
	
	///////// Setup some extra padding per browser ///////////
	if(!$.browser.msie){
		extraBrowserPadding = 3;
	}
	///////////////////////////////////////////////////////////
	
	$('#visuals-detail').livequery(function() {
		imageSetArray = []; //Reset the array 
		
		totalNumberOfSliderImages = $('#visuals-detail li').size();
		
		////// Push the images into an array //////////////////////
		var counter = 0;
		$('#visuals-detail li').each(function() {
			imageSetArray[counter] = "<li>"+$(this).html()+"</li>";
			++counter;
		});
		
		////// Update the initial title ////////////////////////////
		//updateTitle();
	});
	
	////////// The main function ////////////////////////////////////////////////////////////
	function moveImages(dir) {
		slidingMovementComplete = false;
		
		var movementAmount = "";
		
		//////////// Set the movement amout to positive or negative ///////
		movementAmount = (dir == "right") ? "+" : "-";
		
		///// Add another image //////////////////
		addNewImage(dir);
		
		//////////// Update the current image number //////////////////////
		//currentSliderImage = (dir == "right") ? --currentSliderImage : ++currentSliderImage;
		
		/////////// Get the current image object //////////////////////////
		var imageMoving = (dir == "right") ? $('#visuals-detail li img').get(currentSliderImage-1) : $('#visuals-detail li img:first');
		//alert($(imageMoving).attr('src'));	
		
		///////// UPdate the css to animate the move 
		var movementInt = ($(imageMoving).width() + imageSeperation + extraBrowserPadding);
		movementAmount += "="+movementInt+"px";
		
		///// Move the image to the right
		$('#visuals-detail').animate({"marginLeft": movementAmount}, "1000","linear", function(){removeImages(dir,movementInt)});
	}
	
	
	///////// Update the title in the black box ////////////////////////////////////////////
	/*function updateTitle() {
		var currentImage = $('#visuals-detail li img:first');
		var imageTitle = $(currentImage).attr('title');
		$('#imageTitle').html(imageTitle);
	}*/
	
	
	//////// Add a new image to the beginning or end depending on the directions ////////////////
	function addNewImage(dir) {
		//alert(currentSliderImage);
		if(dir == "left") {
			$('#visuals-detail').append(imageSetArray[findNextImage(dir)]);
		} else {
			$('#visuals-detail').prepend(imageSetArray[findNextImage(dir)]);
			
			//Reset the maginLeft
			$('#visuals-detail').css('marginLeft','-'+($('#visuals-detail li:first').width() + imageSeperation + extraBrowserPadding) + 'px');
		}
	}
	
	function removeImages(dir,movementInt) {
		if(dir == "left") {			
			//Reset the maginLeft
			$('#visuals-detail').css('marginLeft','0px');
			
			//Remove the element just moved over and reset the marginLeft
			$('#visuals-detail li:first').remove();
				
		} else {
			//Remove the element just moved over and reset the marginLeft
			$('#visuals-detail li:last').remove();
		}
		
		slidingMovementComplete = true;
		
		////////// Update the titles depending on which image is displayed ///////
		//updateTitle();
	}
	
	function findNextImage(dir) {
		var matchArrayID = "";
			
		for(var i=0;i<imageSetArray.length;++i) {
			if(imageSetArray[i] == "<li>"+$('#visuals-detail li:first').html()+"</li>") {
				matchArrayID = i;
			}
		}
		
		if(dir == "right") {
			return (matchArrayID == 0) ? imageSetArray.length-1 : matchArrayID-1;
		} else {
			return matchArrayID; //Just return itself since there is a right handed buffer
		}
	}
	
	////////////// Setup on click events //////////////////////////////////////////////////////////
	$('#arrow-left-portfolio').livequery('click',function() {
		if(slidingMovementComplete) {moveImages('right');}
	});
	
	$('#arrow-right-portfolio').livequery('click',function() {
		if(slidingMovementComplete) {moveImages('left');}
	});
	/////////////////////////////////////////////////////////////////////////////////////////////////
});