window.onload = function() {
	var classic = $("#classic");
	if(classic.width() != null) {
		classic.css('margin-left', (650 - classic.width())/2 + 'px');
		classic.css('margin-right', classic.css('left'));
	}
	var funky = $("#funky");
	
	if(funky.width() != null) {
		funky.css('left', (650 - funky.width())/2 + 'px');
	}
	$("#cover").css('height', Math.max(classic.height(), funky.height()));
		
	if(classic.width() != null && funky.width() != null) {
		var diff = classic.height() - funky.height();
		if (diff != 0) {
			if(diff > 0) {
				funky.css('margin-top', diff/2 + 'px');
				funky.css('margin-bottom', diff/2 + 'px');
			} else {
				classic.css('margin-top', -diff/2 + 'px');
				classic.css('margin-bottom', -diff/2 + 'px');
			}
		}
		var status = "flipping";
		var duration = 2000;
		var timeout;
		$("#funky, #classic").click(function() {
			funky.stop();
			classic.stop();
			if(status == "flipping") {
				window.clearTimeout(timeout);
				status = $(this).attr('id');
			}
			switch(status) {
				case 'classic':
					status = 'funky';
					funky.fadeIn('fast');
					classic.fadeOut('fast');
				break;
				case 'funky':
					status = 'classic';
					classic.fadeIn('fast');
					funky.fadeOut('fast');
				break;
			}
		});
		var toFunky = function() {
			if(status == "flipping") {
				funky.fadeIn(duration, function() {
					timeout = window.setTimeout(toClassic, duration);
				});
				classic.fadeOut(duration);
			}
		};
		var toClassic = function() {
			if(status == "flipping") {
				funky.fadeOut(duration, function() {
					timeout = window.setTimeout(toFunky, duration);
				});
				classic.fadeIn();
			}
		};
		toFunky();
	}
};