window.requestAnimFrame = (function () {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function ( /* function */ callback, /* DOMElement */ element) {
        window.setTimeout(callback, 1000 / 4);
    };
})();

var randWalkX, randWalkY, randWalkXV, randWalkYV, startN;
randWalkX = randWalkY = randWalkXV = randWalkYV = 0;
var startLoc = [0,0];
var canvas, context, mouseDown, size, color, v_color, v_size;
v_color = v_size = 1;
size = 7; //3,7,12
color = new Array(20,20,20);
//black (20,20,20)
//red (150,20,20)
//green (20,120,50)
//blue (20,50,120)
//white (230,230,230)

var colors = [[20,20,20],[150,20,20],[20,120,50],[20,50,120],[230,230,230]];

$('head').append('<meta name="viewport" content="width=device-width, initial-scale=1" />');

Init();
animate();

function Init() {
    canvas = document.getElementById("myCanvas");
    canvas.addEventListener('mousedown', startTracking, false);
    canvas.addEventListener('mouseup', stopTracking, false);
    context = canvas.getContext('2d');
    document.body.appendChild(canvas);
    ResizeF(); 
}

function animate() {
    requestAnimFrame(animate);
    Draw();
}

function Draw() {
    //context.clearRect(0, 0, w, h); 
    
    if (mouseDown) {
        if (startD){
            startN = 0;
            startLoc = [mouseX,mouseY];
            startD = false;
        }
        startN++;
       //var n = parseInt($("select").val());
        switch( parseInt($("select").val()) ){
            case 1: Draw0(); break;
            case 2: Draw1(); break;
            case 3: Draw3(); break;
            case 4: Draw4(); break;
            case 5: Draw2(); break;
            case 6: draw_spiral(startLoc[0], startLoc[1], mouseX, mouseY, startN); break;
            case 7: draw_cloud(); break; 
            default:

        }

        mouseDown = false;
    }

}

function ResizeF() {
    w = window.innerWidth;
    h = window.innerHeight;
    canvas.width = w;
    canvas.height = h;
    scalar = Math.min(w, h);
    DrawBG();
}

function DrawBG() {
    
      context.rect(0, 20, canvas.width, canvas.height-40);

      // create radial gradient
      var grd2 = context.createRadialGradient(0, 0, 10, 238, 50, scalar*1.5);
      // light blue
      var tc1 = [MyRange(0,30),MyRange(0,30),MyRange(0,30)];
      var tc2 = [MyRange(0,30),MyRange(0,30),MyRange(0,30)];
      grd2.addColorStop(0, ColorBuilder(225+tc1[0],225+tc1[1],225+tc1[2],1));
      // dark blue
      grd2.addColorStop(1, ColorBuilder(225+tc2[0],225+tc2[1],225+tc2[2],1));

      context.fillStyle = grd2;
      context.fill();
    
     
}

function Draw3(){
    context.beginPath();
    tt = scalar/400;
    tempR = (Math.random()-.5)*v_size*size*tt+size*tt;
    context.arc(mouseX, mouseY, tempR*10, 0, 2 * Math.PI, false);
    tC = MyRange(0,40)*v_color;
    
     // create radial gradient
      var grd = context.createRadialGradient(mouseX, mouseY, 0, mouseX, mouseY, tempR*10);

      grd.addColorStop(0,ColorBuilder(color[0]-30, color[1]-30, color[2]-30,.1));
    

      grd.addColorStop(1,ColorBuilder(color[0], color[1]+90, color[2]+90,0));
    
    context.fillStyle = grd;
    
    context.closePath();
    context.fill();
}

function Draw2(){

    randWalkX=0; randWalkY=0; randWalkXV=0; randWalkYV=0;
    for(var i=0;i<100;i++){
    
    context.beginPath();
    tt = scalar/400;

    randWalkXV+=Math.random()-.5;
    randWalkYV+=Math.random()-.5;
    
    randWalkX+=randWalkXV;
    randWalkY+=randWalkYV;
        
    context.arc(mouseX+randWalkX, mouseY+randWalkY,.1*tt*size, 0, 2 * Math.PI, false);
        
    tC = MyRange(0,40)*v_color;
    context.fillStyle = ColorBuilder(color[0]+tC, color[1]+tC, color[2]+tC, (1-(i/100))*.6+.2*Math.random());
    context.shadowBlur=6*size*tt;
    context.shadowColor=ColorBuilder(color[0],color[1],color[2],.5);
    context.closePath();
    context.fill();
        
            if ((mouseX+randWalkX<0)||(mouseX+randWalkX>w)||(mouseY+randWalkY>h)||(mouseY+randWalkY<0)){
        randWalkX=0; randWalkY=0; randWalkXV=0; randWalkYV=0;
        i=51;
    }
        
    }

}

function draw_spiral(xc, yc, xm, ym, startN){
    
    tC = MyRange(0,40)*v_color;
    

    
    for (var i=startN-1;i<startN;i+=.05){
    
        x = Math.sin(i)*i*scalar/250;// + rand(-1,1)*i*.005;
        y = Math.cos(i)*i*scalar/250;// + rand(-1,1)*i*.005;       
        context.beginPath();
        context.arc(xc + x + xm/10, yc + y +ym/10, size*scalar/2000, 0, 2 * Math.PI, false);
        context.fillStyle = ColorBuilder(color[0]+tC, color[1]+tC, color[2]+tC, (1-(i/200))*.3+.1*Math.random());
        //context.shadowBlur=3;
        //context.shadowColor="#000000";
        context.closePath();
        context.fill();
        
    }
}

function Draw1(){

    tt = scalar/400;
    tC = MyRange(0,40)*v_color;
    context.beginPath();
      context.moveTo(startLoc[0], startLoc[1]);
      context.lineTo(mouseX, mouseY);
     context.strokeStyle = ColorBuilder(color[0]+tC, color[1]+tC, color[2]+tC, .5+Math.random()*v_color*.45+(1-v_color)*.5);
     context.shadowBlur=3*size*tt;
    context.shadowColor=ColorBuilder(color[0],color[1],color[2],.4);
    context.lineWidth = size*tt/3;
      context.stroke();

}

function Draw0(){
    context.beginPath();
    tt = scalar/400;
    context.arc(mouseX, mouseY, (Math.random()-.5)*v_size*size*tt+size*tt, 0, 2 * Math.PI, false);
    tC = MyRange(0,40)*v_color;
    context.fillStyle = ColorBuilder(color[0]+tC, color[1]+tC, color[2]+tC, .5+Math.random()*v_color*.45+(1-v_color)*.5);
    context.shadowBlur=6*size*tt;
    context.shadowColor=ColorBuilder(color[0],color[1],color[2],.5);
    context.closePath();
    context.fill();
}

function draw_cloud(){
    

    
    for (var i=0;i<600;i++){
    
    xx = rand(-1,1)*scalar/1;
    yy = rand(-1,1)*scalar/2;
        
        context.beginPath();
        tt = scalar/400;
        context.arc(mouseX + xx, mouseY + yy, (Math.random()-.5)*v_size*size*tt+size*tt, 0, 2 * Math.PI, false);
        tC = MyRange(0,40)*v_color;
        context.fillStyle = ColorBuilder(color[0]+tC, color[1]+tC, color[2]+tC, .1*(2*4/(Math.sqrt(xx*xx+yy*yy)))+Math.random()*v_color*.0001);
        context.shadowBlur=0*size*tt;
        context.shadowColor=ColorBuilder(color[0],color[1],color[2],.5);
        context.closePath();
        context.fill();
        
    }
}


function Draw4(){
    context.beginPath();
    tt = scalar/400;
    context.arc(mouseX, mouseY, (Math.random()-.5)*v_size*size*tt+size*tt, 0, 2 * Math.PI, false);
    tC = MyRange(0,40)*v_color;
    context.strokeStyle = ColorBuilder(color[0]+tC, color[1]+tC, color[2]+tC, .5+Math.random()*v_color*.45+(1-v_color)*.5);
    context.shadowBlur=6*size*tt;
    context.shadowColor=ColorBuilder(color[0],color[1],color[2],.5);
    context.closePath();
    context.stroke();
}

////currently using jQuery to check for browser resize
var resizeTimer;
$(window).resize(function () {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(ResizeF, 100);
});

function MyRange(min, max) { //my own random.range function
    return (Math.floor(Math.random() * (max - min + 1)) + min);
}

function startTracking(e){
    //do i need mouseX set here?
    startD = true;
    event.preventDefault();
    canvas.addEventListener('mousemove', getMouseLoc, false);
}

function stopTracking(e){
	canvas.removeEventListener('mousemove', getMouseLoc, false);
}

function getMouseLoc(ev) {
    mouseDown = true;
    mouseX = ev.pageX;
    mouseY = ev.pageY;
}

function ColorBuilder(r, g, b, o) {
    return "rgba(" + r + "," + g + "," + b + "," + o + ")";
}

//so this disables scrolling on ios which is nice...
//but how can i use touch events for drawing now instead?
//i need to research the various touch events
$(document).on('touchmove', function(e) {
    //e.preventDefault();
});

$("#mybtn-b").click(function(){size=12;})
$("#mybtn-m").click(function(){size=7;})
$("#mybtn-s").click(function(){size=3;})

$("#mybtn-bla").click(function(){color=colors[0];})
$("#mybtn-re").click(function(){color=colors[1];})
$("#mybtn-gr").click(function(){color=colors[2];})
$("#mybtn-bl").click(function(){color=colors[3];})
$("#mybtn-wh").click(function(){color=colors[4];})

$("#mybtn-vc").click(function(){
    if (v_color==1){
        v_color=0;
    }else{
        v_color=1;
    }
})
$("#mybtn-vs").click(function(){
    if (v_size==1){
        v_size=0;
    }else{
        v_size=1;
    }
})

function rand(min, max){
    return Math.random() * (max - min) + min;
}