<!--
// Cross-platform browser variables
var
  doc = "",
  sty = "",
  ie  = true;

// Layer Objects
var 
   layObj_eyepiece,
   layObj_wireframe,
   layObj_rendered,
   imgObj_rendered,
   imgObj_placeholder;

// flag
var 
   pageLoaded = false;

// Browser detection
//set non-supported-browser varaibale for MAC
var nsb;
if(navigator.appVersion.indexOf( "Mac" ) != -1) {
//	nsb = true;
} else if ( navigator.appName.indexOf( "Opera" ) != -1) {
	nsb = true;
}

if (navigator.appName == "Netscape")  {
	doc = "document";
	sty = "";
	ie  = false	;
} else {
	doc = "document.all";
	sty = ".style";
	ie  = true;
}


// capture mouse movements
if(!nsb)
{
   if (!ie)  document.captureEvents(Event.MOUSEMOVE);
   document.onmousemove = moveEyepiece;
}
// called on page load to init objects
function init() { 
	if(!nsb) {
//      layObj_eyepiece     = eval(doc + '["eyepiece"]'  + sty);
//      layObj_wireframe    = eval(doc + '["wireframe"]' + sty);
//      layObj_rendered     = eval(doc + '["rendered"]'  + sty);
//     imgObj_rendered     = eval(doc + '["image_rendered"]');
//      imgObj_placeholder  = eval(doc + '["image_placeholder"]');

		layObj_eyepiece = eval(document.getElementById('eyepiece'));
		layObj_wireframe = eval(document.getElementById('wireframe'));
		layObj_rendered = eval(document.getElementById('rendered'));
		imgObj_rendered = eval(document.getElementById('image_rendered'));
		imgObj_placeholder = eval(document.getElementById('image_placeholder'));

		layObj_eyepiece.style.visibility  = "visible";
		layObj_wireframe.style.visibility = "visible";
		pageLoaded = true;
   }
}

// called upon mouse move event capture and moves eyepiece
function moveEyepiece(e) {
	var x, y, width, height, clip_y=50, clip_x=50,
	img_x, img_y, offset = 0;

	if (pageLoaded) {
	// set width and height of rendered layer
	// by getting placeholder img props
//		width  = imgObj_placeholder.width;
//		height = imgObj_placeholder.height;
		width = 350;
		height = 300;
	// Get the x,y coordinates where the event occured
	// and the coordinates of the image
		if (!ie) { 
			x = e.pageX;
			y = e.pageY;
			img_x = layObj_rendered.style.top.substr(0,layObj_rendered.style.top.length-2);
			img_y = layObj_rendered.style.left.substr(0,layObj_rendered.style.left.length-2);
		} else {
	//do if IE
			x = event.x;
			y = event.y;
			img_x = imgObj_rendered.offsetLeft;
			img_y = document.all.rendered.offsetTop; // get the container pos to determine y coord
		}
//document.myform.nmX.value=img_x;
//document.myform.nmY.value=img_y;
//document.myform.mX.value=x;
//document.myform.mY.value=y;
	// get the image coordinates
		if ( (x > img_x && x < img_x + width) && (y > img_y && y < img_y + height) ) {
//alert("huhu");
		// Keep the eyepiece layer within the wireframe/rendered 
		// boundary
			if (x > width - clip_x) {
				x = width - clip_x; //300
			} else if (x < clip_x) {
				x = clip_x; //50
			}
	   
			if (y > height - clip_y) {
				y = height - clip_y; //250
			} else if (y < clip_y + offset) {
				y = clip_y + offset;
			}
	   
// Update the eyepiece layer location
			layObj_eyepiece.style.left = x - clip_x;
			layObj_eyepiece.style.top  = y - clip_y;

         // Update the wireframe layer clipping property
			if (!ie) {
				var t = y - clip_y - offset;
				var r = x + clip_x;
				var b = y + clip_y - offset;
				var l = x - clip_x;
				layObj_wireframe.style.clip = "rect("+t+" "+r+" "+b+" "+l+")";
//				layObj_wireframe.style.clip.left   = x - clip_x;
//				layObj_wireframe.style.clip.top    = y - clip_y - offset;
//				layObj_wireframe.style.clip.right  = x + clip_x;
//				layObj_wireframe.style.clip.bottom = y + clip_y - offset;
        	 } else {
				var t = y - clip_y - offset;
				var r  =x + clip_x;
				var b = y + clip_y - offset;
				var l = x - clip_x;
				layObj_wireframe.style.clip = "rect("+t+" "+r+" "+b+" "+l+")";
				
			}
			layObj_wireframe.style.visibility = "visible"; 
		} else {
            // Update the eyepiece layer location
//			layObj_eyepiece.style.left = img_x;
//			layObj_eyepiece.style.top  = img_y;
//alert(img_x+"x"+img_y);
  
			// Update the wireframe layer clipping property
//			if (!ie) {
//				var t = img_y - offset;
//				var r = img_x;
//				var b = img_y - offset;
//				var l = img_x;
//				layObj_wireframe.style.clip = "rect("+t+" "+r+" "+b+" "+l+")";
	//               layObj_wireframe.style.clip.left   = img_x;
	//               layObj_wireframe.style.clip.top    = img_y - offset;
	//               layObj_wireframe.style.clip.right  = img_x;
	//               layObj_wireframe.style.clip.bottom = img_y - offset;
//			} else {
//				layObj_wireframe.clip = "rect("          + 
//										   (img_y - offset) +  " "  + 
//										   (img_x) +  " "  + 
//										   (img_y - offset) +  " "  + 
//										   (img_x) +  ")";
//			}        
//			layObj_wireframe.style.visibility = "hidden"; 

//			mywireframe.style.clip = "rect(50 280 150 180)";
//			layObj_eyepiece.style.left = "180px";
//			layObj_eyepiece.style.top  = "50px";
		}
	}
	return true;
}

function WM_netscapeCssFix() {

  if (document.WM.WM_netscapeCssFix.initWindowWidth != window.innerWidth || document.WM.WM_netscapeCssFix.initWindowHeight != window.innerHeight) {
    document.location = document.location;
  }
}

function WM_netscapeCssFixCheckIn() {

  if ((navigator.appName == 'Netscape') && (parseInt(navigator.appVersion) == 4)) {
    if (typeof document.WM == 'undefined'){
      document.WM = new Object;
    }
    if (typeof document.WM.WM_scaleFont == 'undefined') {
      document.WM.WM_netscapeCssFix = new Object;
      document.WM.WM_netscapeCssFix.initWindowWidth = window.innerWidth;
      document.WM.WM_netscapeCssFix.initWindowHeight = window.innerHeight;
    }
    window.onresize = WM_netscapeCssFix;
  }
}

//WM_netscapeCssFixCheckIn();
// -->