function addBackground () {
	var background = 'citycomics/img/citycomics_background.jpg';

	// fix a IE bug (#background positioned "inside" #wrap)
	$IEFix = $('<div id="IEFix"></div>');
	$('body').prepend($IEFix);

	$backgroundOuter = $('<div id="background"></div>');
	$('body').prepend($backgroundOuter);

	var img = new Image();

	// wrap our new image in jQuery, then:
	$(img)
		// once the image has loaded, execute this code
		.load(function () {
			// set the image hidden by default    
			$(this).css('display', 'none');

			// with the holding div #background, apply:
			$backgroundOuter
				// insert our image
				.append(this);
			
			resize();
			
			// fade our image in to create a nice effect
			$(this).fadeIn(500);
		})

		// if there was an error loading the image, react accordingly
		.error(function () {
			// notify the user that the image could not be loaded
		})

	    // *finally*, set the src attribute of the new image to our image
	    .attr('src', background);
}

function resize(){
  $('#background img') 
	.width($(window).width()) 
	.height($(window).width() * .67); 

  if($('#background img').height() <= $(window).height()){	
	$('#background img')
	  .height($(window).height())
	  .width($(window).height() * 1.5);
  }

  $('#background img').center();
}

$(document).ready(function() {
	$('body').addClass('jspositive');
	//addBackground();
	$('#comics ul li a').hover(function() {
		// Stuff to do when the mouse enters the element;
		$(this).find('img').stop().animate({width: "400px", height: "420px"}, 300, 'easeOutBack')
	}, function() {
		// Stuff to do when the mouse leaves the element;
		$(this).find('img').stop().animate({width: "200px", height: "210px"}, 200, 'easeOutExpo')
	});
	$('img[@src$=png]').pngfix();	
});

//$(document).ready(function(){ resize(); });
//$(window).resize(function(){ resize(); });