var zIndex = 0;
var nextUrl = null;
var prevUrl = null;
var lock = 0;

function getPortfolioPage(url) {
  if(lock > 0) return;
  $.ajax({
      url: url,
      success: function(data) {
        
				var main = $('#main', data);
        var image = $('#main-image img', data).css({display:'block', opacity:0, zIndex:zIndex++});

        var nextThumbUrl = $('#portfolio-thumbs .next img', data).attr('src');
        var prevThumbUrl = $('#portfolio-thumbs .prev img', data).attr('src');

				image.load(function() {
					
					nextUrl = $('#portfolio-next', data).attr('href');
	        prevUrl = $('#portfolio-prev', data).attr('href');
					
					$('#portfolio-thumbs .next img').attr('src',nextThumbUrl);
	        $('#portfolio-thumbs .prev img').attr('src',prevThumbUrl);

	        $('#main').replaceWith(main[0]);

	        image.appendTo('#main-image');
	        lock++;
	        image.animate({opacity: 1}, 1000, null, function() {
	            $('#main-image img:not(:last)').remove();
	            lock--;
	        });
					
				});

			}
  });
}

$(function() {
  $('#portfolio li:first').show();
  
  $('#portfolio-next').click(function() {
      getPortfolioPage(nextUrl);
      return false;
  }).hover(function() {
			// $(this).stop().animate({left: 627}, 100);
      $('#portfolio-thumbs .next').stop().animate({opacity: 0.99});
  }, function() {
			// $(this).stop().animate({left: 625}, 100);
      $('#portfolio-thumbs .next').stop().animate({opacity: 0});
  });
  
  $('#portfolio-prev').click(function() {
      getPortfolioPage(prevUrl);
      return false;
  }).hover(function() {
			// $(this).stop().animate({left: 593}, 100);	
      $('#portfolio-thumbs .prev').stop().animate({opacity: 0.99});
  }, function() {
			// $(this).stop().animate({left: 595}, 100);
      $('#portfolio-thumbs .prev').stop().animate({opacity: 0});
  });

  nextUrl = $('#portfolio-next').attr('href');
  prevUrl = $('#portfolio-prev').attr('href');

});