/* JinXed Javascript http://jinx.etv.cx/
 *
 * (c) 2010 Anne Jan Brouwer CC BY SA
 * http://creativecommons.org/licenses/by-sa/3.0/nl/
 */


/* Animating the interweps using Burst engine
 * Tutorials and demo's http://bocoup.com/
 */
function myBurstScript(Burst){      
  Burst.timeline("tl1", 1, 200, -.5, false)
    .track("centerX").key(0,320)
    .track("centerY").key(0,240)
    .track("left")
        .key(0, -700, "easeInOutQuad")
        .key(100, 0)
    .track("scl")
        .key(100, 1, "linear")
        .key(200, .001)
    .track("rot")
        .key(100, 0, "linear")
        .key(200, 360)
    .shape("newshape", "interweps/interweps.svg", "svg", 1, 1, .8, 0);
      
  Burst.start("tl1;");
}
newBurst('weps', myBurstScript);

/* Background radial animation part changed algo and ratio
 * Based on work from http://github.com/remy/html5demos
 */
var canvas = document.getElementById('backdrop'),
    citx = null,
    grad = null,
    body = document.getElementsByTagName('body')[0];
    
if (canvas.getContext('2d')) {
  citx = canvas.getContext('2d');
  citx.clearRect(0,0,800,600);
  citx.save();
  
  grad = citx.createRadialGradient(0,0,0,0,0,800); 
  grad.addColorStop(0,'#058B12');
  grad.addColorStop(1,'#24cafe');
 
  citx.fillStyle = grad;
 
  citx.fillRect(0,0,800,600);
  citx.save();
  
  body.onmousemove = function (event) {
    var width = window.innerWidth, 
        height = window.innerHeight, 
        x = event.clientX, 
        y = event.clientY,
        rx = 800*x/width,
        ry = 600*y/width;
        
    var r = ~~(256*x/width);
    var g = ~~(255-256*(x+y)/(width+height));
    var b = ~~(256*y/height);
 
    grad = citx.createRadialGradient(rx,ry,0,rx,ry,800); 
    grad.addColorStop(0,['rgb(',r,',',g,',',b,')'].join(''));
    grad.addColorStop(1,['rgb(',255-r,',',255-g,',',255-b,')'].join(''));
//    grad.addColorStop(1,'#000');
    citx.fillStyle = grad;
    citx.fillRect(0,0,800,600);
  };
}