var version = parseFloat(navigator.appVersion);

function report_newBrowser()

{

   var w = window.open("",  "Need New Browser", 

                       "resizable,status,width=625,height=200"); 

   var d = w.document;    // We use this variable to save typing!



   // Output an HTML document, including a form, into the new window.

   d.write('<DIV align=center>');

   d.write('<FONT SIZE=7 FACE="helvetica"><B>');

   d.write('You need version 4.0 or greater to view this page.');

   d.write('</B></FONT></DIV>');

   d.write('</FORM>');

   // Remember to close the document when we're done.

   d.close();



   // Return true from this error handler, so that JavaScript does not

   // display its own error dialog.

   return true;

}

  if (version < 4.0) 

  report_newBrowser();

  else {



      



var isNav = (navigator.appName.indexOf("Netscape") != -1);

var isIE = (navigator.appName.indexOf("Microsoft") != -1);



var pipetNumber = 0;

var EvMouse = false;

var direction = 1;

var Activecolor = 255;

var Active = false;

var OldColor = 153;

var theDelay = 150;

var SpeedArray = new Array(50, 150, 300);

var radioArray = new Array(5);

  radioArray[0] = new Image();

  radioArray[0].src =  "pimages/fast.gif";

  radioArray[1] = new Image();

  radioArray[1].src =  "pimages/fastr.gif";

  radioArray[2] = new Image();

  radioArray[2].src =  "pimages/medium.gif";

  radioArray[3] = new Image();

  radioArray[3].src =  "pimages/mediumr.gif";

  radioArray[4] = new Image();

  radioArray[4].src =  "pimages/slow.gif";

  radioArray[5] = new Image();

  radioArray[5].src =  "pimages/slowr.gif";

var id;

var imageArray = new Array(10);

var numbArray = new Array(10);

var maxValue = new Array(10, 20, 200, 1000); 

var minValue = new Array(0.5, 2, 20, 200); 

var thisPipet=1;

var tipBottom;

var theValue=4.5;

var score = new Array(0,0);

var i = 0;

var DialArray = new Array(5,5,50,500);

var IncrArray = new Array(0.1,0.1,1,10);



for(i = 0; i < 10;i++) {

  imageArray[i] = new Image();

  imageArray[i].src =  "pimages/" + i + ".gif";

  numbArray[i] = new Image();

  numbArray[i].src = "pimages/numb"+i+".gif";

}

var  decimalmage = new Image();

decimalmage.src = "pimages/decimal.gif";

var xparent = new Image();

xparent.src = "pimages/transparent.gif";

var doneArray = new Array(1);

doneArray[0] = new Image();

doneArray[1] = new Image();

doneArray[0].src="pimages/done_red.gif"

doneArray[1].src="pimages/done_grn.gif"



// assign the event handler functions

document.onmousedown=docHandler;

document.onmouseup=TurnOff;

document.onkeypress=docKeyHandler;

document.onkeyup=TurnOff;



function GetImageX(theLayer, theImageName) {

  if (isNav) 

    theImage= eval(theLayer).document.images[theImageName];

  else if (isIE)   

    if (theLayer)  

      theImage=eval(theLayer).all(theImageName);

    else 

      theImage=document.all(theImageName);

  return(theImage);

}



function SetDialValue(thePipet) {

// place dial images using the value in DialArray[thePipet]  

  var thisValue,theImage;

  var thisValueStr = DialArray[thePipet]+"";

  if (thePipet==1) {

    thisValue = parseInt(DialArray[thePipet-1]*10+"",10);  

  } else if (thePipet==2) { // 00.0

    thisValue = parseInt(DialArray[thePipet-1]*10+"",10);  

  } else if (thePipet==3) { // 000 

    thisValue = parseInt(DialArray[thePipet-1]+"",10);   

  } else if (thePipet==4) { // 000x

     thisValue = parseInt(DialArray[thePipet-1]/10+"",10); 

  }

  if (isNaN(thisValue) || thisValue==0) ;  else  {

    var imgName;

    var theLayer = "PipetLayer"+ (thePipet-0);

    if (isNav) theLayer = "document." + theLayer;

    for (i=1; i<4; i++) {  

      thisValueStr = thisValue + "";

      thisDigit = thisValueStr.charAt(thisValueStr.length-1);

      imgName = "dial"+thePipet+""+i;      

      theImage = GetImageX(theLayer, imgName);

      if (theImage.src != imageArray[thisDigit].src)

        theImage.src = imageArray[thisDigit].src;

      if (i<3) thisValue = parseInt((thisValue)/10 + "",10);

      if (isNaN(thisValue)) thisValue=0;

    }  

  }

}





function SetValueImages(thisLayer, thisValue) {

// write the value to dial in next to the Done button

var theChar, theImage, theLayer, theImageName, myValue;

  myValue = thisValue.toString();

  if (myValue.charAt(0)==".") myValue = "0"+myValue;

  for (i=0;i<4;i++){

    theImageName="numb"+ i;

    theImage = GetImageX(thisLayer, theImageName);

    if (theImage) 

      if (i < myValue.length) {

        theChar=myValue.charAt(i);

        if (theChar == ".") 

          theImage.src = decimalmage.src; 

        else  

          theImage.src = numbArray[theChar].src;

      } else 

        theImage.src = xparent.src;

  }

}



function TurnOff() {

  clearTimeout(id);

  Active = false;

}



//did the person dial the pipet out of range?

function IsOutOfRange()  {

   var bad = true;

   myValue = DialArray[pipetNumber-1];

   if (direction  > 0) {

     bad = (myValue > maxValue[pipetNumber-1]);

     if (bad) DialArray[pipetNumber-1] = maxValue[pipetNumber-1];

   }

   else if (direction < 0)  {

     bad = (myValue < minValue[pipetNumber-1]);

     if (bad) DialArray[pipetNumber-1] = minValue[pipetNumber-1];

   }

   return (bad);

}



function Twirl()  {

  var thisValue =DialArray[pipetNumber-1]-0; 

  Active = true;



  if (theDelay == 50 ) 

    thisValue += (IncrArray[pipetNumber-1] * direction * 2) - 0;

  else 

    thisValue += (IncrArray[pipetNumber-1] * direction) - 0;

  DialArray[pipetNumber-1] = thisValue;

  if (IsOutOfRange()) {

    alert("You just destroyed the pipet!");

    Active = false;

    TurnOff();

  } 

  else if (EvMouse) {

    id = setTimeout("Twirl();", theDelay);

  }

  SetDialValue(pipetNumber);

}



// Handle mouse and key events

function SetPipetBGColor() {

// sets the pipetNumber to 1 if not set and colors the active pipet light blue     

   var theC, theLayer;

   for (var i=0; i<4; i++) {

      theC = (pipetNumber != (i+1))?OldColor:Activecolor;

      if(isNav) 

        eval("document.PipetLayer" + (i+1)).bgColor=theC;

      else if(isIE)

        document.all["PipetLayer" + (i+1)].style.backgroundColor = theC;

   }

}



function docKeyHandler(ev) {

    SetDoneColor("red");

   if (pipetNumber == 0) {

      pipetNumber=1;

      SetPipetBGColor();

   }

   EvMouse = false;

   if (Active && id != 0) TurnOff();

var theKey;

if (isIE) {

  theKey = event.keyCode; 
  }

else if (isNav)

  theKey = ev.which;



   if (theKey==13) {       //return

        GetProblem();  

        return false;

   } else if (theKey == 117)  {       // 'u' for up

        direction = 1;

        Twirl();

        return false;

   } else if  (theKey == 100)  {       // 'd' for down

        direction = -1;

        Twirl();

        return false;

   } else if (theKey == 114)   {       //right        

         if (pipetNumber < 4) pipetNumber += 1; else pipetNumber = 1;          

   } else if (theKey == 108)   {       //left

         if (pipetNumber >1) pipetNumber -= 1; else pipetNumber = 4;

   } else if (theKey == 102) {       //fast

         SetSpeed(0);    // 0 (fast),1, or 2 (slow)

   } else if (theKey == 109) {       //fast

         SetSpeed(1);     // (medium)

   } else if (theKey == 115) {       //

         SetSpeed(2);     // (slow)

   }

   SetPipetBGColor();

   return false;

}



function docHandler(ev) {

  var   theItem="", theTarget, e;

  if (isNav) {

    theTarget = ev.target;

    theItem = theTarget.name;

   }

  else if (isIE) {

    e= window.event;

    theTarget = e.srcElement;

     if (theTarget )

    theItem = theTarget.id;

}

   SetDoneColor("red");

   if (theTarget != "")

   if (theItem != "")

   if (theItem.substr(1,5) == "arrow") {   

      EvMouse = true;

      pipetNumber = theItem.substr(theItem.length-1,1) ;

      SetPipetBGColor();

      direction = (theItem.substr(0,1) == "r")? 1: -1;

      Twirl();

      if (isIE) e.cancelBubble = true;

      return false;

   }

   else if (theItem.substr(0,4) == "Done") {

        GetProblem();  

        if (isIE) e.cancelBubble = true;

        return false;

      }

   else if (theItem.substr(3,5) == "Speed") {

      // change the speed

      var thisImageName, thisItem, theImage;

      var theLayer;

      var theSpeed = theItem.substr(8,1); // 0 (fast),1, or 2 (slow)

      theDelay = SpeedArray[theSpeed];

      if (isNav)

         if(document.layers) theLayer = document.layers["SpeedLayer"];

      for (var i=0; i<3; i++)  {

         thisImageName = "txtSpeed" + (i-0);

         thisItem = (i==theSpeed)?1:0;

         if (isNav)

            theImage = theLayer.document.eval(thisImageName);

         else if (isIE)

            theImage = document.all(thisImageName);

         theImage.src= radioArray[i*2+thisItem].src;

      }

   }

  if (isIE) e.cancelBubble = true;

  return(false);

}

// 

function setDocCapture(evType) {

 if (isNav) {



   var evStr="Event."+evType.toUpperCase();

   if (setDocCapture.arguments.length>1) {

      for (var i=1; i<setDocCapture.arguments.length; i++) {

         evStr+=" | Event."+setDocCapture.arguments[i].toUpperCase();

      }

   }

   document.captureEvents(eval(evStr));

   return true;

}

}

function relDocCapture(evType) {

 if (isNav) {

   var evStr="Event."+evType.toUpperCase();

   if (relDocCapture.arguments.length>1) {

      for (var i=1; i<relDocCapture.arguments.length; i++) {

         evStr+=" | Event."+relDocCapture.arguments[i].toUpperCase();

      }

   }

   document.releaseEvents(eval(evStr));

   return true;

}

}



// The following functions handle the receiving

// of events. Consequently, they are called receivers



// This is the function that identifes the events to capture

function startDoc(ev) {

   if (isNav) {

     setDocCapture( "mousedown","mouseup", "keydown", "keypress");

     return true;

   }

}

function exitDoc(ev) {

   if (isNav) relDocCapture(  "mousedown","mouseup", "keydown", "keypress");

   return true;

}



function GetNewValue() {

  var el;

  var item = Math.floor(Math.random()*4 );

  theValue =  Math.floor(Math.random()* (maxValue[item] - minValue[item]) +       minValue[item] * 10) / 10;

  if (item == 3) 

     theValue = Math.floor(theValue/10)*10; 

  else if (item > 1)  

     theValue = Math.floor(theValue);

   if (isNav) 

     el = document.numLayer;

   else if (isIE)

     el = document.all("numLayer");

   SetValueImages(el ,theValue);

}



function SetDoneColor(theColor) {

  var myColor = (theColor == "red")?0:1;

if (isNav) {

  var theLayer = document.DoneLayer;  

  var theImage = GetImageX(theLayer, "DoneImg");

  theImage.src=doneArray[myColor].src;

} else if (isIE)

  document.all.DoneImg.src = doneArray[myColor].src;

}



function GetProblem() {

  var thisValue=0;

  var ok=false;

  for (var thePipet = 0; thePipet < 4; thePipet++) {

   thisValue= parseInt((DialArray[thePipet]-0)*10)/10;

   if (thisValue == theValue-0) {

      ok = true;

      break;

    }

  }

  if (ok == false) {

    SetDoneColor("red");

    alert("You did not dial the correct volume of "+theValue + " uL. Please redo this!");

  }

  else {

    SetDoneColor("green");

    GetNewValue();    

    score[0]++;    

  }

  score[1]++;  

  SetScore();

}



function SetScore() {

var el;

if (isNav) 

  el = document.ScoreLayer;

else if (isIE)

  el = document.all.ScoreLayer;

SetValueImages( el ,score[0]);

if (isNav) 

  el = document.TotalLayer;

else if (isIE)

  el = document.all.TotalLayer;

  SetValueImages(el,score[1]);

}



function doLoaded()  {

  var theImage,theImageName;

  var theLayer;

   SetPipetBGColor();

   GetNewValue();

    for (var thePipet=1; thePipet<=4; thePipet++) 

      SetDialValue(thePipet);

   SetScore();

   WM_netscapeCssFixCheckIn();

}




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() {

  // This function checks to make sure the version of Netscape 

  // in use contains the bug; if so, it records the window's 

  // width and height and sets all resize events to be handled 

  // by the WM_netscapeCssFix() function.

  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;

  }

}



}