<!--
   // Number of points in curved arrow
var adots = 11

   // Current reaction step and curved arrow number
var StepNum = 0
var CurveNum = 0

   // Logical and positional variables for curved arrow(s)
var startarrow = 0
var stoparrow  = 0
var xarrowstart = 0
var yarrowstart = 0
var Labl = new Array("A","B","C","D","E","F","G","H","I","J")

   // Define upper-left corner to start drawing reaction
var xR =  50
var yR = 150

   // Define reaction arrow for background
var imgA = "arrow.gif"
var widthA = 77
var heightA = 24

   // create Table for constant trigonometric functions
var cosTable = new Array(adots)
var sinTable = new Array(adots)

// ------------------------------------------------------------------
function init() {
      // Load Table containing values for trig functions
   loadTable()

      // Show first instructions
   Instruct1 = new DynLayer("Level1Div")
   Instruct2 = new DynLayer("Level2Div")
   Instruct3 = new DynLayer("Level3Div")
   Instruct4 = new DynLayer("Level4Div")
   Instruct5 = new DynLayer("Level5Div")

      // Create error message information
   ErrBox = new DynLayer("ErrMsgDiv")
   ErrBox.hide()
   var ErrHead = "<FONT COLOR='#FFFFFF'>--- ERROR ---<BR>"
   var ErrFoot = "</FONT>"
   for (i=1; i < maxErr; i++) {
      MsgStr = "ErrMsg" + i
      eval(MsgStr + " = \"" + ErrHead + eval(MsgStr) + ErrFoot + "\"")
      }

      // Offset coordinates by (xR,yR) to match picture for mouse click events
   offsetCoordinates()

      // create background image of reactant
   DrawBackground()

      // initialize mouse events
   document.onmousedown = mouseDown
   document.onmousemove = mouseMove
   document.onmouseup = mouseUp
   if (is.ns4) document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE |
Event.MOUSEUP)
}

// ------------------------------------------------------------------
function loadTable() {
   for (i=0; i < adots; i++) {
      cosTable[i] = Math.cos(Math.PI*i/adots)
      sinTable[i] = Math.sin(Math.PI*i/adots)
      }
   }


// ------------------------------------------------------------------
function mouseDown(e) {
   if ((is.ns && e.which!=1) || (is.ie && event.button!=1)) return true
   var x = (is.ns)? e.pageX : event.x+document.body.scrollLeft
   var y = (is.ns)? e.pageY : event.y+document.body.scrollTop
   if (drag.mouseDown(x,y)) {
      return false
      }
      // If curved-arrow not started, see if proper lone pair selected
   else if ( !startarrow )  {
         // Note: parameters for checkWithin(x,y,left,right,top,bottom)
      if ( checkWithin(x,y,GoodStart[CurveNum][0],GoodStart[CurveNum][1],
                           GoodStart[CurveNum][2],GoodStart[CurveNum][3]) )  {
         ErrBox.write("")
         ErrBox.hide()
         createArrow(x,y)
         Instruct1.hide()
         Instruct2.show()
         Instruct3.hide()
         Instruct4.hide()
         Instruct5.hide()
         return false
         }
         // Look for bad selection by user
      for (i=0; i < maxBadStart[CurveNum]; i++)  {
            // Note: parameters for checkWithin(x,y,left,right,top,bottom)
         bl = BadStart[CurveNum][i][0]
         br = BadStart[CurveNum][i][1]
         bt = BadStart[CurveNum][i][2]
         bb = BadStart[CurveNum][i][3]
         if ( checkWithin(x,y,bl,br,bt,bb) )  {
            j = BadStart[CurveNum][i][4]
            ErrBox.write(eval("ErrMsg" + j))
            ErrBox.show()
            return false
            }
         }
      ErrBox.write("")
      ErrBox.hide()
      return true
      }
   else return true
   }

// ------------------------------------------------------------------
function mouseMove(e) {
   var x = (is.ns)? e.pageX : event.x+document.body.scrollLeft
   var y = (is.ns)? e.pageY : event.y+document.body.scrollTop
   x -=  6
   y -= 12
   if (drag.mouseMove(x,y)) {
         // manually position curved arrow
      moveArrow(x,y)
      return false
      }
   else return true
   }

// ------------------------------------------------------------------
function mouseUp(e) {
   var x = (is.ns)? e.pageX : event.x+document.body.scrollLeft
   var y = (is.ns)? e.pageY : event.y+document.body.scrollTop
   if (drag.mouseUp()) {
         // Note: parameters for checkWithin(x,y,left,right,top,bottom)
      if ( checkWithin(x,y,GoodStop[CurveNum][0],GoodStop[CurveNum][1],
                           GoodStop[CurveNum][2],GoodStop[CurveNum][3]) )  {
         drag.remove(drag.obj)          // remove from drag object
         startarrow = 0
         Instruct2.hide()
         if ( Control[CurveNum] )  {  // Done with current step
            StepNum++
            Product.show()
            if (StepNum < maxStep)  {
               Instruct4.show()
               }
            else {
               Instruct5.show()
               startarrow = 1
               StepNum++   // Increment counter to show mechanism
               }
            }
         else  {     // Go on to next arrow
            Instruct3.show()
            }
         CurveNum++
         return false
         }
      }
   return true
   }

// ------------------------------------------------------------------
// Offset coordinates to match picture for mouse click events
function offsetCoordinates()  {
   for (i=0; i < maxCurve; i++)  {
      GoodStart[i][0] += xR
      GoodStart[i][1] += xR
      GoodStart[i][2] += yR
      GoodStart[i][3] += yR
      GoodStop[i][0]  += xR
      GoodStop[i][1]  += xR
      GoodStop[i][2]  += yR
      GoodStop[i][3]  += yR
      for (j=0; j < maxBadStart[i]; j++) {
         BadStart[i][j][0] += xR
         BadStart[i][j][1] += xR
         BadStart[i][j][2] += yR
         BadStart[i][j][3] += yR
         }
      for (j=0; j < maxBadStop[i]; j++) {
         BadStop[i][j][0] += xR
         BadStop[i][j][1] += xR
         BadStop[i][j][2] += yR
         BadStop[i][j][3] += yR
         }
      }
   }

// ------------------------------------------------------------------
// create background image for current reaction step
function DrawBackground()  {
      // Put initial instructions on-screen
   if (StepNum <= maxStep)  { Instruct1.show() }
   Instruct2.hide()
   Instruct3.hide()
   Instruct4.hide()
   Instruct5.hide()

      // Clear screen if necessary
   if (StepNum)  {
         // Destroy all old arrows
      j = (CurveNum > 2) ? CurveNum-2 : 0
      while (!Control[j]  &&  j)  {
         j--
         }
      for ( ; j < CurveNum; j++)  {
         destroyLayer('arrowhead'+Labl[j]+'Div')
         eval('delete arrowhead'+Labl[j])
         for (i=0; i < adots; i++) {
            destroyLayer('arrow'+Labl[j]+i+'Div')
            }
         }
         // Destroy old reaction pictures
      destroyLayer('ReactantLyr')
      destroyLayer('ArrowLyr')
      destroyLayer('ProductLyr')
      delete Product
      }

      // create background image of reactant(s)
   wX = imgX[StepNum]
   wY = imgY[StepNum]
   img="<IMG SRC=\"" + imgMol[StepNum] + "\" WIDTH=\"" + wX +
        "\" HEIGHT=\"" + wY + "\">"
   if (StepNum > maxStep)  { yR -= 50 }
   createLayer('ReactantLyr',null,xR,yR,wX,wY,img)

      // Don't show reaction arrow and product if done.
   if (StepNum <= maxStep)  {
         // create background image of reaction arrow
      left  = xR + imgX[StepNum] + widthA/4
      right = yR + (imgY[StepNum] - heightA)/2
      img="<IMG SRC=\"" + imgA + "\" WIDTH=\"" + widthA +
           "\" HEIGHT=\"" + heightA + "\">"
      createLayer('ArrowLyr',null,left,right,widthA,heightA,img)

         // create background image of product
      wX = imgX[StepNum+1]
      wY = imgY[StepNum+1]
      left  = xR + imgX[StepNum] + widthA*1.5
      right = yR + (imgY[StepNum] - wY)/2
      img="<IMG SRC=\"" + imgMol[StepNum+1] + "\" WIDTH=\"" + wX +
           "\" HEIGHT=\"" + wY + "\">"
      createLayer('ProductLyr',null,left,right,wX,wY,img)
      Product = new DynLayer("ProductLyr")
      Product.hide()
      }
   }

// ------------------------------------------------------------------
function createArrow(x,y) {
      // Inform user that the starting electron pair was found
      // Define position for start of curved arrow
   startarrow = 1
   xarrowstart = x
   yarrowstart = y
      // create balls for curved arrow
   for (i=0; i < adots; i++) {
      createLayer('arrow'+Labl[CurveNum]+i+'Div', null,
                   xarrowstart-4, yarrowstart-4, 8, 8,
                  '<IMG SRC="red.png" WIDTH="8" HEIGHT="8">')
      eval('arrow' + Labl[CurveNum] + i +
           ' = new DynLayer("arrow'+Labl[CurveNum]+i+'Div")')
      }

      // create arrowhead (triangle) for curved arrow
   arwhead = "arrowhead" + Labl[CurveNum]
   createLayer(arwhead+'Div',null,x,y,12,12,
               '<IMG SRC="arrowred.gif" WIDTH="12" HEIGHT="12">')
   eval(arwhead+' = new DynLayer("'+arwhead+'Div")')
   drag.add(eval(arwhead))       // add to drag object
   drag.mouseDown(x,y)           // begin dragging the new layer
   }

// ------------------------------------------------------------------
function moveArrow(x,y) {
   deltax = x-xarrowstart
   deltay = y-yarrowstart
   xorigin = xarrowstart + deltax/2 - 4
   yorigin = yarrowstart + deltay/2 - 4
   phi = Math.atan(deltay/deltax) - Math.PI/2
   sinphi = Math.sin(phi)
   cosphi = Math.cos(phi)
   dist = 0.5*Math.sqrt(deltax*deltax + deltay*deltay)
   loop = (dist*2 < 50) ? dist*2 : 50
   elA = dist*sinphi
   elB = loop*cosphi
   elC =-dist*cosphi
   elD = loop*sinphi
   Apick = Labl[CurveNum]
   for (i=1; i < adots; i++) {
      xa = elA*cosTable[i] + elB*sinTable[i] + xorigin
      ya = elC*cosTable[i] + elD*sinTable[i] + yorigin
      eval('arrow'+Apick+i+'.moveTo('+xa+','+ya+')')
      }
   }
// ------------------------------------------------------------------

//-->

