/*
				must set
				
					panSubject
					panMask
				
				prior to using these functions
			*/

			var thumbDragOk;
			var thumb;
			var thumbChannel;
			var thumbChannelWidth;
			var thumbChannelHeight;
			var panSubject;
			var panMask;
			var thumbStartX;
			var thumbStartY;
			var clickStartX;
			var clickStartY;
			var panSubjectWidth;
			var panSubjectHeight;
			var panMaskWidth;
			var panMaskHeight;
			var lastClientX;
			var lastClientY;

			var panZ = 500;
			var rollingTimeout = null;
			var clickDownPt = null;
			var testForSpotClick = false;

			function findPos( obj )
			{
				var curleft = 0;
				var curtop = 0;
			
				if ( obj.offsetParent )
				{
					do
					{
						curleft += obj.offsetLeft;
						curtop += obj.offsetTop;
					}
					while ( obj = obj.offsetParent );
				}
				
				return { x : curleft, y : curtop };
			}

			function panMove( e )
			{
				if ( !e )
				{
					e = window.event;
				}
				if ( thumbDragOk )
				{
					panDownCenterThumb( e.clientX, e.clientY );
					
					if ( document.getElementById( "prodZoomClose" ) )
					{
						if ( document.getElementById( "prodZoomClose" ).style.display != "none" )
						{
							document.getElementById( "prodZoomClose" ).style.display = "none";
						}
					}
					
					return false;
				}
			}
			
			function panDownCenterThumb( clientX, clientY )
			{
//					debugDiv.innerHTML = clientX + ", " + clientY;
					clientX = Math.ceil( clientX );
					var newThumbX = thumbStartX - clickStartX + clientX;
					newThumbX = Math.max( 0, newThumbX );
					newThumbX = Math.min( thumbChannel.offsetWidth - thumb.offsetWidth, newThumbX );
					var fracX = newThumbX == 0 ? 0 : newThumbX / ( thumbChannel.offsetWidth - thumb.offsetWidth );
					
					var newThumbY = thumbStartY - clickStartY + clientY;
					newThumbY = Math.max( 0, newThumbY );
					newThumbY = Math.min( thumbChannel.offsetHeight - thumb.offsetHeight, newThumbY );
					var fracY = newThumbY == 0 ? 0 : newThumbY / ( thumbChannel.offsetHeight - thumb.offsetHeight );
					
					thumb.style.left = newThumbX + "px";
					thumb.style.top  = newThumbY + "px";
					
					var subjectShiftX = ( panSubjectWidth - panMaskWidth ) * fracX;
					var subjectShiftY = ( panSubjectHeight - panMaskHeight ) * fracY;

					var newTop = "-" + Math.ceil( subjectShiftY ) + "px";
					var newLeft = "-" + Math.ceil( subjectShiftX ) + "px";
					
					panSubject.style.top = newTop;
					panSubject.style.left = newLeft;
			}


			function rollingPan( delay )
			{
				var thumbWidth = parseInt( thumb.style.width );
				var thumbHeight = parseInt( thumb.style.height );
				
				if ( rollingType == "clickexactclass" )
				{
					var channelX = clickStartX - ( ( findPos( thumbChannel ) ).x + 10 ) - thumbChannelWidth / 8;
					var channelY = clickStartY - ( ( findPos( thumbChannel ) ).y + 10 ) - thumbChannelHeight / 8;					
					
					var newThumbX = Math.max( 0, channelX );
					newThumbX = Math.min( thumbChannel.offsetWidth - thumb.offsetWidth, newThumbX );
					var fracX = newThumbX == 0 ? 0 : newThumbX / ( thumbChannel.offsetWidth - thumb.offsetWidth );
					
					var newThumbY = Math.max( 0, channelY );
					newThumbY = Math.min( thumbChannel.offsetHeight - thumb.offsetHeight, newThumbY );
					var fracY = newThumbY == 0 ? 0 : newThumbY / ( thumbChannel.offsetHeight - thumb.offsetHeight );
					
					thumb.style.left = newThumbX + "px";
					thumb.style.top  = newThumbY + "px";
					
					var subjectShiftX = ( panSubjectWidth - panMaskWidth ) * fracX;
					var subjectShiftY = ( panSubjectHeight - panMaskHeight ) * fracY;

					var newTop = "-" + Math.ceil( subjectShiftY ) + "px";
					var newLeft = "-" + Math.ceil( subjectShiftX ) + "px";
					
					panSubject.style.top = newTop;
					panSubject.style.left = newLeft;
					
					thumbStartX = parseInt( thumb.style.left + 0 );
					thumbStartY = parseInt( thumb.style.top + 0 );
					thumbDragOk = true;
					document.onmousemove = panMove;
				}
				else if ( rollingType == "clickjumpclass" )
				{
					var channelX = clickStartX - ( ( findPos( thumbChannel ) ).x + 20 );
					var channelY = clickStartY - ( ( findPos( thumbChannel ) ).y + 20 );
					var thumbX = parseInt( thumb.style.left );
					var thumbY = parseInt( thumb.style.top );
					
					var shiftX = panMaskWidth / panSubjectWidth * thumbChannelWidth;
					var shiftY = panMaskHeight / panSubjectHeight * thumbChannelHeight;
					var thumbAdjX = thumbX;
					var thumbAdjY = thumbY;
					
					if ( channelX < thumbAdjX )	// +10 to fix odd offset pos problem in each browser
					{
						shiftX = -shiftX;
						newThumbX = Math.max( 0, thumbX + shiftX );
						newThumbX = Math.max( channelX, newThumbX );
					}
					else if ( channelX > thumbAdjX + thumbWidth )
					{
						newThumbX = Math.min( thumbChannelWidth - thumbWidth, thumbX + shiftX );
						newThumbX = Math.min( channelX, newThumbX );
					}
					else
					{
						newThumbX = thumbX;
					}
					
					
					if ( channelY < thumbAdjY )	// +10 to fix odd offset pos problem in each browser
					{
						shiftY = -shiftY;
						newThumbY = Math.max( 0, thumbY + shiftY );
						newThumbY = Math.max( channelY, newThumbY );
					}
					else if ( channelY > thumbAdjY + thumbHeight )
					{
						newThumbY = Math.min( thumbChannelHeight - thumbHeight, thumbY + shiftY );
						newThumbY = Math.min( channelY, newThumbY );
					}
					else
					{
						newThumbY = thumbY;
					}
					
					
					newThumbX = Math.max( 0, newThumbX );
					newThumbX = Math.min( thumbChannel.offsetWidth - thumb.offsetWidth, newThumbX );
					var fracX = newThumbX == 0 ? 0 : newThumbX / ( thumbChannel.offsetWidth - thumb.offsetWidth );
					
					newThumbY = Math.max( 0, newThumbY );
					newThumbY = Math.min( thumbChannel.offsetHeight - thumb.offsetHeight, newThumbY );
					var fracY = newThumbY == 0 ? 0 : newThumbY / ( thumbChannel.offsetHeight - thumb.offsetHeight );
					
					thumb.style.left = newThumbX + "px";
					thumb.style.top  = newThumbY + "px";
					
					var subjectShiftX = ( panSubjectWidth - panMaskWidth ) * fracX;
					var subjectShiftY = ( panSubjectHeight - panMaskHeight ) * fracY;

					var newTop = "-" + Math.ceil( subjectShiftY ) + "px";
					var newLeft = "-" + Math.ceil( subjectShiftX ) + "px";
					
					panSubject.style.top = newTop;
					panSubject.style.left = newLeft;
				}
				else
				{
					var jump = Math.min( 10, thumbChannelWidth * ( panMaskWidth / panSubjectWidth ) / 50 );
					
					thumbStartX = parseInt( thumb.style.left );
					clickStartX = parseInt( thumb.style.left );
					thumbStartY = parseInt( thumb.style.top );
					clickStartY = parseInt( thumb.style.top );
					
					if ( rollingType == "clickleftclass" )
					{
						panDownCenterThumb( thumbStartX - jump, 0 );
					}
					else if ( rollingType == "clickrightclass" )
					{
						panDownCenterThumb( thumbStartX + jump, 0 );
					}
					debugDiv.innerHTML = jump;
				}

				if ( delay == null )
				{
					delay = 40;
				}
				if ( delay != -1 )
				{
					rollingTimeout = setTimeout( "rollingPan()", delay );
				}
			}
			
			function panDown( e, temp )
			{
				testForSpotClick = false;
				
				if ( rollingTimeout != null )
				{
					clearTimeout( rollingTimeout );
					rollingTimeout = null;
				}
				
				if ( !e )
				{
					e = window.event;
				}
				lastClientX = e.clientX;
				lastClientY = e.clientY;
				
				temp = ( typeof e.target != "undefined" ) ? e.target : e.srcElement;

				if ( temp.tagName != "HTML" | "BODY" && temp.className != "dragclass" && temp.className != "clickjumpclass" && temp.className != "clickleftclass" && temp.className != "clickrightclass" && temp.className != "clickexactclass" )
				{
					temp = ( typeof temp.parentNode != "undefined" ) ? temp.parentNode : temp.parentElement;
				}

				if ( temp.className.indexOf( "dragclass" ) >= 0 )
				{
					thumbDragOk = true;
//					temp.style.zIndex = panZ++;
					thumb = temp;
					thumbChannelWidth = thumbChannel.offsetWidth;
					thumbChannelHeight = thumbChannel.offsetHeight;
					thumbStartX = parseInt( temp.style.left + 0 );
					thumbStartY = parseInt( temp.style.top + 0 );
					clickStartX = e.clientX;
					clickStartY = e.clientY;
					
					panDownCenterThumb( clickStartX, clickStartY );
					
					document.onmousemove = panMove;

					clickDownPt = { x: e.clientX, y : e.clientY };
					testForSpotClick = true;
					
//					debugDiv.innerHTML = panSubjectWidth + " x " + panSubjectHeight + ", " + panMaskWidth + " x " + panMaskHeight;
					
					return false;
				}
				else if ( temp.className == "clickexactclass" )
				{
					beginPan();
					
					thumbChannelWidth = thumbChannel.offsetWidth;
					thumbChannelHeight = thumbChannel.offsetHeight;
					thumbStartX = parseInt( thumb.style.left + 0 );
					thumbStartY = parseInt( thumb.style.top + 0 );
					clickStartX = e.clientX;
					clickStartY = e.clientY;
					
					rollingType = "clickexactclass";
					rollingPan( -1 );
					
					return false;
				}
				else if ( temp.className == "clickjumpclass" )
				{
					thumbChannelWidth = thumbChannel.offsetWidth;
					thumbChannelHeight = thumbChannel.offsetHeight;
					thumbStartX = parseInt( thumb.style.left + 0 );
					thumbStartY = parseInt( thumb.style.top + 0 );
					clickStartX = e.clientX;
					clickStartY = e.clientY;
					
					rollingType = "clickjumpclass";
					rollingPan( 400 );
					
					return false;
				}
				else if ( temp.className == "clickleftclass" )
				{
					rollingType = "clickleftclass";
					rollingPan( 400 );
					
					return false;
				}
				else if ( temp.className == "clickrightclass" )
				{
					rollingType = "clickrightclass";
					rollingPan( 400 );
					
					return false;
				}
			}
			

			function panUp( e )
			{
				if ( rollingTimeout != null )
				{
					clearTimeout( rollingTimeout );
				}
				
				dragok = false;
				document.onmousemove = null;
				
				if ( testForSpotClick )
				{
					if ( !e )
					{
						e = window.event;
					}
					if ( e.clientX == clickDownPt.x && e.clientY == clickDownPt.y )
					{
						endPan();
					}
				}
				
				if ( document.getElementById( "prodZoomClose" ) )
				{
					document.getElementById( "prodZoomClose" ).style.display = "inherit";
				}				
			}
				
			document.onmousedown = panDown;
			document.onmouseup = panUp;



			nn = (document.layers) ? true : false;
			ie = (document.all) ? true : false;
			function keyDown( e )
			{
				var evt = ( e ) ? e : (window.event) ? window.event : null;
				if ( evt )
				{
					var key = (evt.charCode) ? evt.charCode : ( (evt.keyCode) ? evt.keyCode : ( (evt.which) ? evt.which : 0 ) );
					if ( key == "27" )
					{
						popNav();
						dragok = false;
						document.onmousemove = null;
						
						return false;
					}
				}
			}
			document.onkeydown = keyDown;
			if ( nn )
			{
				document.captureEvents( Event.KEYDOWN );
			}