/**
* jQuery Magnifier Plugin
* @author Dieter Orens dieter@dio5.com
*
* @option Number lensWidth - width of the lens
* @option Number lensHeight - height of the lens
* @option Boolean link - makes clicking go to the large image (default:true)
* @option Number delay - adds a delay to the appearing of the lens (default:0)
*
*/
(function($){
    $.extend($.fn,
    {
        magnify:function(options)
        {
            return this.each(function()
            {
                var magnifier =
                {
                    defaults:
                    {
                        lensWidth: 160,
                        lensHeight: 160,
                        link: true,
                        delay: 0
                    },

                    a: null,
                    $img: null,
                    $largeImage: null,
                    $lens: null,
                    $sensor: null,
                    $loader: null,
					$overlay:null,
                    timeOut: null,
                    largeWidth: 0,
                    largeHeight: 0,

                    init:function(options)
                    {
                        magnifier.options = $.extend({}, magnifier.defaults, options);
                        magnifier.a = this;
                        magnifier.$img = $('img', this);
                        magnifier.setLargeImage();
                        magnifier.setLens();
                        magnifier.setOverlay();
						magnifier.setSensor();
                        magnifier.setLoader();
                        magnifier.loadImage();
                        magnifier.addHandles();
                    },

                    setLargeImage:function()
                    {
                        magnifier.$largeImage = $(new Image());
                        magnifier.$largeImage.attr('src', magnifier.a.href).css('display', 'none');
                    },

                    setLens:function()
                    {
                        magnifier.$lens = $("<div id='dio-lens'></div>");
                        magnifier.$lens.css({
                            width: magnifier.options.lensWidth,
                            height: magnifier.options.lensHeight,
                            visibility: 'hidden',
                            overflow: 'hidden',
                            position: 'absolute',
                            left:0,
                            top:0,
							border:'4px solid #666666',
							'z-index':1001,
							'background-color':'white'
                        }).appendTo(this.a);
                    },

					setOverlay:function(){
						magnifier.$overlay=$('<div id="dio-overlay"></div>');
						magnifier.$overlay.css({
							
							border:'2px solid #00000b'
							,'background-color':'#6666ff'
							,position:'absolute'
							,opacity:'0.4'
						}).appendTo('body');
						//alert('set');
					},
					
                    setSensor:function()
                    {
                        magnifier.$sensor = $("<div id='dio-sensor' style='position:absolute;'></div>");
                        $('body').append(magnifier.$sensor);

                        if (magnifier.options.link)
                        {
                            magnifier.$sensor.click(function(){
                                window.location = magnifier.a.href
                            });
                        }
                    },

                    setLoader:function()
                    {
                        magnifier.$loader = $("<div id='dio-loader'>loading</div>").css({
                            width: magnifier.options.lensWidth,
                            height: magnifier.options.lensHeight
                            });
                        magnifier.$lens.append(magnifier.$loader);
                    },

                    loadImage:function()
                    {

                        magnifier.$largeImage.load(function(e)
                        {
                            magnifier.imgLoadCheck(magnifier.$largeImage[0], magnifier.loadCallback, magnifier.errorCallback, e);
                        });
                    },

                    imgLoadCheck:function(img, loadCallback, errorCallback)
                    {
                        if(img!=null)
                        {
                            function imgWatch()
                            {
                                if(img.complete)
                                {
                                    clearInterval(loadWatch);
                                    loadCallback();
                                }
                            }
                            var loadWatch = setInterval(imgWatch, 100);
                        }
                        else
                        {
                            errorCallback();
                        }
                    },

                    loadCallback:function()
                    {
                        magnifier.$lens.append(magnifier.$largeImage);

                        function moveWatch()
                        {
                            if(magnifier.$largeImage.width())
                            {
                                magnifier.largeWidth = magnifier.$largeImage.width();
                                magnifier.largeHeight = magnifier.$largeImage.height();
                            }
                            if (magnifier.largeWidth) {
                                magnifier.$loader.remove();
                                clearInterval(moveID);
                            }
                        }
                        var moveID = setInterval(moveWatch, 100);
                    },

                    errorCallback:function()
                    {
                        alert("large image could not be loaded");
                    },

                    addHandles:function()
                    {
                        magnifier.$sensor.css(
                        {
                            width: magnifier.$img.width() + "px",
                            height: magnifier.$img.height() + "px",
                            top: magnifier.$img.offset().top + "px",
                            left: magnifier.$img.offset().left + "px",
                            backgroundColor: "#fff",
                            opacity: "0"
                        })
                        .mousemove(function(e){
                            magnifier.handleMouseMove(e);
                        })
                        .mouseout(function(e){
                            magnifier.handleMouseOut(e);
                        });
                    },

                    handleMouseMove:function(e)
                    {
						//console.debug('TODO: move lens ('+(360.0*360/jQuery('.product-image > div > img').width())+'px'+' x '+(360.0*360/jQuery('.product-image > div > img').height())+'px'+')');
						//debugger;
						
						var getLargestConstraintOfFullSizeImage=function(){
							var w=jQuery('.product-image > div > img').width();
							var h=jQuery('.product-image > div > img').height();
							if(w>h) return w;
							else return h;
						};
						
						
						// size and position the overlay.
						var overlayWidth=(360.0*360/getLargestConstraintOfFullSizeImage());
						var overlayHeight=(360.0*360/getLargestConstraintOfFullSizeImage());
						magnifier.$overlay.css({
							top:e.pageY-magnifier.$overlay.get(0).scrollHeight/2
							,left:e.pageX-magnifier.$overlay.get(0).scrollWidth/2
							,width:overlayWidth+'px'
							,height:overlayHeight+'px'
						}).show();
						
						
						// make sure overlay doesn't go out of bounds of the image border for the product details page.
						{
							if(parseInt(magnifier.$overlay.css('left'))-magnifier.$sensor.get(0).offsetLeft<0){
								magnifier.$overlay.css({left:magnifier.$sensor.get(0).offsetLeft});
								//console.debug('out of bounds');
							}
							if(parseInt(magnifier.$overlay.css('top'))-magnifier.$sensor.get(0).offsetTop<0){
								magnifier.$overlay.css({top:magnifier.$sensor.get(0).offsetTop});
								//console.debug('out of bounds');
							}
							if(parseInt(magnifier.$overlay.css('left'))-magnifier.$sensor.get(0).offsetLeft>360-overlayWidth){
								magnifier.$overlay.css({left:magnifier.$sensor.get(0).offsetLeft+360-overlayWidth});
								//console.debug('out of bounds');
							}
							if(parseInt(magnifier.$overlay.css('top'))-magnifier.$sensor.get(0).offsetTop>360-overlayHeight){
								magnifier.$overlay.css({top:magnifier.$sensor.get(0).offsetTop+360-overlayHeight});
								//console.debug('out of bounds');
							}
							
							//console.debug('offset left= '+(parseInt(magnifier.$overlay.css('left'))-magnifier.$sensor.get(0).offsetLeft));
							
						}
						
						
						
                        magnifier.$lens.css({
                            //left: parseInt(e.pageX - (magnifier.options.lensWidth * .5)) + "px",
                            //top: parseInt(e.pageY - (magnifier.options.lensHeight * .5)) + "px"
							top:0
							,left:jQuery(this.a).width()
                        });


                        if (magnifier.options.delay)
                        {
                            if (!magnifier.timeOut) {
                                magnifier.timeOut = setTimeout(function(){
                                    magnifier.$lens.css('visibility', 'visible');
                                }, magnifier.options.delay);
                            }
                        }
                        else {
                            magnifier.$lens.css('visibility', 'visible');
                        }

                        if(magnifier.largeWidth){
                            magnifier.positionLargeImage(e);
                        }

                        magnifier.$lens.css('display', 'block');
                    },

                    positionLargeImage:function(e)
                    {
                        var scale = {};

                        scale.x = magnifier.largeWidth / magnifier.$img.width();
                        scale.y = magnifier.largeHeight / magnifier.$img.height();

                        var left = -scale.x * Math.abs((e.pageX - magnifier.$img.offset().left)) + magnifier.options.lensWidth / 2 + "px";
                        var top = -scale.y * Math.abs((e.pageY - magnifier.$img.offset().top)) + magnifier.options.lensHeight / 2 + "px";
						
						
                        magnifier.$largeImage.css(
                        {
                            position: 'absolute',
                            left: left,
                            top: top,
                            display:'block'
                        });
                    },

                    handleMouseOut: function(e)
                    {
						
						//console.debug('TODO: remove lens');
						//return;
						
						
						
                        if (magnifier.timeOut) {
                            clearTimeout(magnifier.timeOut);
                            magnifier.timeOut = null;
                        }
                        magnifier.$lens.css({
                            visibility: 'hidden',
                            display: 'none'
                        });
						magnifier.$overlay.hide();
                    }
                };

                magnifier.init.call(this,options);
            });
        }
    });
})(jQuery);































































































































































jQuery(function($) 
{
	$('#product-media > a.product-image').magnify(
	{
		lensWidth: 360 // width of the lens
		,lensHeight: 360 // height of the lens
		,link: false // clicking goes to the large image
        //,delay: 500 // time before lens is shown
	});
});









/* THIS IS THE OLD ONE THE CLIENT DIDN'T WANT IN THE END.
var isOverThumb=false;
var isOverPopup=false;
var imageRollover_tryRemove=function(){
	if(!isOverThumb&&!isOverPopup)
		jQuery('div.image-popup').remove();
}
jQuery(function(){
	jQuery.fn.imageRollover=function(o){
		
		jQuery(this).each(function(){
			jQuery(this).hover(function(event){
				isOverThumb=true;
				
				// remove any old rollovers.
				jQuery('div.image-popup').remove();
			
				var largeSrc=jQuery(this).attr('data-rollover-src');
				if(!largeSrc)
					largeSrc=jQuery(this).attr('src');
				var thumbWidth=jQuery(this).width();
				
				var popup=jQuery('<div></div>');
				popup.addClass('image-popup')
				.css({
					'background-color':'#293031'
					,'padding':'10px'
					,'position':'absolute'
					,'margin-left':(thumbWidth+12)+'px'
					,'z-index':'1001'
				})
				.hover(function(){isOverPopup=true;},function(){isOverPopup=false; setTimeout('imageRollover_tryRemove()',250);});
				var img=jQuery('<img></img>');
				img.attr('src',largeSrc);
				img.css({
					'width':'auto' // to override the css.
					,'max-width':'320px'
				});
				popup.append(img);
				jQuery(this).before(popup);
				
				// make sure it doesn't display off the screen.
				var windowWidth=jQuery(window).width();
				var imgWidth=popup.width();
				var imgRight = imgWidth+popup.offset().left;
				var cuttingOffBy = imgRight - windowWidth;
				//console.debug('windowWidth='+windowWidth+' imgWidth='+imgWidth+' imgRight='+imgRight+' cuttingOffBy='+cuttingOffBy);
				var rightPadding = 20; // to compensate for browser scrollbars.
				if (cuttingOffBy > 0) {
					var newMarginLeft = parseInt(popup.css('margin-left')) - cuttingOffBy - rightPadding;
					popup.css({ 'margin-left': newMarginLeft });
					
				}
			},function(){
				isOverThumb=false;
				
				setTimeout('imageRollover_tryRemove()',250);
			});
		});
	};
	jQuery('.image-container img').imageRollover({});
});
*/