var moving = false;

$( function(){
	$('#portfolioContainer .left img, #portfolioContainer .right img').css('opacity', 0.6);
	
	$('#portfolioPrev, #portfolioNext')
		.hover( function(){
			$(this).css('cursor', 'pointer');
			
			var thisImg = $(this).find('img');
			$(thisImg).attr('src', $(thisImg).attr('src').replace('.png', '-over.png'));
		}, function(){
			var thisImg = $(this).find('img');
			$(thisImg).attr('src', $(thisImg).attr('src').replace('-over.png', '.png'));
		})
		.click( function(){
			if ( moving ) {
				return false;
			}
			
			var direction = $(this).attr('id').replace('portfolio','');
			
			if ( direction == 'Prev' ) {
				$('#portfolioContainer').trigger('moveLeft');
			}
			else if ( direction == 'Next' ) {
				$('#portfolioContainer').trigger('moveRight');
			}
		});
	/* END portfolio buttons */
	
	$('#portfolioContainer')
		.bind('moveRight', function(){
			moving = true;
			
			var container = $(this);
			var left = $(container).find('.left');
			var middle = $(container).find('.middle');
			var right = $(container).find('.right');
			
			$(right)
				.next('.portfolio')
					.css( 
						{ left:'1010px', 
						  top:0,
						  width:'300px',
						  height:'202px'
						}					
					)
					.find('img')
						.css( {width:'300px', height:'202px', opacity:0.6} )
						.end()
					.animate( {left:'590px'}, 1000 )
					.addClass('right');
			
			$(left)
				.animate( {left:'-420px'}, 1000, function(){
					$(this).removeClass('left');
					$(container).trigger('shiftToLeft');
				});
			
			$(middle)
				.css('zIndex', 20)
				.animate( {left:0, top:0, width:'300px', height:'202px'}, 1000, function(){
					$(this).removeClass('middle').addClass('left');
				})
				.find('img')
					.animate( {width:'300px', height:'202px', opacity:0.6}, 1000);
				
			$(right)
				.css('zIndex', 30)
				.animate( {left:'240px', top:'45px', width:'416px', height:'280px'}, 1000, function(){
					$(this).removeClass('right').addClass('middle');
					moving = false;
				})
				.find('img')
					.animate( {width:'416px', height:'280px', opacity:1}, 1000);
		})
		.bind('moveLeft', function(){
			moving = true;
			
			var container = $(this);
			var left = $(container).find('.left');
			var middle = $(container).find('.middle');
			var right = $(container).find('.right');
			
			$(left)
				.prev('.portfolio')
					.css( 
						{ left:'-420px', 
						  top:0,
						  width:'300px',
						  height:'202px'
						}					
					)
					.find('img')
						.css( {width:'300px', height:'202px', opacity:0.6} )
						.end()
					.animate( {left:0}, 1000 )
					.addClass('left');
			
			$(right)
				.animate( {left:'1010px'}, 1000, function(){
					$(this).removeClass('right');
					$(this).trigger('shiftToRight');
				});
			
			$(middle)
				.css('zIndex', 20)
				.animate( {left:'590px', top:0, width:'300px', height:'202px'}, 1000, function(){
					$(this).removeClass('middle').addClass('right');
				})
				.find('img')
					.animate( {width:'300px', height:'202px', opacity:0.6}, 1000);
				
			$(left)
				.css('zIndex', 30)
				.animate( {left:'240px', top:'45px', width:'416px', height:'280px'}, 1000, function(){
					$(this).removeClass('left').addClass('middle');
					moving = false;
				})
				.find('img')
					.animate( {width:'416px', height:'280px', opacity:1}, 1000);
		})
		.bind('shiftToRight', function(){
			var newItem = $(this).find('.portfolio:last');
			$(this).prepend( $(newItem).clone() );
			$(newItem).remove();
		})
		.bind('shiftToLeft', function(){
			var newItem = $(this).find('.portfolio:first');
			$(newItem).clone().insertAfter( $(this).find('.portfolio:last') );
			$(newItem).remove();
		});
	/* END portfolio container events */
});