var pos1 = -200;
var pos2 = -200;
var pos3 = 80;
var i_trans1 = 0;
var i_trans2 = 100;
var i_trans3 = 0;

function skip() {
  clearInterval(move);
  document.getElementById("desert").src = "./images/desert.png";
  document.getElementById("mountain").style.display = "none";
  document.getElementById("skip").style.display = "none";
  document.getElementById("car").style.display = "none";
  document.getElementById("smiley").style.display = "none";  
  document.getElementById("content").style.visibility = "visible";
  document.getElementById("menu").style.visibility = "visible";
  document.getElementById("desert").style.visibility = "visible";
  document.getElementById("slideshow").style.visibility = "visible";
  document.getElementById("desert").style.filter = 'alpha(opacity=100)';
  document.getElementById("desert").style.opacity = "1";
  document.getElementById("content").style.opacity = "1"; 
  document.getElementById("menu").style.opacity = "1"; 
}

function intro() {
  document.getElementById("skip").style.display = "block"; 
  document.getElementById("content").style.visibility = "hidden";
  document.getElementById("menu").style.visibility = "hidden";
  document.getElementById("desert").style.visibility = "hidden";
  document.getElementById("slideshow").style.visibility = "hidden";
  move =  window.setInterval("desert_0()", 100);
}

function desert_0() {
  document.getElementById("desert").src = "./images/desert_0.png"; 
  document.getElementById("desert").style.opacity = i_trans1;
  document.getElementById("desert").style.filter = 'alpha(opacity='+i_trans1+')';
  document.getElementById("desert").style.visibility = "visible";    
  if(i_trans1 <= 100) {
    i_trans1 = i_trans1 + 5;
    document.getElementById("desert").style.opacity = i_trans1/100;
    document.getElementById("desert").style.filter = 'alpha(opacity='+i_trans1+')';
  }
  else {
    clearInterval(move);
    move =  window.setInterval("desert_1()", 100);
  }
}

function desert_1() {
  document.getElementById("mountain").style.display = "block";  
  document.getElementById("mountain").style.top = pos1 + 'px';   
  if(pos1 <= 0) {
    pos1 = pos1 + 5;
    document.getElementById("mountain").style.top = pos1 + 'px'; 
  }
  else {  
    document.getElementById("desert").src = "./images/desert.png";
    document.getElementById("mountain").style.display = "none";
    clearInterval(move);
    move =  window.setInterval("desert_2()", 100);
  }
}

function desert_2() {
  document.getElementById("car").style.display = "block";  
  document.getElementById("car").style.right = pos2 + "px";    
  if(pos2 <= 250) {
    pos2 = pos2 + 10;
    document.getElementById("car").style.right = pos2 + "px";
    if(pos2 < 220 && pos2 > 50) {
      document.getElementById("smiley").style.display = "block"; 
      document.getElementById("smiley").style.right = pos2+100 + "px";
    }
    else {
      document.getElementById("smiley").style.display = "none"; 
    }      
  }
  else {
    if(pos2 <= 550) {
      pos2 = pos2 + 10;
      pos3 = pos3 + 6;
      document.getElementById("car").style.right = pos2 + "px"; 
      document.getElementById("car").style.bottom = pos3 + "px";
      if(pos2 < 550 && pos2 > 400) {
        document.getElementById("smiley").src = "./images/good.png";
        document.getElementById("smiley").style.display = "block"; 
        document.getElementById("smiley").style.right = pos2+100 + "px";
        document.getElementById("smiley").style.bottom = pos3+50 + "px";
      }
      else {
        document.getElementById("smiley").style.display = "none"; 
      } 
    }
    else {
      if(i_trans2 >= 0) {
        i_trans2 = i_trans2 - 5;
        document.getElementById("car").style.opacity = i_trans2/100;
        document.getElementById("car").style.filter = 'alpha(opacity='+i_trans2+')';
      }
      else {
        document.getElementById("car").style.display = "none";  
        clearInterval(move);
        move =  window.setInterval("desert_3()", 100);
      }
    }
  }
}

function desert_3() {   
  document.getElementById("content").style.opacity = i_trans3/100; 
  document.getElementById("menu").style.opacity = i_trans3/100;
  document.getElementById("slideshow").style.opacity = i_trans3/100;
  document.getElementById("content").style.visibility = "visible";
  document.getElementById("menu").style.visibility = "visible";
  document.getElementById("slideshow").style.visibility = "visible";
  if(i_trans3 <= 100) {
    i_trans3 = i_trans3 + 5;
    document.getElementById("content").style.opacity = i_trans3/100; 
    document.getElementById("menu").style.opacity = i_trans3/100; 
  }
  else {  
    document.getElementById("skip").style.display = "none";
    clearInterval(move);
  }
}