$(document).ready(function(){
						 
		setupImageExpander();
		imageSwitcher();
	}
);

function imageSwitcher(){
	$('.portfolio-nav li a').click(function(){
		
		var hero = $(this).attr('href');
		var screenshot = $(this).attr('title');
		
		$('.hero').attr('src', hero);
		$('.screenshot').attr('src', screenshot);
		return false
	});
}

function setupImageExpander () {

	// On thumb click
	$('.portfolio-thumb-left, .portfolio-thumb-right, .portfolio-large').children('p').children('img').click(function() {
		
		var $thumb = $(this);
		var $target = $(this).parent().parent().children('.expanded').children('img');		
		
		var thumbW = $thumb.width();
		var thumbH = $thumb.height();
		
		var thumbPos = $thumb.position();
		var thumbX = parseInt(thumbPos.left);
		var thumbY = parseInt(thumbPos.top) + 1;		
		
		var targetW = $target.parent().width();
		var targetH = $target.parent().height();
		
		var vX = thumbX + (thumbW / 2) - (targetW / 2);
		var vY = thumbY + (thumbH / 2) - (targetH / 2);
		if (vX < 10) { vX = 10; }
		
		$target.parent().css({ display:"block", position:"absolute", left:thumbX, top:thumbY });
		$target.css({ width:thumbW, height:thumbH });
		
		$target.parent().animate({ left:vX, top:vY }, 500, "swing");
		$target.animate({ width:targetW, height:targetH }, 500, "swing");
		
		return;
	
	 // On thumb mouseover
	 }).mouseover(function(){
		 
		$(this).css({cursor:'pointer'});
		
     });
	
	// On expanded image click
	$('.portfolio-thumb-left, .portfolio-thumb-right, .portfolio-large').children('.expanded').click(function() {													   
															   
		var $thumb = $(this).parent().children('p').children('img');
		
		var thumbW = $thumb.width();
		var thumbH = $thumb.height();
		
		var thumbPos = $thumb.position();
		var thumbX = parseInt(thumbPos.left);
		var thumbY = parseInt(thumbPos.top)  + 1;	
		
		var targetW = $(this).width();
		var targetH = $(this).height();
		
		$(this).animate({ left:thumbX, top:thumbY }, 500, "swing");
		$(this).children('img').animate({ width:thumbW, height:thumbH }, 500, "swing", function() {			
			$(this).parent().css({ display:"none" });
			$(this).css({ width:targetW, height:targetH });
		});
		
		return;

	// On expanded image mouseover
	}).mouseover(function(){
		
		$(this).css({cursor:'pointer'});
		
    });

}