var animCycle = 1; var lastAnimCycle = 1
//var interval = 1000.0/24.0
// test at 4 fps
var interval = 1000.0/4.0
var intervalRef
var maxFrameCnt = 0
var frameCnt = 0
var durCnt = -1 // dur attribute sets number of cycles for which frame persists
var running = false
var newFrame = true
var lastDisplayed = 1
var debug = false
var elemList

var frameNames = new Array()

function roundPlaces(f, p) {
 var multiplier = Math.pow(10, p);
 var b = Math.ceil (f * multiplier) / multiplier;  // 0.67
 return b
}

function changeToVis(elemId) {
    var gelem = document.getElementById("f" + elemId)
    // the name component of the class is no longer needed, so just add frameVis or frameInvis
	  gelem.setAttribute("class","frameVis")
	  if(debug)console.log("elemId " + elemId + " class " + document.getElementById("f" + elemId).getAttribute("class"))
}

function changeToInvis(elemId) {
    var gelem = document.getElementById("f" + elemId)
    // the name component of the class is no longer needed, so just add frameVis or frameInvis
	  gelem.setAttribute("class","frameInvis")
	  if(debug)if(debug)console.log("elemId " + elemId + " class " + document.getElementById("f" +    elemId).getAttribute("class"))
}
         
function init() {
	// called by onload event
	if(debug)console.log("init()")
	document.getElementById("frameNo").innerHTML = 1; 
	// change id attributes (frame1 ...) to unique values (f1 ...)
	elemList=document.getElementsByTagName("g")
	var i=0
	if(debug)console.log(elemList.length)
	for (i=0;i<elemList.length;i++) {
	  if(debug)console.log(elemList[i])
	  if(elemList[i].hasAttribute("id") && elemList[i].hasAttribute("class")) {
	    frameCnt+= 1
	    frameNames[frameCnt]=elemList[i].getAttribute("class")
	    if(debug)console.log(elemList[i].getAttribute("id"))
	  }
	}
	
	// set maxFrameCnt
	maxFrameCnt = frameCnt
	if(debug)console.log("frameCnt " + maxFrameCnt)
	document.getElementById("frameCount").value = maxFrameCnt;
	
	// note indices used start at 1
	var gelem
	var classVals=new Array()
	var indexVis
	for (i=1; i<=maxFrameCnt; i++) {
	  changeToInvis(i)
  }
  // make start frame visible
  changeToVis(animCycle)
  lastDisplayed = animCycle // used by resetAnimation()
  document.getElementById("frameNo").innerHTML = animCycle;
  
  // display first FrameName
  document.getElementById("frameName").innerHTML = frameNames[1]
}

function testStartAt() {
  animCycle = parseInt(document.getElementById("startFrameCount").value);
  if (animCycle < 1 || animCycle > maxFrameCnt) animCycle = 1;
  if(animCycle >1)lastAnimCycle = animCycle -1;
  if (lastAnimCycle <1) lastAnimCycle = maxFrameCnt;
  if(debug) console.log(animCycle);
  // make all frames invisible
  for (i=1; i<=maxFrameCnt; i++) {
    changeToInvis(i)
  }
  // make start frame visible
  changeToVis(animCycle)
  lastDisplayed = animCycle // used by resetAnimation()
  document.getElementById("frameNo").innerHTML = animCycle;
  document.getElementById("frameName").innerHTML = frameNames[animCycle]
  newFrame = true
}


function runAnimation(){
   // repeats displayAnimation in a new svg element, all lines invisible
  if(debug)console.log("runAnimation() " +running)
  if (!running) {
	  intervalRef = setInterval(UpdateAnimation, interval)
	  running = true
  }
}

function UpdateAnimation() {
 	if (debug) console.log("UpdateAnimation start: lastAnimCycle " + lastAnimCycle + " animCycle " + animCycle + " maxFrameCnt " + maxFrameCnt)
  lastDisplayed = animCycle // used by resetAnimation() to clear current frame
  lastAnimCycle=animCycle
  animCycle += 1
	if (animCycle>maxFrameCnt) {stopAnimation(); return}
	// make last frame invisible
	changeToInvis(lastAnimCycle)
	// make next frame visible
	changeToVis(animCycle)
 // update display
  document.getElementById("f" + lastAnimCycle).setAttribute("class", "frameInvis")
  document.getElementById("f" + animCycle).setAttribute("class", "frameVis")
  document.getElementById("frameNo").innerHTML = animCycle;
  document.getElementById("frameName").innerHTML = frameNames[animCycle]
  if (debug) console.log("UpdateAnimation end " + lastAnimCycle + " " + animCycle)

}

function stopAnimation() {
  if(debug) console.log("C stopAnimation")
	clearInterval(intervalRef)
	running = false
}

function stepAnimation() {
	if(debug) console.log("C stepAnimation " + lastAnimCycle + " " + animCycle)
	UpdateAnimation();
}

function setFrameCount() {
  maxFrameCnt = parseInt(document.getElementById("frameCount").value);
  if(debug)console.log(maxFrameCnt);

}

function resetAnimation() {
  if(debug) console.log("C resetAnimation "  + lastAnimCycle + " " + animCycle + " lastDisplayed " + lastDisplayed)
  animCycle = 1;
  lastAnimCycle = 1
  if(running) clearInterval(intervalRef)
  frameCnt=0
  for (i=0;i<elemList.length;i++) {
	  if(debug)console.log(elemList[i])
	  if(elemList[i].hasAttribute("id") && elemList[i].hasAttribute("class")) {
	    frameCnt+= 1
	    changeToInvis(i)
	  }
	}
	 // start frame visible
  changeToVis(animCycle)
  running = false
	// set maxFrameCnt
	maxFrameCnt = frameCnt
	if(debug)console.log("frameCnt " + maxFrameCnt)
	document.getElementById("frameCount").value = maxFrameCnt;
  document.getElementById("startFrameCount").value = 1;
  document.getElementById("frameNo").innerHTML = 1;
  document.getElementById("frameName").innerHTML = frameNames[1]
  document.getElementById("frameCount").value = maxFrameCnt
}