How do I make changing between background colors depending on mouse position work?

Question

I'm trying to make a simple function to change background color on a page according to mouse position. I just found a more advanced example here:

How to change the color of the background based on mouse position (specific colors)

but mine is a lot more simple and only specifies four colors (for each corner). It almost works, but for some reason the bottom right color doesn't get right -- could anyone see a bug in my code?

Jsfiddle: http://jsfiddle.net/WV8jX/1349/

var o = $(window), w = 0, h = 0, rgb = [],
c = [
  [255, 200, 200], // [0] top left
  [0, 0, 90], // [1] top right
  [5, 20, 50], // [2] bottom right
  [52, 52, 255] // [3] bottom left
], 
gw = function() { w = o.width(); h = o.height(); };

/* set corner divs to colors */
$("div").each(function(i) {

$(this).css("background", "rgb(" + c[i].join(",") + ")")
})

o.resize(gw).mousemove(function(e) {
  x = [
    (c[0][0] + (c[1][0] - c[0][0]) * (e.pageX / w)),
    (c[0][1] + (c[1][1] - c[0][1]) * (e.pageX / w)),
    (c[0][2] + (c[1][2] - c[0][2]) * (e.pageX / w))
  ]; /* color in x direction */
  rgb = [
    Math.round(x[0] + ((c[3][0] - x[0]) + (c[2][0] - (c[3][0] - x[0])) * (e.pageX / w)) * (e.pageY / h)),
    Math.round(x[1] + ((c[3][1] - x[1]) + (c[2][1] - (c[3][1] - x[1])) * (e.pageX / w)) * (e.pageY / h)),
    Math.round(x[2] + ((c[3][2] - x[2]) + (c[2][2] - (c[3][2] - x[2])) * (e.pageX / w)) * (e.pageY / h))
  ];
  $("code").html("x: " + x.toString() + "<br>rgb: " + rgb.toString());
  $(document.body).css("background", "rgb(" + rgb.join(",") + ")");
}).resize();