$(function()
{
	$('.project_images .project_img_small, .project_images .project_img_large')
		.find('div.loads_native')
			.find('div.img a')
				.click(loadLarge);
	
	$('<div id="loader_img"><div class="indicator_magnify"> </div></div>')
		.appendTo('body')
		//.blink({delay:125})
		.hide();
	
	
	var $last;
	
	var redraw_delay = 25;
	var int_id = 0;
	var last_z = 1000;
	
	var idx = -1;
	
	$(window)
		.bind('show_loader', function(e, $p)
		{
			// do the blinking thing
			$('#loader_img').prependTo($p).show();
		})
		.bind('load_complete', function(e, $p)
		{
			// stop the blinking thing
			$('#loader_img').fadeOut('slow')
		})
		.bind('keyup', function(e)
		{
			return;
			var dir = 0;
			var l;
			
			switch (e.which)
			{
				case 39: // right
				case 40: // down
					dir = 1;
				break;
				case 37: // left
				case 38: // up
					dir = -1;
				break;
			}
			
			e.stopPropagation();
			e.preventDefault();
			
			l = $('div.project_images > div').length;
			
			idx += dir;
			idx %= l;
			if (idx < 0)
				idx = l - 1;
			
			$('div.project_images > div:eq(' + idx + ')')
				.find('div.img a')
					.click();
		});
	
	function loadLarge(e)
	{
		e.preventDefault();
		
		var $t = $(this);
		var $p = $t.parents('div.project_img_container.loads_native');
		var $i = $t.find('img');
		
		var os = $p.hasClass('small')? 'small' : ($p.hasClass('medium')? 'medium' : '');
		var ois = ($i.data('original-img-size') || '').split('x');
		
		idx = $p.parent().index();
		
		// int_id = setInterval(doReLayout, redraw_delay);
		
		if ($p.hasClass('native')) // Going back to original size
		{
			// $p.data('original-class')
			
			$p
				.removeClass('native')
			
			$i
				.animate({
					width: ois[0],
					height: ois[1],
					opacity: .5
				}, 1000, 'easeOutQuint', function()
				{
					doReLayout($p);
					$p.addClass(os);
					
					loadOriginal($p);
					$(window).trigger('show_loader');
					// clearInterval(int_id);
				});
		}
		else // Going to native size
		{
			if ($last && $last[0] != $p[0] && $last.hasClass('native'))
				$last
					.find('div.img a')
						.trigger('click');
			else
				$last = null;
			
			$('div.project_images').isotope('reLayout');
			
			$p
				.data('original-size', os)
				.removeClass(os)
				.parent()
					.css('zIndex', last_z++);
			
			$i
				.data('original-img-size', $i.width() + 'x' + $i.height())
				.css({
					width: $i.width(),
					height: $i.height()
				});
			
			loadNative($p);
			$(window).trigger('show_loader', [$p]);
			
			$last = $p;
		}
	}
	
	function doReLayout($p)
	{
		$('div.project_images').isotope('reLayout');
	}
	
	function loadNative($p)
	{
		var $i = $p.find('img');
		
		var ns = $i.data('native-size').split('x');
		
		$i
			.animate({
				opacity: .2
			}, 500, 'easeOutQuint')
			.bind('load', function()
			{
				$(window).trigger('load_complete', [$p]);
				
				scrollToImage($p);
				
				$(this)
					.unbind('load')
					.animate({
						width: ns[0],
						height: ns[1],
						opacity: 1
					}, 1000, 'easeOutQuint', function()
					{
						doReLayout($p);
						$p.addClass('native');
						
						clearInterval(int_id);
						int_id = setInterval(function()
						{
							scrollToImage($p);
							clearInterval(int_id);
						}, 1000);
					});
			})
			.data('original-src', $i.attr('src'))
			.attr('src', $i.data('native-src') + rand());
	}
	
	function loadOriginal($p)
	{
		var $i = $p.find('img');
		
		
		
		$i
			.bind('load', function()
			{
				$(window).trigger('load_complete');
				
				$(this)
					.unbind('load')
					.animate({
						opacity: 1
					}, 500, 'easeOutQuint');
			})
			.attr('src', $i.data('original-src') + rand())
	}
	
	function scrollToImage($p)
	{
		$('html,body')
			.animate({
				scrollTop: $p.offset().top
			}, 1000, 'easeOutQuint');
	}
	
	function rand()
	{
		return ''//'?cachebuster=' + Math.random();
	}
});