$(document).ready(function(){
setTimeout(function(){
	var loupe = {
		'width': 200, 
		'height': 151
		},
		viewport = {};
		
	$('img.jLoupe').each(function(i){
		$(this).attr('id', 'img'+i);
	});
	
	$('<div id="thejLoupe"/>')
		.addClass('thejLoupe')
		.css({
			position: 'absolute',
			width: loupe.width+'px',
			height: loupe.height+'px',
			zIndex: 500
		})
		.hide()
		.appendTo('body')
		.bind('mouseenter', function(){
			if(thumbtimer) clearTimeout(thumbtimer);
		})
		.bind('mouseleave', function(e){
			$('img:visible', this).hide(), 
				$(this).hide();
		});
	
	if($.browser.msie){
		$('#thejLoupe').css('background-color', '#FFF');
	}else{
		$('#thejLoupe').css('background-color', 'rgba(0,0,0,0.25)');
	}
				
	$('<div id="zoomWrapper" />').css({
		width: (loupe.width - 5)+'px',
		height: (loupe.height - 5)+'px',
		overflow: 'hidden',
		margin: '5px 0px 0px 5px'
	}).appendTo('#thejLoupe');

	$('.jLoupe').each(function(i){
		var offset = $(this).offset(), 
			dims = {
				width: $(this).width(),
				height: $(this).height()
			},
			src = $(this).attr('src'),
			lastUnderscore = parseInt((src.lastIndexOf('_')), 0) + 1, 
			s = src.substr(0, lastUnderscore) + 'lg.jpg', 
			img = $('<img />')
				.bind('load', function(){
					var w = this.width || $(this).css('width'),
						h = this.height || $(this).css('height');
					$(this).data('size',{
						'width': parseInt(w, 10), 
						'height': parseInt(h, 10)
					});
				})
				.attr('src', s)
				.addClass('img_lg')
				.hide()
				.appendTo('#zoomWrapper');
		$(this).data('zoom', img);
	})
	.bind('mouseenter', function(e){	
		var container = $('#thejLoupe'), 
			wrapper = $('#zoomWrapper'), 
			thumb = $(this),
			o = thumb.offset(),
			img = thumb.data('zoom'),
			coords = {
				left: parseInt(o.left + thumb.width(), 10),
				top: parseInt(o.top, 10)
			},
			dims = {
				'thumb': {
					'height': 0, 
					'width': 0
				},
				'lg': {
					'height': 0,
					'width': 0
				}
			},
			max = {},
			css = {
				'position': 'absolute'
			},
			scrollOffset = {};
		
		scrollOffset['top'] = $('*').scrollTop();
		scrollOffset['left'] = $('*').scrollLeft();
		viewport['height'] = $(document.body).height();
		viewport['width'] = $(document.body).width();
		
		dims.thumb.height = thumb.height();
		dims.thumb.width = thumb.width();
	    dims.lg.height = img.data('size').height||parseInt(wrapper[0].style.height);
        dims.lg.width = img.data('size').width||parseInt(wrapper[0].style.width);
		
		
		max['height'] = ((parseInt(coords.top, 10) - scrollOffset.top) + dims.lg.height);
		max['width'] = ((parseInt(coords.left, 10) - scrollOffset.left) + dims.lg.width);
		
		if(scrollOffset.left < coords.left){
			css['left'] = (max['width'] < viewport.width) ? (coords.left - 20)+'px':((viewport.width - scrollOffset.left) - (dims.lg.width + 20))+'px';
		}else{
			css['left'] = (Math.abs(coords.left - scrollOffset.left) + coords.left + 20)+'px';
		}
		
		if(scrollOffset.top < coords.top){
			css['top'] = (max['height'] < viewport.height) ? (coords.top + 20)+'px':((viewport.height - dims.lg.height - 20) + scrollOffset.top)+'px';
		}else{
			css['top'] = (Math.abs(coords.top - scrollOffset.top) + coords.top + 20)+'px';
		}
		css['width'] = (dims.lg.width + 10)+'px';
		css['height'] = (dims.lg.height + 10)+'px';
		
		wrapper.css({
			width: css.width,
			height: css.height
		});
		img.show();
		container.css(css).show();
	})
	.bind('mouseleave', function(e){
		var img = $(this).data('zoom'), 
			container = $('#thejLoupe');

		thumbtimer = setTimeout(function(){
			img.hide();
			container.hide();
		}, 10);
		});
	},500);
});