<!-- TODO FIXME: WEBMASTER to fix: Once one javascript drag and drop is fixed, search for "isDone()" to fix those as well. -->

<style>
  #bgmap {
    left: 0px;
    position: absolute;
    top: 0px;
    width: 10px;
  }
  #11map {
    left: 104px;
    position: absolute;
    top: 190px;
    width: 1px;
  }
  #12map {
    left: 140px;
    position: absolute;
    top: 190px;
    width: 1px;
  }
  #13map {
    left: 16px;
    position: absolute;
    top: 190px;
    width: 1px;
  }
  #14map {
    left: 58px;
    position: absolute;
    top: 190px;
    width: 1px;
  }
  #15map {
    left: 180px;
    position: absolute;
    top: 190px;
    width: 1px;
  }
  #16map {
    left: 230px;
    position: absolute;
    top: 200px;
    width: 1px;
  }
  #17map {
    left: 300px;
    position: absolute;
    top: 200px;
    width: 1px;
  }
  #18map {
    left: 20px;
    position: absolute;
    top: 30px;
    width: 1px;
  }
  #19map {
    left: 20px;
    position: absolute;
    top: 65px;
    width: 1px;
  }

  #congrats {
    left: 53px;
    position: absolute;
    top: 130px;
    visibility: hidden;
    width: 1px;
  }
</style>

<script type="text/javascript">
  //var engaged = false
  var offsetX = 0
  var offsetY = 0
  var selectedObj
  var selectedState = ''
  var selectedSateIndex

  function state(abbrev, fullName, x, y) {
    this.abbrev = abbrev
    this.fullName = fullName
    this.x = x
    this.y = y
    this.done = false
  }

  <!-- finishing position-->
  var states = new Array()
  states[0] = new state('11', '', 69, 27)
  states[1] = new state('12', '', 109, 27)
  states[2] = new state('13', '10u', 106, 115)
  states[3] = new state('14', '100u', 29, 110)
  states[4] = new state('15', 'tr', 201, 65)
  states[5] = new state('16', 'EL', 256, 130)
  states[6] = new state('17', 'cap', 166, 25)
  states[7] = new state('18', 'res', 39, 93)
  states[8] = new state('19', 'res', 140, 77)

  function showProps(obj, objName) {
    var result = ''
    count = 0
    for (var i in obj) {
      result += objName + '.' + i + '=' + obj[i] + '\n'
      count++
      if (count == 25) {
        alert(result)
        result = ''
        count = 0
      }
    }
    alert(result)
  }

  function getSelectedMap() {
    selectedObj = window.event.srcElement.parentElement
    if (selectedObj) {
      var stateName = selectedObj.id.substring(0, 2)
      selectedObj = selectedObj.style
      for (var i = 0; i < states.length; i++) {
        if (states[i].abbrev == stateName) {
          selectedStateLabel = document.all(stateName + 'label')
          selectedStateIndex = i
          selectedObj.zIndex = 100
          return
        }
      }
      selectedObj = null
      selectedStateLabel = null
      selectedStateIndex = null
    }
    return
  }

  function dragIt() {
    if (selectedObj) {
      selectedObj.pixelLeft = window.event.clientX - offsetX
      selectedObj.pixelTop = window.event.clientY - offsetY
    }
  }

  function toggleEngage() {
    if (selectedObj) {
      release()
    } else {
      engage()
    }
  }

  function engage() {
    getSelectedMap()
    if (selectedObj) {
      offsetX = window.event.offsetX - document.body.scrollLeft
      offsetY = window.event.offsetY - document.body.scrollTop
      selectedStateLabel.style.backgroundColor = 'red'
    }
  }

  function release() {
    if (selectedObj) {
      if (onTarget()) {
        selectedStateLabel.style.backgroundColor = 'lightgreen'
        states[selectedStateIndex].done = true
        if (isDone()) {
          document.all.congrats.style.visibility = 'visible'
        }
      } else {
        selectedStateLabel.style.backgroundColor = 'red'
        states[selectedStateIndex].done = false
        document.all.congrats.style.visibility = 'hidden'
      }
      selectedObj.zIndex = 0
      selectedObj = null
      selectedState = ''
    }
  }

  function onTarget() {
    var x = states[selectedStateIndex].x
    var y = states[selectedStateIndex].y
    var objX = selectedObj.pixelLeft
    var objY = selectedObj.pixelTop
    if (objX >= x - 30 && objX <= x + 30 && objY >= y - 30 && objY <= y + 30) {
      selectedObj.pixelLeft = x
      selectedObj.pixelTop = y
      return true
    }
    return false
  }

  function isDone() {
    for (var i = 0; i < states.length; i++) {
      if (!states[i].done) {
        return false
      }
    }
    return true
  }
</script>

<div onmousedown="toggleEngage()" onmousemove="dragIt()">
  <div id="bgmap" style="width: 375px; height: 307px">
    <img border="0" height="307" src="images/InverterCctDrag.gif" width="375" />
    <div id="11label"></div>
    <div id="12label"></div>
    <div id="13label"></div>
    <div id="14label"></div>
    <div id="15label"></div>
    <div id="16label"></div>
    <div id="17label"></div>
    <div id="18label"></div>
    <div id="19label"></div>
  </div>

  <div id="11map">
    <img height="60" src="images/InvCctPic1.gif" width="40" />
  </div>
  <div id="12map">
    <img height="60" src="images/InvCctPic2.gif" width="40" />
  </div>
  <div id="13map">
    <img height="60" src="images/InvCctPic3.gif" width="50" />
  </div>
  <div id="14map">
    <img height="60" src="images/InvCctPic4.gif" width="50" />
  </div>
  <div id="15map">
    <img height="60" src="images/InvCctPic5.gif" width="50" />
  </div>
  <div id="16map">
    <img height="60" src="images/InvCctPic6.gif" width="60" />
  </div>
  <div id="17map">
    <img height="60" src="images/InvCctPic7.gif" width="50" />
  </div>
  <div id="18map">
    <img height="25" src="images/InvCctPic8.gif" width="60" />
  </div>
  <div id="19map">
    <img height="25" src="images/InvCctPic9.gif" width="60" />
  </div>

  <div id="congrats" style="width: 266px; height: 159px">
    <img height="60" src="images/InvCctCongrats.gif" width="60" />
    <p>
      <span style="font-size: medium;">Correct. </span
      ><span style="color: #FF0000; font-size: x-small; ">
        Click on a component, pull the circuit apart, and try again.</span
      >
    </p>
  </div>
</div>