$(document).ready(function(){

	bgSize();

	$('.pageScroll').click(function() {
		
		var scrollToId = $(this).attr("rel"),
			scrollToPosition = $('#' + scrollToId).position();
		
		$('.pageSection.displayed').removeClass('displayed');
		$('#' + scrollToId).addClass('displayed');
		
		$('#viewport').animate({ left: - scrollToPosition.left, top: - scrollToPosition.top });  
		
		return false;
	})
		
	$(window).bind("resize", function() {
		bgSize();
		
		var alignTo = $('.pageSection.displayed').position();
		$('#viewport').css({ left: - alignTo.left, top: - alignTo.top });
		
	});
	
	$('body').on('click', '#projectThumb a', function() {
		
		var this_el = $(this);
		
		if( this_el.is('.active') ) {
			return false;
		} else {
						
			var el_nr = this_el.parent().index();

			$('#projectThumb a.active').removeClass('active');
			this_el.addClass('active')

			var to_show = $('#projectPreview img:eq(' + el_nr + ')');
			var current_el = $('#projectPreview img.active');

			to_show.addClass('next');
			current_el.fadeOut(400, function() {
				current_el.removeClass('active').show();
				to_show.removeClass().addClass('active');
			})
			
			return false;
		}
		
	})
	
	function bgSize() {
	
		// Set bg size
		var ratio = 1024 / 1280;
			
		// Get browser window size
		var browserwidth = $(window).width();
		var browserheight = $(window).height();
		
		$('body, .pageSection, .bgImg, .content').width(browserwidth).height(browserheight);
		$('#viewport').width(browserwidth * 2).height(browserheight * 2);
		
		// Scale the image
		if ((browserheight / browserwidth) > ratio) {
		
		    $('.bgImg img').height(browserheight);
		    $('.bgImg img').width(browserheight / ratio);
		    
		} else {
		
		    $('.bgImg img').width(browserwidth);
		    $('.bgImg img').height(browserwidth * ratio);
		    
		}
		
		// Center the image
		$('.bgImg img').css('left', (browserwidth - $('.bgImg img').width()) / 2);
		$('.bgImg img').css('top', (browserheight - $('.bgImg img').height()) / 2);
	
	
		// Center arrows
		$('.pageScroll.up, .pageScroll.down').css('left', (browserwidth - 176) / 2);
		$('.pageScroll.left, .pageScroll.right').css('top', (browserheight - 176) / 2 );
	};
	
	$('#projectPreview, #projectThumb').css({ 'visibility': 'hidden' })

});

$(window).load(function() {

})

var preview_img = $('#projectPreview img');
var preview_img_nr = preview_img.size();
var loaded_img = 0;

preview_img.load(function() {
	loaded_img++;
	
	if( loaded_img == preview_img_nr) {
		$('#projectPreview, #projectThumb').css({ 'visibility': 'visible' })
		$('#portf_loading').hide();
	}
})