/**
 * @author agoessling
 */
 
timeout = 0;
function init(){
	canvas = document.getElementById('pie-canvas');
	
    if (canvas.getContext) {
		var ctx = canvas.getContext('2d');
		var xCenter = canvas.width/2;
		var yCenter = canvas.height/2;
		
		cnvs_pie = new pie(ctx, xCenter, yCenter, 200, xCenter-45, yCenter-45, 400, 0);
		cnvs_pie.addSlice('work', './woops.html', 1.0/3.0, 'rgba(255,178,0,1)', 'rgba(217,151,0,1)', 'rgba(127,89,0,1)');
		cnvs_pie.addSlice('school', './woops.html', 1.0/3.0, 'rgba(11,119,217,1)', 'rgba(6,70,128,1)', 'rgba(2,21,38,1)');
		cnvs_pie.addSlice('me', './woops.html', 1.0/3.0, 'rgba(242,24,0,1)', 'rgba(153,15,0,1)', 'rgba(64,6,0,1)');
		cnvs_pie.draw();
		cnvs_pie.placeTitles();
	}
	
	canvas.addEventListener('mousemove', ev_mousemove, false);
	canvas.addEventListener('click', ev_click, false);
	
	window.onresize = function(){
		cnvs_pie.placeTitles();
	};
}

function ev_mousemove(evt){
	var canvasX = canvas.offsetLeft;
	var canvasY = canvas.offsetTop;
	
	var currX = evt.pageX - canvasX;
	var currY = evt.pageY - canvasY;
	
	cnvs_pie.mouseMove(currX,currY);
}

function ev_click(evt){
	cnvs_pie.click();
}


function pie(ctx, x, y, radius, xShdw, yShdw, rShdw, thetaStart){
	this.ctx = ctx;
	this.ctx.strokeStyle = "rgba(0,0,0,0.3)";
    this.ctx.lineWidth = 3;
	this.x = x;
	this.y = y;
	this.r = radius;
	this.xShdw = xShdw;
	this.yShdw = yShdw;
	this.rShdw = rShdw;
	this.thetaStart = thetaStart;
	this.curTheta = thetaStart;
	this.slices = new Array();
	this.activeSlice = -1;
	this.animCount = 0;
	this.steps = 6;
}

function slice(parent, title, sTheta, eTheta, url, hColor, Color, lColor){
	this.parent = parent;
	this.ctx = parent.ctx;
	this.x = parent.x;
	this.y = parent.y;
	this.r = parent.r;
	this.sTheta = sTheta;
	this.eTheta = eTheta;
	this.url = url;
	this.title = document.getElementById(title);
	
	this.fullGrad = parent.ctx.createRadialGradient(parent.xShdw,parent.yShdw,1,parent.xShdw,parent.yShdw,parent.rShdw);
	this.fullGrad.addColorStop(0, hColor);
	this.fullGrad.addColorStop(0.5, Color);
	this.fullGrad.addColorStop(1, lColor);
	
	this.halfGrad = parent.ctx.createRadialGradient(parent.xShdw,parent.yShdw,1,parent.xShdw,parent.yShdw,parent.rShdw);
	this.halfGrad.addColorStop(0, hColor.substring(0,hColor.length-2)+'0.3)');
	this.halfGrad.addColorStop(0.5, Color.substring(0,Color.length-2)+'0.3)');
	this.halfGrad.addColorStop(1, lColor.substring(0,lColor.length-2)+'0.3)');
	
	this.grad = this.fullGrad;
}

pie.prototype.addSlice = function(title, url, percent, hColor, Color, lColor) {
	end = this.curTheta + (2*Math.PI)*percent;
	this.slices.push(new slice(this, title, this.curTheta, end, url, hColor, Color, lColor));
	this.curTheta = end;
};

pie.prototype.placeTitles = function(){
	var xCent = canvas.offsetLeft+canvas.width/2;
	var yCent = canvas.offsetTop+canvas.height/2;
	
	for(i=0;i<this.slices.length;i++){
		var extraNodes = this.slices[i].title.getElementsByClassName('extra')[0].childNodes;
		
		for (j = 0; j < extraNodes.length; j++) {
			if (extraNodes[j].style) {
				extraNodes[j].style.display = 'none';
			}
		}
		
		var hTheta = (this.slices[i].sTheta+this.slices[i].eTheta)/2;
		var height = this.slices[i].title.offsetHeight;
		var width = this.slices[i].title.offsetWidth;
		
		this.slices[i].title.style.top = (yCent+125*Math.sin(hTheta))-height/2+'px';
		this.slices[i].title.style.left = (xCent+125*Math.cos(hTheta))-width/2+'px';
	}
};

pie.prototype.draw = function() {
	this.ctx.clearRect(0,0,canvas.width,canvas.height);
	for(i = 0; i < this.slices.length; i++){
		this.ctx.fillStyle = this.slices[i].grad;
				
		this.ctx.beginPath();
		this.ctx.arc(this.slices[i].x, this.slices[i].y, this.slices[i].r, this.slices[i].sTheta, this.slices[i].eTheta, false);
		this.ctx.lineTo(this.slices[i].x,this.slices[i].y);
		this.ctx.closePath();
		this.ctx.fill();
		this.ctx.stroke();
	}
};

pie.prototype.click = function(){
    if(this.activeSlice != -1){
        window.location = this.slices[this.activeSlice].url;
    }
};

pie.prototype.mouseMove = function(x,y){
	var cX = x-this.x;
	var cY = y-this.y;
	var theta = Math.atan2(-cY,-cX)+Math.PI;		//Backwards to account for weird
	//var r2 = cX*cX+cY*cY;							//way canvas does arcs
	
	var hoverSlice = -1;
	
	for(i=0;i<this.slices.length;i++){
		//Compute R^2 for each slice
		r2 = (x-this.slices[i].x)*(x-this.slices[i].x)
			+(y-this.slices[i].y)*(y-this.slices[i].y);
		if(r2<this.slices[i].r*this.slices[i].r){
			if((theta>this.slices[i].sTheta)&&(theta<=this.slices[i].eTheta)){
				hoverSlice = i;
				break;
			}
		}
	}
	
	if(hoverSlice != this.activeSlice){
		if(hoverSlice == -1){
			this.mouseLeave();
		}
		else{
			this.mouseEnter(hoverSlice);
		}
	}
		
};

pie.prototype.mouseLeave = function(){
	clearTimeout(timeout);
	this.slices[this.activeSlice].title.getElementsByClassName('extra')[0].style.padding='1px';
	this.activeSlice = -1;
	
	for(i=0;i<this.slices.length;i++){
		this.slices[i].x = this.x;
		this.slices[i].y = this.y;
		this.slices[i].r = this.r;
		this.slices[i].grad = this.slices[i].fullGrad;
		this.slices[i].title.style.opacity = 1.0;
	}
	
	this.placeTitles();
	this.draw();
};

pie.prototype.mouseEnter = function(slice){
	clearTimeout(timeout);
	if(this.activeSlice >= 0){
		this.slices[this.activeSlice].title.getElementsByClassName('extra')[0].style.padding = '1px';
	}
	this.activeSlice = slice;
	
	for(i=0;i<this.slices.length;i++){
		this.slices[i].x = this.x;
		this.slices[i].y = this.y;
		this.slices[i].r = this.r;
		
		if(this.activeSlice != i){
			this.slices[i].grad = this.slices[i].halfGrad;
			this.slices[i].title.style.opacity = 0.3;
		}
		else{
			this.slices[i].grad = this.slices[i].fullGrad;
			this.slices[i].title.style.opacity = 1.0;
		}
	}
	
	this.placeTitles();
	this.animCount = 0;
	this.animateExpand();
};

stepWidth20 = new Array(1,3,6,6,3,1);
stepWidth30 = new Array(1,4,10,10,4,1);
stepWidth80 = new Array(7,13,20,20,13,7);
stepWidth50 = new Array(4,8,13,13,8,4);

pie.prototype.animateExpand = function(){
	if(this.animCount < this.steps){		
		var hTheta = (this.slices[this.activeSlice].sTheta
				+this.slices[this.activeSlice].eTheta)/2;
		
		this.slices[this.activeSlice].x += Math.cos(hTheta)*stepWidth20[this.animCount];
		this.slices[this.activeSlice].y += Math.sin(hTheta)*stepWidth20[this.animCount];
		this.slices[this.activeSlice].r += stepWidth80[this.animCount];
		
		//Move and Expand Titles		
		var titleLeft = this.slices[this.activeSlice].title.offsetLeft;
		var titleTop = this.slices[this.activeSlice].title.offsetTop;
		
		this.slices[this.activeSlice].title.style.left = (Math.cos(hTheta)*stepWidth50[this.animCount]+titleLeft)+'px';
		this.slices[this.activeSlice].title.style.top = (Math.sin(hTheta)*stepWidth50[this.animCount]+titleTop)+'px';
		
		this.draw();
		
		this.animCount++;
        
		timeout = setTimeout(function(){cnvs_pie.animateExpand();},5);
	}
	else{
		this.animCount = 0;
		this.expandTitles();
	}
};

pie.prototype.expandTitles = function(){
	var title = this.slices[this.activeSlice].title;
	var nodes = title.getElementsByClassName('extra')[0].childNodes;
	
	this.slices[this.activeSlice].title.getElementsByClassName('extra')[0].style.padding = "5px";
	
	var prevHeight = title.offsetHeight;
	
	if(this.animCount < nodes.length){
		if(nodes[this.animCount].style){
			nodes[this.animCount].style.display = 'block';
			
			var height = title.offsetHeight;
			var top = title.offsetTop;
			
			title.style.top = (top-(height-prevHeight)/2)+'px';
						
			this.animCount++;
			timeout = setTimeout(function(){cnvs_pie.expandTitles();},1);
		}
		else{
			this.animCount++;
			timeout = setTimeout(function(){cnvs_pie.expandTitles();},0);
		}
	}
	else{
		this.animCount = 0;
	}
};