Merge branches 'master' and 'multicanvas'

author: root <bryan@olenepal.org> 2009-09-04 11:51:41 (GMT)
committer: root <bryan@olenepal.org> 2009-09-04 11:51:41 (GMT)
commit: 75c384abfacab158eaf13df38d40a792b126e1ec (patch)
tree: 7c0814686e7678d31d5cb8c8cea583112e84927d
parent: 18237cd66715a606b2da47307741e635c2f9e0ce (diff)
parent: 0d38359f8bda4d3584ea5042f8d59d49ac1ad827 (diff)
14 files changed, 245 insertions, 114 deletions
diff --git a/examples/adding_up_to_10/assets/generic/images/ball_37x37.png b/examples/adding_up_to_10/assets/generic/images/ball37px.png
index 4388283..4388283 100755
--- a/examples/adding_up_to_10/assets/generic/images/ball_37x37.png
+++ b/examples/adding_up_to_10/assets/generic/images/ball37px.png
diff --git a/examples/adding_up_to_10/assets/generic/images/ballon.png b/examples/adding_up_to_10/assets/generic/images/balloon.png
index 6c17c31..6c17c31 100755
--- a/examples/adding_up_to_10/assets/generic/images/ballon.png
+++ b/examples/adding_up_to_10/assets/generic/images/balloon.png
diff --git a/examples/adding_up_to_10/assets/generic/images/balloon37px.png b/examples/adding_up_to_10/assets/generic/images/balloon37px.png
new file mode 100755
index 0000000..8f47d6a
--- /dev/null
+++ b/examples/adding_up_to_10/assets/generic/images/balloon37px.png
diff --git a/examples/adding_up_to_10/assets/generic/images/banana_37x37.png b/examples/adding_up_to_10/assets/generic/images/banana37px.png
index 90728e6..90728e6 100755
--- a/examples/adding_up_to_10/assets/generic/images/banana_37x37.png
+++ b/examples/adding_up_to_10/assets/generic/images/banana37px.png
diff --git a/examples/adding_up_to_10/assets/generic/images/fish64px.png b/examples/adding_up_to_10/assets/generic/images/fish64px.png
new file mode 100755
index 0000000..a29f12c
--- /dev/null
+++ b/examples/adding_up_to_10/assets/generic/images/fish64px.png
diff --git a/examples/adding_up_to_10/assets/generic/images/flower37px.png b/examples/adding_up_to_10/assets/generic/images/flower37px.png
new file mode 100755
index 0000000..224e707
--- /dev/null
+++ b/examples/adding_up_to_10/assets/generic/images/flower37px.png
diff --git a/examples/adding_up_to_10/assets/generic/sounds/correct.ogg b/examples/adding_up_to_10/assets/generic/sounds/correct.ogg
new file mode 100755
index 0000000..c89ce57
--- /dev/null
+++ b/examples/adding_up_to_10/assets/generic/sounds/correct.ogg
diff --git a/examples/adding_up_to_10/assets/generic/sounds/incorrect.ogg b/examples/adding_up_to_10/assets/generic/sounds/incorrect.ogg
new file mode 100755
index 0000000..2306562
--- /dev/null
+++ b/examples/adding_up_to_10/assets/generic/sounds/incorrect.ogg
diff --git a/examples/adding_up_to_10/css/lesson_multiple.css b/examples/adding_up_to_10/css/lesson_multiple.css
index c10f168..acce1f7 100755
--- a/examples/adding_up_to_10/css/lesson_multiple.css
+++ b/examples/adding_up_to_10/css/lesson_multiple.css
@@ -1,8 +1,9 @@
 #karma-main { 
-	position: relative; 
-	/*background-image: url('../assets/generic/images/bg.png');*/
+	/*position: relative; 
+	background-image: url('../assets/generic/images/bg.png');
 	width: 1200px;
 	height: 800px;
+	*/
 }
 canvas {
 	border: 2px solid #cccccc;
diff --git a/examples/adding_up_to_10/index.html b/examples/adding_up_to_10/index.html
index 73a76c2..23d0ab9 100755
--- a/examples/adding_up_to_10/index.html
+++ b/examples/adding_up_to_10/index.html
@@ -16,7 +16,7 @@
 </head>
 
 <body>
-  <div id="main">
+  <div id="karma-main"> 
     <div id="action">
       <div id="actionTop">
 
@@ -56,9 +56,7 @@
     <div id="sidebar">
       <div class="sidebarItem">
 	<img id="timer" src="assets/generic/images/scorebox.png" alt=""/>
-	<canvas id="timerCanvas" width="100" height="140" />
-	<img id="banana" src="assets/generic/images/banana.png" alt=""/>
-	<img id="ball" src="assets/generic/images/ball.png" alt=""/>
+	<canvas id="timerCanvas" width="100" height="140" > </canvas>
       </div>
       <div class="sidebarItem">
 	<img id="scorebox" src="assets/generic/images/scorebox.png" alt=""/>
@@ -69,26 +67,12 @@
 	
       </div>
 
-<img id="chimp" src="assets/generic/images/normalChimp_120x125.png" alt="" height="0px" width="0px"/>
 
     </div>
 
 
   </div>
 
-  <!--
-      <img id="actionTopLtBox" src="assets/generic/images/yellowBox.png" alt=""/>
-      <img id="actionTopRtBox" src="assets/generic/images/yellowBox.png" alt=""/>
-      <img id="bottomLtBox" src="assets/generic/images/yellowBox.png" alt=""/>
-      <img id="bottomMdBox" src="assets/generic/images/yellowBox.png" alt=""/>
-      <img id="bottomRtBox" src="assets/generic/images/yellowBox.png" alt=""/>
-      <img id="plussign" src="assets/generic/images/plussign.png" alt=""/>
-      <img id="timer" src="assets/generic/images/scorebox.png" alt=""/>
-      <img id="scorebox" src="assets/generic/images/scorebox.png" alt=""/>
-      <img id="chimp" src="assets/generic/images/normalChimp_200x209.png" alt=""/>
-      <img id="sidebar" src="assets/generic/images/sidebar.png" alt=""/>
-      <img id="chimp" src="assets/generic/images/normalChimp_200x209.png" alt=""/>
-      -->
 
 </body>
 
diff --git a/examples/adding_up_to_10/index_multiple.html b/examples/adding_up_to_10/index_multiple.html
new file mode 100755
index 0000000..15e5caa
--- /dev/null
+++ b/examples/adding_up_to_10/index_multiple.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html lang="en">
+
+<head>
+	<title>Karma - Adding Up to 10</title>
+	<meta name="keywords" content="karma,javascript,html5,sugar,sugarlabs,gsoc,ole,nepal">
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+
+	<link type="image/ico" rel="icon" href="../../assets/default/images/favicon.ico" /> 
+
+	<link type="text/css" rel="stylesheet" href="../../css/karma.css" />
+	<link type="text/css" rel="stylesheet" href="css/lesson_multiple.css" />
+         
+	<script type="text/javascript" src="../../js/jquery-1.3.2.min.js"></script>
+	<script type="text/javascript" src="../../js/karma.Gettext.js"></script>
+	<script type="text/javascript" src="../../js/jquery.karma.js"></script>
+	<script type="text/javascript" src="js/lesson_multiple.js"></script>
+   
+</head>
+
+<body>
+	<div id="karma-main" > </div>
+	<canvas id="inlineCanvas1" width="200px" height="200px"></canvas>
+	click the second box!
+	<canvas id="inlineCanvas2" width="200px" height="200px"></canvas>
+</body>
+
+</html>
diff --git a/examples/adding_up_to_10/js/lesson.js b/examples/adding_up_to_10/js/lesson.js
index f1fddd0..e6697f6 100755
--- a/examples/adding_up_to_10/js/lesson.js
+++ b/examples/adding_up_to_10/js/lesson.js
@@ -1,21 +1,33 @@
 $(document).ready(function(){
 
-var k = $.karma ({container: "#karma-main", lang: "es-MX"});
+    var k = $.karma ({container: "#karma-main", lang: "es-MX"});
+    
+/*    k.layer( {id:"topLt", canvas:"topLtCanvas"} );
+    k.layer( {id:"topRt", canvas:"topRtCanvas"} );
+    k.layer( {id:"bottomLt", canvas:"bottomLtCanvas"} );
+    k.layer( {id:"bottomMd", canvas:"bottomMdCanvas"} );
+    k.layer( {id:"bottomRt", canvas:"bottomRtCanvas"} );*/
+    k.layer( {id:"timer", canvas:"timerCanvas", width:"100", height:"140"} );
+//    k.layer( {id:"scorebox", canvas:"scoreboxCanvas"} );
+//    k.layer( {id:"chimp", canvas:"chimpCanvas"} );
+
 k.init({
 	images: [
-		{id: "ball",   file: "ball_37x37.png",   localized : false },
-		/*{id: "ballon", file: "ballon.png", localized : false },**/
-		{id: "banana", file: "banana_37x37.png", localized : false },
-		/*{id: "chilli", file: "chilli.png", localized : false },
-		{id: "fish"  , file: "fish.png",   localized : false },
-		{id: "flower", file: "flower.png", localized : false },
+		{id: "ball",   file: "ball37px.png",   localized : false },
+		{id: "balloon", file: "balloon37px.png", localized : false },
+		{id: "banana", file: "banana37px.png", localized : false },
+		{id: "chilli", file: "chilli.png", localized : false },
+		{id: "fish"  , file: "fish64px.png",   localized : false },
+		{id: "flower", file: "flower37px.png", localized : false },
 		{id: "happyMonkey", file: "happyMonkey.jpg", localized : false },
-		{id: "scorebox", file: "scorebox.png", localized : false } */
+		{id: "scorebox", file: "scorebox.png", localized : false } 
 	]
 	,
 	sounds: [
-		{id: "correct",  file: "correct.ogg"   },
-		{id: "incorrect",file: "incorrect.ogg" }
+	    {id: "correct",  file: "correct.ogg"},
+	    {id: "incorrect", file: "incorrect.ogg"},
+	    {id: "trigger", file: "trigger.ogg", localized: false}
+	    
 	]
 });
 
@@ -29,73 +41,60 @@ k.main(function() {
 	var bottomLtCtx = bottomLtCanvas.getContext('2d');
 	var bottomMdCanvas = document.getElementById("bottomMdCanvas")
 	var bottomMdCtx = bottomMdCanvas.getContext('2d');
-	var bottomRtCanvas = document.getElementById("bottomRtCanvas")
-	var bottomRtCtx = bottomRtCanvas.getContext('2d');
-
-
-
-	var actionContexts = [ topLtCtx, topRtCtx, bottomLtCtx, bottomMdCtx, bottomRtCtx];
-	var actionCanvases = [ topLtCanvas, topRtCanvas, bottomLtCanvas, bottomMdCanvas, bottomRtCanvas];
-	
-	//    for (var i = 0; i < contexts.length; i++) {
-	// 
-	//	k.library.images["ball"].draw(contexts[i], 20, 30);
-	//    }
+    var bottomRtCanvas = document.getElementById("bottomRtCanvas")
+    var bottomRtCtx = bottomRtCanvas.getContext('2d');
+    var scoreboxCanvas = document.getElementById('scoreboxCanvas');
+    var scoreboxCtx = scoreboxCanvas.getContext('2d');
+//    var timerCanvas = document.getElementById('timerCanvas');
+//    var timerCtx = timerCanvas.getContext('2d');
 
+    var actionContexts = [ topLtCtx, topRtCtx, 
+	bottomLtCtx, bottomMdCtx, bottomRtCtx];
+    var actionCanvases = [ topLtCanvas, topRtCanvas, 
+	bottomLtCanvas, bottomMdCanvas, bottomRtCanvas];
 
 
-
-    var imgNames = ["ball",  "banana", /* "ballon","chilli", "fish", "flower"*/ ];
+    var imgNames = ["ball",  "banana", "balloon","chilli", "fish", "flower"];
 	//game logic
 	var total, level=0, time, n0, n1, correct;
 	var maskd=200;
-	var d=170;
+	var d=160;
 	var choices=[];
 	var score = 0;
-	var startTimerY = 105;
-	var endTimerY = 205;
-	var offsetTimerY = 20;
+    var endTimerX = 80;
+	var startTimerY = 10;
+	var endTimerY = 100;
+    var offsetTimerY = 20;
 	var timerId;
 
-	/*    var timerFn = function () {
-	//gk.ctx.fillStyle = "#000";
-      	//gk.ctx.fillRect(1000, startTimerY, 175, 20); 
-	if ( startTimerY === endTimerY ){
-	    //var audioElem = document.getElementById('correct');
-	    //audioElem.play();
-	    clearInterval(timerId)
-	    score = score - 1;
-	    //resetTimer();
+    var timerFn = function () {
+	k.layers['timer'].clear();
+	k.layers['timer'].ctx.fillStyle = '#fff';
+	k.layers['timer'].ctx.fillRect(10, startTimerY, endTimerX, offsetTimerY);
+//	timerCanvas.setAttribute("width", "100%");
+//	timerCtx.fillStyle = "#fff";
+//      	timerCtx.fillRect(10, startTimerY, endTimerX, offsetTimerY); 
+	if ( startTimerY >= endTimerY ){
+	    //make trigger sound
+	    answer(false);
 	    game();
 	} 
 	else {
-	    gk.ctx.fillStyle = "#000";
-    	    gk.ctx.fillRect(1000, startTimerY, 175, offsetTimerY);
-	    gk.ctx.fillStyle = "#fff";
+//	    timerCanvas.setAttribute("width", "100%");
+	    k.layers['timer'].clear();
 	    startTimerY = startTimerY + offsetTimerY;
-    	    gk.ctx.fillRect(1000, startTimerY, 175, offsetTimerY);
+	    //timerCtx.fillStyle = "#fff";
+	    k.layers['timer'].ctx.fillStyle = "#fff";
+    	    //timerCtx.fillRect(10, startTimerY, endTimerX, offsetTimerY);
+	    k.layers['timer'].ctx.fillRect(10, startTimerY, endTimerX, offsetTimerY);
 	}
     };
 
-    var resetTimer = function () {
-	gk.ctx.fillStyle = "#000";
-    	gk.ctx.fillRect(1000, startTimerY, 175, offsetTimerY);
-	startTimerY = 105;
-	gk.ctx.fillStyle = "#fff";
-	gk.ctx.fillRect(1000, startTimerY, 175, offsetTimerY);
-	timerId = setInterval (timerFn, 500);
-    };
-
-*/
 	
 	function game () {
-	   // $.each(actionCanvases, function () { 
-	//	this.setAttribute("width", "100%");});
 	    $.each(actionContexts, function () {
 		this.clearRect(0, 0, 200, 200);
 		this.fillStyle = "#fff";
-      	        // what does the following do?
-		// this.fillRect(1000, startTimerY, 175, 20); 
 	    });
 
 	    total = k.math.rand( 3, 9 ); //the total
@@ -112,14 +111,7 @@ k.main(function() {
 	    choices[ correct ] = total;
 	    var imgId = imgNames[ level ] ;
 
-	    //k.library.images["ball"].draw(bottomLtCtx, 20, 30);	    
-	    // add happy monkey
-	    // k.library.images["happyMonkey"].draw(1000,600);
-	    // gk.ctx.font = "bold 100px sans-serif";
-	    // gk.ctx.textBaseline = "middle";
-	    // gk.ctx.fillText("" + score, 1050, 460);
-            
-
+ 
 	    var card = function (ctx, n, minx, miny, d ) {
 		ctx.save();
 		var r = k.rectangle({x:minx, y:miny, width:maskd, height:maskd,
@@ -137,7 +129,7 @@ k.main(function() {
 			x = k.math.rand( 0, d );
 			y = k.math.rand( 0, d );
 			for ( var j=0; j<pos.length; j++) {
-			    if ( k.geometry.distance2( pos[j], {"x": x, "y": y} )  < 200 ) {
+			    if ( k.geometry.distance2( pos[j], {"x": x, "y": y} )  < 160 ) {
 				flag = true;
 				break;
 			    }
@@ -159,12 +151,53 @@ k.main(function() {
 	    card(bottomLtCtx, choices[ 0 ] ,  0, 0, d);
 	    card(bottomMdCtx, choices[ 1 ] , 0, 0, d);
 	    card(bottomRtCtx, choices[ 2 ] , 0, 0, d);
-	    //  if (!timerId){
-	    //	timerId = setInterval (timerFn, 500);
-	    //  } else { clearInterval(timerId); resetTimer();}
+	    timerId = setInterval (timerFn, 1200);
 		
     }
-	
+
+    var writeScore = function (){
+	scoreboxCanvas.setAttribute("width", "100%");
+	scoreboxCtx.font = "bold 50px sans-serif";
+	scoreboxCtx.fillStyle = "#fff";
+	scoreboxCtx.textBaseline = "middle";
+	scoreboxCtx.fillText("" + score, 30, 100);
+    };
+
+    var answer = function (correct) {
+
+	if ( correct === false) {
+	    //answer was incorrect or took too long
+	    clearInterval(timerId);
+	    startTimerY = 10;
+	    score = score - 1;
+	    writeScore();
+	    k.library.sounds[ "incorrect" ].play();
+	    //animate sad monkey
+
+	} else {
+	    //answer was correct
+	    clearInterval(timerId);
+	    startTimerY = 10;
+	    score = score + 1;
+	    writeScore();
+	    k.library.sounds[ "correct" ].play();
+	    //animate happy monkey
+	    level = (level+1)% imgNames.length;
+	    
+	}
+
+    };
+
+/*    var reset = function () {
+	score = 0;
+	startTimerY = 10;
+	$.each( );
+
+
+    };
+*/
+
+    writeScore();
 	//put the buttons
 	var buttons=[];
 	buttons[ 0 ] = { "canvas": bottomLtCanvas, "id": 0};
@@ -174,14 +207,10 @@ k.main(function() {
 	$.each(buttons, function( key, item ) {
 		item.canvas.addEventListener('click',  function( ev ) {
 		   if ( choices[ item.id ] === total){
-				score = score + 1;
-				k.library.sounds[ "correct" ].play();
-				level = (level+1)% imgNames.length;
-				
-		   }else {
-				k.library.sounds[ "incorrect" ].play();
-		   } 
-			game();
+		       answer(true);
+		   }else { answer(false);	   } 
+			
+		    game();
 		}, true);
 	});
 	game();
diff --git a/examples/adding_up_to_10/js/lesson_multiple.js b/examples/adding_up_to_10/js/lesson_multiple.js
new file mode 100755
index 0000000..572af44
--- /dev/null
+++ b/examples/adding_up_to_10/js/lesson_multiple.js
@@ -0,0 +1,47 @@
+$(document).ready(function(){
+var k = $.karma ({container: "#karma-main"});
+k.layer( {id:"inline1", canvas:"inlineCanvas1"} );
+k.layer( {id:"inline2", canvas:"inlineCanvas2"} );
+k.layer( {id:"card1", width:250, height:250} ); 
+k.layer( {id:"card2", width:250, height:250} );
+k.layer( {id:"card3", width:250, height:250} );
+
+k.init({
+	images: [
+		{id: "ball",   file: "ball.png",   localized : false },
+		{id: "balloon", file: "balloon.png", localized : false },
+		{id: "banana", file: "banana.png", localized : false },
+		{id: "chilli", file: "chilli.png", localized : false },
+		{id: "fish"  , file: "fish.png",   localized : false },
+	    {id: "flower", file: "flower.png", localized : false },
+	    {id: "plussign", file: "plussign.png", localized : false },
+	    {id: "happyMonkey", file: "happyMonkey.jpg", localized : false },
+	    {id: "scorebox", file: "scorebox.png", localized : false }
+	]
+	,
+	sounds: [
+		{id: "correct",  file: "correct.ogg"   },
+		{id: "incorrect",file: "incorrect.ogg" }
+	]
+});
+k.main(function() {
+	var [library, layers ] = [k.library, k.layers];
+	library.images["ball"].draw( layers["card1"].ctx );
+	library.images["balloon"].draw( layers["card2"].ctx );
+	library.images["banana"].draw( layers["card3"].ctx );
+	library.images["ball"].draw( layers["inline1"].ctx );
+	library.images["fish"].draw( layers["inline2"].ctx );
+	
+
+	layers["inline2"].addEventListener(
+		"click", 
+		function(){layers["inline2"].clear();}
+	);
+    layers["inline2"].ctx.fillStyle = "#000";
+    layers["inline2"].ctx.fillRect(0, 0, 150, 150);
+    layers["card2"].ctx.fillStyle = "#000";
+    layers["card2"].ctx.fillRect(0, 0, 150, 150);
+    
+	
+});
+});
+\ No newline at end of file
diff --git a/js/jquery.karma.js b/js/jquery.karma.js
index 244b6c9..4d95acf 100755
--- a/js/jquery.karma.js
+++ b/js/jquery.karma.js
@@ -43,15 +43,13 @@
  * @exports $ as jQuery
 */
 
-
-
 (function ($) {
 //helpers
 /**
-Checks if the argument (arg) is seted and if its type is 'type'.<br>
-1. if arg is seted: it returns toReturn if specified, otherwise it returns 
+Checks if the argument 'arg' is set and if its type is 'type'.<br>
+1. if arg is set: it returns 'toReturn' if specified, otherwise it returns 
 	'true'
-2. if arg is not seted: it returns 'false'
+2. if arg is not set: it returns 'false'
 @param arg The param to check
 @param {Object} [type] The expeted type of 'arg'
 @param [toReturn] object or value to return in case 1
@@ -62,6 +60,7 @@ valid(msg); //returns true
 valid(msg, "String" ); //returns true
 valid(msg, "Number"); //returns false
 valid(msg, "String",false ); //returns false
+valid(msg, "String", "hello" ); //returns "hello"
 valid(msg123); //returns false
 **/
 var valid = function ( arg, type, toReturn ) {
@@ -73,10 +72,24 @@ var valid = function ( arg, type, toReturn ) {
 		}
 		return false
 	}
-	if ( typeof arg !== "undefined" ) return true;
+	if ( typeof arg !== "undefined" && arg!== "null" ) return true;
 	return false;
 }
 /**
+Clones an object
+@param {object} obj The source object
+@returns {object} The cloned object
+**/
+var clone = function( obj ){
+    if(obj == null || typeof(obj) != 'object')
+        return obj;
+    var temp = new obj.constructor(); 
+    for(var key in obj)
+        temp[ key ] = clone( obj[ key ] );
+    return temp;
+}
+
+/**
  * Karma
  * @name Karma
  * @class Represents a Karma (master) object.
@@ -85,8 +98,6 @@ var valid = function ( arg, type, toReturn ) {
  * @param {String} [options.language] 
 */
 var Karma = function(options ) {
-
-
 	var that = this;
 	this.version = "0.3 alpha";
 	//
@@ -251,7 +262,7 @@ var Karma = function(options ) {
 	//PRIVATE STUFF end
 	// default options 
 	var defaultOptions ={
-		container:   "#karma-ma1in",
+		container:   "#karma-main",
 		language:   { 
 						lang: 			undefined,
 						alternatives: 	['en-US', 'en'],
@@ -264,8 +275,7 @@ var Karma = function(options ) {
 					}
 	};
 	//
-
-	this.library = { "images": [], "sounds": [], "videos":[], "shapes":[] }
+	this.library = { "images": [], "sounds": [], "videos":[], "shapes":[] };
 	
 	//initializes the defaultOptions argument
 	//1 argument: string.  assume it's the container
@@ -562,7 +572,7 @@ var Class = function ( ) {
 };
 
 /**
-creates a new layer
+Creates a new layer
 @param {object} options
 @param {string} [options.id] 
 @param {string | object} [options.container]
@@ -575,8 +585,10 @@ creates a new layer
 var KLayer = Class(
 	{
 		init: function( options ){
+			
 			//fix the container
-			if ( valid( options.container, "string" ) ) {
+			if ( valid( options.container, "string" ) && !valid( options.canvas)
+			) {
 				var name=options.container;
 				options.container = $( options.container )[ 0 ];
 				if ( !valid (options.container) ){
@@ -594,6 +606,7 @@ var KLayer = Class(
 				}
 				options.container = options.mainContainer;
 			}
+			
 			var defaultOptions = {
 				//mainContainer: '',//must be overwritten by Karma.container
 				id: '',//must be overwritten by the Karma.layer OR user
@@ -606,13 +619,21 @@ var KLayer = Class(
 			}
 			$.extend( this, defaultOptions, options);
 			
-			this.canvas = document.createElement("canvas");
-			this.canvas.width  = this.width; 
-			this.canvas.height = this.height;
+			if ( !this.canvas ) {
+				this.canvas = document.createElement("canvas");
+				this.canvas.width  = this.width; 
+				this.canvas.height = this.height;
+			}else {
+				this.canvas = document.getElementById( options.canvas );
+				if ( !this.canvas )
+					throw new Error ("The canvas id doesn't exist");
+				this.width = this.canvas.width;
+				this.height = this.canvas.height;
+			}
 			this.canvas.id = this.id;
 			if ( this.canvas.getContext ) {
 				this.ctx = this.canvas.getContext("2d");
-				this.container.appendChild( this.canvas );
+				//this.container.appendChild( this.canvas );
 			}else {
 				throw new Error ("Your browser doesn't support canvas, \
 				try the newest Firefox, Safari or Google Chrome");
@@ -628,6 +649,26 @@ var KLayer = Class(
 			);
 		},
 		/**
+		Adds an event listener to the layer
+		@param {string} type Event type
+		@param {function} cb Function call back
+		@param {boolean} [bubble=false] If the event must be captured on
+			bubbling phase
+		**/
+		addEventListener : function ( type, cb, bubble ) {
+			this.canvas.addEventListener( type, cb, bubble || false );
+		},
+		/**
+		Removes an event listener attached to the layer
+		@param {string} type Event type
+		@param {function} cb Function call back
+		@param {boolean} [bubble=false] If the event must be captured on
+			bubbling phase
+		**/
+		removeEventListener : function ( type, cb, bubble ) {
+			this.canvas.removeEventListener( type, cb, bubble || false );
+		},
+		/**
 		Clears a rectangular area within the canvas
 		@param {Number} [x=0] Start position of x
 		@param {Number} [y=0] Start position of y
@@ -639,7 +680,7 @@ var KLayer = Class(
 				x || 0,
 				y || 0, 
 				width  || this.canvas.width, 
-				height || this.canvas.width
+				height || this.canvas.height
 			);
 		},
 		draw: function (  ) {
author	root <bryan@olenepal.org>	2009-09-04 11:51:41 (GMT)
committer	root <bryan@olenepal.org>	2009-09-04 11:51:41 (GMT)
commit	75c384abfacab158eaf13df38d40a792b126e1ec (patch)
tree	7c0814686e7678d31d5cb8c8cea583112e84927d
parent	18237cd66715a606b2da47307741e635c2f9e0ce (diff)
parent	0d38359f8bda4d3584ea5042f8d59d49ac1ad827 (diff)