// --------------------------------------------------------------------------
// Animations-Framework
// --------------------------------------------------------------------------
// Tomasz Lewandowski
// admin@webbe.de
// www.webbe.de
// --------------------------------------------------------------------------
// Version 1.05
// 06.06.2005 22:09
// --------------------------------------------------------------------------

// --------------------------------------------------------------------------
// Browsercheck
function lib_bwcheck()
{
  this.ver=navigator.appVersion;
  this.agent=navigator.userAgent;
  this.dom=document.getElementById?1:0;
  this.opera5=this.agent.indexOf("Opera 5")>-1;
  this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0;
  this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;
  this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
  this.ie=this.ie4||this.ie5||this.ie6;
  this.mac=this.agent.indexOf("Mac")>-1;
  this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0;
  this.ns4=(document.layers && !this.dom)?1:0;
  this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5);

  return this;
}

var bw=new lib_bwcheck();
// --------------------------------------------------------------------------


// --------------------------------------------------------------------------
// Methoden zum Erzeugen und Manimulieren des Animationsobjektes

function addObject(zIndex, visible, id, setStyle, stat)
{
  // Animationselement
  var animDiv = document.getElementById(animationId);
  if (animDiv)
  {
    var divElement = document.getElementById(id);
    if (!divElement)
    {
      divElement = document.createElement('div');
      divElement.setAttribute('id', id);
      animDiv.appendChild(divElement);
    }
  }
  if (!animationArray[animationId])
  {
    // Hintergrundobjekt: die Szene
    animationArray[animationId] = new animObject(0, true, animationId, false, true);
  }
  animationArray[id] = new animObject(zIndex, visible, id, setStyle, stat);
}

// Kontruktor
function animObject(zIndex, visible, obj, setStyle, stat, nest)
{
  this.name = obj;
  nest = (!nest)?"":'document.'+nest+'.';
  this.elm = bw.ie4?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):document.getElementById(obj);
  this.css = bw.ns4?this.elm:this.elm.style;

  visible = (visible) ? '' : 'hidden';

  if (setStyle != false)
  {
  	this.css.position='absolute';
  	this.css.zIndex=zIndex;
  	this.css.left='0px';
  	this.css.top='0px';
  	this.css.visibility=visible;
  }
  this.doc = bw.ns4?this.elm.document:document;
  this.obj = obj+'animObject'; eval(this.obj+'=this');
  this.x = (bw.ns4||bw.opera5)?this.css.left:this.elm.offsetLeft;
  this.y = (bw.ns4||bw.opera5)?this.css.top:this.elm.offsetTop;
  this.w = (bw.ie4||bw.ie5||bw.ie6||bw.ns6)?this.elm.offsetWidth:bw.ns4?this.elm.clip.width:bw.opera5?this.css.pixelWidth:0;
  this.h = (bw.ie4||bw.ie5||bw.ie6||bw.ns6)?this.elm.offsetHeight:bw.ns4?this.elm.clip.height:bw.opera5?this.css.pixelHeight:0;
  this.dx = 0;
  this.dy = 0;
  this.stat = stat;
}

// Objekt verstecken
animObject.prototype.hideIt = function()
{
  this.css.visibility='hidden';

  // Falls Timer vorhanden, dann Timeout setzen
  if (timeToNextStep > -1)
  {
    animationTimer = setTimeout(fncControl, timeToNextStep);
  }
}

// Objekt anzeigen
animObject.prototype.showIt = function()
{
  this.css.visibility='visible';

  // Falls Timer vorhanden, dann Timeout setzen
  if (timeToNextStep > -1)
  {
    animationTimer = setTimeout(fncControl, timeToNextStep);
  }
}

// Objekt sichtbar?
animObject.prototype.getVisibility  = function()
{
  return this.css.visibility;
}

// Bewegt Objekt relativ um den Vector (x,y)
animObject.prototype.moveRelativeTo = function(x,y)
{
  this.x = this.x + x;
  this.y = this.y + y;
  this.css.left = this.x - this.dx;
  this.css.top  = this.y - this.dy;
}

// Bewegt Objekt zu den absoluten Koordinaten (x,y)
animObject.prototype.moveTo = function(x,y)
{

  clearTimeout(moveTimer);

  this.x = x;
  this.y = y;
  this.css.left = this.x - this.dx;
  this.css.top  = this.y - this.dy;

  // Falls Timer vorhanden, dann Timeout setzen
  if (timeToNextStep > -1)
  {
    animationTimer = setTimeout(fncControl, timeToNextStep);
  }
}

// Schreibt ein img-Tag in ein Objekt
animObject.prototype.changeImage = function (imageName, timeToNextStep)
{
  if (imageName != '')
  {
    this.elm.innerHTML = '<img src="' + pathToImages + imageName + '" />';
  }
  else
  {
    this.elm.innerHTML = '';
  }

  // Falls Timer vorhanden, dann Timeout setzen
  if (timeToNextStep > -1)
  {
    animationTimer = setTimeout(fncControl, timeToNextStep);
  }
}

// Schreibt einen Text in ein Objekt
animObject.prototype.changeText = function (text, timeToNextStep)
{
  this.elm.innerHTML = text;

  // Falls Timer vorhanden, dann Timeout setzen
  if (timeToNextStep > -1)
  {
    animationTimer = setTimeout(fncControl, timeToNextStep);
  }
}

// Setzt die Delta-Abstaende fuer ein Objekt
animObject.prototype.setCentre = function (dx, dy)
{
  this.dx = dx;
  this.dy = dy;

  // Falls Timer vorhanden, dann Timeout setzen
  if (timeToNextStep > -1)
  {
    animationTimer = setTimeout(fncControl, timeToNextStep);
  }
}

// Setzt den Z-Index fuer ein Objekt
animObject.prototype.setZIndex = function (zIndex)
{
  this.css.zIndex = zIndex;

  // Falls Timer vorhanden, dann Timeout setzen
  if (timeToNextStep > -1)
  {
    animationTimer = setTimeout(fncControl, timeToNextStep);
  }
}

// Setzt den CSS-Style fuer ein Objekt
animObject.prototype.setStyle = function (attribute, value)
{
  eval('this.css.'+attribute+'=value');

  //document.getElementById(this.id).style.setAttribute(attribute, value, "false");
  // Falls Timer vorhanden, dann Timeout setzen
  if (timeToNextStep > -1)
  {
    animationTimer = setTimeout(fncControl, timeToNextStep);
  }
}
// --------------------------------------------------------------------------


// --------------------------------------------------------------------------
// Animations-Framework

// ----------------------------------------------
// Variablen zur Steuerung der Animation

// Zeit zum naechsten Schritt
var timeToNextStep = -1;

// Mausschritt in Pixel (pro Zeitschritt)
var moveStep = 3;

// Wartezeit fuer die Maus zwischen zwei Schritten in Milisekunden
var timeStep = 1;

// Wartezeit zwischen zwei Eingabebuchstaben
var inputStepLetter = 100;

// Wartezeit zwischen zwei Eingabeworten
var inputStepWord = 400;

// Wartezeit zwischen zwei Eingabeschritten
var inputStep = inputStepLetter;

// Zeit zum Laden des Bildes (grosse Bilder)
var timeLoad = 2000;

// Wartezeit nach der Mausbewegung
var timeWaitMouse = 500;

// Waretzeit nach Anzeigen oder Verstecken von Objekten
var timeView = 10;

// Waretzeit zum Pruefen ob die Animation laeuft
var timeCheck = 1000;

// Relatives Pfad zum den Bildern
var pathToImages = '/directions/html/';

// Bewegungs-Timer
var moveTimer = null;

// Animations-Timer
var animationTimer = null;

// Aktuelles Animationsobject (fuer Schleifen)
var activeObject = '';

// Vater-Animationsobject (fuer Schleifen)
var parentObject = '';

// Array der Animationsobjekte
var animationArray = new Array();

// Animation-Id
var animationId = 'animationScene';
// ----------------------------------------------

// ----------------------------------------------
// Variablen fuer die Animationsschritte

// Animationsfunktionen
var fncCheck                = 'checkAnimation()';
var fncControl              = 'animation()';
var fncMoveByStep           = 'moveByStep';
var fncCircleIt             = 'circleIt';
var fncShowIt               = 'showIt';
var fncHideIt               = 'hideIt';
var fncSetCentre            = 'setCentre';
var fncSetZIndex            = 'setZIndex';
var fncSetStyle             = 'setStyle';
var fncMove                 = 'move';
var fncChangeImage          = 'changeImage';
var fncChangeText           = 'changeText';
var fncChangeImageLoop      = 'changeDivImageLoopStart';
var fncInit                 = 'initAnimation';

// Array der einzelnen Animationsschritte
var step = new Array();

// Schrittzaehler
var stepCounter = 0;

// aktueller Schritt
var currentStep = 0;

// Anhalten der Animation
var animationBreak = true;

// Stoppen der Animation
var animationStop = false;

// Initialisierung der Animation
var animationInit = false;
// ----------------------------------------------

// ----------------------------------------------
// Animationsfunktionen

// Setzt die Animation-Id
function setAnimationId (animId)
{
  animationId = animId;
}

// Bewegt Objekt sofort relativ zum Vater-Objekt
function move (obj, x, y, parent_obj)
{
  var x_end = obj.x + x - obj.x + parent_obj.x - parent_obj.dx;
  var y_end = obj.y + y - obj.y + parent_obj.y - parent_obj.dy;

  obj.x = x_end;
  obj.y = y_end;
  obj.css.left = obj.x - obj.dx;
  obj.css.top  = obj.y - obj.dy;

  // Falls Timer vorhanden, dann Timeout setzen
  if (timeToNextStep > -1)
  {
    animationTimer = setTimeout(fncControl, timeToNextStep);
  }
}

// Bewegt Object mit Schritten relativ zum Vater-Objekt
function moveByStep(obj, to_x, to_y, parent_obj)
{
  activeObject = obj;

  var x_end = 0;
  var y_end = 0;
  var to_x_2 = to_x;
  var to_y_2 = to_y;

  if (parent_obj == '')
  {
    x_end = obj.x + to_x;
    y_end = obj.y + to_y;
  }
  else
  {
    to_x_2 = to_x - obj.x + parent_obj.x;
    to_y_2 = to_y - obj.y + parent_obj.y;
    x_end = obj.x + to_x_2;
    y_end = obj.y + to_y_2;
  }

  var d = Math.sqrt((to_x_2 * to_x_2) + (to_y_2 * to_y_2));

  var dx_step = to_x_2 * moveStep / d;
  var dy_step = to_y_2 * moveStep / d;

  var max_step = d / moveStep;

  clearTimeout(moveTimer);
  var functionName = 'moving('+dx_step+','+dy_step+',1,'+max_step+','+x_end+','+y_end+')';
  moveTimer = setTimeout(functionName, timeStep);
}

// Bewegt aktuelles Objekt in Schritten
function moving (dx_step, dy_step, i, max_step, to_x, to_y)
{
  clearTimeout(moveTimer);

  i = i + 1;
  if (i < (max_step+2))
  {
    activeObject.moveRelativeTo(dx_step, dy_step);
    var functionName = 'moving('+dx_step+','+dy_step+','+i+','+max_step+','+to_x+','+to_y+')';
    moveTimer = setTimeout(functionName, timeStep);
  }
  else
  {
    moveTimer = setTimeout('activeObject.moveTo('+to_x+','+to_y+')',timeStep);
  }
}

// Bewegt Object im Kreis in Schritten relativ zum Vater-Objekt
function circleIt(obj, middle_x, middle_y, radius, direction, angle_begin, angle_end, step, parent_obj)
{
  activeObject = obj;
  parentObject = parent_obj;

  var space;
  if (direction > 0)
  {
    space = angle_end - angle_begin;
  }
  else
  {
    space = angle_begin - angle_end;
  }
  var d = radius * space;
  var max_step = d / step;
  var angle_step = space / max_step * direction;

  clearTimeout(moveTimer);
  var functionName = 'circle('+middle_x+','+middle_y+','+radius+','+angle_begin+','+angle_end+','+angle_step+',0,'+max_step+')';
  moveTimer = setTimeout(functionName, timeStep);
}

// Bewegt aktuelles Objekt in Schritten auf einer Kreisbahn
function circle (middle_x, middle_y, radius, angle_begin, angle_end, angle_step, i, max_step)
{
  clearTimeout(moveTimer);

  i = i + 1;
  if (i < max_step)
  {
    var dx = middle_x + Math.cos(angle_begin) * radius;
    var dy = middle_y + Math.sin(angle_begin) * radius;

    var x_end = activeObject.x + dx - activeObject.x + parentObject.x;
    var y_end = activeObject.y + dy - activeObject.y + parentObject.y;

    activeObject.x = x_end;
    activeObject.y = y_end;
    activeObject.css.left = activeObject.x - activeObject.dx;
    activeObject.css.top  = activeObject.y - activeObject.dy;

    angle_begin = angle_begin + angle_step;
    var functionName = 'circle('+middle_x+','+middle_y+','+radius+','+angle_begin+','+angle_end+','+angle_step+','+i+','+max_step+')';
    moveTimer = setTimeout(functionName, timeStep);
  }
  else
  {
    var dx = middle_x + Math.cos(angle_end) * radius;
    var dy = middle_y + Math.sin(angle_end) * radius;

    var x_end = activeObject.x + dx - activeObject.x + parentObject.x;
    var y_end = activeObject.y + dy - activeObject.y + parentObject.y;

    activeObject.x = x_end;
    activeObject.y = y_end;
    activeObject.css.left = activeObject.x - activeObject.dx;
    activeObject.css.top  = activeObject.y - activeObject.dy;

    // Falls Timer vorhanden, dann Timeout setzen
    if (timeToNextStep > -1)
    {
      animationTimer = setTimeout(fncControl, timeToNextStep);
    }
  }
}

// Aendert das Bild von 'start' bis 'end'
// 'image' ist ein Teil des Namens des Bildes, z.B. 'anim_01_03'
// die einzelnen Schritte ergaenzen dann vom 'start' bis 'end'
// den Namen des Bildes
// Die einzelnen Bilder muessen die Konvention haben: [image]'_xx.gif'
// 'xx' steht fuer die laufende Nummer, ist diese < 10 wird eine '0'
// automatisch vorgestellt
// typischer Aufruf:
//   changeDivImageLoopStart(scenetransparent, 'anim_01_03', 1, 11);
function changeDivImageLoopStart(obj, image, start, end, inputTimer)
{
  activeObject = obj;
  clearTimeout(moveTimer);
  inputStep = inputTimer;
  var functionName = 'changeDivImageLoop(\''+image+'\','+start+','+end+')';
  moveTimer = setTimeout(functionName, timeStep);
}

// Aendert Bild fuer aktuelles Objekt in Schritten
function changeDivImageLoop (img, i, end)
{
  clearTimeout(moveTimer);

  if (i <= end)
  {
    var number = (i<10) ? ('0' + i) : i;
    var imageName = img + '_' + number + '.png';
    activeObject.changeImage(imageName, -1);
    i = i + 1;
    var functionName = 'changeDivImageLoop(\''+img+'\','+i+','+end+')';
    moveTimer = setTimeout(functionName, inputStep);
  }
  else
  {
    if (timeToNextStep > -1)
    {
      animationTimer = setTimeout(fncControl, timeToNextStep);
    }
  }
}
// ----------------------------------------------

// ----------------------------------------------
// Funktionen zum Definieren der Animationsschritte

// Kontruktor - Struktur eines Animationsschrittes
function stepStruct()
{
  // Funktionsname (1.Parameter)
  this.name  = stepStruct.arguments[0];

  // Wartezeit zum naechsten Schritt (2.Parameter)
  this.timer = stepStruct.arguments[1];

  // Parameter fuer den Funktionsaufruf (nachfolgenden Parameter)
  this.params = new Array();
  for (var i=2; i<stepStruct.arguments.length; i++)
  {
    this.params[i-2] = stepStruct.arguments[i];
  }

  return this;
}

// Neuen Schritt hinzufuegen
function addStep ()
{
  // Funktionsname (1.Parameter)
  var functionName = addStep.arguments[0];

  // showIt() or hideIt() or changeImage(image, timer) or changeText(text, timer)
  if (functionName == fncShowIt || functionName == fncHideIt || functionName == fncChangeImage || functionName == fncChangeText)
  {
    step[stepCounter] = new stepStruct(functionName, addStep.arguments[1], addStep.arguments[2], addStep.arguments[3]);
  }

  // setCentre(dx, dy) or setStyle(attribute, value)
  if (functionName == fncSetCentre || functionName == fncSetStyle)
  {
    step[stepCounter] = new stepStruct(functionName, addStep.arguments[1], addStep.arguments[2], addStep.arguments[3], addStep.arguments[4]);
  }

  // fncSetZIndex(zIndex)
  if (functionName == fncSetZIndex)
  {
    step[stepCounter] = new stepStruct(functionName, addStep.arguments[1], addStep.arguments[2], addStep.arguments[3]);
  }

  // moveByStep(obj, to_x, to_y, parent_obj)
  if (functionName == fncMoveByStep)
  {
    // parent-Objekt angebenen ?
    if (addStep.arguments[5] == '')
    {
      addStep.arguments[5] = animationId;
    }
    step[stepCounter] = new stepStruct(functionName, addStep.arguments[1], addStep.arguments[2], addStep.arguments[3], addStep.arguments[4], addStep.arguments[5]);
  }

  // circleIt(obj, middle_x, middle_y, radius, direction, angle_begin, angle_end, step, parent_obj)
  if (functionName == fncCircleIt)
  {
    // parent-Objekt angebenen ?
    if (addStep.arguments[10] == '')
    {
      addStep.arguments[10] = animationId;
    }
    step[stepCounter] = new stepStruct(functionName, addStep.arguments[1], addStep.arguments[2], addStep.arguments[3], addStep.arguments[4], addStep.arguments[5], addStep.arguments[6], addStep.arguments[7], addStep.arguments[8], addStep.arguments[9], addStep.arguments[10]);
  }

  // changeDivImageLoopStart(obj, image, start, end, inputTimer)
  if (functionName == fncChangeImageLoop)
  {
    step[stepCounter] = new stepStruct(functionName, addStep.arguments[1], addStep.arguments[2], addStep.arguments[3], addStep.arguments[4], addStep.arguments[5], addStep.arguments[6]);
  }

  // initAnimation()
  if (functionName == fncInit)
  {
    step[stepCounter] = new stepStruct(functionName, addStep.arguments[1]);
  }

  // move (obj, x, y, parent_obj)
  if (functionName == fncMove)
  {
    // parent-Objekt angebenen ?
    if (addStep.arguments[5] == '')
    {
      addStep.arguments[5] = animationId;
    }
    step[stepCounter] = new stepStruct(functionName, addStep.arguments[1], addStep.arguments[2], addStep.arguments[3], addStep.arguments[4], addStep.arguments[5]);
  }

  // aktuellen Schrittzaehler erhoehen
  stepCounter++;

}

// Kontrollfunktion der Animationsschritte
function animation ()
{
  // timeout loeschen
  clearTimeout(animationTimer);

  // Ende erreicht?
  if (animationBreak == false && currentStep < step.length)
  {
    // Schritt in der Kontrollanzeige
    viewStep();

    // aktueller Schritt
    var currentStepObject = step[currentStep];

    // aktuellen Schrittzaehler erhoehen
    currentStep++;

    // Wartezeit zum naechsten Schritt
    timeToNextStep = currentStepObject.timer;

    // circleIt(obj, middle_x, middle_y, radius, direction, angle_begin, angle_end, step, parent_obj)
    if (currentStepObject.name == fncCircleIt)
    {
      circleIt(animationArray[currentStepObject.params[0]], currentStepObject.params[1], currentStepObject.params[2], currentStepObject.params[3], currentStepObject.params[4], currentStepObject.params[5], currentStepObject.params[6], currentStepObject.params[7], animationArray[currentStepObject.params[8]]);
    }

    // moveByStep(obj, to_x, to_y, parent_obj)
    if (currentStepObject.name == fncMoveByStep)
    {
      moveByStep(animationArray[currentStepObject.params[0]], currentStepObject.params[1], currentStepObject.params[2], animationArray[currentStepObject.params[3]]);
    }

    // showIt()
    if (currentStepObject.name == fncShowIt)
    {
      animationArray[currentStepObject.params[0]].showIt();
    }

    // hideIt()
    if (currentStepObject.name == fncHideIt)
    {
      animationArray[currentStepObject.params[0]].hideIt();
    }

    // setCentre(dx, dy)
    if (currentStepObject.name == fncSetCentre)
    {
      animationArray[currentStepObject.params[0]].setCentre(currentStepObject.params[1], currentStepObject.params[2]);
    }

    // setStyle(attribute, value)
    if (currentStepObject.name == fncSetStyle)
    {
      animationArray[currentStepObject.params[0]].setStyle(currentStepObject.params[1], currentStepObject.params[2]);
    }

    // fncSetZIndex(zIndex)
    if (currentStepObject.name == fncSetZIndex)
    {
      animationArray[currentStepObject.params[0]].setZIndex(currentStepObject.params[1]);
    }

    // changeImage(image, timer)
    if (currentStepObject.name == fncChangeImage)
    {
      animationArray[currentStepObject.params[0]].changeImage(currentStepObject.params[1], timeToNextStep);
    }

    // changeText(text, timer)
    if (currentStepObject.name == fncChangeText)
    {
      animationArray[currentStepObject.params[0]].changeText(currentStepObject.params[1], timeToNextStep);
    }

    // changeDivImageLoopStart(obj, image, start, end, inputTimer)
    if (currentStepObject.name == fncChangeImageLoop)
    {
      changeDivImageLoopStart(animationArray[currentStepObject.params[0]], currentStepObject.params[1], currentStepObject.params[2], currentStepObject.params[3], currentStepObject.params[4]);
    }

    // move (obj, x, y, parent_obj)
    if (currentStepObject.name == fncMove)
    {
      move(animationArray[currentStepObject.params[0]], currentStepObject.params[1], currentStepObject.params[2], animationArray[currentStepObject.params[3]]);
    }
  }
  else
  {
    animationTimer = setTimeout(fncCheck, timeCheck);
  }

  if (currentStep == 0 && animationStop == false)
  {
    animationArray['aStart'].css.backgroundColor = '#ffffff';
    animationArray['aStart'].css.color = 'white';
    animationArray['aBreak'].css.backgroundColor = '#ffffff';
    animationArray['aBreak'].css.color = 'white';
    animationArray['aStop'].css.backgroundColor = '#ffffff';
    animationArray['aStop'].css.color = 'white';
    for (var id in animationArray)
    {
      if (!animationArray[id].stat || animationArray[id].stat == false)
      {
        animationArray[id].hideIt();
      }
    }
    animationStop = true;
  }

  if (currentStep == step.length)
  {
    currentStep = 0;
    animationStop = false;
    animationBreak = true;
    window.location.href = "/directions/html/directions.html";
  }

}

function hideControl ()
{
  animationArray['animationControl'].hideIt();
}

function showControl ()
{
  animationArray['animationControl'].showIt();
}

function viewStep ()
{
  var stepDiv = document.getElementById('animationStep');
  if (stepDiv)
  {
    stepDiv.firstChild.nodeValue = 'Step ' + (currentStep+1) + ' of ' + stepCounter;
  }
}

function checkAnimation ()
{
  if (animationBreak == true)
  {
    animationTimer = setTimeout(fncCheck, timeCheck);
  }
  else
  {
    animationTimer = setTimeout(fncControl, 0);
  }
}

function startAnimation ()
{
  if (animationInit == false)
  {
    addObject(0, true, 'animationControl', false, true);
    addObject(0, true, 'aStart', false, true);
    addObject(0, true, 'aBreak', false, true);
    addObject(0, true, 'aStop' , false, true);

  	clearTimeout(animationTimer);

    step = new Array();
    stepCounter = 0;
    currentStep = 0;

    animationInit = true;
    initAnimation();
  }

  animationArray['aBreak'].css.backgroundColor = '#888888';
  animationArray['aBreak'].css.color = 'white';
  animationArray['aStop'].css.backgroundColor = '#888888';
  animationArray['aStop'].css.color = 'white';

  animationArray['aStart'].css.backgroundColor = '#ffffff';
  animationArray['aStart'].css.color = 'white';

  animationBreak = false;
}

function breakAnimation ()
{

  animationArray['aStart'].css.backgroundColor = '#888888';
  animationArray['aStart'].css.color = 'white';
  animationArray['aStop'].css.backgroundColor = '#888888';
  animationArray['aStop'].css.color = 'white';

  animationArray['aBreak'].css.backgroundColor = 'red';
  animationArray['aBreak'].css.color = 'black';

  animationBreak = true;
}

function stopAnimation ()
{
  animationArray['aStart'].css.backgroundColor = '#888888';
  animationArray['aStart'].css.color = 'white';
  animationArray['aBreak'].css.backgroundColor = '#888888';
  animationArray['aBreak'].css.color = 'white';

  animationArray['aStop'].css.backgroundColor = 'red';
  animationArray['aStop'].css.color = 'black';

  animationBreak = true;
  animationStop = false;

  currentStep = 0;

  viewStep();
}
// ----------------------------------------------
// --------------------------------------------------------------------------