// custom raphael functions

Raphael.fn.drawProgressChart = function (x, y, w, h,upper,actual,predicted,progress) {
	
	// vars
    var color = "#000";
	var red = '#DB0000';
	var amber = '#FB9600';
	var green = '#A2BF2F';			
    var path = [];
    var wv = parseInt(upper/10);
    var columnWidth = w / wv;
	var color1 = (actual>110?red:(actual>90?amber:green));
	var color2 = (predicted>110?red:(predicted>90?amber:green));
    
    
	// flow
    for (var i = 1; i < wv; i++) {
        path = path.concat(["M", x + i * columnWidth, y, "L", x + i * columnWidth, y + h]);
    }
    
    this.path(path.join(",")).attr({"stroke": color,'stroke-opacity': 0.2});
    
    // draw the base line
    var start = x-2;
    var pos = ((w/upper)*100)+x;
    var height = h + y;
    
    this.path("M"+start+" "+y+"L"+start+" "+height).attr({"stroke": color, "stroke-width": 3}); 
    
    // draw the hundred line
    this.path("M"+pos+" "+y+"L"+pos+" "+height).attr({"stroke": color, "stroke-width": 3}); 
	
	// add the labels
	this.text(30, 60, "Actual");
	this.text(30, 97, "Predicted");
		
	// draw chart
	var chart = this.g.hbarchart(x, y, w, h, [[actual], [predicted]], {
		stacked: false,
		colors: [color1,color2],
		to: upper
	}).hover(
		function(){
			this.flag = progress.g.label(this.bar.x, this.bar.y, this.bar.value+"%" || "0").insertBefore(this);
			this.target = progress.g.blob(pos,y,"Target");
		}, 
		function(){
			this.flag.animate({
				opacity: 0
			}, 300, function(){
				this.remove();
			});
			this.target.animate({
				opacity: 0
			}, 300, function(){
				this.remove();
			});
		}
	);
	return chart;
};