//+ 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});
	
});

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});
	
	window.line_length = 1;
	window.angle = 0;
	window.last_x2 = ww/2;
	window.last_y1 = wh/2;
	window.$y = $('#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'});
	
	//music
	$('#soundtrack').jmp3({showdownload:'false',autoplay:'true',showfilename:'false',repeat:'false'});
	
	//draw the grid
	grid();
	
	//draw the axis
	axis();
	
	//draw the circle we're going to trace
	circle();

	//do the animation
	sin();
	
	
}

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 () {

	window.circle_cx = ww/2 - 50; //xpos circle
	window.circle_cy = wh/2; //ypos circle
	window.circle_rad = 50;
	svg.circle(green, circle_cx, circle_cy, circle_rad);
	
	//update data
	$radius.html(circle_rad);

}

function sin () {

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

	var x1 = circle_cx + Math.cos(to_radians(angle)) * circle_rad;	//cos x = adj/hyp
	var y1 = circle_cy + Math.sin(to_radians(angle)) * circle_rad;	//sin a = opp/hyp

	window.circle_line = svg.line(red, circle_cx, circle_cy, x1, y1);
	
	//draw the line from the point on the circumference of the circle over to the positive x quadrants to help illustrate sin graphing
	if (window.transpose_line) svg.remove(window.transpose_line);

	var x2 = ww/2 + angle*-1;
	//var y2 = wh/2 + Math.abs(to_radians(angle));
	
	window.transpose_line = svg.line(blue, x1, y1, x2, y1);
	
	//draw the sine plot
	svg.line(purple, last_x2, last_y1, x2, y1);
	last_x2 = x2;
	last_y1 = y1;
	
	//give some window love
	$angle.html(angle*-1);
	$y.html(-1*(y1-wh/2));
	
	angle--;
	
	//stop once we get to the right edge
	if (x2 < ww) { setTimeout(sin, 50); return; }
	
	alert('ok, Susan, it\'s over - haha :)');

}

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