Initial import from the monolithic Qt.

This is the beginning of revision history for this module. If you
want to look at revision history older than this, please refer to the
Qt Git wiki for how to use Git history grafting. At the time of
writing, this wiki is located here:

http://qt.gitorious.org/qt/pages/GitIntroductionWithQt

If you have already performed the grafting and you don't see any
history beyond this commit, try running "git log" with the "--follow"
argument.

Branched from the monolithic repo, Qt master branch, at commit
896db169ea224deb96c59ce8af800d019de63f12

19 files changed, 820 insertions, 0 deletions

diff --git a/examples/script/context2d/scripts/alpha.js b/examples/script/context2d/scripts/alpha.js
new file mode 100644
index 0000000..23fa5d4
--- /dev/null
+++ b/examples/script/context2d/scripts/alpha.js
@@ -0,0 +1,21 @@
+var ctx = document.getElementById('tutorial').getContext('2d');
+  // draw background
+  ctx.fillStyle = '#FD0';
+  ctx.fillRect(0,0,75,75);
+  ctx.fillStyle = '#6C0';
+  ctx.fillRect(75,0,75,75);
+  ctx.fillStyle = '#09F';
+  ctx.fillRect(0,75,75,75);
+  ctx.fillStyle = '#F30';
+  ctx.fillRect(75,75,75,75);
+  ctx.fillStyle = '#FFF';
+
+  // set transparency value
+  ctx.globalAlpha = 0.2;
+
+  // Draw semi transparent circles
+  for (i=0;i<7;i++){
+      ctx.beginPath();
+      ctx.arc(75,75,10+10*i,0,Math.PI*2,true);
+      ctx.fill();
+  }
diff --git a/examples/script/context2d/scripts/arc.js b/examples/script/context2d/scripts/arc.js
new file mode 100644
index 0000000..650bcda
--- /dev/null
+++ b/examples/script/context2d/scripts/arc.js
@@ -0,0 +1,30 @@
+var canvas = document.getElementById('tutorial');
+
+  // Make sure we don't execute when canvas isn't supported
+  if (canvas.getContext){
+
+    // use getContext to use the canvas for drawing
+    var ctx = canvas.getContext('2d');
+
+    // Draw shapes
+    for (i=0;i<4;i++){
+      for(j=0;j<3;j++){
+        ctx.beginPath();
+        var x          = 25+j*50;               // x coordinate
+        var y          = 25+i*50;               // y coordinate
+        var radius     = 20;                    // Arc radius
+        var startAngle = 0;                     // Starting point on circle
+        var endAngle   = Math.PI+(Math.PI*j)/2; // End point on circle
+        var clockwise  = i%2==0 ? false : true; // clockwise or anticlockwise
+    
+        ctx.arc(x,y,radius,startAngle,endAngle, clockwise);
+    
+        if (i>1){
+          ctx.fill();
+        } else {
+          ctx.stroke();
+        }
+      }
+    }
+
+  }
diff --git a/examples/script/context2d/scripts/bezier.js b/examples/script/context2d/scripts/bezier.js
new file mode 100644
index 0000000..719800e
--- /dev/null
+++ b/examples/script/context2d/scripts/bezier.js
@@ -0,0 +1,26 @@
+function drawShape() {
+// get the canvas element using the DOM
+var canvas = document.getElementById('tutorial');
+
+  // Make sure we don't execute when canvas isn't supported
+  if (canvas.getContext){
+
+    // use getContext to use the canvas for drawing
+    var ctx = canvas.getContext('2d');
+
+    // Draw shapes
+
+    ctx.beginPath();
+    ctx.moveTo(75,40);
+    ctx.bezierCurveTo(75,37,70,25,50,25);
+    ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
+    ctx.bezierCurveTo(20,80,40,102,75,120);
+    ctx.bezierCurveTo(110,102,130,80,130,62.5);
+    ctx.bezierCurveTo(130,62.5,130,25,100,25);
+    ctx.bezierCurveTo(85,25,75,37,75,40);
+    ctx.fill();
+    ctx.globalAlpha = 0.5;
+ }
+}
+
+drawShape();
diff --git a/examples/script/context2d/scripts/clock.js b/examples/script/context2d/scripts/clock.js
new file mode 100644
index 0000000..ad287d8
--- /dev/null
+++ b/examples/script/context2d/scripts/clock.js
@@ -0,0 +1,99 @@
+function init(){
+  clock();
+  setInterval('clock()',1000);
+}
+function clock(){
+  var now = new Date();
+  var ctx = document.getElementById('tutorial').getContext('2d');
+  ctx.save();
+  ctx.clearRect(0,0,150,150);
+  ctx.translate(75,75);
+  ctx.scale(0.4,0.4);
+  ctx.rotate(-Math.PI/2);
+  ctx.strokeStyle = "black";
+  ctx.fillStyle = "white";
+  ctx.lineWidth = 8;
+  ctx.lineCap = "round";
+
+  // Hour marks
+  ctx.save();
+  ctx.beginPath();
+  for (i=0;i<12;i++){
+    ctx.rotate(Math.PI/6);
+    ctx.moveTo(100,0);
+    ctx.lineTo(120,0);
+  }
+  ctx.stroke();
+  ctx.restore();
+
+  // Minute marks
+  ctx.save();
+  ctx.lineWidth = 5;
+  ctx.beginPath();
+  for (i=0;i<60;i++){
+    if (i%5!=0) {
+      ctx.moveTo(117,0);
+      ctx.lineTo(120,0);
+    }
+    ctx.rotate(Math.PI/30);
+  }
+  ctx.stroke();
+  ctx.restore();
+  
+  var sec = now.getSeconds();
+  var min = now.getMinutes();
+  var hr  = now.getHours();
+  hr = hr>=12 ? hr-12 : hr;
+
+  ctx.fillStyle = "black";
+
+  // write Hours
+  ctx.save();
+  ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec )
+  ctx.lineWidth = 14;
+  ctx.beginPath();
+  ctx.moveTo(-20,0);
+  ctx.lineTo(80,0);
+  ctx.stroke();
+  ctx.restore();
+
+  // write Minutes
+  ctx.save();
+  ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec )
+  ctx.lineWidth = 10;
+  ctx.beginPath();
+  ctx.moveTo(-28,0);
+  ctx.lineTo(112,0);
+  ctx.stroke();
+  ctx.restore();
+  
+  // Write seconds
+  ctx.save();
+  ctx.rotate(sec * Math.PI/30);
+  ctx.strokeStyle = "#D40000";
+  ctx.fillStyle = "#D40000";
+  ctx.lineWidth = 6;
+  ctx.beginPath();
+  ctx.moveTo(-30,0);
+  ctx.lineTo(83,0);
+  ctx.stroke();
+  ctx.beginPath();
+  ctx.arc(0,0,10,0,Math.PI*2,true);
+  ctx.fill();
+  ctx.beginPath();
+  ctx.arc(95,0,10,0,Math.PI*2,true);
+  ctx.stroke();
+  ctx.fillStyle = "#555";
+  ctx.arc(0,0,3,0,Math.PI*2,true);
+  ctx.fill();
+  ctx.restore();
+
+  ctx.beginPath();
+  ctx.lineWidth = 14;
+  ctx.strokeStyle = '#325FA2';
+  ctx.arc(0,0,142,0,Math.PI*2,true);
+  ctx.stroke();
+
+  ctx.restore();
+}
+init();
diff --git a/examples/script/context2d/scripts/fill1.js b/examples/script/context2d/scripts/fill1.js
new file mode 100644
index 0000000..db5eeb7
--- /dev/null
+++ b/examples/script/context2d/scripts/fill1.js
@@ -0,0 +1,8 @@
+var ctx = document.getElementById('tutorial').getContext('2d');
+  for (i=0;i<6;i++){
+    for (j=0;j<6;j++){
+      ctx.fillStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' + 
+                       Math.floor(255-42.5*j) + ',0)';
+      ctx.fillRect(j*25,i*25,25,25);
+    }
+  }
diff --git a/examples/script/context2d/scripts/grad.js b/examples/script/context2d/scripts/grad.js
new file mode 100644
index 0000000..24ccfbb
--- /dev/null
+++ b/examples/script/context2d/scripts/grad.js
@@ -0,0 +1,20 @@
+  var ctx = document.getElementById('tutorial').getContext('2d');
+
+  // Create gradients
+  var lingrad = ctx.createLinearGradient(0,0,0,150);
+  lingrad.addColorStop(0, '#00ABEB');
+  lingrad.addColorStop(0.5, '#fff');
+  lingrad.addColorStop(0.5, '#66CC00');
+  lingrad.addColorStop(1, '#fff');
+
+  var lingrad2 = ctx.createLinearGradient(0,50,0,95);
+  lingrad2.addColorStop(0.5, '#000');
+  lingrad2.addColorStop(1, 'rgba(0,0,0,0)');
+
+  // assign gradients to fill and stroke styles
+  ctx.fillStyle = lingrad;
+  ctx.strokeStyle = lingrad2;
+  
+  // draw shapes
+  ctx.fillRect(10,10,130,130);
+  ctx.strokeRect(50,50,50,50);
diff --git a/examples/script/context2d/scripts/linecap.js b/examples/script/context2d/scripts/linecap.js
new file mode 100644
index 0000000..18ceb23
--- /dev/null
+++ b/examples/script/context2d/scripts/linecap.js
@@ -0,0 +1,24 @@
+var ctx = document.getElementById('tutorial').getContext('2d');
+  var lineCap = ['butt','round','square'];
+
+  // Draw guides
+  ctx.save();
+  ctx.strokeStyle = '#09f';
+  ctx.beginPath();
+  ctx.moveTo(10,10);
+  ctx.lineTo(140,10);
+  ctx.moveTo(10,140);
+  ctx.lineTo(140,140);
+  ctx.stroke();
+
+  // Draw lines
+  ctx.strokeStyle = 'black';
+  for (i=0;i<lineCap.length;i++){
+    ctx.lineWidth = 15;
+    ctx.lineCap = lineCap[i];
+    ctx.beginPath();
+    ctx.moveTo(25+i*50,10);
+    ctx.lineTo(25+i*50,140);
+    ctx.stroke();
+  }
+  ctx.restore();
diff --git a/examples/script/context2d/scripts/linestye.js b/examples/script/context2d/scripts/linestye.js
new file mode 100644
index 0000000..728e3e6
--- /dev/null
+++ b/examples/script/context2d/scripts/linestye.js
@@ -0,0 +1,10 @@
+var ctx = document.getElementById('tutorial').getContext('2d');
+ctx.save();
+  for (i=0;i<10;i++){
+    ctx.lineWidth = 1+i;
+    ctx.beginPath();
+    ctx.moveTo(5+i*14,5);
+    ctx.lineTo(5+i*14,140);
+    ctx.stroke();
+  }
+ctx.restore();
\ No newline at end of file
diff --git a/examples/script/context2d/scripts/moveto.js b/examples/script/context2d/scripts/moveto.js
new file mode 100644
index 0000000..73c4e8d
--- /dev/null
+++ b/examples/script/context2d/scripts/moveto.js
@@ -0,0 +1,20 @@
+var canvas = document.getElementById('tutorial');
+
+  // Make sure we don't execute when canvas isn't supported
+  if (canvas.getContext){
+
+    // use getContext to use the canvas for drawing
+    var ctx = canvas.getContext('2d');
+
+    // Draw shapes
+    ctx.beginPath();
+    ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle
+    ctx.moveTo(110,75);
+    ctx.arc(75,75,35,0,Math.PI,false);   // Mouth
+    ctx.moveTo(65,65);
+    ctx.arc(60,65,5,0,Math.PI*2,true);  // Left eye
+    ctx.moveTo(95,65);
+    ctx.arc(90,65,5,0,Math.PI*2,true);  // Right eye
+    ctx.stroke();
+
+  } 
diff --git a/examples/script/context2d/scripts/moveto2.js b/examples/script/context2d/scripts/moveto2.js
new file mode 100644
index 0000000..021f47b
--- /dev/null
+++ b/examples/script/context2d/scripts/moveto2.js
@@ -0,0 +1,24 @@
+var canvas = document.getElementById('tutorial');
+
+  // Make sure we don't execute when canvas isn't supported
+  if (canvas.getContext){
+
+    // use getContext to use the canvas for drawing
+    var ctx = canvas.getContext('2d');
+
+    // Filled triangle
+    ctx.beginPath();
+    ctx.moveTo(25,25);
+    ctx.lineTo(105,25);
+    ctx.lineTo(25,105);
+    ctx.fill();
+    
+    // Stroked triangle
+    ctx.beginPath();
+    ctx.moveTo(125,125);
+    ctx.lineTo(125,45);
+    ctx.lineTo(45,125);
+    ctx.closePath();
+    ctx.stroke();
+
+  }
diff --git a/examples/script/context2d/scripts/pacman.js b/examples/script/context2d/scripts/pacman.js
new file mode 100644
index 0000000..af3750f
--- /dev/null
+++ b/examples/script/context2d/scripts/pacman.js
@@ -0,0 +1,83 @@
+function roundedRect(ctx,x,y,width,height,radius){
+  ctx.beginPath();
+  ctx.moveTo(x,y+radius);
+  ctx.lineTo(x,y+height-radius);
+  ctx.quadraticCurveTo(x,y+height,x+radius,y+height);
+  ctx.lineTo(x+width-radius,y+height);
+  ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius);
+  ctx.lineTo(x+width,y+radius);
+  ctx.quadraticCurveTo(x+width,y,x+width-radius,y);
+  ctx.lineTo(x+radius,y);
+  ctx.quadraticCurveTo(x,y,x,y+radius);
+  ctx.stroke();
+}
+
+var canvas = document.getElementById('tutorial');
+
+  // Make sure we don't execute when canvas isn't supported
+  if (canvas.getContext){
+
+    // use getContext to use the canvas for drawing
+    var ctx = canvas.getContext('2d');
+
+    // Draw shapes
+    roundedRect(ctx,12,12,150,150,15);
+    roundedRect(ctx,19,19,150,150,9);
+    roundedRect(ctx,53,53,49,33,10);
+    roundedRect(ctx,53,119,49,16,6);
+    roundedRect(ctx,135,53,49,33,10);
+    roundedRect(ctx,135,119,25,49,10);
+
+    // Character 1
+    ctx.beginPath();
+    ctx.arc(37,37,13,Math.PI/7,-Math.PI/7,false);
+    ctx.lineTo(34,37);
+    ctx.fill();
+
+    // blocks
+    for(i=0;i<8;i++){
+      ctx.fillRect(51+i*16,35,4,4);
+    }
+    for(i=0;i<6;i++){
+      ctx.fillRect(115,51+i*16,4,4);
+    }
+    for(i=0;i<8;i++){
+      ctx.fillRect(51+i*16,99,4,4);
+    }
+
+    // character 2
+    ctx.beginPath();
+    ctx.moveTo(83,116);
+    ctx.lineTo(83,102);
+
+    ctx.bezierCurveTo(83,94,89,88,97,88);
+    ctx.bezierCurveTo(105,88,111,94,111,102);
+    ctx.lineTo(111,116);
+    ctx.lineTo(106.333,111.333);
+    ctx.lineTo(101.666,116);
+    ctx.lineTo(97,111.333);
+    ctx.lineTo(92.333,116);
+    ctx.lineTo(87.666,111.333);
+    ctx.lineTo(83,116);
+    ctx.fill();
+    ctx.fillStyle = "white";
+    ctx.beginPath();
+    ctx.moveTo(91,96);
+    ctx.bezierCurveTo(88,96,87,99,87,101);
+    ctx.bezierCurveTo(87,103,88,106,91,106);
+    ctx.bezierCurveTo(94,106,95,103,95,101);
+    ctx.bezierCurveTo(95,99,94,96,91,96);
+    ctx.moveTo(103,96);
+    ctx.bezierCurveTo(100,96,99,99,99,101);
+    ctx.bezierCurveTo(99,103,100,106,103,106);
+    ctx.bezierCurveTo(106,106,107,103,107,101);
+    ctx.bezierCurveTo(107,99,106,96,103,96);
+    ctx.fill();
+    ctx.fillStyle = "black";
+    ctx.beginPath();
+    ctx.arc(101,102,2,0,Math.PI*2,true);
+    ctx.fill();
+    ctx.beginPath();
+    ctx.arc(89,102,2,0,Math.PI*2,true);
+    ctx.fill();
+  }
diff --git a/examples/script/context2d/scripts/plasma.js b/examples/script/context2d/scripts/plasma.js
new file mode 100644
index 0000000..1aa9294
--- /dev/null
+++ b/examples/script/context2d/scripts/plasma.js
@@ -0,0 +1,58 @@
+var counter = 0;
+
+var PIXEL_SIZE = 4;
+
+var temp_1 = 0;
+
+function init()
+{
+    setInterval('render()',50);
+}
+
+function dist(a, b, c, d)
+{
+    return Math.sqrt((a - c) * (a - c) + (b - d) * (b - d));
+}
+
+
+function render()
+{
+    var canvas = document.getElementById('tutorial');
+    canvas.resize(128, 128);
+    var ctx = canvas.getContext('2d');
+    ctx.save();
+
+    var time = counter * 5;
+
+
+    for( y = 0; y < 128; y+=PIXEL_SIZE) {
+	for( x = 0 ; x < 128; x+=PIXEL_SIZE) {
+	    
+	    
+	    var temp_val = Math.floor(Math.sin(dist(x + time, y, 128.0, 128.0) / 8.0)
+				      + Math.sin(dist(x, y, 64.0, 64.0) / 8.0)
+				      + Math.sin(dist(x, y + time / 7, 192.0, 64) / 7.0)
+				      + Math.sin(dist(x, y, 192.0, 100.0) / 8.0));
+	    
+	    
+	    
+	    
+	    var temp_col = Math.floor((2 + temp_val) * 50);
+	    
+	    var rand_red = temp_col * 3;
+	    var rand_green = temp_col  ;
+	    var rand_blue = 128 - temp_col;
+
+	    ctx.fillStyle = "rgb("+rand_red+","+rand_green+","+rand_blue+")";
+
+	    ctx.fillRect(x,y,PIXEL_SIZE,PIXEL_SIZE);
+	}
+    }
+
+
+    ctx.restore();
+    counter++;
+
+}
+
+init();
diff --git a/examples/script/context2d/scripts/pong.js b/examples/script/context2d/scripts/pong.js
new file mode 100644
index 0000000..2bff053
--- /dev/null
+++ b/examples/script/context2d/scripts/pong.js
@@ -0,0 +1,235 @@
+// globals
+playarea_canvas = document.getElementById('tutorial');
+playarea_canvas.resize(320,200);
+playarea = playarea_canvas.getContext('2d');
+//p1_scr = document.getElementById('p1_scr');
+//p2_scr = document.getElementById('p2_scr');
+//status_msg = document.getElementById('status');
+//debug = document.getElementById('debug');
+ball_direction = 0;
+up = -1;
+down = 1;
+
+//key codes
+key_up = 38;
+key_down = 40;
+key_W = 87;
+key_S = 83;
+key_pause = 32;
+
+speed = 2;			//controls the speed of the ball
+paddle_inc = 10;	//how many pixels paddle can move in either direction
+pause = false;
+
+player_1 = 0;		//player IDs
+player_2 = 1;
+player_1_scr = 0;	//player scores
+player_2_scr = 0;
+player_1_direction = null;	//null = no movement whatsoever
+player_2_direction = null;
+
+pa = new Array();
+divider = new Array();
+paddle_1 = new Array();
+paddle_2 = new Array();
+ball = new Array();
+
+
+function sleep(numberMillis)
+{
+    var now = new Date();
+    var exitTime = now.getTime() + numberMillis;
+    while (true) {
+	now = new Date();
+	if (now.getTime() > exitTime)
+	    return;
+    }
+}
+
+function init()
+{
+    pa['width'] = 150;
+    pa['height'] = 140;
+    pa['player_margin'] = 10;		//area behind player paddles
+    pa['foreground'] = "#FFFFFF";
+    pa['background'] = "#000000";
+
+    divider['pos'] = pa['width']/2;
+    divider['width'] = 4;
+
+    paddle_1['width'] = 8;
+    paddle_1['height'] = 64;
+    paddle_1['x'] = pa['player_margin'];
+    paddle_1['y'] = (pa['height'] /2 ) - (paddle_1['height'] / 2);
+
+    paddle_2['width'] = 8;
+    paddle_2['height'] = 64;
+    paddle_2['x'] = (pa['width'] - pa['player_margin'] - paddle_2['width']);
+    paddle_2['y'] = (pa['height'] /2 ) - (paddle_2['height'] / 2);
+
+    ball['width'] = 10;
+    ball['height'] = 10;
+    ball['x'] = (pa['width']/2) - (ball['width'] / 2);
+    ball['y'] = (pa['height']/2) - (ball['height'] / 2);
+
+    ball_direction = Math.random() * 360;	//initialize ball direction, which is determined by angle, at random
+    speed = 2;
+}
+
+function renderPlayarea()
+{
+    playarea.beginPath();
+
+    playarea.clearRect(0,0,pa['width'],pa['height']);
+    playarea.fillStyle = pa['background'];
+    playarea.strokeStyle = pa['foreground'];
+    playarea.fillRect(0,0, pa['width'], pa['height']);
+
+    //move paddles
+    if(player_1_direction != null)
+	{
+	    if(player_1_direction == up)
+		paddle_1['y'] = paddle_1['y'] - paddle_inc;
+	    else
+		paddle_1['y'] = paddle_1['y'] + paddle_inc;
+	}
+    if(player_2_direction != null)
+	{
+	    if(player_2_direction == up)
+		paddle_2['y'] = paddle_2['y'] - paddle_inc;
+	    else
+		paddle_2['y'] = paddle_2['y'] + paddle_inc;
+	}
+    playarea.rect(paddle_1['x'],paddle_1['y'],paddle_1['width'],paddle_1['height']);
+    playarea.rect(paddle_2['x'],paddle_2['y'],paddle_2['width'],paddle_2['height']);
+
+    //move ball
+    playarea.rect(ball['x'], ball['y'], ball['width'], ball['height']);
+    ball['x'] = ball['x'] + Math.cos((ball_direction)*Math.PI/180) * speed;
+    ball['y'] = ball['y'] + Math.sin((ball_direction)*Math.PI/180) * speed;
+
+    playarea.fillStyle = pa['foreground'];
+    playarea.fill();
+
+    playarea.beginPath();
+    //redraw divider
+    playarea.lineWidth = divider['width'];
+    playarea.lineTo(divider['pos'], 0);
+    playarea.lineTo(divider['pos'], pa['height'] = 200);
+    playarea.lineWidth = 1;
+
+    playarea.stroke();
+    playarea.closePath();
+}
+
+function testCollisions()
+{
+    //make sure paddles don't go beyond play area
+    if(((paddle_1['y'] <= 0) &&	(player_1_direction == up)) || ((paddle_1['y'] >= (pa['height'] - paddle_1['height'])) && (player_1_direction == down)))
+	player_1_direction = null;
+    if(((paddle_2['y'] <= 0) &&	(player_2_direction == up)) || ((paddle_2['y'] >= (pa['height'] - paddle_2['height'])) && (player_2_direction == down)))
+	player_2_direction = null;
+
+    //check to see if ball went beyond paddles, and if so, score accordingly and reset playarea
+    if(ball['x'] <= 0)
+	{
+	    setScore(player_2);
+	    init()
+		sleep(1000);
+	}
+    if(ball['x'] >= (pa['width'] - ball['width']))
+	{
+	    setScore(player_1);
+	    init();
+	    sleep(1000);
+	}
+
+    //check to see if ball hit top or bottom wall. if so, change direction
+    if((ball['y'] >= (pa['height'] - ball['height'])) || ball['y'] <= 0)
+	ball_direction = -ball_direction;
+
+    //check to see if the ball hit a paddle, and if so, change ball angle dependant on where it hit the paddle
+    if((ball['x'] <= (paddle_1['x'] + paddle_1['width'])) && (ball['y'] >= paddle_1['y']) && (ball['y'] <= (paddle_1['y'] + paddle_1['height'])))
+	{
+	    ball_direction = -ball_direction/2;
+	    speed += .5;
+	}
+    if(((ball['x'] + ball['width']) >= paddle_2['x']) && (ball['y'] >= paddle_2['y']) && (ball['y'] <= (paddle_2['y'] + paddle_2['height'])))
+	{
+	    ball_direction = (180+ball_direction)/2;
+	    speed += .5;
+	}
+}
+
+function setScore(p)
+{
+    if(p == player_1)
+	{
+	    player_1_scr++;
+	    //p1_scr.firstChild.nodeValue = player_1_scr;
+	}
+    if(p == player_2)
+	{
+	    player_2_scr++;
+	    //p2_scr.firstChild.nodeValue = player_2_scr;
+	}
+}
+
+
+//handle input
+document.onkeydown = function(ev)
+{
+    switch(ev.keyCode)
+    {
+	case key_W:
+	player_1_direction = up;
+	break;
+	case key_S:
+	player_1_direction = down;
+	break;
+	case key_up:
+	player_2_direction = up;
+	break;
+	case key_down:
+	player_2_direction = down;
+	break;
+    }
+}
+
+document.onkeyup = function(ev)
+{
+    switch(ev.keyCode)
+    {
+	case key_W:
+	case key_S:
+	player_1_direction = null;
+	break;
+	case key_up:
+	case key_down:
+	player_2_direction = null;
+	break;
+	case key_pause:
+	if(pause == false)
+	{
+	    clearInterval(game);
+	    //status_msg.style.visibility = "visible";
+	    pause = true;
+	}
+	else
+	{
+	    game = setInterval(main, 25);
+	    //status_msg.style.visibility = "hidden";
+	    pause = false;
+	}
+	break;
+    }
+}
+
+function main()
+{
+    testCollisions();
+    renderPlayarea();
+}
+
+init();
+game = setInterval(main, 25);
diff --git a/examples/script/context2d/scripts/quad.js b/examples/script/context2d/scripts/quad.js
new file mode 100644
index 0000000..ad3a0d5
--- /dev/null
+++ b/examples/script/context2d/scripts/quad.js
@@ -0,0 +1,21 @@
+var canvas = document.getElementById('tutorial');
+
+  // Make sure we don't execute when canvas isn't supported
+  if (canvas.getContext){
+
+    // use getContext to use the canvas for drawing
+    var ctx = canvas.getContext('2d');
+
+    // Draw shapes
+
+    ctx.beginPath();
+    ctx.moveTo(75,25);
+    ctx.quadraticCurveTo(25,25,25,62.5);
+    ctx.quadraticCurveTo(25,100,50,100);
+    ctx.quadraticCurveTo(50,120,30,125);
+    ctx.quadraticCurveTo(60,120,65,100);
+    ctx.quadraticCurveTo(125,100,125,62.5);
+    ctx.quadraticCurveTo(125,25,75,25);
+    ctx.stroke();
+
+  }
diff --git a/examples/script/context2d/scripts/rgba.js b/examples/script/context2d/scripts/rgba.js
new file mode 100644
index 0000000..a4e5e9a
--- /dev/null
+++ b/examples/script/context2d/scripts/rgba.js
@@ -0,0 +1,19 @@
+var ctx = document.getElementById('tutorial').getContext('2d');
+
+  // Draw background
+  ctx.fillStyle = 'rgb(255,221,0)';
+  ctx.fillRect(0,0,150,37.5);
+  ctx.fillStyle = 'rgb(102,204,0)';
+  ctx.fillRect(0,37.5,150,37.5);
+  ctx.fillStyle = 'rgb(0,153,255)';
+  ctx.fillRect(0,75,150,37.5);
+  ctx.fillStyle = 'rgb(255,51,0)';
+  ctx.fillRect(0,112.5,150,37.5);
+
+  // Draw semi transparent rectangles
+  for (i=0;i<10;i++){
+    ctx.fillStyle = 'rgba(255,255,255,'+(i+1)/10+')';
+    for (j=0;j<4;j++){
+      ctx.fillRect(5+i*14,5+j*37.5,14,27.5)
+    }
+  }
diff --git a/examples/script/context2d/scripts/rotate.js b/examples/script/context2d/scripts/rotate.js
new file mode 100644
index 0000000..c7ef369
--- /dev/null
+++ b/examples/script/context2d/scripts/rotate.js
@@ -0,0 +1,16 @@
+var ctx = document.getElementById('tutorial').getContext('2d');
+  ctx.translate(75,75);
+
+  for (i=1;i<6;i++){ // Loop through rings (from inside to out)
+    ctx.save();
+    ctx.fillStyle = 'rgb('+(51*i)+','+(255-51*i)+',255)';
+
+    for (j=0;j<i*6;j++){ // draw individual dots
+      ctx.rotate(Math.PI*2/(i*6));
+      ctx.beginPath();
+      ctx.arc(0,i*12.5,5,0,Math.PI*2,true);
+      ctx.fill();
+    }
+
+    ctx.restore();
+  }
diff --git a/examples/script/context2d/scripts/scale.js b/examples/script/context2d/scripts/scale.js
new file mode 100644
index 0000000..75ef865
--- /dev/null
+++ b/examples/script/context2d/scripts/scale.js
@@ -0,0 +1,67 @@
+var ctx = document.getElementById('tutorial').getContext('2d');
+  ctx.strokeStyle = "#fc0";
+  ctx.lineWidth = 1.5;
+  ctx.fillRect(0,0,300,300);
+
+  // Uniform scaling
+  ctx.save()
+  ctx.translate(50,50);
+  drawSpirograph(ctx,22,6,5);  // no scaling
+
+  ctx.translate(100,0);
+  ctx.scale(0.75,0.75);
+  drawSpirograph(ctx,22,6,5);
+
+  ctx.translate(133.333,0);
+  ctx.scale(0.75,0.75);
+  drawSpirograph(ctx,22,6,5);
+  ctx.restore();
+
+  // Non uniform scaling (y direction)
+  ctx.strokeStyle = "#0cf";
+  ctx.save()
+  ctx.translate(50,150);
+  ctx.scale(1,0.75);
+  drawSpirograph(ctx,22,6,5);
+
+  ctx.translate(100,0);
+  ctx.scale(1,0.75);
+  drawSpirograph(ctx,22,6,5);
+
+  ctx.translate(100,0);
+  ctx.scale(1,0.75);
+  drawSpirograph(ctx,22,6,5);
+  ctx.restore();
+
+  // Non uniform scaling (x direction)
+  ctx.strokeStyle = "#cf0";
+  ctx.save()
+  ctx.translate(50,250);
+  ctx.scale(0.75,1);
+  drawSpirograph(ctx,22,6,5);
+
+  ctx.translate(133.333,0);
+  ctx.scale(0.75,1);
+  drawSpirograph(ctx,22,6,5);
+
+  ctx.translate(177.777,0);
+  ctx.scale(0.75,1);
+  drawSpirograph(ctx,22,6,5);
+  ctx.restore();
+function drawSpirograph(ctx,R,r,O){
+  var x1 = R-O;
+  var y1 = 0;
+  var i  = 1;
+  ctx.beginPath();
+  ctx.moveTo(x1,y1);
+  do {
+    if (i>20000) break;
+    var x2 = (R+r)*Math.cos(i*Math.PI/72) - (r+O)*Math.cos(((R+r)/r)*(i*Math.PI/72))
+    var y2 = (R+r)*Math.sin(i*Math.PI/72) - (r+O)*Math.sin(((R+r)/r)*(i*Math.PI/72))
+    ctx.lineTo(x2,y2);
+    x1 = x2;
+    y1 = y2;
+    i++;
+  } while (x2 != R-O && y2 != 0 );
+  ctx.stroke();
+}
diff --git a/examples/script/context2d/scripts/stroke1.js b/examples/script/context2d/scripts/stroke1.js
new file mode 100644
index 0000000..0561a52
--- /dev/null
+++ b/examples/script/context2d/scripts/stroke1.js
@@ -0,0 +1,10 @@
+var ctx = document.getElementById('tutorial').getContext('2d');
+    for (i=0;i<6;i++){
+      for (j=0;j<6;j++){
+        ctx.strokeStyle = 'rgb(0,' + Math.floor(255-42.5*i) + ',' + 
+                         Math.floor(255-42.5*j) + ')';
+        ctx.beginPath();
+        ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true);
+        ctx.stroke();
+      }
+    }
diff --git a/examples/script/context2d/scripts/translate.js b/examples/script/context2d/scripts/translate.js
new file mode 100644
index 0000000..7c94433
--- /dev/null
+++ b/examples/script/context2d/scripts/translate.js
@@ -0,0 +1,29 @@
+  var ctx = document.getElementById('tutorial').getContext('2d');
+  ctx.fillRect(0,0,300,300);
+  for (var i=0;i<3;i++) {
+    for (var j=0;j<3;j++) {
+      ctx.save();
+      ctx.strokeStyle = "#9CFF00";
+      ctx.translate(50+j*100,50+i*100);
+      drawSpirograph(ctx,20*(j+2)/(j+1),-8*(i+3)/(i+1),10);
+      ctx.restore();
+    }
+  }
+
+function drawSpirograph(ctx,R,r,O){
+  var x1 = R-O;
+  var y1 = 0;
+  var i  = 1;
+  ctx.beginPath();
+  ctx.moveTo(x1,y1);
+  do {
+    if (i>20000) break;
+    var x2 = (R+r)*Math.cos(i*Math.PI/72) - (r+O)*Math.cos(((R+r)/r)*(i*Math.PI/72))
+    var y2 = (R+r)*Math.sin(i*Math.PI/72) - (r+O)*Math.sin(((R+r)/r)*(i*Math.PI/72))
+    ctx.lineTo(x2,y2);
+    x1 = x2;
+    y1 = y2;
+    i++;
+  } while (x2 != R-O && y2 != 0 );
+  ctx.stroke();
+}