window.onload = function () {
  startScroller();

}

function startScroller() {
  if (!initCalled) generalInit();
  scrollThreadIdent = setTimeout("scrollThread()", scrollThreadBreak);
  

}

function scrollThread() {
   if (currentShow == 5) show(1);
  else show(currentShow + 1);
  scrollThreadIdent = setTimeout("scrollThread()", scrollThreadBreak);
}

function clearAndRestartThreadAfterClick() {
  clearTimeout(scrollThreadIdent);
  scrollThreadBreak = scrollThreadBreakLong;
  scrollThreadIdent = setTimeout("scrollThread()", scrollThreadBreak);

}

function clickForward() {
  if (!initCalled) generalInit();

  clearAndRestartThreadAfterClick()
  if (scroller.inScroll) return;
  if (currentShow == 5) return;
  show(currentShow + 1);
}

function clickBack() {
  if (!initCalled) generalInit();
  clearAndRestartThreadAfterClick()
  if (scroller.inScroll) return;
  if (currentShow == 1) return;
  show(currentShow - 1)
}

var currentShow = 1;
var constWidth = 818;
var humanHasClicked = false;
var scrollThreadIdent;
var scrollThreadBreak = 15000;
var scrollThreadBreakLong = 15000;

function clickShow(i) {
  if (!initCalled) generalInit();
  clearAndRestartThreadAfterClick();
  show(i);
}


function show(i) {
  if (!initCalled) generalInit();
  if (scroller.inScroll) return;
  if (currentShow == i) return;
 
  document.getElementById("cir" + currentShow + "a").style.zIndex = 2;
  document.getElementById("cir" + currentShow + "b").style.zIndex = 1;

  document.getElementById("cir" + i + "a").style.zIndex = 1;
  document.getElementById("cir" + i + "b").style.zIndex = 2;

  scroller.start(scObjLeft, -1 * constWidth * (i - 1), 5000);

  currentShow = i;
  if (currentShow == 5) {
    aLeftVar.style.zIndex = 2;
    aLeftGVar.style.zIndex = 1;
    aRightVar.style.zIndex = 1;
    aRightGVar.style.zIndex = 2;
  }
  else if (currentShow == 1) {
    aLeftVar.style.zIndex = 1;
    aLeftGVar.style.zIndex = 2;
    aRightVar.style.zIndex = 2;
    aRightGVar.style.zIndex = 1;
  }
  else {
    aLeftVar.style.zIndex = 2;
    aLeftGVar.style.zIndex = 1;
    aRightVar.style.zIndex = 2;
    aRightGVar.style.zIndex = 1;
  }



}

var scObjVar;
var scObjLeft = 0;
var initCalled = false;
var aLeftVar;
var aLeftGVar;
var aRightVar;
var aRightGVar;
var scroller;
function generalInit() {
  scObjVar = document.getElementById("scObj");
  aLeftVar = document.getElementById("aLeft");
  aLeftGVar = document.getElementById("aLeftG");
  aRightVar = document.getElementById("aRight");
  aRightGVar = document.getElementById("aRightG");
  scroller = new Scroller(scObjVar);
  initCalled = true;

}




function PosCalculater(startPos, endPos, speed)
{
 this.startPos = startPos;
 this.endPos = endPos;
 this.currentPos = startPos;
 this.startTime = new Date().getTime();
 this.speed = speed; //pixel per second
 this.direction;
 if (endPos < startPos) this.direction = -1; else this.direction = 1;
 this.ended = false;
 this.getNewPos = function () {
   var now = new Date().getTime(); ;
   var secondsSinceStart = (now - this.startTime) / 1000;
   var newPos = this.startPos + secondsSinceStart * (this.speed * this.direction);
   newPos = Math.round(newPos);
   if (this.direction == -1) { if (newPos < this.endPos) { newPos = this.endPos; this.ended = true; } };
   if (this.direction == 1) { if (newPos > this.endPos) { newPos = this.endPos; this.ended = true; } };
   this.currentPos = newPos;
   return this.currentPos;

 } 
}

/** Class Scroller **/
function Scroller(obj) {
  this.domObj = obj;
  this.inScroll = false;
  this.startPos = null;
  this.endPos = null;
  this.speed = null; // pixel per second.
  this.posCalculator = null;

}

Scroller.prototype.ticks = 5;



Scroller.prototype.start = function (startPos, endPos, speed) {
  this.inScroll = true;
  this.startPos = startPos;
  this.endPos = endPos;
  this.speed = speed; // pixel per second.
  this.posCalculator = new PosCalculater(startPos, endPos, speed);
  this.intervalIdent = setInterval("scroller.thread()", scroller.ticks);
}

Scroller.prototype.thread = function () {
  var newPos = this.posCalculator.getNewPos();
  this.domObj.style.left = newPos + "px";
  scObjLeft = newPos;
  if (this.posCalculator.ended) {
    clearInterval(this.intervalIdent);
    this.inScroll = false;
  }
}