Raphael.fn.drawGrid = function (x, y, w, h, wv, hv, color) {
    color = color || "#000";
    var path = ["M", Math.round(x) + .5, Math.round(y) + .5, "L", Math.round(x + w) + .5, Math.round(y) + .5, Math.round(x + w) + .5, Math.round(y + h) + .5, Math.round(x) + .5, Math.round(y + h) + .5, Math.round(x) + .5, Math.round(y) + .5],
        rowHeight = h / hv,
        columnWidth = w / wv;
    for (var i = 1; i < hv; i++) {
        path = path.concat(["M", Math.round(x) + .5, Math.round(y + i * rowHeight) + .5, "H", Math.round(x + w) + .5]);
    }
    /*for (i = 1; i < wv; i++) {
        path = path.concat(["M", Math.round(x + i * columnWidth) + .5, Math.round(y) + .5, "V", Math.round(y + h) + .5]);
    }*/
    return this.path(path.join(",")).attr({stroke: color});
};

// move model data in html offscreen
$(function () {
    $("#data").css({
        position: "absolute",
        left: "-9999em",
        top: "-9999em"
    });
});

function getAnchors(p1x, p1y, p2x, p2y, p3x, p3y) {
    var l1 = (p2x - p1x) / 2,
        l2 = (p3x - p2x) / 2,
        a = Math.atan((p2x - p1x) / Math.abs(p2y - p1y)),
        b = Math.atan((p3x - p2x) / Math.abs(p2y - p3y));
    a = p1y < p2y ? Math.PI - a : a;
    b = p3y < p2y ? Math.PI - b : b;
    var alpha = Math.PI / 2 - ((a + b) % (Math.PI * 2)) / 2,
        dx1 = l1 * Math.sin(alpha + a),
        dy1 = l1 * Math.cos(alpha + a),
        dx2 = l2 * Math.sin(alpha + b),
        dy2 = l2 * Math.cos(alpha + b);
    return {
        x1: p2x - dx1,
        y1: p2y + dy1,
        x2: p2x + dx2,
        y2: p2y + dy2
    };
}

function draw_waves(canvas_name, labels_arr, hints, data_arr, color_arr, dot_arr, linew_arr, width, height) {
    var canvas = Raphael(canvas_name, width, height)

	var max = Math.max.apply(Math, data_arr[2])
	
	if (max > 100) {
		// rouding to the nearest top - chat scale will be more clear
		var n = max.toString().length - 2
		var scale = Math.pow(10, n)
		
		max = max - (max % scale) + scale
	}
	
    for (var i = 0; i < labels_arr.length; ++i) {
        draw_wave(canvas, labels_arr[i], hints, data_arr[i], width, height, color_arr[i], dot_arr[i], i == 0, linew_arr[i], max, color_arr)
    }
}

function draw_legend(r, leftgutter, topgutter, bottomgutter, height, txt, color_arr) {
	r.text(leftgutter - 4, height - bottomgutter - 20, 'me').attr(txt).attr({fill: "hsl(" + [color_arr[0], .5, .5] + ")"}).rotate(-90, true).toBack();
	r.text(leftgutter- 4, height - bottomgutter - 35, '+').attr(txt).attr({fill: "#aaa"}).rotate(-90, true).toBack();
	r.text(leftgutter- 4, height - bottomgutter - 57, 'friend').attr(txt).attr({fill: "hsl(" + [color_arr[1], .5, .5] + ")"}).rotate(-90, true).toBack();
	r.text(leftgutter- 4, height - bottomgutter - 78, '=').attr(txt).attr({fill: "#aaa"}).rotate(-90, true).toBack();
	r.text(leftgutter- 4, height - bottomgutter - 97, 'total').attr(txt).attr({fill: "hsl(" + [color_arr[2], .5, .5] + ")"}).rotate(-90, true).toBack();
}

function draw_wave(r, labels, hints, data, width, height, colorhue, dot_enabled, grid_enabled, line_w, max, color_arr) {
    
    var leftgutter = 30,
        bottomgutter = 20,
        topgutter = 20,
        color = "hsl(" + [colorhue, .5, .5] + ")",
        txt = {font: '12px Helvetica, Arial', fill: "#fff"},
        txt1 = {font: '10px Helvetica, Arial', fill: "#fff"},
        txt2 = {font: '12px Helvetica, Arial', fill: "#000"},
        X = (width - leftgutter) / labels.length,
        /*max = Math.max.apply(Math, data),*/
        Y = (height - bottomgutter - topgutter) / max;
		
		if (grid_enabled) {
			r.drawGrid(leftgutter + X * .5 + .5, topgutter + .5, width - leftgutter - X, height - topgutter - bottomgutter, 10, 10, "#ccc");
			r.text(width - max.toString().length * 4, topgutter - 8, '' + max).attr(txt1).attr({fill: "#aaa"}).toBack();
			
			draw_legend(r, leftgutter, topgutter, bottomgutter, height, txt, color_arr)
		}
	
	// path color
	var path = r.path().attr({stroke: color, "stroke-width": line_w, "stroke-linejoin": "round"}),
		// area color
        bgp = r.path().attr({stroke: "none", opacity: .3, fill: color}),
        label = r.set(),
        lx = 0, ly = 0,
        is_label_visible = false,
        leave_timer,
        blanket = r.set();
		
    label.push(r.text(60, 12, "24 hits").attr(txt));
    label.push(r.text(60, 27, "22 September 2008").attr(txt1).attr({fill: '#ddd'}));
    label.hide();
    var frame = r.popup(100, 100, label, "right").attr({fill: "#000", stroke: "#666", "stroke-width": 2, "fill-opacity": .7}).hide();

    var p, bgpp;
    for (var i = 0, ii = labels.length; i < ii; i++) {
        var y = Math.round(height - bottomgutter - Y * data[i]),
            x = Math.round(leftgutter + X * (i + .5)),
            t = r.text(x - 13, height - 6, labels[i]).attr(txt1).attr({fill: "#bbb"}).toBack();
        if (!i) {
            p = ["M", x, y, "C", x, y];
            bgpp = ["M", leftgutter + X * .5, height - bottomgutter, "L", x, y, "C", x, y];
        }
        if (i && i < ii - 1) {
            var Y0 = Math.round(height - bottomgutter - Y * data[i - 1]),
                X0 = Math.round(leftgutter + X * (i - .5)),
                Y2 = Math.round(height - bottomgutter - Y * data[i + 1]),
                X2 = Math.round(leftgutter + X * (i + 1.5));
            var a = getAnchors(X0, Y0, x, y, X2, Y2);
            p = p.concat([a.x1, a.y1, x, y, a.x2, a.y2]);
            bgpp = bgpp.concat([a.x1, a.y1, x, y, a.x2, a.y2]);
        }
        if (dot_enabled) {
            var dot = r.circle(x, y, 4).attr({fill: "#fff", stroke: color, "stroke-width": 2});
            blanket.push(r.rect(leftgutter + X * i, 0, X, height - bottomgutter).attr({stroke: "none", fill: "#fff", opacity: 0}));
            var rect = blanket[blanket.length - 1];
            (function (x, y, data, lbl, hint, dot) {
                var timer, i = 0;
                rect.hover(function () {
                    clearTimeout(leave_timer);
                    var side = "right";
                    if (x + frame.getBBox().width > width) {
                        side = "left";
                    }
                    var ppp = r.popup(x, y, label, side, 1),
                        anim = Raphael.animation({
                            path: ppp.path,
                            transform: ["t", ppp.dx, ppp.dy]
                        }, 200 * is_label_visible);
                    lx = label[0].transform()[0][1] + ppp.dx;
                    ly = label[0].transform()[0][2] + ppp.dy;
                    frame.show().stop().animate(anim);
                    
                    // label title
                    label[0].attr({text: data}).show().stop().animateWith(frame, anim, {transform: ["t", lx, ly]}, 200 * is_label_visible);
                    // subtitle
                    label[1].attr({text: hint}).show().stop().animateWith(frame, anim, {transform: ["t", lx, ly]}, 200 * is_label_visible);
                    
                    dot.attr("r", 6);
                    is_label_visible = true;
                }, function () {
                    dot.attr("r", 4);
                    leave_timer = setTimeout(function () {
                        frame.hide();
                        label[0].hide();
                        label[1].hide();
                        is_label_visible = false;
                    }, 1);
                });
            })(x, y, data[i], labels[i], hints[i], dot);
        }
    }
    p = p.concat([x, y, x, y]);
    bgpp = bgpp.concat([x, y, x, y, "L", x, height - bottomgutter, "z"]);
    path.attr({path: p});
    bgp.attr({path: bgpp});
    frame.toFront();
    label[0].toFront();
    label[1].toFront();
    blanket.toFront();
};


