var spans = new Array();

var span_num = -1;
var cycleTime = 5;
var timeOutId;
var paused = false;


function addSpan(spanName) {
   spans.push(spanName);
}


function cycleSpans(seconds) {
   
   cycleTime = seconds;   
   showNext();
   
}


function showNext() {
   
   if(span_num < spans.length - 1) {
     span_num++;
   } else {
     span_num = 0;
   }
   
   document.getElementById("pausePlay").innerHTML = "pause ||";
   showSpan(spans[span_num], true);
}


function showPrevious() {
   
   if(span_num > 0) {
     span_num--;
   } else {
     span_num = spans.length - 1;
   }
   
   showSpan(spans[span_num], true);
}


function pausePlay() {
   
    if (!paused) {
      paused = true;
      clearTimeout(timeOutId);
      document.getElementById("pausePlay").innerHTML = "play &gt;";
    } else {
      paused = false;
      showNext();
    }
}


function showSpan(spanName, cycle) {
   
   for (i = 0; i < spans.length; i++) {
      
       document.getElementById(spans[i]).style.display = "none";
       
   }
   
   document.getElementById(spanName).style.display = "block";
   document.getElementById("trace").innerHTML = (span_num + 1) + " of " + spans.length;
   
   if (cycle) {
      clearTimeout(timeOutId);
      timeOutId = setTimeout("showNext()", cycleTime * 1000);
   }
}