// JavaScript Document
(function($){
$.Zoomr = function(t, options) {
	var defaults = {
		offsetX:		20,
		offsetY:		20,
		arrowWidth:		20,
		arrowHeight:	20,
		ldrImage:		'/sites/design/i/ldr.gif',
		arrowImage:		'/sites/design/i/arrow.gif'
	};
	var options = $.extend(defaults, options);
	var zoom = {
		set2null:	function(){
			$('#jZoomr').css({
				backgroundImage:	'url(' + options.arrowImage + ')',
				backgroundRepeat:	'no-repeat'
			});
			$('#jZoomr div').css({
				backgroundImage:	'url(' + options.ldrImage + ')',
				backgroundPosition:	'center center',
				backgroundRepeat:	'no-repeat',
				width:				'100px',
				height:				'100px'
			});			
		},
		pos:	function(posx, posy){
			if(posx < $('#jZoomr').width()){
				$('#jZoomr').css({
					left:				posx + options.offsetX,
					paddingLeft:		options.arrowWidth + 'px',
					paddingRight:		'0',
					backgroundPosition:	'left center'
				});
			}else{
				$('#jZoomr').css({
					left: 				posx - options.offsetX - $('#jZoomr').width(),
					paddingLeft:		'0',
					paddingRight:		options.arrowWidth + 'px',
					backgroundPosition:	'right center'
				});
			}
			
			$('#jZoomr').css({
				top:	posy - $('#jZoomr').height() / 2
			});
			
		},
		create: function(){
			z = this;
			$(t)
				.css('position', 'relative')
				.hover(
					function(e){
						z.set2null();
						$('#jZoomr').show();
						var imgSrc = $(t).attr('href');
						var img = new Image;
						img.src = imgSrc;
						
						if(img.complete){
							$('#jZoomr div')
								.css({
									width:				img.width,
									height:				img.height,
									backgroundImage:	'url('+img.src+')'
								});
						} else {
							console.log('Loading...');
							img.onload = function(){
								console.log('Loaded');
								$('#jZoomr div')
									.css({
										width:				img.width,
										height:				img.height,
										backgroundImage:	'url('+img.src+')'
									});
								}
								z.pos(e.pageX, e.pageY);
							//img.onload = null;
							//img = null;
						}						
					},
					function(e){
						$('#jZoomr').hide();
					}
				)
				.mousemove(
					function(e){
						z.pos(e.pageX, e.pageY);
					}
				);
		}
	};
	zoom.set2null();
	zoom.create();
}

$.fn.jZoomr = function(options) {
	$('<div></div>')
		.attr('id', 'jZoomr')
		.css({
			position:	'absolute',
			zIndex:		'9000'
		})
		.hide()
		.appendTo('body');
	$('<div></div>')
		.appendTo('#jZoomr');
	return this.each(function(){
		$.Zoomr(this, options);
	});
}
})(jQuery);