var c;
var ctx;
var logo,img0,img1,img2,img3,img4,img5;
var i,u = 0,pos=110,count;

window.onload=function()
{
  c=document.getElementById("myCanvas");
  ctx=c.getContext("2d");
      ctx.font = "15pt Calibri,Geneva,Arial";
   // ctx.strokeStyle = "rgb(0,0,0)";
    ctx.fillStyle = "rgb(0,20,180)";
    //ctx.strokeText("chargement en cour", 10, 20);
    ctx.fillText("initialisation", 10, 40);
    ctx.fillText("chargement du script", 10, 55);    
    ctx.fillText("chargement des images (6 images)", 10, 80);

count = 0;    

      logo=new Image();
      logo.src="./images/logo-alt-media-V2-400.png";
      ctx.fillStyle = "rgb(255,20,20)";
      pos = pos + 15;
      var tepos0 = pos;
      ctx.fillText("chargement ./images/logo-alt-media-V2-400.png", 10, tepos0);
      logo.onload = function(){ // attendre le chargement de l image
       ctx.fillStyle = "rgb(0,20,180)";
       ctx.fillText("chargement ./images/logo-alt-media-V2-400.png fini", 10, tepos0);      
       count++;
      }

      img1=new Image();
      img1.src="./images/flashimages/laser.jpg";
      ctx.fillStyle = "rgb(255,20,20)";
      pos = pos + 15;
      var tepos1 = pos;
      ctx.fillText("chargement ./images/flashimages/laser.jpg", 10, tepos1);
      img1.onload = function(){ // attendre le chargement de l image
       ctx.fillStyle = "rgb(0,20,180)";
       ctx.fillText("chargement ./images/flashimages/laser.jpg fini", 10, tepos1);      
       count++;
      }

      img2=new Image();
      img2.src="./images/flashimages/header4.jpg";
      ctx.fillStyle = "rgb(255,20,20)";
      pos = pos + 15;
      var tepos2 = pos;
      ctx.fillText("chargement ./images/flashimages/header4.jpg", 10, tepos2);
      img2.onload = function(){ // attendre le chargement de l image
       ctx.fillStyle = "rgb(0,20,180)";
       ctx.fillText("chargement ./images/flashimages/header4.jpg fini", 10, tepos2);      
       count++;
      }

      img3=new Image();
      img3.src="./images/flashimages/header5.jpg";
      ctx.fillStyle = "rgb(255,20,20)";
      pos = pos + 15;
      var tepos3 = pos;
      ctx.fillText("chargement ./images/flashimages/header5.jpg", 10, tepos3);
      img3.onload = function(){ // attendre le chargement de l image
       ctx.fillStyle = "rgb(0,20,180)";
       ctx.fillText("chargement ./images/flashimages/header5.jpg fini", 10, tepos3);      
       count++;
      }

      img4=new Image();
      img4.src="./images/flashimages/light.jpg";
      ctx.fillStyle = "rgb(255,20,20)";
      pos = pos + 15;
      var tepos4 = pos;
      ctx.fillText("chargement ./images/flashimages/light.jpg", 10, tepos4);
      img4.onload = function(){ // attendre le chargement de l image
       ctx.fillStyle = "rgb(0,20,180)";
       ctx.fillText("chargement ./images/flashimages/light.jpg fini", 10, tepos4);      
       count++;
      }

      img5=new Image();
      img5.src="./images/flashimages/video2.jpg";
      ctx.fillStyle = "rgb(255,20,20)";
      pos = pos + 15;
      var tepos5 = pos;
      ctx.fillText("chargement ./images/flashimages/video2.jpg", 10, tepos5);
      img5.onload = function(){ // attendre le chargement de l image
       ctx.fillStyle = "rgb(0,20,180)";
       ctx.fillText("chargement ./images/flashimages/video2.jpg fini", 10, tepos5);      
       count++;
      }

    
  //setTimeout(theclock,3000);
  thewait();
}
function thewait()
{
  ctx.fillStyle = "rgb(0,0,0)";
  //ctx.fillText("images §", 10, 70);
  ctx.fillRect(10,105,100,-20);
  ctx.fillStyle = "rgb(0,20,180)";
  ctx.fillText("images " + count + "/6", 10, 100);
  if(count >= 6){
   theclock();
   c.addEventListener('click', on_canvas_click, false);
    }
  else { setTimeout(thewait,100); }
}
function on_canvas_click(ev) {
    i = 600;
  deroulement();
}
function loadimg(theimg,theurl)
{
      theimg=new Image();
      theimg.src=theurl;
      ctx.fillStyle = "rgb(255,20,20)";
      pos = pos + 20;
      var tepos = pos;
      ctx.fillText("chargement "+ theurl, 10, tepos);
      theimg.onload = function(){ // attendre le chargement de l image
       ctx.fillStyle = "rgb(0,20,180)";
       ctx.fillText("chargement "+ theurl +" fini", 10, tepos+10);      
       return 1;
      }
}

function goset()
{
  i = i - 24;
  ctx.drawImage(img0,i,0,600,390);
  ctx.drawImage(logo,400,270,200,120);
  if(i >> 1) setTimeout(goset,40);
}
function theclocknextplace()
{
    ctx.drawImage(img0,0,0,600,390);
    ctx.drawImage(logo,400,270,200,120);
}
function theclock()
{
  deroulement();
  setTimeout(theclocknext,2000);
}
function deroulement()
{
  u++;
  i = 600;
  if(u==1){ img0 = img1 ; }
  if(u==2){ img0 = img2 ; }
  if(u==3){ img0 = img3 ; }
  if(u==4){ img0 = img4 ; }
  if(u==5){ img0 = img5 ; }
  if(u==5){ u = 0; }
  goset();
}
function theclocknext()
{
  theclocknextplace();
  setTimeout(theclock,5000);
}