var movespace = 375;
var speed = 1400;

$(document).ready(function(){
	
	$('#slider').append('<div class="imgcontainer"></div>');
	
	$('#slider').append('<div class="leftbutton button"><div></div></div>');
	$('#slider').append('<div class="rightbutton button"><div></div></div>');
	
	
	$.getJSON("ajax/getsliderimages.php", function(json) {
		
		var numItems = 0;
		$.each(json, function(key,value) {
			$('#slider .imgcontainer').append('<a href="'+value.url+'" target="_blank"><img src="img/projects/'+value.img+'" /></a>');
			numItems++;
		});
		
		var imgcontainerWidth = numItems*375;
		$('#slider .imgcontainer').css({width: imgcontainerWidth+'px'})
		
	});
	
	function move(direction)
	{
		var slideobj = $('#slider .imgcontainer');
		var currentMarginStr = slideobj.css('marginLeft')
		var currentMargin = Math.round(currentMarginStr.substring(0, currentMarginStr.length-2));
		
		var newMargin = 0;
		if(direction == 'left') { newMargin = currentMargin-movespace; }
		if(direction == 'right') { newMargin = currentMargin+movespace; }
		
		slideobj.animate({marginLeft: newMargin},speed, 'easeInOutBack',function(){
																				 
			if(direction == 'left')
			{
				var slideobjWidthStr = slideobj.css('width');
				var slideobjWidth = Math.round(slideobjWidthStr.substring(0, slideobjWidthStr.length-2));
				
				var sliderWidth = $('#slider').width(); 
				
				var overig = sliderWidth-slideobjWidth;
				
				if(sliderWidth-slideobjWidth > newMargin) { slideobj.animate({marginLeft: sliderWidth-slideobjWidth},600); }
				
			}
			
			if(direction == 'right')
			{
				if(newMargin > 0) { slideobj.animate({marginLeft: 0},600); } 
			}
		});
	}
	
	$('#slider .leftbutton').click(function(){
		move('right');
	});
	
	$('#slider .rightbutton').click(function(){
		move('left');				 
	});
	
	
});