//Global vars
var canvasHeight = '',
	screenHeight = null,
	total = null;

//Image load
function imageLoad (folder,frame) {
	var img = new Image();
	$(img).load(function() {
		keyframe = parseInt(frame,'10');
		$('<span>').addClass('frame' + frame).html('<img src="i/i/' + folder + '/' + frame + '.jpg">').appendTo('#canvas');
		$('.frame' + frame).attr({rel: $('.frame' + frame + ' img').width()});
		$('.frame' + frame + ' img').css({height: '100%'});
		$('.frame' + frame).width($('.frame' + frame + ' img').width() + 'px');
		total += $('.frame' + frame).width() - 1;

		$('#canvas').width(total);

		if (keyframe < 25) {
			imageLoad(folder,keyframe + 1);
		} else if (keyframe = 25) {
			$('#load').fadeTo(0,250).remove();
		}

	}).error(function () {
		alert('fail');
	}).attr('src', 'i/i/' + folder + '/' + frame + '.jpg');
}

//DOM ready
jQuery(document).ready(function() {

	//REL Blank
	$('a[rel="blank"]').live('click',function(){
		this.target = "_blank";
	});
	//Screen Calculator
	if (screen.height <= 800) {
		screenHeight = 800;
	} else if (screen.height > 800) {
		screenHeight = 1080;
	}

	$(window).bind('resize', resizeWindow);
	function resizeWindow(e) {
		canvasHeight = $(window).height() - $('#header').height();
		$('#content').css({height: canvasHeight + 'px'});
		$('#about').css({height: canvasHeight + 'px'});
		fitSize();
	}
	
	$('#about').click(function(){
		$(this).animate({
				opacity: 0
			}, 1000,function(){
				$(this).remove();
			});
	});
	
	function fitSize() {
		var newTotal = 0;

		$('#canvas span').each(function() {
			var imageWidth = $(this).attr('rel')
				newWidth = null;
			newWidth = (imageWidth * canvasHeight)/screenHeight;
			newWidth = Math.round(newWidth);
			$(this).css({width: newWidth});
			
			newTotal += newWidth - 1;

		});
		
		$('#canvas').css({width: newTotal })
	}

	resizeWindow();
	
	//Create Canvas
	$('#load').css({opacity: .75});
	$('#content').html('<div id="canvas"></div>').css({height: canvasHeight + 'px'});
	$('#about').css({height: canvasHeight + 'px'});

	imageLoad(screenHeight,'1');
	
	//If scroll
		$(window).bind('scroll', function(){
			$('#about').animate({
				opacity: 0
			}, 1000,function(){
				$(this).remove();
			})
		});


});