//Canvas Pie
//Author: Owain Lewis, modified by Jess
//Build simple HTML5 Pie Chart. 

//Module Pattern
var CanvasChart = (function(){
    var startX = 360/2;
    var startY = 160;
    var py= {};
    var Colors = [];
    var Data;
    var img = new Image();
	img.src = 'line_bg.jpg';
    py.setColors = function(data){
        Colors = data;
    };
    
    py.makeColors = function(length){
        for (i=0;i<length;i++){
            var col = 'rgb(' + Math.floor(Math.random()*255) + ',' + Math.floor(Math.random()*255) + ',' + Math.floor(Math.random()*255) + ')'
            Colors.push(col);
        } 
    };
    
    py.getTotal = function(data){
        Data = data || [];
        if (Colors.length === 0)
            py.makeColors(Data.length);
        var Total = 0;
        for (var i = 0; i < Data.length; i++) {
            Total += (typeof Data[i] == 'number') ? Data[i] : 0;
        }
        return Total;
    };
    
     py.plotData = function(data) {
        var last = 0;
        var theTotal = py.getTotal(data);
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");
		
		for (var i = 0; i < Data.length; i++) {
			context.fillStyle = Colors[i];
			context.beginPath();
            context.moveTo(startX,startY);
            context.arc(startX,startY,startY,last,last+
              (Math.PI*2*(Data[i]/theTotal)),false);
            context.lineTo(startX,startY);
            context.fill();
			context.lineWidth = 8;
			context.strokeStyle = context.createPattern(img, 'repeat');
			context.stroke();
            last += Math.PI*2*(Data[i]/theTotal);
            
            context.fillStyle = '#999163';
			context.font = "bold 18px Ubuntu";
			context.save();
			context.rotate(Math.PI/-10);
			context.fillText("CMS", -15, 213);
			context.restore();
			
			context.save();
			context.rotate(Math.PI/-8);
			context.fillText("Integration", -32, 231);
			context.restore();
    	
    		context.save();
    		context.rotate(Math.PI/4.2);
			context.fillText('Javascript', 100, 2);
    		context.restore();
        	
        	context.save();
			context.rotate(Math.PI/-3);
			context.fillText('HTML + CSS', -20, 243);
			context.restore();
			
			context.save();
			context.rotate(Math.PI/8);
			context.fillText('Design', 290, 88);
			context.restore();
			
			context.save();
			context.rotate(Math.PI/2.34);
			context.fillText('PHP + mySQL', 228, -129);
			context.restore();
        }
        
		};
    
    return py;
     
})();