function draw(level) {
  $(".circle").off();
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
    
    //仮吹出
    fuki(ctx);

    var StoneNum=LvChoice(level);
    //問題玉生成
    makeStone(StoneNum);
   
    //正解生成
    var ritCo = makeRight(ctx);
    
    //回答作成
    var aEnd = answer(ritCo,level);

  }
}
function LvChoice(level){
  if(level == 1) return 5;
  if(level == 2) return 10;
  if(level == 3) return 15;
}

function makeStone(level){
      for(var i=1; i<16; i++){
      $(".circle.num"+i).css("visibility","hidden");
      }
  
      for(var i=1; i<level+1; i++){
        
        var r = Math.floor(Math.random()*255);
        var g = Math.floor(Math.random()*255);
        var b = Math.floor(Math.random()*255);
      $(".circle.num"+i).css( 'background-color',"rgb("+ r +','+ g + ',' + b +')');
      $(".circle.num"+i).css("visibility","visible");
      }
 
} 

function makeRight(ctx){
  //2色ランダムピック1
  var cPic1 = Math.floor(Math.random()*4)+1;
  
  var color1 = $(".circle.num"+cPic1).css("background-color");
  $("#pic1").html("<br/>"+"I have a <span style='color:" +
                         color1 + ";'>" + color1 + "</span>.");
      
  //背景色の余計な文字列削除
  color1 = color1.replace("rgb(","");
  color1 = color1.replace(")","");
  //文字列分割
  color1 = color1.split(",");
    
  console.log(color1);
    
  //2色ランダムピック2
  do
   var cPic2 = Math.floor(Math.random()*4)+1;
  while(cPic1 == cPic2);
  var color2 = $(".circle.num"+cPic2).css("background-color");
  $("#pic2").html("<br/>"+"I have a <span style='color:" +
                         color2 + ";'>" + color2 + "</span>.");
      
  //背景色の余計な文字列削除
  color2 = color2.replace("rgb(","");
  color2 = color2.replace(")","");
  //文字列分割
  color2 = color2.split(",");
    
  console.log(color2);
    
  var cRight = color1;
      cRight[0] = Math.floor((parseInt(color1[0])+parseInt(color2[0]))/2);
      cRight[1] = Math.floor((parseInt(color1[1])+parseInt(color2[1]))/2);
      cRight[2] = Math.floor((parseInt(color1[2])+parseInt(color2[2]))/2);
  console.log(cRight);
    
  //玉色生成
  var r = cRight[0];
  var g = cRight[1];
  var b = cRight[2];
    
  //お手本玉
  ctx.beginPath();
  ctx.fillStyle = "rgb("+ r +','+ g + ',' + b +')';
  ctx.arc(77,63,18,0,Math.PI*2,true);
  ctx.fill();
  
  return cRight;
}

function fuki(ctx){
  ctx.beginPath();
    ctx.moveTo(75,25);
    ctx.quadraticCurveTo(25,25,25,62.5);
    ctx.quadraticCurveTo(25,100,80,100);
    ctx.quadraticCurveTo(50,120,50,125);
    ctx.quadraticCurveTo(60,120,100,100);
    ctx.quadraticCurveTo(125,90,125,62.5);
    ctx.quadraticCurveTo(125,25,75,25);
    ctx.stroke();
}

function answer(ritCo,Lv){
  
  /*回答作成*/
  var pic1f=0;
    var c1buf = [];
    var colbuf = [];
    //玉から２色とる
    $(".circle").on("click", function () {
      if(pic1f == 0){
         var color1 = $(this).css("background-color");
      
        //背景色の余計な文字列削除
        color1 = color1.replace("rgb(","");
        color1 = color1.replace(")","");
        //文字列分割
        color1 = color1.split(",");   
        
        $(this).animate({
          'left': '230px',
          'top': '50px'
        },{
        'duration': 100
      });
     
        //10進数を16進数に変換して連結
        var color = "#"
          +("0" + parseInt(color1[0]).toString(16)).slice(-2)
          +("0" + parseInt(color1[1]).toString(16)).slice(-2)
          +("0" + parseInt(color1[2]).toString(16)).slice(-2);
        
        pic1f = 1;
        c1buf = color1;
      
      $(".circle.answer").css( 'background-color',color);
    }else{
         var color2 = $(this).css("background-color");
      
        //背景色の余計な文字列削除
        color2 = color2.replace("rgb(","");
        color2 = color2.replace(")","");
        //文字列分割
        color2 = color2.split(",");   
      
      var color1 = c1buf;

        //混色
      var cAns = [];
      cAns[0] = Math.floor((parseInt(color1[0])+parseInt(color2[0]))/2);
      cAns[1] = Math.floor((parseInt(color1[1])+parseInt(color2[1]))/2);
      cAns[2] = Math.floor((parseInt(color1[2])+parseInt(color2[2]))/2);

      pic1f = 0;
      
      $(this).animate({
          'left': '230px',
          'top': '50px'
        },{
        'duration': 100
      });
      
      colbuf=cAns;
      
      cAns = "#"
          +("0" + parseInt(cAns[0]).toString(16)).slice(-2)
          +("0" + parseInt(cAns[1]).toString(16)).slice(-2)
          +("0" + parseInt(cAns[2]).toString(16)).slice(-2);
      $(".circle.answer").css( 'background-color',cAns);
      
       $(".circle.answer").css( "visibility","visible");

      
      /*評価*/
      judge(ritCo,colbuf,Lv);
      
    }
   });
}

function judge(ritCo,ansCo,level){ 
  var errors = 0;
      //誤差の和を出す
      errors = Math.abs(parseInt(ritCo[0]) - parseInt(ansCo[0]))
        + Math.abs(parseInt(ritCo[1]) - parseInt(ansCo[1]))
        + Math.abs(parseInt(ritCo[2]) - parseInt(ansCo[2]));
      console.log("errors "+ errors);
  
  var border;
  if(level == 1) border = 100;
  if(level == 2) border = 60;
  if(level == 3) border = 30;
  
  console.log("border "+ border);
  
      if(errors>=0 && errors <= 10){
        setTimeout("Good();",1300);
      }else if(errors>=11 && errors <= border){
        setTimeout("Better();",1300);
      }else{
        setTimeout("Bad();",1300);
      }
    
  return 1;
}

function Good(){
  alert("Good");
  location.reload(true);
}

function Better(){
  alert("Better");
  location.reload(true);
}

function Bad(){
  alert("Bad");
  location.reload(true);
}