function Rect() {
    this.initialize.apply(this, arguments);
}

Rect.prototype = {
  initialize: function(x, y) {
    this.x = x;
    this.y = y;
    this.key = this.method[Math.floor(Math.random()*this.method.length)];
    switch(this.key){
      case "triangle": this.a = (Math.random()*180); break;
      case "stroke": this.a = 2 * Math.PI * (Math.random()*360/360); break;
      default: return null;
    }
  },
  
  h : 0, //height
  a : 0, //angle
  t : 1, //transparency
  
  method:['stroke','stroke','triangle','square','circle'],
  
  rotate:function(ctx){
    ctx.translate(this.x, this.y);
    ctx.rotate(this.a * Math.PI / 180);
    ctx.translate(-this.x, -this.y);
  },
  
  triangle:function(ctx){
    var z = this.h / Math.sin(30 * (Math.PI/180));
    ctx.save();
    this.rotate(ctx);
    ctx.strokeStyle = 'rgba(0,255,204,'+this.t.toFixed(1)+')';
    ctx.beginPath();
    ctx.moveTo(this.x-z,this.y+this.h);//左下点
    ctx.lineTo(this.x,this.y-this.h*2);//上点
    ctx.lineTo(this.x+z,this.y+this.h);//右下点
    ctx.closePath();
    ctx.stroke();
    ctx.restore();
  },
  
  circle:function(ctx){
    ctx.save();
    ctx.strokeStyle = 'rgba(0,255,204,'+this.t.toFixed(1)+')';
    ctx.beginPath();
    ctx.arc(this.x,this.y,this.h,0,Math.PI*2,true);
    ctx.stroke();
    ctx.restore();
  },
  
  square:function(ctx){
    ctx.save();
    ctx.strokeStyle = 'rgba(0,255,204,'+this.t.toFixed(1)+')';
    this.rotate(ctx);
    ctx.strokeRect(this.x-this.h,this.y-this.h,this.h*2,this.h*2);
    ctx.restore();
  },
  
  stroke:function(ctx){
    ctx.save();
    c = ctx.canvas.width * Math.cos(this.a);
    s = ctx.canvas.width * Math.sin(this.a);
    ctx.strokeStyle = 'rgba(0,255,204,'+this.t.toFixed(1)+')';
    ctx.beginPath();
    ctx.moveTo(this.x+c, this.y-s);
    ctx.lineTo(this.x-c, this.y+s);
    ctx.stroke();
    ctx.restore();
  },
  
  update: function(){
    this.h += 15;
    if(this.key=="square") this.a += 5;
    if(this.t>0) this.t -= 0.03;
    else this.t=0;
    return this.h;
  },
  
  start: function(ctx){
    eval('this.'+this.key+'(ctx)');
  }
};



var Ano = function(){
  var ano = {
    
    canvas:null,
  audio:null,
    gain: null,
    context:null,
    array:[],
    active:false,
  tapbox:[],
  
  soundCode:[523,587,659,699,784,880,988,1047],
    
    addEvent:function(obj, type, fn){
      if (obj.addEventListener)
        obj.addEventListener( type, fn, false );
    },
    
    load:function(id){
      this.addEvent(window, 'load', function(event){
        
        ano.canvas = document.getElementById(id);
      
    ano.calcTapBox();
      
        if (ano.canvas.getContext){
          ano.setSize();
          ano.context = ano.canvas.getContext('2d');
          ano.context.strokeStyle = "#00ffcc";
          ano.context.lineWidth = 3;
          ano.addEvent(ano.canvas,"click",ano.clickhandler);

          window.addEventListener('resize', ano.setSize)
          window.setInterval( ano.onRender, 15);
        }
        
      },this);
    },
    
    onRender:function(){
      ano.context.clearRect(0,0,ano.canvas.width,ano.canvas.height);
      
      if(ano.array.length!==0){
        for (var i = 0 ; i != ano.array.length ; ++i ){
          if(ano.array[i].update()<1000){
            ano.array[i].start(ano.context);
          }else{
            ano.array.splice(i,1);
            return;
          }
        }
      }
    },
    
    setSize:function(){
        ano.canvas.height = window.innerHeight;
        ano.canvas.width = window.innerWidth;
    },
  
  //キー位置算出
  calcTapBox:function(){
    var w = window.innerWidth/4;
    var pos = [0];
    
    for(i=1; i < 4; i++){
      pos.push(Math.round(w*i));
    }
    ano.tapbox = pos;
  },
    
  //クリックでなんかする
    clickhandler:function(event) {
      if (!event) { event = window.event; }
      x = event.layerX;
      y = event.layerY;
    
    var key =  ano.keySearch(x);
    if(y >= (window.innerHeight/2)) key += 4;
    ano.soundPlay(ano.soundCode[key]);
    
      var obj = new Rect(x,y,ano.context,ano.canvas);
    
      ano.array.push(obj);
      ano.active = true;
    },
    
  /**
   * http://ascii.jp/elem/000/000/564/564098/
   * https://www.g200kg.com/jp/docs/webaudio/
   */
  soundPlay:function(freq){
    var sampleRate = 44100;   // 44.1kHz
    //var audio = new Audio();
    const audio = new AudioContext();
    const osc = new OscillatorNode(audio);
    const gain = new GainNode(audio);
    const gainVal = document.getElementById('gain').value;
    
    // if(typeof audio.mozSetup != "function"){
    //   return;
    // }
    
//     audio.mozSetup(1, sampleRate);  // 1ch, 44kHz
    
//     var bufferSize = sampleRate * 0.5;    // 1000ms
//     var data = new Float32Array(bufferSize);
//     var k = 2* Math.PI * freq / sampleRate;
//     for(var i=0; i<data.length; i++){
//       data[i] = Math.sin(k * i);
//     }
//     audio.mozWriteAudio(data);
//     audio.play();
    osc.frequency.value = freq;
    gain.gain.value = parseFloat(gainVal);
    osc.connect(gain).connect(audio.destination);
    osc.start();
    osc.stop(audio.currentTime + 0.5);
  },
  
  //押された場所のX座標チェック
  keySearch:function(x){
    
    for(i=0; i < ano.tapbox.length; i++){
      var next = (i==(ano.tapbox.length-1))? window.innerWidth:ano.tapbox[i+1]; 
      if((x > ano.tapbox[i]) && (x < next))
        return (i);
    }
  }
  
  };
  
  return ano;
};

var anog = new Ano();
anog.load('miku');