var canvas, ctx;
var timerId=250;
var mytime;
var teste=0;

window.addEventListener("load", init);
var b1 = document.getElementById("bouton1");
var b2 = document.getElementById("bouton2");
var b3 = document.getElementById("bouton3");
var tab = new Array(23);

for (var i=0; i<23 ; i++)
{
  tab[i] = new Image();

}
tab[0].src="http://i.imgur.com/NNbFpBn.png";
tab[1].src="http://i.imgur.com/Hh1bSQ9.png";
tab[2].src="http://i.imgur.com/0tmHtJG.png";
tab[3].src="http://i.imgur.com/pzYg8lf.png";
tab[4].src="http://i.imgur.com/pQQFwpm.png";
tab[5].src="http://i.imgur.com/lrMEl2z.png";
tab[6].src="http://i.imgur.com/0crdix9.png";
tab[7].src="http://i.imgur.com/e4k2Q2l.png";
tab[8].src="http://i.imgur.com/pBnsIY3.png";
tab[9].src="http://i.imgur.com/c300uow.png";
tab[10].src="http://i.imgur.com/ViobqKE.png";
tab[11].src="http://i.imgur.com/k1Q8AxG.png";
tab[12].src="http://i.imgur.com/yauEPc4.png";
tab[13].src="http://i.imgur.com/DDt9kEm.png";
tab[14].src="http://i.imgur.com/Z3Eimxm.png";
tab[15].src="http://i.imgur.com/x6EpEin.png";
tab[16].src="http://i.imgur.com/iwL2SX5.png";
tab[17].src="http://i.imgur.com/mJ0geEn.png";
tab[18].src="http://i.imgur.com/tH5y6jd.png";
tab[19].src="http://i.imgur.com/i3E914L.png";
tab[20].src="http://i.imgur.com/lxAPNEz.png";
tab[21].src="http://i.imgur.com/QbHxZF3.png";
tab[22].src="http://i.imgur.com/kpeEfkn.png";

tab.onload=function(){init();};

var imageX = 700, imageY = 80;


var r=Math.floor((Math.random()*23));

function anime()
{
  if(b1.disabled === true)
  {
  ctx.clearRect(0, 0, canvas.width, canvas.height); 
    r=Math.floor((Math.random()*23));
                ctx.drawImage(tab[r], imageX, imageY);
  }
}


function init() {

    //alert("Are you ready to let Mr BUFFA ROCKS ?");
  
  canvas = document.querySelector("#mycanvas");
  ctx = canvas.getContext("2d");
  canvas.style.transition="all 0.3s ease-in-out";
  b1.disabled= false;
  b2.disabled= true;
  b3.disabled= true;
  acdc.currentTime=0; 
  ctx.drawImage(tab[14], imageX, imageY);
  
}



function play(){
  acdc.play();
  document.getElementById("sp").innerHTML="Play";
  b1.disabled= true;
  b2.disabled= false;
  b3.disabled= false;
  mytime = setInterval(anime,timerId);
}

function pause(){
  acdc.pause(); 
  b1.disabled= false;
  b2.disabled= true;
  b3.disabled= false;
  clearInterval(mytime);
}

function stop(){
  acdc.pause(); 
  acdc.currentTime=0;
  b1.disabled= false;
  b2.disabled= true;
  b3.disabled= true;
  clearInterval(mytime);
  ctx.clearRect(0, 0, canvas.width, canvas.height); 
  ctx.drawImage(tab[14], imageX, imageY);
}