var port_item_width = 1020;
var offset_left;
var port_items_html = '';
var total_port_items_width = 0;
var new_port_items_width = 0;
var scroll_px = 1020;
var html_num_added = 0;


$(document).ready(function(){

	//alert($(window).width());
	$('#port-carousel-wrapper').css('width', '1020px');	
	$('#port-imagewrapper').css('width', '80000px');

	// Get the html for the portfolio items, b/c we'll need to append/prepend it when cycling
	port_items_html = $('#port-imagewrapper').html();

	// Figure out what the width of the port-imagewrapper needs to be, by 
	// calculating the widths of the inner items + the margin on those items

	setTimeout(
		function() {
		
			// Calculate how wide all our images are
			$('#port-imagewrapper li img').each(function() { total_port_items_width += ($(this).attr('width')) + 108; });

			//$('#port-imagewrapper').css('width', total_port_items_width+'px');
	
			// Now let's go ahead and load up some items for the "THIS WAY" button
			var new_html = '';
			for(var i = 0; i < 5; i++) {
				if(new_port_items_width == 0) new_port_items_width = total_port_items_width;
				new_port_items_width += total_port_items_width;
				new_html += port_items_html;
			}
			setTimeout(
				function() {
					//$('#port-imagewrapper').append(new_html).css('width', new_port_items_width+'px');
					$('#port-imagewrapper').append(new_html);
					$('#port-imagewrapper li').removeClass('loading').children('img').removeClass('hide');
					$('#port-imagewrapper').animate({ left: '-'+(new_port_items_width - total_port_items_width)+'px' }, 1);
				},
				600
			);
		}, 
		600
	);



	// Custom portfolio items carousel
	$('#port-navright, #port-navleft').click(function() {
	
		if(new_port_items_width == 0) new_port_items_width = total_port_items_width;
		new_port_items_width += total_port_items_width;

		if(this.id == 'port-navright') {
			var pos = '-='+scroll_px+'px';
			
			html_num_added++;
			if(html_num_added < 10) {
				$('#port-imagewrapper').append(port_items_html);
				$('#port-imagewrapper li').removeClass('loading').children('img').removeClass('hide');
			}

		} else {

			var pos = '+='+scroll_px+'px';
		}

		$('#port-imagewrapper').animate(
			{ left: pos }, 
			1000,
			"easeOutQuad"
		);

		return false;

	});

	// Load in all the portfolio images
	$("#port-imagewrapper li img").each(function() {
	    var img = new Image();
	    img.src = $(this).attr('src');
	    var id = this.id;


	    $(img).load(function() {
	        $('#'+id).fadeIn(1000).parent().removeClass('loading');
	    });
	});
	
	/*
	var zIndexNumber = 1000;
	$('div').each(function() {
		$(this).css('zIndex', zIndexNumber);
		zIndexNumber -= 10;
	});
	*/
});