//Canvas object
var canvas, ctx;

//line color
var waves = ["rgb(255, 126, 0)",
             "rgb(0, 255, 246)",
             "rgb(255, 234, 0)",
             "rgb(255, 126, 0)",
             "rgb(0, 255, 246)",
             "rgb(255, 234, 0)"];

function load() {
    canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");

    var myWidth = 0, myHeight = 0;
    if( typeof( window.innerWidth ) == 'number' ) {
      //Non-IE
      myWidth = window.innerWidth;
      myHeight = window.innerHeight;
    } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
      //IE 6+ in 'standards compliant mode'
      myWidth = document.documentElement.clientWidth;
      myHeight = document.documentElement.clientHeight;
    } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
      //IE 4 compatible
      myWidth = document.body.clientWidth;
      myHeight = document.body.clientHeight;
    }
	canvas.width = myWidth;
	canvas.height = myHeight;
	
	setInterval("draw()", 40);
}

var _amplitude = 200;
var _wavelength = 900;
var _wspace = 1;
var _wcount = 0;

function draw() {
	canvas.width = canvas.width;
	ctx.clearRect(0,0,canvas.width,canvas.height);

	
	var _winc = (2*Math.PI * (canvas.width/_wavelength)) / (canvas.width);

	for(var j = waves.length - 1; j >= 0; j--) {
		ctx.beginPath();
		ctx.moveTo(0, 500);		
		ctx.strokeStyle = (waves[j]);
	
		for(var i=0; i <= canvas.width; i++){
			_wrads = (_wcount - i) * _winc;
	
			//_newamp = _amplitude * (1-Math.abs((i/canvas.width)-0.5)*2);
			_newamp =  _amplitude * (i - (j * 100))/canvas.width;
			_tdy = Math.sin(_wrads) * _newamp + (20 + j);
			
			ctx.lineTo(i, (canvas.height/2) + _tdy);	
		}
		
		ctx.stroke();		
		ctx.closePath();
		
		}
	
	_wcount+= _wspace;

	//ctx.restore();
}


window.onresize = function (evt) {
    var myWidth = 0, myHeight = 0;
    if( typeof( window.innerWidth ) == 'number' ) {
      //Non-IE
      myWidth = window.innerWidth;
      myHeight = window.innerHeight;
    } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
      //IE 6+ in 'standards compliant mode'
      myWidth = document.documentElement.clientWidth;
      myHeight = document.documentElement.clientHeight;
    } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
      //IE 4 compatible
      myWidth = document.body.clientWidth;
      myHeight = document.body.clientHeight;
    }
	canvas.width = myWidth;
	canvas.height = myHeight;

	draw();
}   



/*
//var amp = 10;
var yaxis = 300;
var xaxis = 0;
var freq = 0.3;		
var ang;
var start = 0;

var up = true;
*/

/*
function draw() {
	ang = 0;
	var amp = 20 ;
	canvas.width = canvas.width;
	
	ctx.beginPath();
	ctx.moveTo(xaxis, yaxis);	
	ctx.strokeStyle = (waves[1]);

	for(var i=start; i <= canvas.width; i++){
		ang += (Math.PI/180 * 2) * freq ; 
		ctx.lineTo(i, yaxis - (Math.sin(ang) * amp ));
		amp += 0.1;		 
	}

	ctx.stroke();

	if(start <= canvas.width * (-1)){
		start = 0;
	} 	
	start -= 1;


	document.body.innerText = amp;

	
	/*
	if(up){
		if(amp <= 200){
			amp += 0.1;
		} else {
			up = false;
		}	
	} else {
		if(amp > 1){
			amp -= 0.1;
		} else {
			up = true;
		}
	}	
	*/		

	
	/*
	// old way
	canvas.width = canvas.width;
	
	for(var j = waves.length - 1; j >= 0; j--) {
		
		var offset = i + j * Math.PI * 32;
		ctx.strokeStyle = (waves[j]);
		
		var randomLeft = Math.abs(Math.pow( Math.sin(offset/1000), 2 )) * 600;
		var randomRight = Math.abs(Math.pow( Math.sin((offset/1000) + 10), 2 )) * 400;
		var randomLeftConstraint = Math.abs(Math.pow( Math.sin((offset/900)+2), 2)) * 400;
		var randomRightConstraint = Math.abs(Math.pow( Math.sin((offset/900)+1), 2)) * 400;
		
		ctx.beginPath();
		ctx.moveTo(0, randomLeft +200);
		ctx.bezierCurveTo(canvas.width / 3, randomLeftConstraint, canvas.width / 3 * 2, randomRightConstraint, canvas.width, randomRight + 100);
		
		ctx.stroke(); 
	
	}

	i++;
	*/
//}