var hbarCol1Timer = null;
var hbarCol2Timer = null;
var aniLogoTimer = null;
var aniArtTimer = null;
var aniLogoMarginLeft = 77;
var aniArtWidth = 0;
var hbarCol1MarginLeft = 103;
var hbarCol2Width = 0;
var interval = Math.floor(2000 / 77);
var interval2 = Math.floor(1000 / 25);

var dir = "intro/";
var images = new Array(26);
images[0] = "a_fig.jpg";
images[1] = "a_figA.jpg";
images[2] = "a_figB.jpg";
images[3] = "a_figC.jpg";
images[4] = "a_figD.jpg";
images[5] = "a_figE.jpg";
images[6] = "a_figF.jpg";
images[7] = "a_figG.jpg";
images[8] = "a_figH.jpg";
images[9] = "a_figI.jpg";
images[10] = "a_figJ.jpg";
images[11] = "a_figK.jpg";
images[12] = "a_figL.jpg";
images[13] = "a_figM.jpg";
images[14] = "a_figN.jpg";
images[15] = "a_figO.jpg";
images[16] = "a_figP.jpg";
images[17] = "a_figQ.jpg";
images[18] = "a_figR.jpg";
images[19] = "a_figS.jpg";
images[20] = "a_figT.jpg";
images[21] = "a_figU.jpg";
images[22] = "a_figV.jpg";
images[23] = "a_figX.jpg";
images[24] = "a_figY.jpg";
images[25] = "a_figZ.jpg";

var chosenImage = dir + images[Math.floor(Math.random() * 26)]

function decreaseCol1Margin() {
  var hbarCol1Bar1 = document.getElementById("hbar1");
  var hbarCol1Bar2 = document.getElementById("hbar3");
  if (hbarCol1MarginLeft == 3) {
    hbarCol1Bar1.style.marginLeft = "0";
    hbarCol1Bar2.style.marginLeft = "0";
    clearInterval(hbarCol1Timer);
  }
  else {
    hbarCol1MarginLeft -= 4;
    hbarCol1Bar1.style.marginLeft = hbarCol1MarginLeft + "px";
    hbarCol1Bar2.style.marginLeft = hbarCol1MarginLeft + "px";
  }
}
    
function increaseCol2Width() {
  var hbarCol2Bar1 = document.getElementById("hbar2");
  var hbarCol2Bar2 = document.getElementById("hbar4");
  if (hbarCol2Width == 224) {
    hbarCol2Bar1.style.width = "230px";
    hbarCol2Bar2.style.width = "230px";
    clearInterval(hbarCol2Timer);
    startAnimation();
  }
  else {
    hbarCol2Width += 8;
    hbarCol2Bar1.style.width = hbarCol2Width + "px";
    hbarCol2Bar2.style.width = hbarCol2Width + "px";
  }
}

function decreaseAniLogoMargin() {
  aniLogoMarginLeft--;
  document.getElementById("ani-logo").style.marginLeft = aniLogoMarginLeft + "px";
  if (aniLogoMarginLeft == 0) clearInterval(aniLogoTimer);
}

function increaseAniArtWidth() {
  aniArtWidth += 2;
  document.getElementById("ani-art").style.width = aniArtWidth + "px";
  if (aniArtWidth == 174) clearInterval(aniArtTimer);
}

function startBarAnimation() {
  document.getElementById("animation").style.display = "block";
  document.getElementById("ani-art").style.backgroundImage = "url(" + chosenImage + ")";
  hbarCol1Timer = setInterval(decreaseCol1Margin, interval);
  hbarCol2Timer = setInterval(increaseCol2Width, interval);
}

function startAnimation() {
  aniLogoTimer = setInterval(decreaseAniLogoMargin, interval2);
  aniArtTimer = setInterval(increaseAniArtWidth, interval2);
}