/////////////////////////////////////
///
//		How to make a button
/
--------------------------
STEP 1: Declare the BUTTON
--------------------------

var bestButton = createButton(x,y,width, height, picture, text);

x,y are the coordinates of the buttons top left corner
width and height are the dimensions of the button
piture is the image (use null if you don't have or want an image)
and the text is the words written on the button.


Example

var bestButton = createButton(100,140, 200,40, "catZ.png", "Words");

OR 

var bestButton = createButton(100,140, 200,40, null, "Words"); 

Use null if you dpnt like / have catZ :)


-----------------------------
STEP 2: Give the button a job
-----------------------------
var bestButton = createButton(100,140, 200,40, null, "Words"); 

bestButton.job = function (){

	alert("I am the best at my job.  Period.");
}

You can make the button job do virtually anything, it can change screens, move characters etc


-----------------------
STEP 3: Draw the button
-----------------------

Easy.  Go to the engine.  Then tell the button to draw itself.  Its just like any other character in yoru game.

bestButton.draw();


---------------------------------
STEP 4: Make the Button Clickable
---------------------------------

Go to onClick(){


}

Here is the code that runs when the mouse clicks.  

To make the button work we need to ask the button if the mouse was over it during the click event

Then IF the mouse was over, tell the button to do its job.  (the job we did in step 2)


Example

function onClick(){

	if(bestButton.isMouseOver()) bestButton.job();

}


Thats all folks.

===============================================
===============================================



var player = createObjectPic("playerPic.bmp"); 
player.addFrames("playerPic2.bmp");


var frame = 0;

var screen;



//Main menu buttons
                          x   y  w    h      picture      text
var start = createButton(100,100, 200,50, "really.jpg", "Start Game");
start.job = function(){
	alert("Give me ALL your $$$");
	alert("-Thanks, Ubisoft");

}

If you have no picture, you can just say null instead

var newGame = createButton(250, 280, 250, 50, null, "NEW GAME");
newGame.job = function(){
	screen = 0;

}


//Setup
function setup(){

	frame = 0;
	duck.scale = 0.1;
	duck.y = 80;
	
	duck.speedx = 0;

	screen = 3;
}



//Main Game
function engine(){
	ctx.fillStyle = 'black';
	ctx.fillRect(0,0,w,h);

	
	
	if(screen == 0){//Cutscene
		duck.x = duck.x + duck.speedx;
		duck.draw();
	
	
	
		frame = frame + 1;
		ctx.font = '20pt Verdana';
		ctx.fillStyle = 'white';
		ctx.fillText("Teh frame counter is:" + frame, 30,380);

	
		if(frame == 100) duck.say("IT IS TIME.");
		else if(frame == 125) duck.speedx = 2;
		else if(frame == 130) {
			player.speedx = 2;
			player.speedy = 2;
		} else if (frame == 160){
			player.say("Finallly.  Jeez");
			player.speedx = 0;
			player.speedy = 0;
		
			speak("I am ALL the computer.");
		}else if(frame == 200){
		
			screen = 1; //Switches to the main game
		}
		
	}else if(screen == 1){ //Screen 1 is the main playable game
	
		player.x = mx;
		player.y = my;
		duck.x = duck.x + duck.speedx;
		duck.draw();
	
	
		if(player.collideObject(duck)){
			duck.say("ouch");
			player.say("Forgive me master!");
		}
	
		player.x = player.x + player.speedx;
		player.y = player.y + player.speedy;
		player.draw();
		
		if(player.x > 300) screen = 2;
		
	}else if(screen == 2){
	
		ctx.fillStyle = 'green';
		ctx.fillText("You lost.  Pay more attention next time.", 100, 200);
	}else if(screen == 3){//Main menu
	
		start.draw();
		
		newGame.draw();
	}
}



//Mouse Click
function onClick(){

	duck.say("b.a.n.a.n.a.s");

	if(screen == 3){
		if(start.isMouseOver()) start.job();
		if(newGame.isMouseOver()) newGame.job();
	}
}