var image_fit_box = function (img_width, img_height, box_width, box_height) { //Generate new image dimensions
    var img_layout = ( img_height > img_width ? 'portrait' : 'landscape');
    var img_ratio = img_width / img_height;
    var box_layout = ( box_height > box_width ? 'portrait' : 'landscape');
    var box_ratio = box_width / box_height;
    var multiplier;
    // get the multiplier       
    switch(img_layout) {
        case 'landscape':
        if (box_layout == 'landscape') {
            if (box_ratio > img_ratio) {
                multiplier = box_height / img_height;                            
            } else {
                multiplier = box_width / img_width;
            };
        } else if(box_layout == 'portrait') {
            multiplier = box_width / img_width;
        };
        break;
    case 'portrait':
        if (box_layout == 'portrait') {
            if (box_ratio > img_ratio) {
                multiplier = box_height / img_height;                            
            } else {
                multiplier = box_width / img_width;
            };
        } else if (box_layout == 'landscape') {
            multiplier = box_height / img_height;
        };
    }
    //return the new image dimensions
    return {
        'width': Math.round(img_width * multiplier), 
        'height': Math.round(img_height * multiplier)   
    };
};

var resize_interface = function() {
	// fit
	if ($(window).width() < 1020 || $(window).height() < 740) {
		var dimensions = image_fit_box(1020, 740, $(window).width(), $(window).height());
		$('#game').attr({
			'width': dimensions.width,
			'height': dimensions.height
		});
		$('.credits').css({
			'width': dimensions.width
		});
	} else {
		$('#game').attr({
			'width': 1020,
			'height': 740
		});
		$('.credits').css({
			'width': 1020
		});
	};
	 // center
	var margin_top = 0;
	if (($(window).height() - $('#game').attr('height')) > 0) {
		margin_top = (($(window).height() - $('#game').attr('height')) / 2);
	};
	var margin_left = 0;
	if ((($(window).width() - $('#game').attr('width')) / 2)>0) {
		margin_left = (($(window).width() - $('#game').attr('width')) / 2)
	};
	$('#game').css({
		'margin-top':  margin_top + 'px',
		'margin-left': margin_left + 'px'
	});			
}