//+ Jonas Raoni Soares Silva
//@ http://jsfromhell.com [v1.0]

String.prototype.repeat = function(l){
	return new Array(l+1).join(this);
};

//firebugx
if (!window.console || !console.firebug)
{
    var names = ["log", "debug", "info", "warn", "error", "assert", "dir", "dirxml",
    "group", "groupEnd", "time", "timeEnd", "count", "trace", "profile", "profileEnd"];

    window.console = {};
    for (var i = 0; i < names.length; ++i)
        window.console[names[i]] = function() {}
}


$(function () {

	$('#svg-box').svg({onLoad:draw});
	
});

var sin_last_x, sin_last_y, cos_last_y, cos_last_y, tan_last_y, tan_last_y;

function draw (svg) {
	
	//going for a sin wave graph
	
	//setup
	window.svg = svg;
	
	window.ww = $(window).width();
	window.wh = $(window).height();
	
	$('#svg-box').css({width:ww,height:wh});
	
	//music
	$('#soundtrack').jmp3({showdownload:'false',autoplay:'true',showfilename:'false',repeat:'false'});
	
	//initialize all globals
	window.circle_cx = ww/2 - 50; //xpos circle
	window.circle_cy = wh/2; //ypos circle
	window.circle_rad = 50;
	window.line_length = 1;
	window.angle = 0;
	window.$sin_y = $('#sin-y');
	window.$cos_y = $('#cos-y');
	window.$tan_y = $('#tan-y');
	window.$angle = $('#angle');
	window.$radius = $('#radius');
	window.gray = svg.group({stroke:'#ebebeb',strokeWidth:'1',fill:'none'});
	window.black = svg.group({stroke:'black',strokeWidth:'1',fill:'none'});
	window.red = svg.group({stroke:'red',strokeWidth:'1',fill:'none'});
	window.green = svg.group({stroke:'green',strokeWidth:'1',fill:'none'});
	window.blue = svg.group({stroke:'blue',strokeWidth:'1',fill:'none'});
	window.purple = svg.group({stroke:'purple',strokeWidth:'1',fill:'none'});
	window.orange = svg.group({stroke:'orange',strokeWidth:'1',fill:'none'});
	window.greenyellow = svg.group({stroke:'greenyellow',strokeWidth:'1',fill:'none'});
	
	
	//draw the grid
	grid();
	
	//draw the axis
	axis();
	
	//draw the circle we're going to trace
	circle();

	//do the animation
	trig();
	
	
}

function grid () {

	//make sure grid is based around a centered crosshair
	var startx = ww/2%10;
	var starty = wh/2%10;

	for (var x = startx; x < ww; x+=10) {
		svg.line(gray, x, 0, x, wh);
	}
	
	for (var y = starty; y < wh; y+=10) {
		svg.line(gray, 0, y, ww, y);
	}
}

function axis () {

	svg.line(black, ww/2, 0, ww/2, wh);
	svg.line(black, 0, wh/2, ww, wh/2);

}


function circle () {

	svg.circle(green, circle_cx, circle_cy, circle_rad);
	
	//update data
	$radius.html(circle_rad);

}

function trig () {

	var circle_x, circle_y, x, y;

	//draw the line showing the position of y on the circle, given x (the radians)
	if (window.circle_line) svg.remove(window.circle_line);

	circle_x = circle_cx + Math.cos(to_radians(angle)) * circle_rad;	//cos a = adj/hyp
	circle_y = circle_cy + Math.sin(to_radians(angle)) * circle_rad;	//sin a = opp/hyp
	window.circle_line = svg.line(red, circle_cx, circle_cy, circle_x, circle_y);
	
	//draw the line from the point on the circumference of the circle over to the positive x quadrants to help illustrate how points on circle become graphed points
	if (window.sin_transpose_line) svg.remove(window.sin_transpose_line);
	if (window.cos_transpose_line) svg.remove(window.cos_transpose_line);
	if (window.tan_transpose_line) svg.remove(window.tan_transpose_line);

	//x is just the ticker and it really doesn't matter what the increment is, so we just use angle.
	x = ww/2 + angle*-1;
	
	//sin 
	y = wh/2 - Math.sin(to_radians(angle)) * circle_rad;
	if (!window.sin_last_x) {
		sin_last_x = x;
		sin_last_y = y;
	}
	window.sin_transpose_line = svg.line(blue, circle_x, circle_y, x, y); //transpose line
	svg.line(purple, sin_last_x, sin_last_y, x, y);  //sin line
	sin_last_x = x;
	sin_last_y = y;
	$sin_y.html((y-wh/2)*-1); //window love
	
	//cos transpose
	y = wh/2 - Math.cos(to_radians(angle)) * circle_rad;
	if (!window.cos_last_x) {
		cos_last_x = x;
		cos_last_y = y;
	}
	window.cos_transpose_line = svg.line(blue, circle_x, circle_y, x, y); //transpose line
	svg.line(orange, cos_last_x, cos_last_y, x, y);  //cos line
	cos_last_x = x;
	cos_last_y = y;
	$cos_y.html((y-wh/2)*-1); //window love
	
	//tan transpose
	if ((y-wh/2) !== 0) {
		y = wh/2 - Math.tan(to_radians(angle)) * circle_rad * -1;
		if (!(window.tan_last_x)) {
			tan_last_x = x;
			tan_last_y = y;
		}
		window.tan_transpose_line = svg.line(blue, circle_x, circle_y, x, y); //transpose line
		svg.line(greenyellow, tan_last_x, tan_last_y, x, y);  //tan line
		tan_last_x = x;
		tan_last_y = y;
		$tan_y.html((y-wh/2)*-1); //window love
	} else {
		tan_last_x = null;
		tan_last_y = null;
		window.tan_transpose_line = null;
	}
	
	
	//give some window love (update data section)
	$angle.html(angle*-1);
	
	angle--;
	
	//stop once we get to the right edge
	if (x < ww) { setTimeout(trig, 50); return; }
	
	alert('~ fin ~');

}

function to_radians (x) {
	return x * Math.PI/180;
}