var scroll_px = 0;
var total_port_items_width = 0;
var numClicks = 1;
var clicks;
var pic_real_width;
var duration = 100;

$(document).ready(function() {
						   
	windowWidth = Math.floor($(window).width() * 0.5);
	$('#imagewrapper').hide();
	
	setTimeout(function() {
			
	    $('#imagewrapper img').each(function() { total_port_items_width += ($(this).attr('width')) + 13; 
		
		duration = $("#imagewrapper img").length * 1000;
		
									 
		$('#imagewrapper').css('width', total_port_items_width + 27 +'px');
		$('#top').css('width', total_port_items_width + 12 +'px');
		$('#topBack').css('width', total_port_items_width + 12 +'px');
		$('#topTop').css('width', total_port_items_width + 12 +'px');
		$('#bottom').css('width', total_port_items_width + 27 +'px');
		$('#bottomRight').css('width', total_port_items_width -3 +'px');
		
		});
						
		clicks = Math.floor((total_port_items_width + 27) / windowWidth);
		//alert(pos);

		if(clicks > 1) {
		
		scroll_px = Math.floor((total_port_items_width + 27)/ clicks + (((total_port_items_width + 27) / clicks) - windowWidth) / (clicks-1) );
		
		} else {
		$('#imagewrapper').css('width', $(window).width() + 27 +'px');
		$('#top').css('width', $(window).width() + 12 +'px');
		$('#topBack').css('width', $(window).width() + 12 +'px');
		$('#topTop').css('width', $(window).width() + 12 +'px');
		$('#bottom').css('width', $(window).width() + 27 +'px');
		$('#bottomRight').css('width', $(window).width() -3 +'px');
		
		scroll_px = Math.floor((total_port_items_width + 27) - windowWidth);	
		}
		
		if(numClicks == 1) {
		$('#navleft').hide();
		}


		//setTimeout(function() {
		//$('#imagewrapper').animate({ left: windowWidth+'px' }, 1);
			//},
			//1200
			//);
$('#imagewrapper').show();
$('#imagewrapper').animate(
			{ left: windowWidth+'px' }, 1200
		);
}, duration
);


	$('#navright, #navleft').click(function() {
	
		if(this.id == 'navright') {
		
		var pos = '-='+scroll_px+'px';
		numClicks++;		
			
		} else {
		
		var pos = '+='+scroll_px+'px';
		numClicks--;
		
		}
		
		if(numClicks == 1) {
		$('#navleft').hide();
		} else {
		$('#navleft').show();
		}
		
		if(clicks > 1) {
		if(numClicks == clicks) {
		$('#navright').hide();
		} else {
		$('#navright').show();
		} } else {
		if(numClicks > clicks) {
		$('#navright').hide();
		} else {
		$('#navright').show();
		}	
		}
		
		$('#imagewrapper').animate(
			{ left: pos }, 1200
		);

		return false;

	});
	
});