$(function(){
		$('#portfolio-content').cycle({ 
				fx:     'scrollVert', 
				speed:  'fast', 
				timeout: 0, 
				next:   '#down', 
				prev:   '#up'
		});
		
		$('#all-details').cycle({ 
				fx:     'scrollVert', 
				speed:  'fast', 
				timeout: 0, 
				next:   '#detail-up', 
				prev:   '#detail-down'
		});
		
	$('.detail').css('display','none');
	$('#detail-up').css('display','none');
	$('#detail-down').css('display','none');
	$('#details-container').css('width','0');
	$('#all-details').css('width','0');
	
	$('#portfolio-content ul li img').click(function(){
		var myRel = $(this).attr('rel');
		$("'.detail[rel='" + myRel + "']'").fadeIn('slow');
		
		$('#all-details').css('width','374px');
		$('#details-container').css('width','374px');
		$('#detail-up').fadeIn('slow');
		$('#detail-down').fadeIn('slow');
		
		var slide = $('#all-details').children().size() - (myRel.replace("project-", ""));
		$('#all-details').cycle(slide, 'none'); 

	});

	$('.detail .close').click(function(){
		var myId = $(this).attr('id').replace("close", "");	
		var myRel = "project-" + myId;
		
		$("'.detail[rel='" + myRel + "']'").fadeOut('slow',hide);	
		$('#detail-up').fadeOut('slow',hide);
		$('#detail-down').fadeOut('slow',hide);
	});
	
	function hide(){
		$('.detail').css('display','none');
		$('.detail').css('top','0px');
		$('#details-container').css('width','0');
		$('#all-details').css('width','0');
	};
});