Functions don't work correctly when page reloads?

[lizzmo]

I'm quite a beginner when it comes to javascript, so please bear with me. I use jquery plugins often but have just started to write my own javascript a bit.

Basically I've made a fluid and responsive site and the thumbnail sizes are calculated based on the width of the window with javascript, it also works out the top margin so that the images are centered vertically within each thumbnail. When the page first loads it works perfectly, but when you go to a different page and then go back to the first page, the thumbnail heights aren't calculated correctly so the space between rows looks doubled.

The site is http://lizbmorrison.net/design and here is the javascript:

$(document).ready(function () {

	// Thumbnail overlay
	$('.thumbnail').mouseenter(function (e) {
		$(this).children('a').children('.overlay').children('span').fadeIn(500).css('z-index', '110');
		$(this).children('a').children('img').fadeTo("normal", 0.1);
	}).mouseleave(function (e) {
		$(this).children('a').children('.overlay').children('span').fadeOut(500).css('z-index', '90');
		$(this).children('a').children('img').fadeTo('normal', 1.0);
	});

	// Responsive gallery image width
	var max600 = window.matchMedia('screen and (max-width:600px)');
	if (max600.matches) {
		var widthPercent = (((($(window).width()) * 0.78) / ($('.gallery ul').width())) * 100) + '%';
		$('.image').css('width', '').css('width', widthPercent);
	}
	var max800 = window.matchMedia('screen and (min-width: 601px) and (max-width:800px)');
	if (max800.matches) {
		var widthPercent = (((($(window).width()) * 0.65) / ($('.gallery ul').width())) * 100) + '%';
		$('.image').css('width', '').css('width', widthPercent);
	}
	var max1000 = window.matchMedia('screen and (min-width: 801px) and (max-width:1000px)');
	if (max1000.matches) {
		var widthPercent = (((($(window).width()) * 0.5) / ($('.gallery ul').width())) * 100) + '%';
		$('.image').css('width', '').css('width', widthPercent);
	}
	var min1000 = window.matchMedia('screen and (min-width:1001px)');
	if (min1000.matches) {
		var widthPercent = (((($(window).width()) * 0.5) / ($('.gallery ul').width())) * 100) + '%';
		$('.image').css('width', '').css('width', widthPercent);
	}

	// Responsive gallery image margins
	var newPadding = (((($(window).width()) * 0.11) / ($('.gallery ul').width())) * 100) + '%';
	$('.image').css('padding-left', '').css('padding-left', newPadding);
	// Responsive padding on last image so it scrolls all the way
	var endPadding = (((($(window).width()) - ($('.image:last').width())) / ($('.gallery ul').width())) * 100) + '%';
	$('.image:last').css('padding-right', endPadding);
	// Right panel width
	var rightWidth = ($('#container').width() - $('.image').width()) - ($('#container').width() * 0.025) + 'px';
	$('.right').css('width', rightWidth);

	// Arrow key navigation
	$(document.documentElement).keyup(function (event) {
		// handle cursor keys
		if (event.keyCode == 37) {
			// go left
			$('.gallery').trigger('prev');
		} else if (event.keyCode == 39) {
			// go right
			$('.gallery').trigger('next');
		} else if (event.keyCode == 38) {
			//go to top
			$('body,html').animate({scrollTop: 0}, 400);
		} else if (event.keyCode == 40) {
			//go to bottom
			$('body,html').animate({scrollTop: $('html').height()}, 800);
		}
	});
});


$(window).resize(function () {
	// Keep image aligned when resizing window
	$('.gallery').scrollTo('.selected');
	
	// Media queries & responsive gallery image sizes
	var max600 = window.matchMedia('screen and (max-width:600px)');
	if (max600.matches) {
		var widthPercent = (((($(window).width()) * 0.78) / ($('.gallery ul').width())) * 100) + '%';
		$('.image').css('width', '').css('width', widthPercent);
	}
	var max800 = window.matchMedia('screen and (min-width: 601px) and (max-width:800px)');
	if (max800.matches) {
		var widthPercent = (((($(window).width()) * 0.65) / ($('.gallery ul').width())) * 100) + '%';
		$('.image').css('width', '').css('width', widthPercent);
	}
	var max1000 = window.matchMedia('screen and (min-width: 801px) and (max-width:1000px)');
	if (max1000.matches) {
		var widthPercent = (((($(window).width()) * 0.5) / ($('.gallery ul').width())) * 100) + '%';
		$('.image').css('width', '').css('width', widthPercent);
	}
	var min1000 = window.matchMedia('screen and (min-width:1001px)');
	if (min1000.matches) {
		var widthPercent = (((($(window).width()) * 0.5) / ($('.gallery ul').width())) * 100) + '%';
		$('.image').css('width', '').css('width', widthPercent);
	}
	
	// Reset thumbnail height
    $('.thumbnail').each(function() {
        $(this).height($(this).find('img').height());
    });
	// Set gallery image margins
	var newPadding = ($(window).width()) * 0.11;
	$('.image').css('padding-left', '').css('padding-left', newPadding);
	// Custom padding on last image so it scrolls all the way
	var endPadding = ($(window).width()) - ($('.image:last').width());
	$('.image:last').css('padding-right', '').css('padding-right', endPadding); 
	// Reset right panel width
	var rightWidth = ($('#container').width() - $('.image').width()) - ($('#container').width() * 0.025) + 'px';
	$('.right').css('width', rightWidth);
});

Any advice would be very much appreciated!