/**
 * loupe - an image magnifier for jQuery
 * http://github.com/jdbartlett/loupe
 */
(function($) {
	$.fn.loupe = function(options) {
		if (!this.length) return this;
		options = $.extend({loupe:'loupe', width:200, height:150, border:0}, options || {});

		this.each(function() {
			var isInside = false;
			var $this = $( this );
			var loupe = null;
			var loupeover = null;
			var big = null;
			var small = null;
			var time = null;
			
			var concatObject = function(obj) {
			  str='';
			  for(prop in obj)
			  {
				str+=prop + " value :"+ obj[prop]+"\n";
			  }
			  return(str);
			}
			
			var hideloupe = function() {
				loupe.stop().clearQueue().animate( { opacity: 0.0, left: "600px", top: "500px" }, 250 );
				loupeover.stop().clearQueue().animate( { opacity: 0.0, left: "600px", top: "500px" }, 250 );
			}

			var moveloupe = function(e) {
				var os = small.offset();
				var sW = small.width();
				var sH = small.height();
				var oW = options.width / 2;
				var oH = options.height / 2;
				var marginePerFrecce = 50;
				if (e.pageX > sW + os.left + 10 || e.pageX < os.left - 10 ||
					e.pageY > sH + os.top - marginePerFrecce || e.pageY < os.top - 10) return hideloupe();
				if( time ) { clearTimeout( time ); time = null; isInside = true; }
				loupe.css({left:e.pageX - oW, top:e.pageY - oH});
				if( isInside ) {
					loupe.stop().clearQueue().animate( { opacity: 1.0 }, 250 );
				} else {
					loupe.stop().clearQueue().animate( { opacity: 0.0 }, 250 );
				}
				loupeover.css({left:e.pageX - oW, top:e.pageY - oH});
				if( isInside ) {
					loupeover.stop().clearQueue().animate( { opacity: 1.0 }, 250 );
				} else {
					loupeover.stop().clearQueue().animate( { opacity: 0.0 }, 250 );
				}
				big.css({
					left:-(((e.pageX - os.left) / sW) * big.width() - oW)|0,
					top:-(((e.pageY - os.top) / sH) * big.height() - oH)|0
				});

			};

			$this.mouseenter(function(e) {
				isInside = true;
				if (!small) small = $this.is('img') ? $this : $this.find('img:first');
				
				loupe = (loupe || (loupe = $('<div></div>')
					.addClass(options.loupe)
					.css({
						width:options.width, height:options.height,
						position:'absolute', overflow:'hidden',
						cursor: 'url( ' + pagePath + 'img/loupe/blank.cur ),none'
					})
					.append(
						big = $('<img id="loupebigimg" src="' + $this.attr($this.is('img') ? 'src' : 'href') + '" />').css({position:'absolute'})
					)
					
					/*.append(
						'<img src="' + pagePath + 'img/c-tl.png" class="round-tl"/>'+
						'<img src="' + pagePath + 'img/c-tr.png" class="round-tr"/>'+
						'<img src="' + pagePath + 'img/c-bl.png" class="round-bl"/>'+
						'<img src="' + pagePath + 'img/c-br.png" class="round-br"/>'
					)*/

					.mousemove(moveloupe).appendTo('body')
				)).css( { opacity: 0.0 } );
				
				loupeover = (loupeover || (loupeover = $('<div></div>')
					.addClass("loupeover")
					.append(
						'<img src="' + pagePath + 'img/c-rect.png" class="round-rect rounded"/>'
					)
					.mousemove(moveloupe).appendTo('body')
				)).css( { opacity: 0.0 } );
				
				moveloupe(e);
			}).mouseout(function() { isInside = false; time = setTimeout(hideloupe, 10)});
			
		});
	

		return this;
	}
})(jQuery);