// JavaScript Document
jQuery.fn.simple_modal_img = function(options) {
	var defaults = {
		padding:0,
		bg_opacity:0.7
	};
	
	var opts = jQuery.extend(defaults, options);
	
	//user may have entered padding as string with px, convert it to an integer
	opts.padding = parseInt(opts.padding);
	
	return this.each(function() {
		//store ref to img and body as they will be reused throughout the script
		var img = $(this);
		var body_ob = $('body');
		
		//get browser dims
		var browser_dims = {
			windowWidth:$(window).width(),
			windowHeight:$(window).height(),
			bodyHeight:$('body').outerHeight(),
			bodyWidth:$('body').outerWidth(),
			scrollX:$(window).scrollLeft(),
			scrollY:$(window).scrollTop()
		}
		
		//create input blocker
		var width = browser_dims.bodyWidth > browser_dims.windowWidth ? browser_dims.bodyWidth : browser_dims.windowWidth;
		var height = browser_dims.bodyHeight > browser_dims.windowHeight ? browser_dims.bodyHeight : browser_dims.windowHeight;
		
		var input_blocker = $('<div></div>').css({
			'position':'absolute',
			'top':'0',
			'left':'0',
			'background-color':'#000',
			'z-index':1000,
			'opacity':opts.bg_opacity,
			'width':width + 'px',
			'height':height + 'px'
		}).appendTo(body_ob);
		
		//create initial iframe shim at 400 x 400
		//use frameborder="0" to remove iframe borders on ie
		var shim = $('<iframe frameborder="0"></iframe>').css({
			'position':'absolute',
			'border':'none',
			'border-width':'0px',
			'width':'400px',
			'height':'400px',
			'top':parseInt((browser_dims.windowHeight - 400)/2) + browser_dims.scrollY + 'px',
			'left':parseInt((browser_dims.windowWidth - 400)/2) + browser_dims.scrollX + 'px',
			'z-index':2000,
			'background-color':'#FFF'
		}).appendTo(body_ob);
		
		//show loader
		var loader = $('<div class="loader"></div>').css({
			'position':'absolute',
			'top':parseInt((browser_dims.windowHeight - 24)/2) + browser_dims.scrollY + 'px',
			'left':parseInt((browser_dims.windowWidth - 24)/2) + browser_dims.scrollX + 'px',
			'z-index':3000,
		}).appendTo(body_ob);
		
		//load our image
		img.hide().appendTo(body_ob);
		
		//jquery load() cannot be trusted for images as it will not fire on webkit when retrieved from the cash
		//get dom element to check if cashed
		var img_node = img.get(0);
		//if img is cashed execute loaded fn 
		if (img_node.complete || img_node.readyState === 4 ) {
			img_loaded();
		}
		//else register event
		else {
			img.load(img_loaded);
		}
		
		function img_loaded() {
			
			//calculate proportions
			
			//allow 40px margin at top of shim for the close btn
			var margin_top = 25;
			
			//never enlarge the image
			var max_img_height = browser_dims.windowHeight - (opts.padding * 2) - margin_top;
			var img_height = max_img_height > img.height() ? img.height() : max_img_height;
			var scale = img_height/img.height();
			var img_width = Math.round(img.width() * scale);
			
			var shim_height = img_height + (opts.padding * 2) + margin_top;
			var shim_width = img_width + (opts.padding * 2);
			var shim_top = Math.round((browser_dims.windowHeight - shim_height)/2) + browser_dims.scrollY;
			var shim_left = Math.round((browser_dims.windowWidth - shim_width)/2) + browser_dims.scrollX;
			
			var img_top = shim_top + margin_top + opts.padding;
			var img_left = shim_left + opts.padding;
			
			
			//animate shim
			shim.animate({
				'top':shim_top,
				'height':shim_height + 'px'
			}, 'slow', function() {
				shim.animate({
					'left':shim_left,
					'width':shim_width + 'px'
				}, 'slow', function() {
					// size position and show image
					img.css({
						'width':img_width + 'px',
						'height':img_height + 'px',
						'position':'absolute',
						'top':img_top,
						'left':img_left,
						'z-index':4000
					}).fadeIn('slow');
					
					//build close btn
					$('<div>CLOSE X</div>').css({
						'position':'absolute',
						'z-index':5000,
						'text-align':'right',
						'width':img_width + 'px',
						'height':'20px',
						'top':shim_top + opts.padding,
						'left':img_left,
						'cursor':'pointer',
						'font-size':'10px'
					}).appendTo(body_ob).click(function() {
						loader.remove();
						img.remove();
						$(this).remove();
						shim.remove();
						input_blocker.remove();
					});
				})
			});
		}		
	});
}