/* global noise */





/* 
TODO 
set opacity in RGB instead of SubTile 

*/ 

var canvas;
var ctx;
var stop = false;
var PartType = {
    UP: 0,
    RIGHT: 1,
    DOWN: 2,
    LEFT: 3,
    EMPTY: 4,
    FULL: 5
}; 
var a = 0;
var tiles = []; 
var animspeed = 100;
var animstep = 0;
var step = 0;
var steps = [];
$(function() { 
    
    
    
    a = Math.sqrt(Math.pow(document.body.clientWidth /19, 2)/3); 
	canvas=document.getElementById("bg"); 
	ctx = canvas.getContext("2d");
	canvas.width  = document.body.clientWidth; 
    canvas.height = document.body.clientHeight - Math.floor(document.body.clientHeight%a) ; 
	ctx.width = document.body.clientWidth ; //  - document.body.clientWidth%19;
	ctx.height = document.body.clientHeight - (document.body.clientHeight%a) ; 
	
	//ctx.fillStyle = "rgba(21, 21, 21, 100)";
	ctx.fillStyle = '#00f';
    //drawHexRect(ctx, 100, 10, 10);
    //var t = new Tile(100, 50, 50, ctx);
    //t.full();
    //t.draw();
    
    
    
    
    $('#bg').css('top', ((document.body.clientHeight%a)/2)); // - document.body.clientHeight%a; 
    console.log(ctx.height + " " + a);
    console.log(Math.floor(canvas.height/a));
    for(var x = 0; x<19; x++){
        tiles[x] = [];
        for(var y = 0; y<Math.floor(canvas.height/a); y++){
            tiles[x][y] = new Tile((ctx.width/19)*x, a*y, (ctx.width/19));
            //tiles[k][i].draw();
        }
    }
    
    
    console.log(ctx.height + " " + ctx.width + " " + canvas.height + " " + canvas.width + " " + window.innerWidth);
    main();
});

var noiseStep = 10; 
var noiseStepIndex = 0; 

function hsvToRgb(h, s, v) { 
    var r, g, b;

    var i = Math.floor(h * 6);
    var f = h * 6 - i;
    var p = v * (1 - s);
    var q = v * (1 - f * s);
    var t = v * (1 - (1 - f) * s);

    switch (i % 6) {
        case 0: r = v, g = t, b = p; break;
        case 1: r = q, g = v, b = p; break;
        case 2: r = p, g = v, b = t; break;
        case 3: r = p, g = q, b = v; break;
        case 4: r = t, g = p, b = v; break;
        case 5: r = v, g = p, b = q; break;
    }
    
    return new RGB(r * 255, g * 255, b * 255 ); 
}
 
var perlinTime = 0; 

var perlinResolution = 0.1 ; 
 
noise.seed(Math.random()); 

function updateNoise(){
    
     
    var noiseWidth = (tiles.length*2); 
    var noiseHeight = (tiles[0].length*2); 
    
    var noiseMap = new Array(noiseWidth); 
     
    for(var x=0;x<(noiseWidth);x++) { 
        noiseMap[x] = new Array(noiseHeight); 
        for(var y=0;y<(noiseHeight);y++) { 
            var color = 0.4 + (Math.abs(((noise.perlin3(x/noiseWidth/perlinResolution , y/noiseHeight/perlinResolution , perlinTime/2 ) ) ) )) * 0.5 ; 
            noiseMap[x][y] = hsvToRgb( color , 0.8 , 0.8 ); 
        }  
    } 
     
    for(var x=0;x<tiles.length;x++){
        for(var y=0;y<tiles[0].length;y++){
            tiles[x][y].up.color = noiseMap[2*x][2*y].mix(noiseMap[(2*x)+1][2*y]); 
            
            tiles[x][y].left.color = noiseMap[2*x][2*y].mix(noiseMap[(2*x)][(2*y)+1]); 
            
            tiles[x][y].right.color = noiseMap[(2*x)+1][2*y].mix(noiseMap[(2*x)+1][(2*y)+1]); 
            
            tiles[x][y].down.color = noiseMap[2*x][(2*y)+1].mix(noiseMap[(2*x)+1][(2*y)+1]); 
        } 
    } 
      
    perlinTime += 0.01;  
} 

function main(){
    
    updateNoise(); 
    
    //if(animstep == animspeed){
    //    if(step<steps.length){
    //        steps[step]();
    //        step++;
    //    }else{
    //        step = 0;
    //        steps[step]();
    //    }
    //    animstep = 0;
    //}else{
    //    animstep++;
    //}
    
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for(var k = 0; k<Math.floor(canvas.height/a); k++){
        for(var i = 0; i<19; i++){
            //tiles[k][i] = new Tile((ctx.width/19), (ctx.width/19)*i, a*k, ctx);
            tiles[i][k].draw();
        }
    }
    if(stop==true){
		console.log("ended");
	}else{
		requestAnimFrame(main);
	}

} 

var Vector2 = function(x, y){
    this.x = x; 
    this.y = y; 
} 

var RGB = function(r, g, b){
    var self = this; 
    this.r = r; 
    this.g = g; 
    this.b = b; 
    
    this.mix = function(other){
        return new RGB((this.r+other.r)/2, (this.g+other.g)/2, (this.b+other.b)/2);
    } 
      
} 
 
var TileChange = function(x, y, tileType, newColor){
    var self = this; 
    this.x = x; 
    this.y = y; 
    this.tileType = tileType; 
    this.newColor = newColor; 
}
 
var AnimationStep = function(animation, length){  
    var self = this; 
    this.animation = animation; 
    this.length = length || animation.interval; 
    this.tileChanges = new Array(); 
     
    this.play = function() { 
        this.newTiles.forEach(function(tileChange){ 
            tiles[tileChange.x][tileChange].subTiles[tileChange.tileType].color = tileChange.color; 
        }); 
    } 
    
    this.addTileChange = function(tileChange){
        this.tileChanges.push(tileChange); 
    } 
    
} 
 
var Animation = function(repeat, interval){
    var self = this; 
    this.steps = new Array(); 
    this.interval = interval || 100; 
    this.repeat = repeat || false; 
    
    this.addStep = function(animationStep){
        this.steps.push(animationStep); 
    } 
    
    this.play = function(){
        var stepIndex = 0; 
        setInterval(function(){ 
            if(this.stepIndex < this.steps.length){
                this.step[++stepIndex].play(); 
            }
            else {
                if(this.repeat){
                    self.play(); 
                }
            }
        }, this.interval); 
    }
} 
 
var SubTile = function(tile, type, color, opacity){
    var self = this; 
    this.color = color || new RGB(0, 0, 0); 
    this.opacity = opacity || 1; 
    this.tile = parent; 
    
    this.getVertices = null; 
} 
 
var SubTileUp = function(tile, color, opacity) { 
    SubTile.call(this, tile, PartType.UP, color, opacity); 
    
    this.getVertices = function(startX, startY, width){
        var r = new Array(3); 
        
        r[0] = new Vector2(startX, startY); 
        r[1] = new Vector2(startX+width, startY); 
        r[2] = new Vector2(startX+(width/2), startY+(this.tile.a/2)); 
        
        return r; 
    } 
} 

var SubTileDown = function(tile, color, opacity) { 
    SubTile.call(this, tile, PartType.DOWN, color, opacity); 
    
    this.getVertices = function(startX, startY, width){
        var r = new Array(3); 
        
        r[0] = new Vector2(startX+width, startY+this.tile.a); 
        r[1] = new Vector2(startX, startY+this.tile.a); 
        r[2] = new Vector2(startX+(width/2), startY+(this.tile.a/2)); 
        
        return r; 
    } 
}



var SubTileRight = function(tile, color, opacity) { 
    SubTile.call(this, tile, PartType.RIGHT, color, opacity); 
    
    this.getVertices = function(startX, startY, width){
        var r = new Array(3); 
        
        r[0] = new Vector2(startX+width, startY); 
        r[1] = new Vector2(startX+width, startY+this.tile.a); 
        r[2] = new Vector2(startX+(width/2), startY+(this.tile.a/2)); 
        
        return r; 
    } 
}

var SubTileLeft = function(type, color, opacity) { 
    SubTile.call(this, type, PartType.LEFT, color, opacity); 
    
    this.getVertices = function(startX, startY, width){
        var r = new Array(3); 
        
        r[0] = new Vector2(startX, startY+this.tile.a); 
        r[1] = new Vector2(startX, startY); 
        r[2] = new Vector2(startX+(width/2), startY+(this.tile.a/2)); 
        
        return r; 
    } 
}

var Tile = function(startX, startY, width){
    this.up = new SubTileUp(this); 
    this.down = new SubTileDown(this);
    this.left = new SubTileLeft(this);
    this.right = new SubTileRight(this);
    
    this.subTiles = [this.up, this.right, this.down, this.left]; 
     
    this.width = width;
    this.startX = startX;
    this.startY = startY;
    
    this.a = Math.sqrt(Math.pow(width, 2)/3); 
     
    this.draw = function(){
        for(var n=0;n<4;n++){
            var currentSubTile = this.subTiles[n]; 
            var vertices = currentSubTile.getVertices(this.startX, this.startY, this.width); 
             
            ctx.beginPath();
            ctx.moveTo(vertices[0].x, vertices[0].y ); 
            ctx.lineTo(vertices[1].x, vertices[1].y ); 
            ctx.lineTo(vertices[2].x, vertices[2].y ); 
            ctx.lineTo(vertices[0].x, vertices[0].y ); 
            ctx.closePath(); 
            
            ctx.fillStyle = "rgba( "+Math.floor(currentSubTile.color.r)+", "+Math.floor(currentSubTile.color.g)+", "+Math.floor(currentSubTile.color.b)+", "+ currentSubTile.opacity+")"; 
            ctx.fill(); 
            
            ctx.strokeStyle = "#ffffff"; 
            ctx.lineWidth = 0.5; 
            ctx.stroke(); 
        } 
    }
}



var requestAnimFrame = (function(){
    return window.requestAnimationFrame     ||
        window.webkitRequestAnimationFrame  ||
        window.mozRequestAnimationFrame     ||
        window.oRequestAnimationFrame       ||
        window.msRequestAnimationFrame      ||
        function(callback){
        window.setTimeout(callback, 1000 / 60);
    };
})();