diff --git a/JinxEngine.js b/JinxEngine.js
index e852752..5adbb68 100644
--- a/JinxEngine.js
+++ b/JinxEngine.js
@@ -9,9 +9,9 @@ function GameEngine(){
 	this.displayDomId;
 	this.requestID;
 	this.keys = new Array(400);
-	this.keysDown=[];//future depracation
-	this.keysUp=[];//future depracation
-	this.keysPressed=[];//future depracation
+	//this.keysDown=[];//future depracation
+	//this.keysUp=[];//future depracation
+	//this.keysPressed=[];//future depracation
 	this.engineMode="live";
 	this.frameCount=0;
 	this.eventStack=[];
@@ -32,7 +32,6 @@ function GameEngine(){
 	});
 	
 	this.init = function(){
-		
 		for(var x=0;x<this.objects.length;x++){
 			if(typeof(this.objects[x].init)==='function'){
 				this.objects[x].init(gameEngineThis);
@@ -55,11 +54,9 @@ function GameEngine(){
 				location.href = 'http://www.mosilla.org/en-US/firefox/new/';
 			}
 		}
-		
 		gameEngineThis.displayDomId.addEventListener("mousedown",function(){
 			gameEngineThis.mousePos.left=true;
 		},false);
-
 	}
 	
 	this.PlaySound = function(src){
@@ -116,7 +113,6 @@ function GameEngine(){
 			}else{
 				console.log("Object "+x+" is undefined");
 			}
-			
 		}
 		for(var x=0;x<this.objects.length;x++){
 			if(typeof(this.objects[x])!==undefined){
@@ -234,18 +230,13 @@ function GameEngine(){
 			return false;
 		}
 	}
-	*/
-	/*
+
 	this.clearKeys = function(){
 		this.keysDown.clear();
 		this.keysPressed.clear();
 		this.keysUp.clear();
 	}
-	*/
-	
 
-	
-	/*
 	window.onkeydown = function(e){
 		if(gameEngineThis.loopState){
 			gameEngineThis.engineLog("Key Down "+e.keyCode);
@@ -326,8 +317,6 @@ function GameEngine(){
 		return dpr / bsr;
 	};
 	
-
-	
 	this.setDisplay = function(canvas){
 		this.displayDomId = document.getElementById(canvas);
 		var ratio = this.getPixelRatio();
@@ -339,7 +328,6 @@ function GameEngine(){
 		this.displayDomId.style.height = h+"px";
 		this.display = document.getElementById(canvas).getContext(this.context);
 		//this.getDisplayPixelDensity(canvas,this.display);
-
 	}
 	
 	this.addObject = function(o){//pass object
@@ -353,6 +341,10 @@ function GameEngine(){
 		return this.objects[this.objects.length-1].id;//return the objects id
 	}
 	
+	this.getObjectByIndex = function(i){
+		return this.objects[i];
+	}
+	
 	this.purgeObjects = function(){
 		this.objects.clear();
 	}
@@ -434,6 +426,8 @@ function GameEngine(){
 		this.purgeObjects();
 		this.frameCount=0;
 		this.render(this.display);
+		window.cancelAnimationFrame(gameEngineThis.requestID);
+		gameEngineThis.requestID = undefined;
 	}
 	
 	this.frame = function(){
@@ -448,8 +442,293 @@ function GameEngine(){
 			gameEngineThis.render(gameEngineThis.display);
 		}
 		if(gameEngineThis.loopState){
+			window.cancelAnimationFrame(gameEngineThis.requestID);
+			gameEngineThis.requestID = undefined;
 			gameEngineThis.requestID = window.requestAnimationFrame(gameEngineThis.frame);
 		}
 	}
 	
 };
+
+function ArcObject(x,y,radius,startAngle,endAngle,anticlockwise){
+	this.x=x;
+	this.y=y;
+	this.radius=radius;
+	this.startAngle=startAngle;
+	this.endAngle=endAngle;
+	this.anticlockwise=anticlockwise;
+	this.path = new Path2D();
+	this.path.arc(x,y,radius,startAngle,endAngle,anticlockwise);
+	this.path.closePath();
+	this.g=false;
+	
+	this.getObjType = function(){
+		return "Arc";
+	}
+	
+	this.pointIntersects = function(x,y){
+		var ranges={
+			x1:this.x-this.radius,
+			x2:this.x+this.radius,
+			y1:this.y-this.radius,
+			y2:this.y+this.radius
+		}
+		if(point.x>=ranges.x1&&point.x<=ranges.x2&&point.y>=ranges.y1&&point.y<=ranges.y2){
+			//work on this
+		}
+		return false;
+	}
+	
+	this.pointIn = function(x,y){
+		if(this.g){
+			return this.g.isPointInPath(this.path,x,y);
+		}
+	}
+	
+	this.rectIntersects = function(rect){
+		//work on this
+	}
+	
+	this.getPath = function(g){
+		this.g=g;
+		return this.path;
+	}
+}
+
+function Rectangle(x,y,h,w){
+	this.x=x;
+	this.y=y;
+	this.height=h;
+	this.width=w;
+	this.path = new Path2D();
+	this.path.rect(x,y,h,w);
+	this.path.closePath();
+	this.g=false;
+	this.roundedSides={tl:0,tr:0,bl:0,br:0};
+	
+	this.getObjType = function(){
+		return "Rectangle";
+	}
+	
+	this.rounding = function(side,radius){
+		switch(side){
+			case "tl":
+				this.roundedSides.tl=radius;
+			break;
+			case "tr":
+				this.roundedSides.tr=radius;
+			break;
+			case "bl":
+				this.roundedSides.bl=radius;
+			break;
+			case "br":
+				this.roundedSides.br=radius;
+			break;
+			case "all":
+			default:
+				this.roundedSides.tl=radius;
+				this.roundedSides.tr=radius;
+				this.roundedSides.bl=radius;
+				this.roundedSides.br=radius;
+		}
+		if(this.hasRoundedCorners()){
+			this.path.moveTo(x,y+radius);
+			this.path.lineTo(x,y+height-radius);
+			this.path.quadraticCurveTo(x,y+height,x+radius,y+height);
+			this.path.lineTo(x+width-radius,y+height);
+			this.path.quadraticCurveTo(x+width,y+height,x+width,y+height-radius);
+			this.path.lineTo(x+width,y+radius);
+			this.path.quadraticCurveTo(x+width,y,x+width-radius,y);
+			this.path.lineTo(x+radius,y);
+			this.path.quadraticCurveTo(x,y,x,y+radius);
+			this.path.closePath();
+		}else{
+			this.path.rect(this.x,this.y,this.h,this.w);
+		}
+	}
+	
+	this.hasRoundedCorners = function(){
+		if(this.roundedSides.tl>0||this.roundedSides.tr>0||this.roundedSides.bl>0||this.roundedSides.br>0){
+			return true;
+		}
+		return false;
+	}
+	
+	this.RectIntersects = function(rect){
+		if(typeof(rect)==="undefined"){
+			return false;
+		}else{
+			if(this.x < rect.x + rect.width && this.x + this.width > rect.x && this.y < rect.y + rect.height && this.height + this.y > rect.y){
+				return true;
+			}
+		}
+		return false;
+	}
+	
+	this.pointIn = function(x,y){
+		if(this.g){
+			return this.g.isPointInPath(this.path,x,y);
+		}
+	}
+	
+	this.getPath = function(g){
+		this.g=g;
+		return this.path;
+	}	
+}
+
+/*
+*Basic Texture object that is used to define a texture that will be drawn by a sprite
+*/
+function Texture(src,x,y,h,w){
+	var img  = new Image(); 
+	img.src=src;
+	this.img = img;
+	this.x=x;
+	this.y=y;
+	this.h=h;
+	this.w=w;
+}
+
+/*
+*Sprite sheet that is a more complex texture that holds many small textures that are used by a sprite for animation
+*/
+function SpriteSheet(src){
+	var img  = new Image(); 
+	img.src=src;
+	this.texture=img;
+	this.spriteGroups=[];
+	this.sheetItems=[];
+	
+	this.addAnimation = function(obj){//{name:,matrix:[{x,y,h,w}...,],loop,delay}
+		this.spriteGroups.push(obj);
+	}
+	
+	this.getAnimation = function(name){
+		for(x=0;x<this.spriteGroups.length;x++){
+			if(this.spriteGroups[x].name==name){
+				return this.spriteGroups[x];
+			}
+		}
+	}
+	
+	this.addItem = function(obj){//{name,x,y,h,w}
+		this.sheetItems.push(obj);
+	}
+	
+	this.getItem = function(name){
+		for(x=0;x<this.sheetItems.length;x++){
+			if(this.sheetItems[x].name==name){
+				return this.sheetItems[x];
+			}
+		}
+	}
+	
+}
+
+/*
+*The Sprite object defines the most basic drawing element. It uses textures to draw an object onto the screen.
+*/
+function Sprite(eId){
+	this.gameEngine;
+	this.texture;
+	this.curTexPos;
+	this.canvasPos;
+	this.isSpriteSheet;
+	this.spriteSheet;
+	this.timelaps;
+	this.frameCount=0;
+	this.currentAnimation;
+	this.firstRun=1;
+	this.animation;
+	this.clickDelay=30;
+	this.delayCounter=0;
+	this.eventId=eId;
+	this.cursorHover=false;
+	
+	this.init = function(e){
+		this.gameEngine = e;
+	}
+	
+	this.update = function(){
+		var mousePos = this.gameEngine.getEventInStack("cursor",false);
+		var cursorBox={
+			x:mousePos.x,
+			y:mousePos.y,
+			height:2,
+			width:2
+		}
+		if(this.gameEngine.collitionDetection(cursorBox,this.canvasPos)){
+			this.cursorHover=true;
+			if(this.mousePos.left){
+				if(this.delayCounter==0){
+					this.gameEngine.addEvent({name:this.eventId,clicked:true});
+					this.delayCounter=this.clickDelay;
+				}else{
+					this.delayCounter--;
+				}
+			}
+		}else{
+			this.buttonHover=false;
+		}
+		var currentAnimation = this.spriteSheet.getAnimation(this.animation);
+		this.timelaps++;
+		if(this.timelaps>currentAnimation.delay||this.firstRun==1){
+			this.firstRun=0;
+			this.timelaps=0;
+			var curMa = currentAnimation.matrix;
+			var curAnSize = curMa.length-1;
+			if(this.frameCount>curAnSize){
+				if(currentAnimation.loop==true){
+					this.frameCount=0;
+				}else{
+					this.frameCount=curAnSize;
+				}
+			}
+			var crm = curMa[this.frameCount];
+			this.curTexPos={
+				x:crm.x,
+				y:crm.y,
+				h:crm.h,
+				w:crm.w
+			}
+			this.frameCount++;
+		}
+	}
+	
+	this.setAnimation = function(animation){
+		this.animation = animation;
+	}
+	
+	this.setPos = function(x,y,h,w){
+		this.canvasPos={x:x,y:y,h:h,w:w}
+	}
+	
+	this.getPos = function(){
+		return this.canvasPos;
+	}
+	
+	//this.isHover
+	
+	this.draw = function(g){
+		var texture,tx,ty,tw,th,cx,cy,cw,ch;
+		cx = this.canvasPos.x;
+		cy = this.canvasPos.y
+		cw = this.canvasPos.w;
+		ch = this.canvasPos.h;
+		if(this.isSpriteSheet){
+			tx = this.curTexPos.x;
+			ty = this.curTexPos.y;
+			tw = this.curTexPos.w;
+			th = this.curTexPos.h;
+			texture = this.spriteSheet.texture;
+		}else{
+			tx = this.texture.x;
+			ty = this.texture.y;
+			tw = this.texture.w;
+			th = this.texture.h;
+			texture = this.texture.img;
+		}
+		g.drawImage(texture,tx,ty,tw,th,cx,cy,cw,ch);
+	}
+}
diff --git a/examples/Effects/background.js b/examples/Effects/background.js
new file mode 100644
index 0000000..21cef70
--- /dev/null
+++ b/examples/Effects/background.js
@@ -0,0 +1,44 @@
+function Background(){
+	//this.gameEngine;
+	var mySprite;
+
+	this.init = function(e){
+		//this.gameEngine = e;
+		var mySpriteSheet = new SpriteSheet("textures/coin-sprite-animation-sprite-sheet.png");
+		mySpriteSheet.addAnimation(
+			{
+				name:"spin",
+				matrix:[
+					{x:0,y:0,h:44,w:44},
+					{x:44*2,y:0,h:44,w:44},
+					{x:44*3,y:0,h:44,w:44},
+					{x:44*4,y:0,h:44,w:44},
+					{x:44*5,y:0,h:44,w:44},
+					{x:44*6,y:0,h:44,w:44},
+					{x:44*7,y:0,h:44,w:44},
+					{x:44*8,y:0,h:44,w:44},
+					{x:44*9,y:0,h:44,w:44}
+				],
+				loop:true,
+				delay:2
+			}
+		);
+		mySprite = new Sprite("coin");
+		mySprite.init(e);
+		mySprite.setPos(100,100,30,30);
+		mySprite.setAnimation("spin");
+		mySprite.isSpriteSheet=true;
+		mySprite.spriteSheet = mySpriteSheet;
+		//mySprite.texture = new Texture("textures/coin-sprite-animation-sprite-sheet.png",0,0,50,50);
+	}
+	
+	this.update = function(){
+		mySprite.update();
+		//var pos = this.mySprite.getPos();
+		//this.mySprite.setPos(pos.x+1,pos.y+1,pos.h,pos.w);
+	}
+	
+	this.draw = function(g){
+		mySprite.draw(g);
+	}
+}
diff --git a/examples/Effects/hud.js b/examples/Effects/hud.js
index d123e48..85ef82a 100644
--- a/examples/Effects/hud.js
+++ b/examples/Effects/hud.js
@@ -16,4 +16,4 @@ function HUD(){
 		g.fillText(""+this.objCount,10,18);
 	}
 
-}
+}
\ No newline at end of file
diff --git a/examples/Effects/index.html b/examples/Effects/index.html
index 002433c..12aae01 100644
--- a/examples/Effects/index.html
+++ b/examples/Effects/index.html
@@ -7,6 +7,7 @@
 	<script src="../../libs/ObjectiveJS/math.o.js"></script>
 	<script src="../../libs/ObjectiveJS/array.o.js"></script>
 	<script src="../../libs/ObjectiveJS/dom.o.js"></script>
+	<script src="background.js"></script>
 	<script src="partical.js"></script>
 	<script src="spawnPoint.js"></script>
 	<script src="hud.js"></script>
@@ -16,7 +17,7 @@
 <body>
 	<h1>Effects Demo</h1>
 	<nav>
-		<button id="newFireButton">Fire</button>
+		<button id="newFireButton">Start</button>
 		<button id="PauseButton">Pause</button>
 		<button id="quitButton">Quit</button>
 	</nav>
diff --git a/examples/Effects/main.js b/examples/Effects/main.js
index 6325bf9..ac267f4 100644
--- a/examples/Effects/main.js
+++ b/examples/Effects/main.js
@@ -6,6 +6,7 @@ myDom.OnReady(function(){
 	myEngine.setDisplay("screen");
 	myDom.getId("newFireButton").addEventListener("click", function(){
 		myEngine.stop();
+		var backgroundId = myEngine.addObject(new Background());
 		var particalId = myEngine.addObject(new SpawnPoint());
 		var hudId = myEngine.addObject(new HUD());
 		myEngine.init();
@@ -24,4 +25,4 @@ myDom.OnReady(function(){
 	myDom.getId("quitButton").addEventListener("click", function(){
 		myEngine.stop();
 	}, false);
-});
+});
\ No newline at end of file
diff --git a/examples/Effects/partical.js b/examples/Effects/partical.js
index cb02353..868ca2c 100644
--- a/examples/Effects/partical.js
+++ b/examples/Effects/partical.js
@@ -13,6 +13,9 @@ function Partical(){
 	this.gravityDirection=55;
 	this.gravityStrength=1;
 	this.useGravity=true;
+	this.img;
+	this.displayType="image";
+	this.imgSize;
 	
 	
 	this.init = function(e){
@@ -24,6 +27,10 @@ function Partical(){
 		this.direction = Math.randomNumberRange(0,360);
 		this.x_spawn=this.x;
 		this.y_spawn=this.y;
+		if(this.displayType=="image"){
+			this.img  = new Image();
+			this.imgSize = Math.randomNumberRange(1,40);
+		}
 	}
 	
 	this.InScreenViewTest = function(){
@@ -55,7 +62,17 @@ function Partical(){
 			this.radius=.01;
 		}
 		
-
+		if(this.displayType=="image"){
+			if(this.life>50){
+				this.img.src = "textures/fire"+Math.randomNumberRange(1,3)+".png";
+			}else if(this.life>40){
+				this.img.src = "textures/dark_smoke1.png";
+				this.imgSize=40;
+			}else{
+				this.img.src = "textures/smoke"+Math.randomNumberRange(1,3)+".png";
+				this.imgSize=40;
+			}
+		}
 	}
 	
 	this.deleteObj = function(){
@@ -66,25 +83,29 @@ function Partical(){
 	}
 	
 	this.draw = function(g){
-		if(this.life>50){
-			g.fillStyle = "red";
-		}
-		if(this.life<=30){
-			g.fillStyle = "orange";
-		}
-		if(this.life<=20){
-			g.fillStyle = "yellow";
-		}
-		if(this.life<=10){
-			g.fillStyle = "gray";
-		}
-		if(this.life<=0){
-			g.fillStyle = "black";
+		if(this.displayType=="image"){
+			g.drawImage(this.img,this.x-10,this.y-10,this.imgSize,this.imgSize);
+		}else{
+			if(this.life>50){
+				g.fillStyle = "red";
+			}
+			if(this.life<=30){
+				g.fillStyle = "orange";
+			}
+			if(this.life<=20){
+				g.fillStyle = "yellow";
+			}
+			if(this.life<=10){
+				g.fillStyle = "gray";
+			}
+			if(this.life<=0){
+				g.fillStyle = "black";
+			}
+			
+			//g.fillRect(this.x,this.y,this.radius*2,this.radius*2);
+			g.beginPath();
+			g.arc(this.x,this.y,this.radius,0,2*Math.PI);
+			g.fill();
 		}
-		
-		//g.fillRect(this.x,this.y,this.radius*2,this.radius*2);
-		g.beginPath();
-		g.arc(this.x,this.y,this.radius,0,2*Math.PI);
-		g.fill();
 	}
-}
+}
\ No newline at end of file
diff --git a/examples/Effects/spawnPoint.js b/examples/Effects/spawnPoint.js
index 8f192de..8e809ec 100644
--- a/examples/Effects/spawnPoint.js
+++ b/examples/Effects/spawnPoint.js
@@ -8,14 +8,21 @@ function SpawnPoint(){
 	this.buttonHover=false;
 	this.spawnGen=4;
 	this.mousePos;
+	this.img;
+	this.displayType="image";
 	
 	
 	this.init = function(e){
 		this.gameEngine = e;
 		this.x = this.gameEngine.getDisplay("widthCenter");
 		this.y = this.gameEngine.getDisplay("heightCenter")+100; 
-		for(x=0;x<15;x++){
-			this.genStick();
+		if(this.displayType=="image"){
+			this.img  = new Image(); 
+			this.img.src = "textures/logs.png";
+		}else{
+			for(x=0;x<15;x++){
+				this.genStick();
+			}
 		}
 	}
 	
@@ -36,7 +43,7 @@ function SpawnPoint(){
 		for(x=0;x<this.spawnGen;x++){
 			var partical = new Partical();
 			partical.x=Math.randomNumberRange(this.x-width,this.x+width);
-			partical.y=this.y;
+			partical.y=Math.randomNumberRange(this.y-40,this.y+40);
 			partical.init(this.gameEngine);
 			this.gameEngine.addObject(partical);
 		}
@@ -89,30 +96,34 @@ function SpawnPoint(){
 	}
 	
 	this.draw = function(g){
-		g.fillStyle = "black";
-		//g.fillRect(this.x,this.y,this.radius*2,this.radius*2);
-		g.beginPath();
-		g.arc(this.x,this.y,this.radius,0,2*Math.PI);
-		g.fill();
-		for(x=0;x<15;x++){
-			this.drawStick(g,x);
+		if(this.displayType=="image"){
+			g.drawImage(this.img,this.x-80,this.y-10,200,100);
+		}else{
+			g.fillStyle = "black";
+			//g.fillRect(this.x,this.y,this.radius*2,this.radius*2);
+			g.beginPath();
+			g.arc(this.x,this.y,this.radius,0,2*Math.PI);
+			g.fill();
+			for(x=0;x<15;x++){
+				this.drawStick(g,x);
+			}
+			/*
+			g.beginPath();
+			g.moveTo(this.x-40,this.y-20);
+			g.lineTo(this.x+60,this.y+20);
+			g.lineTo(this.x+67,this.y+28);
+			g.fill();
+			g.beginPath();
+			g.moveTo(this.x+40,this.y-20);
+			g.lineTo(this.x-60,this.y+20);
+			g.lineTo(this.x-67,this.y+28);
+			g.fill();
+			g.beginPath();
+			g.moveTo(this.x+40,this.y-20);
+			g.lineTo(this.x-60,this.y+20);
+			g.lineTo(this.x-67,this.y+28);
+			g.fill();
+			*/
 		}
-		/*
-		g.beginPath();
-		g.moveTo(this.x-40,this.y-20);
-		g.lineTo(this.x+60,this.y+20);
-		g.lineTo(this.x+67,this.y+28);
-		g.fill();
-		g.beginPath();
-		g.moveTo(this.x+40,this.y-20);
-		g.lineTo(this.x-60,this.y+20);
-		g.lineTo(this.x-67,this.y+28);
-		g.fill();
-		g.beginPath();
-		g.moveTo(this.x+40,this.y-20);
-		g.lineTo(this.x-60,this.y+20);
-		g.lineTo(this.x-67,this.y+28);
-		g.fill();
-		*/
 	}
-}
+}
\ No newline at end of file
diff --git a/examples/Effects/textures/bg-far.png b/examples/Effects/textures/bg-far.png
new file mode 100644
index 0000000..8d7ed5f
Binary files /dev/null and b/examples/Effects/textures/bg-far.png differ
diff --git a/examples/Effects/textures/bg-mid.png b/examples/Effects/textures/bg-mid.png
new file mode 100644
index 0000000..21a486d
Binary files /dev/null and b/examples/Effects/textures/bg-mid.png differ
diff --git a/examples/Effects/textures/coin-sprite-animation-sprite-sheet (1).png b/examples/Effects/textures/coin-sprite-animation-sprite-sheet (1).png
new file mode 100644
index 0000000..30058d3
Binary files /dev/null and b/examples/Effects/textures/coin-sprite-animation-sprite-sheet (1).png differ
diff --git a/examples/Effects/textures/coin-sprite-animation-sprite-sheet.png b/examples/Effects/textures/coin-sprite-animation-sprite-sheet.png
new file mode 100644
index 0000000..30058d3
Binary files /dev/null and b/examples/Effects/textures/coin-sprite-animation-sprite-sheet.png differ
diff --git a/examples/Effects/textures/cursor.gif b/examples/Effects/textures/cursor.gif
new file mode 100644
index 0000000..47f2e80
Binary files /dev/null and b/examples/Effects/textures/cursor.gif differ
diff --git a/examples/Effects/textures/cursor.png b/examples/Effects/textures/cursor.png
new file mode 100644
index 0000000..5a24d6e
Binary files /dev/null and b/examples/Effects/textures/cursor.png differ
diff --git a/examples/Effects/textures/dark_smoke1.png b/examples/Effects/textures/dark_smoke1.png
new file mode 100644
index 0000000..6da762e
Binary files /dev/null and b/examples/Effects/textures/dark_smoke1.png differ
diff --git a/examples/Effects/textures/fire1.png b/examples/Effects/textures/fire1.png
new file mode 100644
index 0000000..0a81c0f
Binary files /dev/null and b/examples/Effects/textures/fire1.png differ
diff --git a/examples/Effects/textures/fire2.png b/examples/Effects/textures/fire2.png
new file mode 100644
index 0000000..f395cc0
Binary files /dev/null and b/examples/Effects/textures/fire2.png differ
diff --git a/examples/Effects/textures/fire3.png b/examples/Effects/textures/fire3.png
new file mode 100644
index 0000000..f45b4b0
Binary files /dev/null and b/examples/Effects/textures/fire3.png differ
diff --git a/examples/Effects/textures/flappy_twitter.png b/examples/Effects/textures/flappy_twitter.png
new file mode 100644
index 0000000..5351fde
Binary files /dev/null and b/examples/Effects/textures/flappy_twitter.png differ
diff --git a/examples/Effects/textures/frame-sprite-animation.png b/examples/Effects/textures/frame-sprite-animation.png
new file mode 100644
index 0000000..4270c7a
Binary files /dev/null and b/examples/Effects/textures/frame-sprite-animation.png differ
diff --git a/examples/Effects/textures/logs.png b/examples/Effects/textures/logs.png
new file mode 100644
index 0000000..63f6aba
Binary files /dev/null and b/examples/Effects/textures/logs.png differ
diff --git a/examples/Effects/textures/smoke1.png b/examples/Effects/textures/smoke1.png
new file mode 100644
index 0000000..d375f43
Binary files /dev/null and b/examples/Effects/textures/smoke1.png differ
diff --git a/examples/Effects/textures/smoke2.png b/examples/Effects/textures/smoke2.png
new file mode 100644
index 0000000..907b21f
Binary files /dev/null and b/examples/Effects/textures/smoke2.png differ
diff --git a/examples/Effects/textures/smoke3.png b/examples/Effects/textures/smoke3.png
new file mode 100644
index 0000000..0d1ce92
Binary files /dev/null and b/examples/Effects/textures/smoke3.png differ
diff --git a/examples/Tic_Tac_Toe/ai.js b/examples/Tic_Tac_Toe/ai.js
new file mode 100644
index 0000000..3e3eff3
--- /dev/null
+++ b/examples/Tic_Tac_Toe/ai.js
@@ -0,0 +1,57 @@
+function AI(){
+	this.gameEngine;
+	this.ai_perams;
+	this.ball;
+	this.player;
+	this.side;
+
+	this.init = function(e,p){
+		this.gameEngine=e;
+		this.ai_perams={
+			distance_detect:100,
+			accuracy:10
+		}
+		this.ball = this.gameEngine.getEventInStack("ball",false);
+		this.player = p;
+		/*
+		if(typeof(this.player)!=="undefined"){
+			if(this.player.x-this.ball.x<0){//left side player
+				this.side="left";
+			}else{//right side player
+				this.side="right";
+			}
+		}*/
+	}
+
+	this.update = function(){
+		this.ball = this.gameEngine.getEventInStack("ball",false);
+		
+	}
+	
+	this.getMove = function(){
+		if(this.getDistanceFromBall()<=this.ai_perams.distance_detect){
+			if(this.player.y>this.ball.y){
+				return "up";
+			}
+			if(this.player.y+this.player.paddleLength<this.ball.y){
+				return "down";
+			}
+		}
+		return "dont move";
+	}
+	
+	this.getDistanceFromBall = function(){
+		dis =0;
+		switch(this.side){
+			case "left":
+				dis = this.ball.x -(this.player.x+this.player.paddleThickness);
+			break;
+			case "right":
+				dis = this.player.x-this.ball.x;
+			break;
+		}
+		return dis;
+	}
+	
+
+}
\ No newline at end of file
diff --git a/examples/Tic_Tac_Toe/cursor.png b/examples/Tic_Tac_Toe/cursor.png
new file mode 100644
index 0000000..5a24d6e
Binary files /dev/null and b/examples/Tic_Tac_Toe/cursor.png differ
diff --git a/examples/Tic_Tac_Toe/gameBoard.js b/examples/Tic_Tac_Toe/gameBoard.js
new file mode 100644
index 0000000..6e29c1b
--- /dev/null
+++ b/examples/Tic_Tac_Toe/gameBoard.js
@@ -0,0 +1,232 @@
+function GameBoard(){
+	this.gameEngine;
+	this.playerTurn;
+	this.mousePos;
+	this.boardDrawPoints=[];
+	this.boardRec;
+	this.boardSlots=[];
+	this.delay=30;
+	this.delayCounter=0;
+	this.buttonHover=false;
+	this.mousePos;
+	this.cursorBox;
+
+	this.init = function(e){
+		this.gameEngine = e;
+		this.playerTurn=Math.randomNumberRange(0,1);
+		this.boardRec={
+			x:50,
+			y:50,
+			height:300,
+			width:300
+		};
+		this.boardDrawPoints.push({
+			x1:this.boardRec.x+(this.boardRec.width/3),
+			y1:this.boardRec.y,
+			x2:this.boardRec.x+(this.boardRec.width/3),
+			y2:this.boardRec.y+this.boardRec.height
+		});
+		this.boardDrawPoints.push({
+			x1:this.boardRec.x+((this.boardRec.width/3)*2),
+			y1:this.boardRec.y,
+			x2:this.boardRec.x+((this.boardRec.width/3)*2),
+			y2:this.boardRec.y+this.boardRec.height
+		});
+		this.boardDrawPoints.push({
+			x1:this.boardRec.x,
+			y1:this.boardRec.y+(this.boardRec.height/3),
+			x2:this.boardRec.x+this.boardRec.width,
+			y2:this.boardRec.y+(this.boardRec.height/3)
+		});
+		this.boardDrawPoints.push({
+			x1:this.boardRec.x,
+			y1:this.boardRec.y+((this.boardRec.height/3)*2),
+			x2:this.boardRec.x+this.boardRec.width,
+			y2:this.boardRec.y+((this.boardRec.height/3)*2)
+		});
+		
+		this.boardSlots.push({
+			id:"r1c1",
+			x:this.boardRec.x+30,
+			y:this.boardRec.y+70,
+			text:"",
+			clickArea:{
+				x:this.boardRec.x,
+				y:this.boardRec.y,
+				height:this.boardRec.y+((this.boardRec.height/3)-50),
+				width:this.boardRec.x+((this.boardRec.width/3)-50)
+			}
+		});
+		this.boardSlots.push({
+			id:"r1c2",
+			x:this.boardRec.x+30+(this.boardRec.width/3),
+			y:this.boardRec.y+70,
+			text:"",
+			clickArea:{
+				x:this.boardRec.x+((this.boardRec.width/3)),
+				y:this.boardRec.y,
+				height:this.boardRec.y+((this.boardRec.height/3)-50),
+				width:this.boardRec.x+((this.boardRec.width/3)-50)
+			}
+		});
+		this.boardSlots.push({
+			id:"r1c3",
+			x:this.boardRec.x+30+((this.boardRec.width/3)*2),
+			y:this.boardRec.y+70,
+			text:"",
+			clickArea:{
+				x:this.boardRec.x+(this.boardRec.width/3)+100,
+				y:this.boardRec.y,
+				height:this.boardRec.y+((this.boardRec.height/3)-50),
+				width:this.boardRec.x+((this.boardRec.width/3)-50)
+			}
+		});
+		
+		this.boardSlots.push({
+			id:"r2c1",
+			x:this.boardRec.x+30,
+			y:this.boardRec.y+70+(this.boardRec.height/3),
+			text:"",
+			clickArea:{
+				x:this.boardRec.x,
+				y:this.boardRec.y+(this.boardRec.height/3),
+				height:this.boardRec.y+((this.boardRec.height/3)-50),
+				width:this.boardRec.x+((this.boardRec.width/3)-50)
+			}
+		});
+		this.boardSlots.push({
+			id:"r2c2",
+			x:this.boardRec.x+30+(this.boardRec.width/3),
+			y:this.boardRec.y+70+(this.boardRec.height/3),
+			text:"",
+			clickArea:{
+				x:this.boardRec.x+((this.boardRec.width/3)),
+				y:this.boardRec.y+(this.boardRec.height/3),
+				height:this.boardRec.y+((this.boardRec.height/3)-50),
+				width:this.boardRec.x+((this.boardRec.width/3)-50)
+			}
+		});
+		this.boardSlots.push({
+			id:"r2c3",
+			x:this.boardRec.x+30+((this.boardRec.width/3)*2),
+			y:this.boardRec.y+70+(this.boardRec.height/3),
+			text:"",
+			clickArea:{
+				x:this.boardRec.x+(this.boardRec.width/3)+100,
+				y:this.boardRec.y+(this.boardRec.height/3),
+				height:this.boardRec.y+((this.boardRec.height/3)-50),
+				width:this.boardRec.x+((this.boardRec.width/3)-50)
+			}
+		});
+		
+		this.boardSlots.push({
+			id:"r2c1",
+			x:this.boardRec.x+30,
+			y:this.boardRec.y+70+((this.boardRec.height/3)*2),
+			text:"",
+			clickArea:{
+				x:this.boardRec.x,
+				y:this.boardRec.y+(this.boardRec.height/3)*2,
+				height:this.boardRec.y+((this.boardRec.height/3)-50),
+				width:this.boardRec.x+((this.boardRec.width/3)-50)
+			}
+		});
+		this.boardSlots.push({
+			id:"r2c2",
+			x:this.boardRec.x+30+(this.boardRec.width/3),
+			y:this.boardRec.y+70+((this.boardRec.height/3)*2),
+			text:"",
+			clickArea:{
+				x:this.boardRec.x+((this.boardRec.width/3)),
+				y:this.boardRec.y+(this.boardRec.height/3)*2,
+				height:this.boardRec.y+((this.boardRec.height/3)-50),
+				width:this.boardRec.x+((this.boardRec.width/3)-50)
+			}
+		});
+		this.boardSlots.push({
+			id:"r2c3",
+			x:this.boardRec.x+30+((this.boardRec.width/3)*2),
+			y:this.boardRec.y+70+((this.boardRec.height/3)*2),
+			text:"",
+			clickArea:{
+				x:this.boardRec.x+(this.boardRec.width/3)+100,
+				y:this.boardRec.y+(this.boardRec.height/3)*2,
+				height:this.boardRec.y+((this.boardRec.height/3)-50),
+				width:this.boardRec.x+((this.boardRec.width/3)-50)
+			}
+		});
+	}
+	
+	this.update = function(){
+		if(this.delayCounter==0){
+			this.mousePos = this.gameEngine.getEventInStack("cursor",false);
+			this.cursorBox={
+				x:this.mousePos.x,
+				y:this.mousePos.y,
+				height:2,
+				width:2
+			}
+			for(x=0;x<this.boardSlots.length;x++){
+				var slot = this.boardSlots[x];
+				var clickArea = this.boardSlots[x].clickArea;
+				if(this.gameEngine.collitionDetection(this.cursorBox,clickArea)){
+					this.buttonHover=true;
+					if(this.mousePos.left){
+						this.gameEngine.addEvent({name:this.buttonId,clicked:true});
+						this.delayCounter=this.delay;
+						if(slot.text==""){
+							if(this.playerTurn==0){
+								slot.text="X";
+								this.playerTurn=1;
+							}else{
+								slot.text="O";
+								this.playerTurn=0;
+							}
+						}
+					}
+				}else{
+					this.buttonHover=false;
+				}
+			}
+		}else{
+			this.delayCounter--;
+		}
+	}
+	
+	
+	
+	this.EventLisener = function(e){
+		var pointEvent = this.gameEngine.getEventInStack("point",true);
+		if(pointEvent){
+			if(pointEvent.player==1){
+				this.playerOneScore++;
+			}else{
+				this.playerTwoScore++;
+			}
+		}
+	}
+	
+	
+	this.draw = function(g){
+		g.strokeStyle = "black";
+		g.strokeRect(this.boardRec.x,this.boardRec.y,this.boardRec.width,this.boardRec.height);
+		g.fillStyle = "black";
+		g.font="24px Verdana";
+		for(x=0;x<this.boardDrawPoints.length;x++){
+			g.lineWidth = 2;
+			g.beginPath();
+			g.moveTo(this.boardDrawPoints[x]['x1'],this.boardDrawPoints[x]['y1']);
+			g.lineTo(this.boardDrawPoints[x]['x2'],this.boardDrawPoints[x]['y2']);
+			g.stroke();
+		}
+		for(x=0;x<this.boardSlots.length;x++){
+			//g.rect(this.boardSlots[x].clickArea.x,this.boardSlots[x].clickArea.y,this.boardSlots[x].clickArea.width,this.boardSlots[x].clickArea.height);
+			//g.fill();
+			g.font="54px Verdana";
+			g.fillText(""+this.boardSlots[x].text,this.boardSlots[x].x,this.boardSlots[x].y);
+		}
+		
+		
+	}
+
+}
\ No newline at end of file
diff --git a/examples/Tic_Tac_Toe/index.html b/examples/Tic_Tac_Toe/index.html
new file mode 100644
index 0000000..2d4afc0
--- /dev/null
+++ b/examples/Tic_Tac_Toe/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Tic Tac Toe</title>
+	<link rel="stylesheet" href="style.css">
+	<script src="../../libs/ObjectiveJS/core.o.js"></script>
+	<script src="../../libs/ObjectiveJS/math.o.js"></script>
+	<script src="../../libs/ObjectiveJS/array.o.js"></script>
+	<script src="../../libs/ObjectiveJS/dom.o.js"></script>
+	<script src="../../system/Scene.js"></script>
+	<script src="../../system/Cursor.js"></script>
+	<script src="../../system/Button.js"></script>
+	<script src="menuUI.js"></script>
+	<script src="hud.js"></script>
+	<script src="player.js"></script>
+	<script src="ai.js"></script>
+	<script src="ball.js"></script>
+	<script src="gameBoard.js"></script>
+	<script src="../../JinxEngine.js"></script>
+	<script src="main.js"></script>
+</head>
+<body>
+	<h1>Tic Tac Toe Example</h1>
+	<nav>
+		<button id="newGameButton">New Game</button>
+		<button id="PauseButton">Pause</button>
+		<button id="quitButton">Quit</button>
+	</nav>
+	<canvas id="screen"  height="400" width="800">
+		<p>your browser will not support canvas, upgrade your browser.</p>
+	</canvas>
+</body>
+</html>
diff --git a/examples/Tic_Tac_Toe/main.js b/examples/Tic_Tac_Toe/main.js
new file mode 100644
index 0000000..667c97c
--- /dev/null
+++ b/examples/Tic_Tac_Toe/main.js
@@ -0,0 +1,38 @@
+var myDom = new DOM();
+var myEngine = new GameEngine();
+myEngine.engineMode="live";
+var gamePaused=0;
+myDom.OnReady(function(){
+	myEngine.setDisplay("screen");
+	myDom.getId("newGameButton").addEventListener("click", function(){
+		myEngine.stop();
+		var mainMenu = new Scene();
+		var menuUI = mainMenu.addObject(new MenuUI());
+		var tmpCur = new Cursor("image");
+		tmpCur.imgSrc="cursor.png";
+		var cursor = mainMenu.addObject(tmpCur);
+		/*
+		var gameScene = new Scene();
+		var hudId = gameScene.addObject(new HUD());
+		var playerOneId = gameScene.addObject(new Player("left","red","Player One"));
+		var playerTwoId = gameScene.addObject(new Player("right","blue","Player Two"));
+		var ballId = gameScene.addObject(new Ball());
+		*/
+		myEngine.setScene(mainMenu); 
+		myEngine.init();
+		myEngine.start();
+	}, false);
+	myDom.getId("PauseButton").addEventListener("click", function(){
+		if(gamePaused){
+			myEngine.start();
+			gamePaused=0;
+		}else{
+			myEngine.pause();
+			gamePaused=1;
+		}
+		
+	}, false);
+	myDom.getId("quitButton").addEventListener("click", function(){
+		myEngine.stop();
+	}, false);
+});
\ No newline at end of file
diff --git a/examples/Tic_Tac_Toe/menuUI.js b/examples/Tic_Tac_Toe/menuUI.js
new file mode 100644
index 0000000..7c84c87
--- /dev/null
+++ b/examples/Tic_Tac_Toe/menuUI.js
@@ -0,0 +1,197 @@
+function MenuUI(){
+	this.gameEngine;
+	this.mousePos;
+	this.buttonHover=false;
+	//this.buttionPos = {x:0,y:100,height:50,width:200}
+	this.buttons=[];
+	var buttonXPos;
+	var player1=0,player2=0;
+
+	this.init = function(e){
+		this.gameEngine = e;
+		//this.buttionPos.x = (this.gameEngine.getDisplayWidth()/2)-100;
+		buttonXPos = (this.gameEngine.getDisplayWidth()/2)-100;
+		this.buttons.push(new Button({
+			id:"startGameButton",
+			x:buttonXPos,
+			y:100,
+			height:50,
+			width:200,
+			baseColor:"darkGreen",
+			hoverColor:"green",
+			fontColor:"white",
+			borderColor:"black",
+			text:"Start Game"
+		}));
+		
+		this.buttons.push(new Button({
+			id:"pxSelect",
+			x:buttonXPos,
+			y:160,
+			height:50,
+			width:200,
+			baseColor:"darkGreen",
+			hoverColor:"green",
+			fontColor:"white",
+			borderColor:"black",
+			text:"Player X"
+		}));
+		
+		this.buttons.push(new Button({
+			id:"poSelect",
+			x:buttonXPos,
+			y:220,
+			height:50,
+			width:200,
+			baseColor:"darkGreen",
+			hoverColor:"green",
+			fontColor:"white",
+			borderColor:"black",
+			text:"Player O"
+		}));
+		for(x=0;x<this.buttons.length;x++){
+			this.buttons[x].init(e);
+		}
+	}
+	
+	this.update = function(){
+		for(x=0;x<this.buttons.length;x++){
+			this.buttons[x].update();
+		}
+		
+		var levelSelect = false;
+		if(this.gameEngine.getEventInStack("startGameButton",true)){
+			levelSelect=true;
+		}
+		if(this.gameEngine.getEventInStack("pxSelect",true)){
+			if(player1){
+				player1=0;
+			}else{
+				player1=1;
+			}
+		}
+		if(this.gameEngine.getEventInStack("poSelect",true)){
+			if(player2){
+				player2=0;
+			}else{
+				player2=1;
+			}
+		}
+		
+		
+		if(levelSelect){
+			var gameScene = new Scene();
+			var gameBoard = gameScene.addObject(new GameBoard());
+			//var hudId = gameScene.addObject(new HUD());
+			var tmpCur = new Cursor("image");
+			tmpCur.imgSrc="cursor.png";
+			var cursor = gameScene.addObject(tmpCur);
+			//var playerOneId = gameScene.addObject(new Player("left","red","Player X",player1));
+			//var playerTwoId = gameScene.addObject(new Player("right","blue","Player O",player2));
+			//var ballId = gameScene.addObject(new Ball());
+			this.gameEngine.setScene(gameScene); 
+			this.gameEngine.init();
+		}
+		
+		//this.mousePos=this.gameEngine.getMouse();
+		/*
+		if(this.mousePos.left){
+			//var scene = this.gameEngine.getActiveScene();
+			var scene = this.gameEngine.activeScene;
+			var ball = new Ball();
+			ball.init(this.gameEngine);
+			ball.setPosition(this.mousePos.x,this.mousePos.y);
+			scene.addObject(ball);
+			
+		}*/
+		/*
+		if(this.mousePos.x>this.buttionPos.x&&this.mousePos.x<this.buttionPos.x+this.buttionPos.width&&this.mousePos.y>this.buttionPos.y&&this.mousePos.y<this.buttionPos.y+this.buttionPos.height){
+			this.buttonHover=true;
+		}else{
+			this.buttonHover=false;
+		}
+		if(this.mousePos.left){
+			if(this.buttonHover){
+				var gameScene = new Scene();
+				var hudId = gameScene.addObject(new HUD());
+				var playerOneId = gameScene.addObject(new Player("left","red","Player One",1));
+				var playerTwoId = gameScene.addObject(new Player("right","blue","Player Two",1));
+				var ballId = gameScene.addObject(new Ball());
+				this.gameEngine.setScene(gameScene); 
+				this.gameEngine.init();
+			}
+		}*/
+		
+	}
+	/*
+	this.input = function(keyDown,keyPress,KeyUp){
+
+	}
+	
+	this.EventLisener = function(e){
+
+	}*/
+	/*
+	this.DrawMouseCursor = function(g){
+		var crossSize = 10;
+		if(this.mousePos.left){
+			g.fillStyle = "red";
+			g.strokeStyle="red";
+		}else{
+			g.fillStyle = "black";
+			g.strokeStyle="black";
+		}
+		g.lineWidth = 2;
+		g.beginPath();
+		g.moveTo(this.mousePos.x-crossSize,this.mousePos.y);
+		g.lineTo(this.mousePos.x+crossSize,this.mousePos.y);
+		g.stroke();
+		g.closePath();
+		g.beginPath();
+		g.moveTo(this.mousePos.x,this.mousePos.y-crossSize);
+		g.lineTo(this.mousePos.x,this.mousePos.y+crossSize);
+		g.stroke();
+		g.closePath();
+	}
+	
+	this.DrawPlayButton = function(g){
+		g.beginPath();
+		g.fillStyle = "black";
+		g.strokeStyle="black";
+		g.font="24px Verdana";
+		if(this.buttonHover){
+			g.fillStyle="green";
+		}else{
+			g.fillStyle="darkgreen";
+		}
+		g.rect(this.buttionPos.x,this.buttionPos.y,this.buttionPos.width,this.buttionPos.height);
+		g.fill();
+		g.stroke();
+		g.closePath();
+		g.fillStyle="black";
+		g.fillText("Start Game",this.buttionPos.x+30,this.buttionPos.y+35);
+	}*/
+	
+	this.draw = function(g){
+		g.font="34px Verdana";
+		g.fillStyle="black";
+		g.fillText("Pong Example Using Scenes",(this.gameEngine.getDisplayWidth()/2)-220,60);
+		//this.DrawPlayButton(g);
+		//this.DrawMouseCursor(g);
+		g.font="12px Verdana";
+		if(player1){
+			g.fillText("Player X: Computer",20,160);
+		}else{
+			g.fillText("Player X: Player",20,160);
+		}
+		if(player2){
+			g.fillText("Player O: Computer",20,180);
+		}else{
+			g.fillText("Player O: Player",20,180);
+		}
+		for(x=0;x<this.buttons.length;x++){
+			this.buttons[x].draw(g);
+		}
+	}
+
+}
\ No newline at end of file
diff --git a/examples/Tic_Tac_Toe/style.css b/examples/Tic_Tac_Toe/style.css
new file mode 100644
index 0000000..85b9944
--- /dev/null
+++ b/examples/Tic_Tac_Toe/style.css
@@ -0,0 +1,30 @@
+html,body{
+  background:black;
+  color:white;
+  width:800px;
+  padding:0px;
+  margin:0px auto 0px auto;
+}
+
+h1{
+	position:fixed;
+	top:0px;
+	left:0px;
+	font-size:12p;
+	padding:0px;
+	margin:0px;
+}
+
+canvas{
+  background:white;
+  margin:40px auto 0px auto;
+  height:400px;
+  width:800px;
+  cursor:none;
+}
+
+nav{
+	position:fixed;
+	top:0px;
+	right:0px;
+}
diff --git a/examples/flappyBird/cursor.gif b/examples/flappyBird/cursor.gif
new file mode 100644
index 0000000..47f2e80
Binary files /dev/null and b/examples/flappyBird/cursor.gif differ
diff --git a/examples/flappyBird/cursor.png b/examples/flappyBird/cursor.png
new file mode 100644
index 0000000..5a24d6e
Binary files /dev/null and b/examples/flappyBird/cursor.png differ
diff --git a/examples/flappyBird/flappy_twitter.png b/examples/flappyBird/flappy_twitter.png
new file mode 100644
index 0000000..5351fde
Binary files /dev/null and b/examples/flappyBird/flappy_twitter.png differ
diff --git a/examples/flappyBird/hud.js b/examples/flappyBird/hud.js
index 9882e7e..51ed981 100644
--- a/examples/flappyBird/hud.js
+++ b/examples/flappyBird/hud.js
@@ -62,4 +62,4 @@ function HUD(){
 			g.fillText("Score: "+this.playerOneScore,game_over_sign.scoreX,game_over_sign.scoreY);
 		}
 	}
-}
+}
\ No newline at end of file
diff --git a/examples/flappyBird/main.js b/examples/flappyBird/main.js
index 77e0e53..2ba7533 100644
--- a/examples/flappyBird/main.js
+++ b/examples/flappyBird/main.js
@@ -8,7 +8,10 @@ myDom.OnReady(function(){
 		myEngine.stop();
 		var mainMenu = new Scene();
 		var menuUI = mainMenu.addObject(new MenuUI());
-		var cursor = mainMenu.addObject(new Cursor());
+		var tmpCur = new Cursor("image");
+		tmpCur.imgSrc="cursor.png";
+		var cursor = mainMenu.addObject(tmpCur);
+		//var cursor = mainMenu.addObject(new Cursor());
 		myEngine.setScene(mainMenu); 
 		myEngine.init();
 		myEngine.start();
@@ -26,4 +29,4 @@ myDom.OnReady(function(){
 	myDom.getId("quitButton").addEventListener("click", function(){
 		myEngine.stop();
 	}, false);
-});
+});
\ No newline at end of file
diff --git a/examples/flappyBird/menuUI.js b/examples/flappyBird/menuUI.js
index 47afa76..beb60bb 100644
--- a/examples/flappyBird/menuUI.js
+++ b/examples/flappyBird/menuUI.js
@@ -8,7 +8,6 @@ function MenuUI(){
 	this.buttons=[];
 	var buttonXPos;
 	
-
 	this.init = function(e){
 		this.gameEngine = e;
 		buttonXPos = (this.gameEngine.getDisplayWidth()/2)-100;
@@ -99,7 +98,9 @@ function MenuUI(){
 			}
 			var player = gameScene.addObject(new Player("red","Player",playerSpeed));
 			var hudId = gameScene.addObject(new HUD());
-			var cursor = gameScene.addObject(new Cursor("crosshair"));
+			var tmpCur = new Cursor("image");
+			tmpCur.imgSrc="cursor.gif";
+			var cursor = gameScene.addObject(tmpCur);
 			this.gameEngine.setScene(gameScene); 
 			this.gameEngine.init();
 		}
@@ -113,5 +114,4 @@ function MenuUI(){
 			this.buttons[x].draw(g);
 		}
 	}
-
-}
+}
\ No newline at end of file
diff --git a/examples/flappyBird/player.js b/examples/flappyBird/player.js
index c82e7c4..a2dc129 100644
--- a/examples/flappyBird/player.js
+++ b/examples/flappyBird/player.js
@@ -9,12 +9,18 @@ function Player(c,n,s){
 	this.gameEngine;
 	this.upKey;
 	this.movingUp=false;
+	this.img;
+	this.displayType="image";
 
 	
 	this.init = function(e){
 		this.gameEngine = e;
 		this.x = this.gameEngine.getDisplay("widthCenter");
 		this.y = this.gameEngine.getDisplay("heightCenter"); 
+		if(this.displayType=="image"){
+			this.img  = new Image(); 
+			this.img.src = "flappy_twitter.png";
+		}
 	}
 
 	this.input = function(keys){
@@ -48,12 +54,17 @@ function Player(c,n,s){
 	}
 	
 	this.draw = function(g){		
-		g.fillStyle = this.color;
-		g.beginPath();
-		g.arc(this.x,this.y,this.radius,0,2*Math.PI);
-		g.fill();
+		if(this.displayType=="image"){
+			g.drawImage(this.img,this.x-10,this.y-10,20,20);
+		}else{
+			g.fillStyle = this.color;
+			g.beginPath();
+			g.arc(this.x,this.y,this.radius,0,2*Math.PI);
+			g.fill();
+		}
 		g.fillStyle = "black";
 		g.font="12px Verdana";
 		g.fillText(""+this.name,this.x-20,this.y-10);
+		
 	}
 };
diff --git a/examples/flappyBird/wall.js b/examples/flappyBird/wall.js
index da67850..9aee9d9 100644
--- a/examples/flappyBird/wall.js
+++ b/examples/flappyBird/wall.js
@@ -63,6 +63,8 @@ function Wall(c,s,d){
 		g.fillStyle = this.color;
 		g.fillRect(this.wallOneCollitionBox.x,this.wallOneCollitionBox.y,this.wallOneCollitionBox.width,this.wallOneCollitionBox.height);
 		g.fillRect(this.wallTwoCollitionBox.x,this.wallTwoCollitionBox.y,this.wallTwoCollitionBox.width,this.wallTwoCollitionBox.height);
+		//g.fillStyle = "green";
+		//g.fillRect(this.playerCollitionBox.x,this.playerCollitionBox.y,this.playerCollitionBox.width,this.playerCollitionBox.height);
 	}
 	
 	
diff --git a/examples/pong2/ai.js b/examples/pong2/ai.js
index 905f773..3e3eff3 100644
--- a/examples/pong2/ai.js
+++ b/examples/pong2/ai.js
@@ -1,4 +1,57 @@
 function AI(){
+	this.gameEngine;
+	this.ai_perams;
+	this.ball;
+	this.player;
+	this.side;
 
+	this.init = function(e,p){
+		this.gameEngine=e;
+		this.ai_perams={
+			distance_detect:100,
+			accuracy:10
+		}
+		this.ball = this.gameEngine.getEventInStack("ball",false);
+		this.player = p;
+		/*
+		if(typeof(this.player)!=="undefined"){
+			if(this.player.x-this.ball.x<0){//left side player
+				this.side="left";
+			}else{//right side player
+				this.side="right";
+			}
+		}*/
+	}
 
-}
+	this.update = function(){
+		this.ball = this.gameEngine.getEventInStack("ball",false);
+		
+	}
+	
+	this.getMove = function(){
+		if(this.getDistanceFromBall()<=this.ai_perams.distance_detect){
+			if(this.player.y>this.ball.y){
+				return "up";
+			}
+			if(this.player.y+this.player.paddleLength<this.ball.y){
+				return "down";
+			}
+		}
+		return "dont move";
+	}
+	
+	this.getDistanceFromBall = function(){
+		dis =0;
+		switch(this.side){
+			case "left":
+				dis = this.ball.x -(this.player.x+this.player.paddleThickness);
+			break;
+			case "right":
+				dis = this.player.x-this.ball.x;
+			break;
+		}
+		return dis;
+	}
+	
+
+}
\ No newline at end of file
diff --git a/examples/pong2/ball.js b/examples/pong2/ball.js
index cc397d2..0e6d86c 100644
--- a/examples/pong2/ball.js
+++ b/examples/pong2/ball.js
@@ -62,18 +62,21 @@ function Ball(){
 				//this.direction = 2 * (90 - this.direction) + 180;
 			}
 			if(this.y<0){
+			/*
 				this.y=0;
 				var wallX = 0;
 				var wallY = Math.findYofCircleByDegrees(this.y,speed,this.direction);
-				this.direction = Math.AngleOfReflection(Math.angleOfTwoLines(this.x,this.y,wallX,wallY));
+				this.direction = Math.AngleOfReflection(Math.angleOfTwoLines(this.x,this.y,wallX,wallY));*/
+				this.direction+= this.direction;
 			}
 			if(this.y+this.radius>this.gameEngine.getDisplayHeight()){
-				var v=this.direction;
+				/*var v=this.direction;
 				var n=90;
 				var u = (v*n/n*n)*n;
 				var w=v-u;
-				this.direction=w;
+				this.direction=w;*/
 				//this.direction = 2 * (90 - this.direction) + 180;
+				this.direction+= this.direction;
 			}
 			var errorBuffer = 3;
 			if(this.x<-errorBuffer||this.y<-errorBuffer||this.x>this.gameEngine.getDisplay("width")+errorBuffer||this.y>this.gameEngine.getDisplay("height")+errorBuffer){
@@ -81,8 +84,44 @@ function Ball(){
 				this.y = this.gameEngine.getDisplay("heightCenter"); 
 				this.direction = Math.randomNumberRange(0,360);
 			}
+			
+			var player1 = this.gameEngine.getEventInStack("player_Player One",false);
+			var player2 = this.gameEngine.getEventInStack("player_Player Two",false);
+			
+			this.player1CollitionBox ={
+				x:player1.x-9,
+				y:player1.y-9,
+				width:player1.width,
+				height:player1.height
+			}
+			
+			this.player2CollitionBox ={
+				x:player2.x-9,
+				y:player2.y-9,
+				width:player2.width,
+				height:player2.height
+			}
+			
+			this.ballCollitionBox={
+				x:this.x-9,
+				y:this.y-9,
+				width:8,
+				height:8,
+			}
+			
+			if(this.gameEngine.collitionDetection(this.player1CollitionBox,this.ballCollitionBox)){//player One
+				this.direction+= this.direction;
+			}
+			
+			if(this.gameEngine.collitionDetection(this.player2CollitionBox,this.ballCollitionBox)){//player Two
+				this.direction+= this.direction;
+			}
+			
+			this.gameEngine.getEventInStack("ball",true);
+			this.gameEngine.addEvent({name:"ball",x:this.x,y:this.y});
 		}
 		
+		
 
 	}
 	
@@ -93,4 +132,4 @@ function Ball(){
 		g.arc(this.x,this.y,this.radius,0,2*Math.PI);
 		g.fill();
 	}
-}
+}
\ No newline at end of file
diff --git a/examples/pong2/cursor.png b/examples/pong2/cursor.png
new file mode 100644
index 0000000..5a24d6e
Binary files /dev/null and b/examples/pong2/cursor.png differ
diff --git a/examples/pong2/hud.js b/examples/pong2/hud.js
index 72919fc..310f213 100644
--- a/examples/pong2/hud.js
+++ b/examples/pong2/hud.js
@@ -77,4 +77,4 @@ function HUD(){
 		
 	}
 
-}
+}
\ No newline at end of file
diff --git a/examples/pong2/index.html b/examples/pong2/index.html
index 9b567f5..20b9793 100644
--- a/examples/pong2/index.html
+++ b/examples/pong2/index.html
@@ -8,6 +8,8 @@
 	<script src="../../libs/ObjectiveJS/array.o.js"></script>
 	<script src="../../libs/ObjectiveJS/dom.o.js"></script>
 	<script src="../../system/Scene.js"></script>
+	<script src="../../system/Cursor.js"></script>
+	<script src="../../system/Button.js"></script>
 	<script src="menuUI.js"></script>
 	<script src="hud.js"></script>
 	<script src="player.js"></script>
diff --git a/examples/pong2/menuUI.js b/examples/pong2/menuUI.js
index 1e31394..10e00ce 100644
--- a/examples/pong2/menuUI.js
+++ b/examples/pong2/menuUI.js
@@ -2,15 +2,107 @@ function MenuUI(){
 	this.gameEngine;
 	this.mousePos;
 	this.buttonHover=false;
-	this.buttionPos = {x:0,y:100,height:50,width:200}
+	//this.buttionPos = {x:0,y:100,height:50,width:200}
+	this.buttons=[];
+	var buttonXPos;
 
 	this.init = function(e){
 		this.gameEngine = e;
-		this.buttionPos.x = (this.gameEngine.getDisplayWidth()/2)-100;
+		//this.buttionPos.x = (this.gameEngine.getDisplayWidth()/2)-100;
+		buttonXPos = (this.gameEngine.getDisplayWidth()/2)-100;
+		this.buttons.push(new Button({
+			id:"PvP",
+			x:buttonXPos,
+			y:100,
+			height:50,
+			width:200,
+			baseColor:"darkGreen",
+			hoverColor:"green",
+			fontColor:"white",
+			borderColor:"black",
+			text:"Play PvP"
+		}));
+		
+		this.buttons.push(new Button({
+			id:"PvC",
+			x:buttonXPos,
+			y:160,
+			height:50,
+			width:200,
+			baseColor:"darkGreen",
+			hoverColor:"green",
+			fontColor:"white",
+			borderColor:"black",
+			text:"Play PvC"
+		}));
+		
+		this.buttons.push(new Button({
+			id:"CvP",
+			x:buttonXPos,
+			y:220,
+			height:50,
+			width:200,
+			baseColor:"darkGreen",
+			hoverColor:"green",
+			fontColor:"white",
+			borderColor:"black",
+			text:"Play CvP"
+		}));
+		this.buttons.push(new Button({
+			id:"CvC",
+			x:buttonXPos,
+			y:280,
+			height:50,
+			width:200,
+			baseColor:"darkGreen",
+			hoverColor:"green",
+			fontColor:"white",
+			borderColor:"black",
+			text:"Play CvC"
+		}));
+		for(x=0;x<this.buttons.length;x++){
+			this.buttons[x].init(e);
+		}
 	}
 	
 	this.update = function(){
-		this.mousePos=this.gameEngine.getMouse();
+		for(x=0;x<this.buttons.length;x++){
+			this.buttons[x].update();
+		}
+		var player1,player2;
+		var levelSelect = false;
+		if(this.gameEngine.getEventInStack("PvP",true)){
+			player1=0;
+			player2=0;
+			levelSelect=true;
+		}
+		if(this.gameEngine.getEventInStack("PvC",true)){
+			player1=0;
+			player2=1;
+			levelSelect=true;
+		}
+		if(this.gameEngine.getEventInStack("CvP",true)){
+			player1=1;
+			player2=0;
+			levelSelect=true;
+		}
+		if(this.gameEngine.getEventInStack("CvC",true)){
+			player1=1;
+			player2=1;
+			levelSelect=true;
+		}
+		
+		if(levelSelect){
+			var gameScene = new Scene();
+			var hudId = gameScene.addObject(new HUD());
+			var playerOneId = gameScene.addObject(new Player("left","red","Player One",player1));
+			var playerTwoId = gameScene.addObject(new Player("right","blue","Player Two",player2));
+			var ballId = gameScene.addObject(new Ball());
+			this.gameEngine.setScene(gameScene); 
+			this.gameEngine.init();
+		}
+		
+		//this.mousePos=this.gameEngine.getMouse();
 		/*
 		if(this.mousePos.left){
 			//var scene = this.gameEngine.getActiveScene();
@@ -21,6 +113,7 @@ function MenuUI(){
 			scene.addObject(ball);
 			
 		}*/
+		/*
 		if(this.mousePos.x>this.buttionPos.x&&this.mousePos.x<this.buttionPos.x+this.buttionPos.width&&this.mousePos.y>this.buttionPos.y&&this.mousePos.y<this.buttionPos.y+this.buttionPos.height){
 			this.buttonHover=true;
 		}else{
@@ -30,24 +123,24 @@ function MenuUI(){
 			if(this.buttonHover){
 				var gameScene = new Scene();
 				var hudId = gameScene.addObject(new HUD());
-				var playerOneId = gameScene.addObject(new Player("left","red","Player One"));
-				var playerTwoId = gameScene.addObject(new Player("right","blue","Player Two"));
+				var playerOneId = gameScene.addObject(new Player("left","red","Player One",1));
+				var playerTwoId = gameScene.addObject(new Player("right","blue","Player Two",1));
 				var ballId = gameScene.addObject(new Ball());
 				this.gameEngine.setScene(gameScene); 
 				this.gameEngine.init();
 			}
-		}
+		}*/
 		
 	}
-	
+	/*
 	this.input = function(keyDown,keyPress,KeyUp){
 
 	}
 	
 	this.EventLisener = function(e){
 
-	}
-	
+	}*/
+	/*
 	this.DrawMouseCursor = function(g){
 		var crossSize = 10;
 		if(this.mousePos.left){
@@ -86,14 +179,17 @@ function MenuUI(){
 		g.closePath();
 		g.fillStyle="black";
 		g.fillText("Start Game",this.buttionPos.x+30,this.buttionPos.y+35);
-	}
+	}*/
 	
 	this.draw = function(g){
 		g.font="34px Verdana";
 		g.fillStyle="black";
 		g.fillText("Pong Example Using Scenes",(this.gameEngine.getDisplayWidth()/2)-220,60);
-		this.DrawPlayButton(g);
-		this.DrawMouseCursor(g);
+		//this.DrawPlayButton(g);
+		//this.DrawMouseCursor(g);
+		for(x=0;x<this.buttons.length;x++){
+			this.buttons[x].draw(g);
+		}
 	}
 
-}
+}
\ No newline at end of file
diff --git a/examples/pong2/player.js b/examples/pong2/player.js
index a0772a3..8949eac 100644
--- a/examples/pong2/player.js
+++ b/examples/pong2/player.js
@@ -1,4 +1,4 @@
-function Player(s,c,n){
+function Player(s,c,n,pid){
 	this.side=s;
 	this.color=c;
 	this.score=0;
@@ -15,6 +15,8 @@ function Player(s,c,n){
 	this.paddingFromWall=3;
 	this.upKey;
 	this.downKey;
+	this.playerID=pid;
+	this.ai;
 	
 	//this.prototype.ObjectType = "Player";
 	
@@ -29,28 +31,52 @@ function Player(s,c,n){
 		}else{
 			this.x=this.gameEngine.getDisplayWidth()-(this.paddingFromWall+this.paddleThickness);
 		}
+		if(this.playerID==1){//computer player
+			this.ai = new AI();
+			this.ai.init(e,this);
+			this.ai.side=this.side;
+		}
+		
 	}
 
 	this.input = function(keys){
 		//console.log(keyDown[0]);
-		if(this.side=="right"){
-			this.upKey=38;
-			this.downKey=40;
-		}else if(this.side=="left"){
-			this.upKey=87;
-			this.downKey=83;	
-		}
-		if(keys[this.upKey]){//up key
-			this.y-=this.speed;
-			if(this.y<0){
-				this.y=0;
+		if(this.playerID==0){//human player
+			if(this.side=="right"){
+				this.upKey=38;
+				this.downKey=40;
+			}else if(this.side=="left"){
+				this.upKey=87;
+				this.downKey=83;	
 			}
-		}
-		if(keys[this.downKey]){//down key
-			this.y+=this.speed;
-			if(this.y+this.paddleLength>this.gameEngine.getDisplayHeight()){
-				this.y=this.gameEngine.getDisplayHeight()-this.paddleLength;
+			if(keys[this.upKey]){//up key
+				this.move("up");
 			}
+			if(keys[this.downKey]){//down key
+				this.move("down");
+			}
+		}else{//computer player
+			this.ai.update();
+			this.move(this.ai.getMove());
+		}
+		this.gameEngine.getEventInStack("player_"+this.name,true);
+		this.gameEngine.addEvent({name:"player_"+this.name,x:this.x,y:this.y,height:this.paddleLength,width:this.paddleThickness});
+	}
+		
+	this.move = function(direction){
+		switch(direction){
+			case "up":
+				this.y-=this.speed;
+				if(this.y<0){
+					this.y=0;
+				}
+			break;
+			case "down":
+				this.y+=this.speed;
+				if(this.y+this.paddleLength>this.gameEngine.getDisplayHeight()){
+					this.y=this.gameEngine.getDisplayHeight()-this.paddleLength;
+				}
+			break;
 		}
 	}
 		
diff --git a/examples/pong2/pong.js b/examples/pong2/pong.js
index 38dd684..667c97c 100644
--- a/examples/pong2/pong.js
+++ b/examples/pong2/pong.js
@@ -8,12 +8,16 @@ myDom.OnReady(function(){
 		myEngine.stop();
 		var mainMenu = new Scene();
 		var menuUI = mainMenu.addObject(new MenuUI());
-		
+		var tmpCur = new Cursor("image");
+		tmpCur.imgSrc="cursor.png";
+		var cursor = mainMenu.addObject(tmpCur);
+		/*
 		var gameScene = new Scene();
 		var hudId = gameScene.addObject(new HUD());
 		var playerOneId = gameScene.addObject(new Player("left","red","Player One"));
 		var playerTwoId = gameScene.addObject(new Player("right","blue","Player Two"));
 		var ballId = gameScene.addObject(new Ball());
+		*/
 		myEngine.setScene(mainMenu); 
 		myEngine.init();
 		myEngine.start();
@@ -31,4 +35,4 @@ myDom.OnReady(function(){
 	myDom.getId("quitButton").addEventListener("click", function(){
 		myEngine.stop();
 	}, false);
-});
+});
\ No newline at end of file
diff --git a/examples/pong2/scene_main_menu.js b/examples/pong2/scene_main_menu.js
new file mode 100644
index 0000000..9cf0170
--- /dev/null
+++ b/examples/pong2/scene_main_menu.js
@@ -0,0 +1,5 @@
+ function MainMenu(){
+	
+	
+ }
+ MainMenu.extends(Scene)
\ No newline at end of file
diff --git a/extras/ChartPackage/BarChart.js b/extras/ChartPackage/BarChart.js
new file mode 100644
index 0000000..c55aeb0
--- /dev/null
+++ b/extras/ChartPackage/BarChart.js
@@ -0,0 +1,202 @@
+function BarChart(data){
+	this.gameEngine;
+	this.data=data;
+	this.mousePos;
+	this.barWidth=10;
+	this.barSpacing=10;
+
+	this.init = function(e){
+		this.gameEngine = e;
+		//this.getChartData();
+	}
+	
+	this.update = function(){
+		//this.getChartData();
+		this.mousePos=this.gameEngine.getMouse();
+	}
+	
+	this.getChartData = function(){
+		this.chartData=[];
+		for(var x=10;x<this.gameEngine.getDisplayWidth();x=x+(this.barWidth+this.barSpacing)){
+			if(x+this.barWidth<this.gameEngine.getDisplayWidth()){
+				this.chartData.push(Math.randomNumberRange(10,this.gameEngine.getDisplayHeight()-10));
+			}
+		}
+	}
+	
+	this.input = function(keyDown,keyPress,KeyUp){
+		if(keyDown.indexOf(19)>-1){//pause button
+			console.log("pause button");
+			this.gameEngine.addEvent({name:"GameEngine",message:"pause"});
+		}
+	}
+	
+	this.EventLisener = function(e){
+		var pointEvent = this.gameEngine.getEventInStack("point",true);
+		if(pointEvent){
+			if(pointEvent.player==1){
+				this.playerOneScore++;
+			}else{
+				this.playerTwoScore++;
+			}
+		}
+	}
+	
+	this.drawChartBox = function(g,area,data){
+		g.strokeStyle="black";
+		g.fillStyle="black";
+		g.lineWidth = 2;
+		g.rect(area.x,area.y,area.w,area.h);
+		g.stroke();
+		g.save();
+		var rotate = -1.55;
+		g.rotate(rotate);
+		g.translate(-335, -10);
+		var fontSize = Math.floor(area.h / 25);
+		g.font=fontSize + "pt Helvetica";
+		g.fillText(data.yAxis_label,area.x-20,area.y);
+		g.restore();
+		for(var i=0;i<data.markers.length;i++){
+			this.drawMarkLine(g,area,data.markers[i]);
+		}
+		this.drawKey(g,area,data);
+	}
+	
+	this.drawMarkLine = function(g,area,mark){
+		var value = (area.y+area.h)-((area.h/this.getBiggest())*mark);//(((mark/20)*area.h)+area.y);
+		g.beginPath();
+		g.strokeStyle="black";
+		g.lineWidth = 1.5;
+		g.moveTo(area.x,value);
+		g.lineTo(area.x+area.w,value);
+		g.stroke();
+		var str = "$"+mark;
+		g.fillText(str,area.x-20,value);
+		g.closePath();
+	}
+	
+	this.drawKey = function(g,area,data){
+		
+		for(var i=0;i<data.itemLabels.length;i++){
+			var color = data.itemLabels[i].color;
+			var keyData={
+				x:area.x+area.w+20,
+				y:area.y*i+60,
+				w:20,
+				h:20,
+				color:data.itemLabels[i].color,
+				label:data.itemLabels[i].label
+			}
+			g.fillStyle = color;
+			g.beginPath();
+			g.rect(keyData.x,keyData.y,keyData.h,keyData.w);
+			g.closePath();
+			g.fill();
+			g.strokeStyle="#242425";
+			g.stroke();
+			g.fillStyle = "black";
+			g.fillText(keyData.label,keyData.x+keyData.w+5,keyData.y+(keyData.h/2)+2);
+		}
+		
+		
+	}
+	
+	this.getBiggest = function(){
+		var biggest=0;
+		var data = this.data;
+		data.markers.forEach(function(num){
+			if(num>biggest){
+				biggest=num;
+			}
+		});
+		for(var x=0;x<data.data.length;x++){
+			for(var y=0;y<data.data[x].length;y++){
+				if(data.data[x][y]>biggest){
+					biggest=data.data[x][y];
+				}
+			}
+		}
+		return biggest;
+	}
+	
+	this.drawBarGroup = function(g,area,data){
+		for(var i=0;i<data.itemLabels.length;i++){
+			var bar ={
+				x:area.x+((area.w/data.itemLabels.length)*i),//(area.w/data.itemLabels.length)*i,
+				y:area.y,
+				w:(area.w/data.itemLabels.length)-2,
+				h:area.h,
+				color:data.itemLabels[i].color,
+				display:"vertical",
+				value:data.data[i],
+				max:this.getBiggest()
+			}
+			this.drawBar(g,bar);
+		}
+	}
+	
+	this.drawBar = function(g,barData){
+		g.beginPath();
+		var value = (barData.value/barData.max)*barData.h;
+		var drawRec={
+			x:barData.x,
+			y:barData.y+value,
+			w:barData.w,
+			h:barData.h-value
+		};
+		var grd = g.createLinearGradient(barData.x, 0, barData.x+barData.w, 0);
+		grd.addColorStop(0, barData.color);
+		grd.addColorStop(0.5, "#D8D8D8");
+		grd.addColorStop(1, barData.color);
+		g.fillStyle = grd;
+		//g.fillStyle=barData.color;
+		g.strokeStyle="black";
+		g.rect(drawRec.x,drawRec.y,drawRec.w,drawRec.h);
+		g.fill();
+		g.stroke();
+		g.closePath();
+	}
+	
+	this.draw = function(g){
+		//g.font="8px Verdana";
+		var chartArea = {x:100,y:50,h:300,w:500};
+		this.drawChartBox(g,chartArea,this.data);
+		var padding=3;
+		var spacePerGroup = chartArea.w/data.groupLabels.length;
+		var groupWidth = spacePerGroup-(padding);
+		var padMult = 8;
+		for(var i=0;i<data.groupLabels.length;i++){
+			var groupArea = {
+				x:chartArea.x+(i*groupWidth)+(padding*padMult),
+				y:chartArea.y,
+				h:chartArea.h,
+				w:groupWidth-(padding*padMult),
+			}
+			var groupData ={
+				itemLabels:data.itemLabels,
+				data:data.data[i]
+			}
+			this.drawBarGroup(g,groupArea,groupData);
+			g.beginPath();
+			g.save();
+			g.strokeStyle="black";
+			g.fillStyle="black";
+			var rotate = 0.17;
+			g.translate(60, (i*15)*-1);
+			g.rotate(rotate);
+			
+			g.fillText(data.groupLabels[i],groupArea.x,groupArea.y+groupArea.h);
+			g.restore();
+			g.closePath();
+		}
+		
+		
+		//for(var x=0;x<this.data.groupLabels.length;x++){
+			//var heightPoint = this.gameEngine.getDisplayHeight()-this.data.groupLabels[x];
+			//var heightPointData = this.chartData[x];
+			//this.drawBar(g,x,heightPoint);
+		//}
+		//g.fillText(""+this.chartData.length+" data points",this.gameEngine.getDisplayWidth()-60,9);
+	}
+
+}
diff --git a/extras/ChartPackage/LineChart.js b/extras/ChartPackage/LineChart.js
new file mode 100644
index 0000000..e4ed94b
--- /dev/null
+++ b/extras/ChartPackage/LineChart.js
@@ -0,0 +1,124 @@
+function LineChart(){
+	this.gameEngine;
+	this.chartData=[];
+	this.mousePos;
+	var tempThis=this;
+	this.mousePos;
+	this.mouseOverValue;
+	
+
+	this.init = function(e){
+		this.gameEngine = e;
+		this.getChartData();
+	}
+	
+	this.update = function(){
+		//this.getChartData();
+		this.mousePos=this.gameEngine.getMouse();
+	}
+	
+	
+	
+	
+	this.getChartData = function(){
+		this.chartData=[];
+		for(var x=10;x<this.gameEngine.getDisplayWidth();x=x+10){
+			this.chartData.push(Math.randomNumberRange(10,this.gameEngine.getDisplayHeight()-10));
+		}
+	}
+	
+	this.input = function(keyDown,keyPress,KeyUp){
+		if(keyDown.indexOf(19)>-1){//pause button
+			console.log("pause button");
+			this.gameEngine.addEvent({name:"GameEngine",message:"pause"});
+		}
+	}
+	
+	this.EventLisener = function(e){
+
+		var pointEvent = this.gameEngine.getEventInStack("point",true);
+		if(pointEvent){
+			if(pointEvent.player==1){
+				this.playerOneScore++;
+			}else{
+				this.playerTwoScore++;
+			}
+		}
+	}
+	
+	this.drawChartArea = function(g){
+		g.fillStyle = "black";
+		g.strokeStyle="black";
+		g.lineWidth = 2;
+		g.beginPath();
+		g.moveTo(10,0);
+		g.lineTo(10,this.gameEngine.getDisplayHeight()-10);
+		g.lineTo(this.gameEngine.getDisplayWidth()-10,this.gameEngine.getDisplayHeight()-10);
+		g.lineTo(10,this.gameEngine.getDisplayHeight()-10);
+		g.stroke();
+		g.closePath();
+		g.lineWidth = 1;
+		g.fillText(""+this.chartData.length+" data points",this.gameEngine.getDisplayWidth()-60,9);
+		g.fillText("X:"+this.mousePos.x+" Y:"+this.mousePos.y,this.gameEngine.getDisplayWidth()-60,20);
+	}
+	
+	this.drawChartedLine = function(g,x,oldVal,newVal){
+		g.beginPath();
+		g.strokeStyle="black";
+		g.fillStyle="black";
+		g.fillText(""+newVal,x*10,newVal);
+		if(((x-1)*10)<this.mousePos.x&&this.mousePos.x<((x+3)*10)){
+			g.strokeStyle="blue";
+		}else{
+			g.strokeStyle="green";
+		}
+		g.lineWidth = 2;
+		g.moveTo(x*10,oldVal);
+		g.lineTo((x+1)*10,newVal);
+		g.stroke();
+		g.closePath();
+	}
+	
+	this.drawChartedArea = function(g,data){
+		g.beginPath();
+		g.strokeStyle="lightblue";
+		g.fillStyle = "lightblue";
+		for(var x=0;x<this.chartData.length;x++){
+			g.lineWidth = 1;
+			g.lineTo((x+1)*10,this.gameEngine.getDisplayHeight()-this.chartData[x]);
+		}
+		g.lineTo(this.gameEngine.getDisplayWidth(),this.gameEngine.getDisplayHeight());
+		g.lineTo((x+1)*10,this.gameEngine.getDisplayHeight()-10);
+		g.lineTo(10,this.gameEngine.getDisplayHeight()-10);
+		g.fill();
+		g.stroke();
+		g.closePath();
+	}
+	
+	this.drawMouseCourser=function(g){
+		g.beginPath();
+		g.beginPath();
+		g.strokeStyle="red";
+		g.moveTo(this.mousePos.x,0);
+		g.lineTo(this.mousePos.x,this.gameEngine.getDisplayHeight()-10);
+		g.stroke();
+		g.closePath();
+	}
+	
+	this.draw = function(g){
+		g.fillStyle = "black";
+		g.font="8px Verdana";
+		
+			
+		this.drawChartArea(g)
+		this.drawChartedArea(g,this.chartData);
+		
+		for(var x=0;x<this.chartData.length;x++){
+			var heightPoint = this.gameEngine.getDisplayHeight()-this.chartData[x];
+			var heightPointData = this.chartData[x];
+			this.drawChartedLine(g,x,this.gameEngine.getDisplayHeight()-this.chartData[x-1],this.gameEngine.getDisplayHeight()-this.chartData[x]);
+		}
+		this.drawMouseCourser(g);
+	}
+
+}
diff --git a/extras/ChartPackage/PieChart.js b/extras/ChartPackage/PieChart.js
new file mode 100644
index 0000000..e2ac4dd
--- /dev/null
+++ b/extras/ChartPackage/PieChart.js
@@ -0,0 +1,152 @@
+function PieChart(data){
+	this.gameEngine;
+	this.data = data;
+	this.dataPoints=[];
+	this.center;
+	this.radius;
+	this.lastPosition = 0;
+	this.dataTotal = 0;
+	this.animated=false;
+	this.animatedData=[];
+	this.animationSpeed=0.01;
+	this.displayedPoints=1;
+	this.animating=false;
+	//this.pieSections=[];
+
+	this.init = function(e){
+		this.gameEngine = e;
+		this.center = [(this.gameEngine.getDisplayWidth() / 2)-200, (this.gameEngine.getDisplayHeight() / 2)];
+		this.radius = (Math.min(this.gameEngine.getDisplayWidth(), this.gameEngine.getDisplayHeight()) / 2)-40;
+		for(var i=0;i<this.data.length;i++){
+			this.dataTotal += this.data[i].value;
+		}
+		for(var i=0;i<this.data.length;i++){
+			if(this.animated){
+				this.animatedData.push({value:0});
+				this.animating=true;
+			}else{
+				var dataProcessed=Math.PI*2*(this.data[i].value/this.dataTotal);
+				this.dataPoints.push({
+					p1:this.lastPosition,
+					p2:this.lastPosition+dataProcessed
+				});
+				this.lastPosition += dataProcessed;
+				//var pieSlice = new ArcObject(this.center[0],this.center[1],this.radius,this.dataPoints.p1,this.dataPoints.p2,false);
+				//this.pieSections.push(pieSlice);
+			}
+		}
+	}
+	
+	this.setAnimation = function(animation,speed){
+		this.animated=animation;
+		this.animationSpeed=speed;
+	}
+	
+	this.update = function(){
+		if(this.animated&&this.animating){
+			this.dataPoints=[];
+			for(var i=0;i<this.data.length;i++){
+				if(this.animatedData[i].value<this.data[i].value){
+					if(i==0||this.animatedData[i-1].value==this.data[i-1].value){
+						var speed;
+						if(this.animatedData[i].value<(this.data[i].value/2)){
+							speed = (this.data[i].value-this.animatedData[i].value)/10;
+						}else{
+							speed=(this.data[i].value-this.animatedData[i].value)/3;
+						}
+						if(speed<this.animationSpeed){
+							speed=this.animationSpeed;
+						}
+						this.animatedData[i].value+=speed;
+					}
+				}
+				if(this.animatedData[i].value>this.data[i].value){
+					this.animatedData[i].value=this.data[i].value;
+				}
+				if(this.animatedData[i].value==this.data[i].value){
+					if(i>this.displayedPoints){
+						this.displayedPoints=i;
+					}
+				}
+				var dataProcessed=Math.PI*2*(this.data[i].value/this.dataTotal);
+				var animatedDataProcessed=Math.PI*2*(this.animatedData[i].value/this.dataTotal);
+				var finalValue;
+				if(animatedDataProcessed<dataProcessed){
+					finalValue=animatedDataProcessed;
+				}else{
+					finalValue=dataProcessed;
+				}
+				this.dataPoints.push({
+					p1:this.lastPosition,
+					p2:this.lastPosition+finalValue
+				});
+				this.lastPosition += dataProcessed;
+				if(this.displayedPoints+1==this.data.length){
+					this.animating=false;
+				}
+			}
+		}
+		//this.mousePos=this.gameEngine.getMouse();
+		//for(i=0;i<this.dataTotal.length;i++){
+			
+		//}
+		
+	}
+	
+	this.draw = function(g){	
+		g.font="12px Arial";
+		g.beginPath();
+		g.fillStyle="white";
+		g.strokeStyle="black";
+		var rect = {
+			x:this.gameEngine.getDisplayWidth()-280,
+			y:60,
+			w:250,
+			h:this.data.length*25
+		}
+		g.rect(rect.x,rect.y,rect.w,rect.h);
+		g.fill();
+		g.stroke();
+		g.closePath();
+		for (var i = 0; i < this.data.length; i++) {
+			var value;
+			var realVal = this.data[i].value;
+			if(this.animated&&this.animating){
+				value=this.animatedData[i].value;
+			}else{
+				value=this.data[i].value;
+			}
+			var keyData={
+				x:this.gameEngine.getDisplayWidth()-260,
+				y:24*i+65,
+				h:20,
+				w:20,
+				color:this.data[i].color,
+				label:this.data[i].label,
+				value:value,
+				chart:{
+					c1:this.center[0],
+					c2:this.center[1],
+					r:this.radius,
+					p1:this.dataPoints[i].p1,
+					p2:this.dataPoints[i].p2
+				}
+			}
+			g.fillStyle = keyData.color;
+			g.beginPath();
+			if((this.animated&&i<=this.displayedPoints)||!this.animated){
+				g.moveTo(keyData.chart.c1,keyData.chart.c2);
+				//g.fill(this.pieSections[i].getPath(g));
+				//g.stroke(this.pieSections[i].getPath(g));
+				g.arc(keyData.chart.c1,keyData.chart.c2,keyData.chart.r,keyData.chart.p1,keyData.chart.p2,false);
+			}
+			g.closePath();
+			g.rect(keyData.x,keyData.y,keyData.h,keyData.w);
+			g.fill();
+			g.strokeStyle="white";
+			g.stroke();
+			g.fillStyle = "black";
+			g.fillText("[ "+realVal+"% ] "+keyData.label,keyData.x+keyData.w+5,keyData.y+(keyData.h/2)+2);
+		}		
+	}
+}
diff --git a/extras/GridMap.js b/extras/GridMap.js
new file mode 100644
index 0000000..62022c0
--- /dev/null
+++ b/extras/GridMap.js
@@ -0,0 +1,99 @@
+function GridMap(){
+	this.gameEngine;
+	this.spriteSheet;
+	this.gridData;
+	this.drawables = [];
+	this.totalTiles;
+	this.tiles = [];
+	this.collisionRects=[];
+	
+	this.init = function(e,arg){
+		this.gameEngine = e;
+		this.spriteSheet = arg.spriteSheet;
+		this.gridData=arg.grid;
+		var rows = this.gridData.data[0].length;
+		var cols = this.gridData.data.length;
+		for(x=0;x<rows;x++){
+			for(y=0;y<cols;y++){
+				var grid_data="";
+				var mapRow = this.gridData.data[y];
+				var map = mapRow[x];
+				this.gridData.key.forEach(function(key){
+					if(key.name == map){
+						var clRc=false;
+						if(key.collisionBox){
+							clRc=true;
+						}
+						grid_data={
+							x:key.x,
+							y:key.y,
+							h:key.h,
+							w:key.w,
+							colRec:clRc
+						};
+					}
+				});
+				if(grid_data.colRec){
+					this.collisionRects.push({
+						x:this.gridData.perams.w*x,
+						y:this.gridData.perams.h*y,
+						w:this.gridData.perams.w,
+						h:this.gridData.perams.h
+					});
+				}
+				this.tiles.push({
+					pos:{
+						x:this.gridData.perams.w*x,
+						y:this.gridData.perams.h*y,
+						w:this.gridData.perams.w,
+						h:this.gridData.perams.h
+					},
+					texture:{
+						x:grid_data.x,
+						y:grid_data.y,
+						w:grid_data.w,
+						h:grid_data.h
+					}
+				});
+			}
+		}
+	}
+	
+	this.update = function(){
+		
+	}
+	
+	this.collisionCheck = function(testRect){//{x,y,h,w}
+		var tempEng = this.gameEngine;
+		//console.log("Rec Count "+this.collisionRects.length);
+		this.collisionRects.forEach(function(rec){
+			//console.log("test");
+			//console.log(rec);
+			//console.log("player");
+			//console.log(testRect);
+			if(tempEng.collitionDetection(testRect,rec)){
+				//console.log("HIT");
+				return true;
+			}
+		});
+		return false;
+	}
+	
+	this.draw = function(g){
+		var texture = this.spriteSheet.texture;
+		this.tiles.forEach(function(tile){
+			var tx,ty,tw,th,cx,cy,cw,ch;
+			cx = tile.pos.x;
+			cy = tile.pos.y
+			cw = tile.pos.w;
+			ch = tile.pos.h;
+			tx = tile.texture.x;
+			ty = tile.texture.y;
+			tw = tile.texture.w;
+			th = tile.texture.h;
+			g.drawImage(texture,tx,ty,tw,th,cx,cy,cw,ch);
+		});
+	}
+
+
+}
diff --git a/system/Buttion.js b/system/Button.js
similarity index 60%
rename from system/Buttion.js
rename to system/Button.js
index 1a79c28..eb000e6 100644
--- a/system/Buttion.js
+++ b/system/Button.js
@@ -7,33 +7,42 @@ function Button(args){
 	this.buttonColors = {base:args.baseColor,hover:args.hoverColor,font:args.fontColor,border:args.borderColor};
 	this.cursorBox;
 	this.buttonId = args.id;
+	this.delay=30;
+	this.delayCounter=0;
+	this.fontStyle="24px Verdana";
+	
 
 	this.init = function(e){
 		this.gameEngine = e;
 	}
 	
 	this.update = function(){
-		this.mousePos = this.gameEngine.getEventInStack("cursor",false);
-		this.cursorBox={
-			x:this.mousePos.x,
-			y:this.mousePos.y,
-			height:2,
-			width:2
-		}
-		if(this.gameEngine.collitionDetection(this.cursorBox,this.buttionPos)){
-			this.buttonHover=true;
-			if(this.mousePos.left){
-				this.gameEngine.addEvent({name:this.buttonId,clicked:true});
+		if(this.delayCounter==0){
+			this.mousePos = this.gameEngine.getEventInStack("cursor",false);
+			this.cursorBox={
+				x:this.mousePos.x,
+				y:this.mousePos.y,
+				height:2,
+				width:2
+			}
+			if(this.gameEngine.collitionDetection(this.cursorBox,this.buttionPos)){
+				this.buttonHover=true;
+				if(this.mousePos.left){
+					this.gameEngine.addEvent({name:this.buttonId,clicked:true});
+					this.delayCounter=this.delay;
+				}
+			}else{
+				this.buttonHover=false;
 			}
 		}else{
-			this.buttonHover=false;
+			this.delayCounter--;
 		}
 	}
 	
 	this.draw = function(g){
 		g.beginPath();
 		g.strokeStyle=this.buttonColors.border;
-		g.font="24px Verdana";
+		g.font=this.fontStyle;
 		if(this.buttonHover){
 			g.fillStyle=this.buttonColors.hover;
 		}else{
@@ -47,4 +56,4 @@ function Button(args){
 		g.fillText(""+this.buttonText,this.buttionPos.x+30,this.buttionPos.y+35);
 	}
 
-}
+}
\ No newline at end of file
diff --git a/system/Cursor.js b/system/Cursor.js
index 28b36ca..d9a4089 100644
--- a/system/Cursor.js
+++ b/system/Cursor.js
@@ -1,7 +1,9 @@
 function Cursor(t){
 	this.gameEngine;
 	this.mousePos;
-	this.type=t
+	this.type=t;
+	this.img;
+	this.imgSrc;
 
 	this.init = function(e){
 		this.gameEngine = e;
@@ -14,6 +16,10 @@ function Cursor(t){
 		this.mousePos=this.gameEngine.getMouse();
 		this.gameEngine.getEventInStack("cursor",true);
 		this.gameEngine.addEvent({name:"cursor",x:this.mousePos.x,y:this.mousePos.y,left:this.mousePos.left});
+		if(this.type=="image"){
+			this.img  = new Image();
+			this.img.src = this.imgSrc;
+		}
 	}
 	
 	this.drawCrossHair = function(g){
@@ -60,10 +66,13 @@ function Cursor(t){
 			case "crosshair":
 				this.drawCrossHair(g);
 			break;
+			case "image":
+				g.drawImage(this.img,this.mousePos.x,this.mousePos.y,40,40);
+			break;
 			default:
 				this.drawDefault(g);
 			break;
 		}
 	}
 
-}
+}
\ No newline at end of file