$.fn.zoomer = function(container) {
	if (!container) container = "body";
	var zoomEl;
	var zoomImg;
	var closeText = 'klik for at lukke billedet';
	var image = new Image();
	var startPos = {};
	var endPos = {};
	var preloading = false;
	var zooming = false;
	var fluffX = 0;
	var fluffY = 0;

	function zoomIn() {
		//break out functions here
	}
	function zoomOut() {
		//break out functions here
	}
	function preload(el) {
		image = new Image();
		preloading = true;
		image.onload=function(){
			preloading = false;
		}
		image.src = el.href;
	}
	
	function init() {
		var zoomEl = $("#zoomEl");
		var zoomImg = $("#zoomElImg");
		var zoomClose = $("#zoomElClose");
		//possible to filter even more on .png, .jpg, .gif?
		$(container + ' a[@rel="zoom"]').each(function(){
			$(this).mouseover(function(){
				preload(this);
			});

			$(this).click(function(){
				if(preloading==true) {
					//alert('hold on... preloading!');
					//return false;
				} else {
					var thumb = null;
					thumb = $(this).children("img:first");
					if (thumb.length==0) thumb = $(this); //not a thumb, but an href!
					startPos = $(thumb).offset();
					aspectRatio = (image.width/image.height);
					startPos.width = thumb.width();
					startPos.height = thumb.height();
					if (aspectRatio > 1) {
						startPos.height = parseInt(startPos.height / aspectRatio)
					} else {
						startPos.width = parseInt(startPos.width / aspectRatio)
					}
					startPos.opacity = 0;
					//fluff: calculate extra padding/border on the zoomEl
					fluffX = (parseInt(zoomEl.css("paddingLeft")) || 0) + (parseInt(zoomEl.css("paddingRight")) || 0) + (parseInt(zoomEl.css("borderLeftWidth")) || 0) + (parseInt(zoomEl.css("borderRightWidth")) || 0);
					fluffY = (parseInt(zoomEl.css("paddingTop")) || 0) + (parseInt(zoomEl.css("paddingBottom")) || 0) + (parseInt(zoomEl.css("borderTopWidth")) || 0) + (parseInt(zoomEl.css("borderBottomWidth")) || 0);
					
					
					var leftPos = ($(window).width() - image.width - fluffX) / 2 + $(window).scrollLeft();
					var topPos = ($(window).height() - image.height - fluffY) / 2 + $(window).scrollTop();

					if(topPos < 0) topPos = 0;
					if(leftPos < 0) leftPos = 0;

					endPos = {width: image.width, height: image.height, top: topPos, left: leftPos, opacity:1};
					// console.log(endPos)
					
					if(zooming) return false;
					$(zoomClose).hide();
					zoomImg.attr("src",image.src);
					zoomEl.css(startPos);
					zooming=true;
					zoomEl.animate(endPos, 400, "easeout", function(){
						zooming=false;
						$(zoomClose).show();
						
					});
				}
				//prevent normal behaviour
				return false;
			});
		});
		
		zoomEl.click(function(){
			zooming = true;
			$(zoomClose).hide(); 
			//$(zoomClose).hide(10); //delay for safari...
			$(this).animate(startPos, 400, "easeout", function(){
				zooming = false; 
				$(this).hide();
			});
			return false;
		});
		/*
		zoomEl.mouseover(function(){
			if (zooming) return;
		});
		*/
	} // end init
	
	//Create zoom container elements
	$("body").append('<div id="zoomEl" title="' + closeText + '"><div id="zoomElClose">X</div><img id="zoomElImg" src="#" width="100%" height="100%" /></div>');
	
	//run initialisation thingy
	init();	
}



//initialize on document.ready...
$(function(){
	//either narrow it down a bit: $().zoomer('#content');
	//It defaults to "body":
	$().zoomer();
});