var ScalingImage = {
	
	calculate_resize_ratios: function(image) {
		var window_height = $(window).height();
		var window_width = $(window).width();

		var available_width = window_width-20; 
		var layout_height = 90 + 90; 
		var available_height = window_height-layout_height;
		
		if (available_height <  image.data('original-height')) {
			var height_ratio = available_height / image.data('original-height')
		} else {
			var height_ratio = 1;
		}
		
		if (available_width < image.data('original-width')) {
			var width_ratio = available_width / image.data('original-width')
		} else {
			var width_ratio = 1;
		}
		
		if (width_ratio == 1 && height_ratio == 1) {
			var safe = true
		} else {
			var safe = false
		}
		
		return {height: height_ratio, 
						width: width_ratio, 
						safe: safe, 
						available_width: available_width, 
						available_height: available_height}
	},
	
	resize: function(image,ratio) {
		if (ratio.width > ratio.height) {
			var working_ratio = ratio.height
		} else {
			var working_ratio = ratio.width
		}
		
		$loading = image.siblings('div.loading')
		$parent = image.parent()
		var target_width = working_ratio*image.data('original-width')
		var target_height = working_ratio*image.data('original-height')
		
		$parent.width(target_width)
		$loading.width(target_width)
		$loading.height(target_height)
		image.width(target_width)
		image.height(target_height)
	},
	
	recalculate_ratios: function(image) {
		var new_ratio = ScalingImage.calculate_resize_ratios(image)
		ScalingImage.resize(image,new_ratio);
	},
	
	setup: function(element) {
		element.data('original-width',element.attr('width'))
		element.data('original-height',element.attr('height'))
		
		ScalingImage.recalculate_ratios(element)
		
		$('body').bind('onorientationchange',function() {
			ScalingImage.recalculate_ratios(element)
		})
		
		$(window).resize(function() { 
			ScalingImage.recalculate_ratios(element)
		});
	}
	
}