var bande1 = document.getElementById("bande1");
var cercle1 = document.getElementById("cercle1");
var cercle2 = document.getElementById("cercle2");
var cache1 = document.getElementById("cache1");
var cache2 = document.getElementById("cache2");

var width = window.innerWidth;
if (navigator.appName.indexOf("Microsoft")!=-1)
  width = document.body.offsetWidth;
var p1 = 50 - (80 * 100 / width);
var p2 = 50 + (80 * 100 / width);
var counter = 0;

var divs = [document.getElementById("cache1"), document.getElementById("cache2")];
var jgs = [new jsGraphics(divs[0]), new jsGraphics(divs[1])];
var i = 0;
var jg = jgs[i];

jgs[0].setColor("#2A1F36");
jgs[1].setColor("#2A1F36");

function anim1()
{
  counter += 1;
  bande1.style.width = counter + '%';
  if (counter >= p1) {
    clearInterval(interval);
    counter = 431;
    jg.fillArc(0, 0, 151, 151, 90, 430);
    jg.paint();
    cercle1.style.visibility = "visible";
    interval = setInterval("anim2()", 50);
  }
}

function anim2()
{
  counter -= 10;
  jg.fillArc(0, 0, 151, 151, 90, counter);
  jg.paint();

  divs[i].style.zIndex = 2;
  i ^= 1;
  divs[i].style.zIndex = 1;
  jg = jgs[i];
  jg.clear();

  if (counter == 91) {
    clearInterval(interval);
    i ^= 1;
    jg = jgs[i];
    jg.clear();
    counter = p1;
    interval = setInterval("anim3()", 50);
  }
}

function anim3()
{
  counter += 1;
  bande1.style.width = counter + '%';
  if (counter >= p2) {
    clearInterval(interval);
    counter = 431;
    jg.fillArc(161, 0, 151, 151, 90, 430);
    jg.paint();
    cercle2.style.visibility = "visible";
    interval = setInterval("anim4()", 50);
  }
}

function anim4()
{
  counter -= 10;
  jg.fillArc(161, 0, 151, 151, 90, counter);
  jg.paint();

  divs[i].style.zIndex = 2;
  i ^= 1;
  divs[i].style.zIndex = 1;
  jg = jgs[i];
  jg.clear();

  if (counter == 91) {
    clearInterval(interval);
    i ^= 1;
    jg = jgs[i];
    jg.clear();
    counter = p2;
    interval = setInterval("anim5()", 50);
  }
}

function anim5()
{
  counter += 1;
  if (counter < 100)
    bande1.style.width = counter + '%';
  else {
    bande1.style.width = '100%';
    clearInterval(interval);
    setTimeout("anim6()", 500);
  }
}

function anim6()
{
  cercle1.src = "images/cercle1.png";
  cercle2.src = "images/cercle2.png";
  document.getElementById("caches").style.visibility = "hidden";
  cache1.style.visibility = "hidden";
  cache2.style.visibility = "hidden";
  setTimeout("anim7()", 1000);
}

function anim7()
{
  document.getElementById("liens").style.visibility = "visible";
  counter = 10;
  interval = setInterval("anim8()", 50);
}

function anim8()
{
  counter -= 1;
  bande1.style.opacity = 0.1 * counter;
  bande1.style.filter = "alpha(opacity=" + 10*counter + ")";
  cercle1.style.opacity = 0.1 * counter;
  cercle1.style.filter = "alpha(opacity=" + 10*counter + ")";
  cercle2.style.opacity = 0.1 * counter;
  cercle2.style.filter = "alpha(opacity=" + 10*counter + ")";

  if (counter == 0) {
    clearInterval(interval);
    bande1.style.visibility = "hidden";
    cercle1.style.visibility = "hidden";
    cercle2.style.visibility = "hidden";
  }
}

var interval = setInterval("anim1()", 50);