oxguy3/index.html

## index.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>University of Rochester Playing Game: Year 1</title>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/jvfloat.min.js"></script>
  <script src="http://www.parsecdn.com/js/parse-1.3.0.min.js"></script>
  <script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
  <script src="init.js"></script>
  <script src="ball.js"></script>
  <script src="createMap.js"></script>

  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link href="css/bootstrap-theme.min.css" rel="stylesheet">
  <link href="css/jvfloat.css" rel="stylesheet">
  <style type="text/css">
  body {
    background-image: url(img/webmain_background2.gif);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
  }
  /*input {
    position: absolute;
    left: 525px;
    top: -465px;
  }*/
  #loginContainer {
    height: 500px;
  }
  #loginContainer .paneButtons button {
    font-size: 42px;
    margin-bottom: 24px;
  }
  #loginContainer .form-group .placeHolder {
    font-size: 18px;
    top:-5px;
    color: #222;
  }
  #loginContainer .form-group {
    margin-bottom: 26px;
  }
  </style>

  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->

</head>

<body onLoad="init();">

  <div class="container">

    <header class="text-center">
      <img src="img/header_trans2.png">
      <span class="sr-only">UofRPG: Year 1</span>
    </header>

    <div class="row">
      <div class="col-sm-12">
        <div class="theGame text-center hidden">
          <canvas id="demoCanvas" width="1000" height="500">
            alternate content
          </canvas>
        </div>
      </div>
    </div>


    <div class="row">
      <div id="loginContainer" class="col-sm-offset-4 col-sm-4">
        <div id="loginContainerAlert" class="alert hidden" role="alert">
          <button type="button" class="close" id="loginContainerAlertCloseBtn"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
          <span id="loginContainerAlertContent"></span>
        </div>

        <div class="paneButtons">
          <button id="btnLogin" class="btn btn-lg btn-block btn-primary">Login</button>
          <button id="btnRegister" class="btn btn-lg btn-block btn-primary">Register</button>
        </div>

        <div class="paneLogin hidden">
          <div class="form-group">
            <!--<label for="formLoginUsername">Username</label>-->
            <input type="text" class="form-control input-lg" id="formLoginUsername" placeholder="Username">
          </div>
          <div class="form-group">
            <!--<label for="formLoginPassword">Password</label>-->
            <input type="password" class="form-control input-lg" id="formLoginPassword" placeholder="Password">
          </div>
          <button type="button" id="formLoginSubmit" data-loading-text="Loading..." class="btn btn-lg btn-primary">
            Submit
          </button>
        </div>

        <div class="paneRegister hidden">
          <div class="form-group">
            <!--<label for="formRegisterUsername">Username</label>-->
            <input type="text" class="form-control input-lg" id="formRegisterUsername" placeholder="Username">
          </div>
          <div class="form-group">
            <!--<label for="formRegisterPassword">Password</label>-->
            <input type="password" class="form-control input-lg" id="formRegisterPassword" placeholder="Password">
          </div>
          <button type="button" id="formRegisterSubmit" data-loading-text="Loading..." class="btn btn-lg btn-primary">
            Submit
          </button>
        </div>

      </div>
    </div>

    <div id="gameDom">
    </div>

    <footer id="mastfoot">
      <section class="container-fluid">
        <div class="row-fluid">
          <article class="span6 credits text-left">
          </article>
          <article class="span6 text-left">
          </article>
          <article class="span6 text-right">
            <font size="10">
              <a href="roles.html">Developer's Roles</a>
            </font>
          </article>
        </div>
        <div class="row-fluid">
          <article class="span6 copyright text-right">
            <p>Copyright &copy; 2014
              <br/>All rights reserved</p>
          </article>
        </div>
      </section>
    </footer>

  </div>
</body>

</html>

## init.js
var stage, output, holder;
var tileset;
var mapData;
var startContainer, menuContainer, loginContainer, registerContainer, gameContainer;
var AccountsTable = Parse.Object.extend("Accounts");
Parse.initialize("dUWpFIH0Iv7AGTYW5ps6TkYScmxjG1LgX8hIlfNV",
	"XSET46QVsV1VfewbHB0T5VoOPyaYpRIoowhtc7vF");
var accountsTable = new AccountsTable();

function init() {
	//Create the Stage
	stage = new createjs.Stage("demoCanvas");
	startContainer = new createjs.Container();
	menuContainer = new createjs.Container();
	loginContainer = new createjs.Container();
	registerContainer = new createjs.Container();

	//createjs.Touch.enabled(stage); // just for fun to see what happens
	stage.enableMouseOver();

	/*
	 * Setup start container
	 */
	/*var playShape = new createjs.Shape();
	playShape.graphics.beginFill("blue").drawRoundRect(-25, -10, 250, 100, 10);

	var playButton = new createjs.Container();
	playButton.name = "playButton";
	playButton.x = 400;
	playButton.y = 100;

	var playLabel = new createjs.Text("Play", "bold 50px Arial", "#FFFFFF");
	playLabel.name = "playLabel";
	playLabel.x = 100;
	playLabel.y = 45;
	playLabel.textAlign = "center";
	playLabel.textBaseline = "middle";

	playButton.addChild(playShape, playLabel);

	playButton.on("mouseover", function(evt) {
		console.log("Play Button Mouseover");
		playShape.graphics.beginFill("yellow").drawRoundRect(-25, -10, 250, 100, 10);
		playLabel.color = "#000000"
		playButton.addChild(playShape, playLabel);
		stage.update();
	});
	playButton.on("mouseout", function(evt) {
		playShape.graphics.beginFill("blue").drawRoundRect(-25, -10, 250, 100, 10);
		playLabel.color = "#FFFFFF";
		playButton.addChild(playShape, playLabel);
		stage.update();
	});
	playButton.on("click", playClick, true);

	startContainer.addChild(playButton);
	stage.addChild(startContainer);
	stage.update();*/
  $("#btnLogin").click(function() {
    console.log("IS THIS RUNNING AT ALL");
    $(".paneButtons").addClass("hidden");
    $(".paneLogin").removeClass("hidden");
  });

  $("#btnRegister").click(function() {
    $(".paneButtons").addClass("hidden");
    $(".paneRegister").removeClass("hidden");
  });

  $("#formLoginSubmit").click(function() {
    var query = new Parse.Query(AccountsTable);
    query.equalTo("Username", $("#formLoginUsername").val());
    query.find({
      success: function(results) {
        if (results.length == 1) {
          query.equalTo("Password", $("#formLoginPassword").val());
          query.find({
            success: function(results) {
              if (results.length == 1) {
                $("#formLoginUsername").val("");
                $("#formLoginPassword").val("");
                loginSuccessful();
              } else {
                $("#formLoginPassword").val("");
                showLoginMessage("That password does not match.", "danger");
              }
            },
            error: function(error) {
              showLoginMessage(error.message, "danger");
            }
          });
        } else {
          $("#formLoginUsername").val("");
          $("#formLoginPassword").val("");
          showLoginMessage("That username does not exist.", "warning");
        }
      },
      error: function(error) {
        showLoginMessage(error.message, "danger");
      }
    });
  });

  $("#formRegisterSubmit").click(function() {
    var query = new Parse.Query(AccountsTable);
    query.equalTo("Username", $("#formRegisterUsername").val());
    query.find({
      success: function(results) {
        if (results.length == 0) {
          accountsTable.save({
            Username: $("#formRegisterUsername").val(),
            Password: $("#formRegisterPassword").val()
          });
          stage.removeChild(registerContainer);
          showLoginMessage("Account created!", "success");
          loginSuccessful();
        } else {
          $("#formRegisterUsername").val("");
          $("#formRegisterPassword").val("");
          showLoginMessage("Username already exists.", "danger");
        }
      },
      error: function(error) {
        showLoginMessage(error.message, "danger");
      }
    });
  });

  $("#loginContainerAlertCloseBtn").click(function() {
    $("#loginContainerAlert").addClass("hidden");
  });

  $('#formLoginUsername').jvFloat();
  $('#formLoginPassword').jvFloat();
  $('#formRegisterUsername').jvFloat();
  $('#formRegisterPassword').jvFloat();
}
init();


function loginSuccessful() {
  $("#loginContainer").addClass("hidden");
  $(".theGame").removeClass("hidden");
  createGame();
}

function showLoginMessage(message, level) {
  $("#loginContainerAlert").removeClass("hidden");
  $("#loginContainerAlert").removeClass("alert-success");
  $("#loginContainerAlert").removeClass("alert-danger");
  $("#loginContainerAlert").removeClass("alert-warning");
  $("#loginContainerAlert").removeClass("alert-info");
  $("#loginContainerAlert").addClass("alert-"+level);
  $("#loginContainerAlertContent").html(message);
}


	/*
	 * Setup Main Menu container
	 */
	// * Setup Login Button
/*	var loginShapes = new createjs.Shape();
	loginShapes.name = "background";

	var loginLabel = new createjs.Text("Login", "bold 50px Arial", "#FFFFFF");
	loginLabel.name = "loginLabel";
	loginLabel.x = 100;
	loginLabel.y = 45;
	loginLabel.textAlign = "center";
	loginLabel.textBaseline = "middle";

	var login = new createjs.Container();
	login.name = "loginButton";
	login.x = 400;
	login.y = 50;
	login.addChild(loginShapes, loginLabel);
	login.on("click", loginClick, true);
	loginShapes.graphics.beginFill("blue").drawRoundRect(-25, -10, 250, 100, 10);

	login.on("mouseover", function(evt) {
		console.log("Login Button Mouseover");
		loginShapes.graphics.beginFill("yellow").drawRoundRect(-25, -10, 250, 100, 10);
		loginLabel.color = "#000000";
		login.addChild(loginShapes, loginLabel);
		stage.update();
	});
	login.on("mouseout", function(evt) {
		loginShapes.graphics.beginFill("blue").drawRoundRect(-25, -10, 250, 100, 10);
		loginLabel.color = "#FFFFFF";
		login.addChild(loginShapes, loginLabel);
		stage.update();
	});
	menuContainer.addChild(login, output);
	// * Setup Register Button
	var regShapes = new createjs.Shape();
	regShapes.name = "regShapes";

	var registerLabel = new createjs.Text("Register", "bold 50px Arial", "#FFFFFF");
	registerLabel.name = "registerLabel";
	registerLabel.x = 100;
	registerLabel.y = 45;
	registerLabel.textAlign = "center";
	registerLabel.textBaseline = "middle";

	var register = new createjs.Container();
	register.name = "registerButton";
	register.x = 400;
	register.y = 200;
	register.addChild(regShapes, registerLabel);
	menuContainer.addChild(register, output);
	register.on("click", regClick, true);
	regShapes.graphics.beginFill("blue").drawRoundRect(-25, -10, 250, 100, 10);

	register.on("mouseover", function(evt) {
		console.log("Register Button Mouseover");
		regShapes.graphics.beginFill("yellow").drawRoundRect(-25, -10, 250, 100, 10);
		registerLabel.color = "#000000";
		register.addChild(regShapes, registerLabel);
		stage.update();
	});
	register.on("mouseout", function(evt) {
		regShapes.graphics.beginFill("blue").drawRoundRect(-25, -10, 250, 100, 10);
		registerLabel.color = "#FFFFFF";
		register.addChild(regShapes, registerLabel);
		stage.update();
	});
	menuContainer.addChild(register, output);
	stage.update();


	var logUsernameLabel = new createjs.Text("Username:", "bold 40px Arial", "#000000"); //DC143C
	logUsernameLabel.name = "logUsernameLabel";
	logUsernameLabel.x = 225;
	logUsernameLabel.y = 55;
	logUsernameLabel.textAlign = "center";
	logUsernameLabel.textBaseline = "middle";

	var logPasswordLabel = new createjs.Text("Password:", "bold 40px Arial", "#000000"); //DC143C
	logPasswordLabel.name = "logPasswordLabel";
	logPasswordLabel.x = 225;
	logPasswordLabel.y = 175;
	logPasswordLabel.textAlign = "center";
	logPasswordLabel.textBaseline = "middle";

	loginContainer.addChild(logUsernameLabel);
	loginContainer.addChild(logPasswordLabel);

	var logSubmitShape = new createjs.Shape();
	logSubmitShape.name = "logSubmitShape";

	var logSubmitLabel = new createjs.Text("Submit", "bold 50px Arial", "#FFFFFF");
	logSubmitLabel.name = "logSubmitLabel";
	logSubmitLabel.x = 85;
	logSubmitLabel.y = 45;
	logSubmitLabel.textAlign = "center";
	logSubmitLabel.textBaseline = "middle";

	var logSubmitButton = new createjs.Container();
	logSubmitButton.name = "logSubmitButton";
	logSubmitButton.x = 400;
	logSubmitButton.y = 225;
	logSubmitButton.addChild(logSubmitShape, logSubmitLabel);
	loginContainer.addChild(register, output);
	logSubmitButton.on("click", loginSubmitClick, true); //doRegister, true);

	logSubmitShape.graphics.beginFill("blue").drawRoundRect(-25, -10, 225, 100, 10);

	logSubmitButton.on("mouseover", function(evt) {
		logSubmitShape.graphics.beginFill("yellow").drawRoundRect(-25, -10, 225, 100, 10);
		logSubmitLabel.color = "#000000";
		logSubmitButton.addChild(logSubmitShape, logSubmitLabel);
		stage.update();
	});
	logSubmitButton.on("mouseout", function(evt) {
		logSubmitShape.graphics.beginFill("blue").drawRoundRect(-25, -10, 225, 100, 10);
		logSubmitLabel.color = "#FFFFFF";
		logSubmitButton.addChild(logSubmitShape, logSubmitLabel);
		stage.update();
	});
	loginContainer.addChild(logSubmitButton);


	var regUsernameLabel = new createjs.Text("Username:", "bold 40px Arial", "#000000"); //DC143C
	regUsernameLabel.name = "registerLabel";
	regUsernameLabel.x = 225;
	regUsernameLabel.y = 55;
	regUsernameLabel.textAlign = "center";
	regUsernameLabel.textBaseline = "middle";

	var regPasswordLabel = new createjs.Text("Password:", "bold 40px Arial", "#000000"); //DC143C
	regPasswordLabel.name = "registerLabel";
	regPasswordLabel.x = 225;
	regPasswordLabel.y = 175;
	regPasswordLabel.textAlign = "center";
	regPasswordLabel.textBaseline = "middle";

	registerContainer.addChild(regUsernameLabel);
	registerContainer.addChild(regPasswordLabel);

	var regSubmitShape = new createjs.Shape();
	regSubmitShape.name = "regSubmitShape";

	var regSubmitLabel = new createjs.Text("Submit", "bold 50px Arial", "#FFFFFF");
	regSubmitLabel.name = "regSubmitLabel";
	regSubmitLabel.x = 85;
	regSubmitLabel.y = 45;
	regSubmitLabel.textAlign = "center";
	regSubmitLabel.textBaseline = "middle";

	var regSubmitButton = new createjs.Container();
	regSubmitButton.name = "regSubmitButton";
	regSubmitButton.x = 400;
	regSubmitButton.y = 225;
	regSubmitButton.addChild(regSubmitShape, regSubmitLabel);
	menuContainer.addChild(register, output);
	regSubmitButton.on("click", regSubmitClick, true); //doRegister, true);

	regSubmitShape.graphics.beginFill("blue").drawRoundRect(-25, -10, 225, 100, 10);

	regSubmitButton.on("mouseover", function(evt) {
		regSubmitShape.graphics.beginFill("yellow").drawRoundRect(-25, -10, 225, 100, 10);
		regSubmitLabel.color = "#000000";
		regSubmitButton.addChild(regSubmitShape, regSubmitLabel);
		stage.update();
	});
	regSubmitButton.on("mouseout", function(evt) {
		regSubmitShape.graphics.beginFill("blue").drawRoundRect(-25, -10, 225, 100, 10);
		regSubmitLabel.color = "#FFFFFF";
		regSubmitButton.addChild(regSubmitShape, regSubmitLabel);
		stage.update();
	});
	registerContainer.addChild(regSubmitButton);

	stage.update();
}

// function handleClick(event) {
function playClick(event) {
	stage.removeChild(startContainer);
	stage.addChild(menuContainer);
	stage.update();
}

function regClick(event) {
	stage.removeChild(menuContainer);
	stage.addChild(registerContainer);

	var usernameField = document.createElement("input");
	usernameField.setAttribute("id", "username");
	usernameField.maxLength = 12;
	usernameField.style.width = '200px';
	usernameField.style.height = '3em';
	usernameField.placeholder = "Username";
	usernameField.autofocus = true;

	var passwordField = document.createElement("input");
	passwordField.setAttribute("id", "password");
	passwordField.type = "password";
	passwordField.maxLength = 12;
	passwordField.style.width = '200px';
	passwordField.style.height = '3em';
	passwordField.style.top = "-350px";
	passwordField.placeholder = "Password";

	var gameDom = new createjs.DOMElement("gameDom");
	gameDom.htmlElement.appendChild(usernameField);
	gameDom.htmlElement.appendChild(passwordField);

	stage.update();
}

function loginClick(event) {
	stage.removeChild(menuContainer);
	stage.addChild(loginContainer);

	var usernameField = document.createElement("input");
	usernameField.setAttribute("id", "username");
	usernameField.maxLength = 12;
	usernameField.style.width = '200px';
	usernameField.style.height = '3em';
	usernameField.placeholder = "Username";
	usernameField.autofocus = true;

	var passwordField = document.createElement("input");
	passwordField.setAttribute("id", "password");
	passwordField.type = "password";
	passwordField.maxLength = 12;
	passwordField.style.width = '200px';
	passwordField.style.height = '3em';
	passwordField.style.top = "-350px";
	passwordField.placeholder = "Password";

	var gameDom = new createjs.DOMElement("gameDom");
	gameDom.htmlElement.appendChild(usernameField);
	gameDom.htmlElement.appendChild(passwordField);

	stage.update();
}

function regSubmitClick(event) {
	var query = new Parse.Query(AccountsTable);
	query.equalTo("Username", document.getElementById("username").value);
	query.find({
		success: function(results) {
			if (results.length == 0) {
				accountsTable.save({
					Username: document.getElementById("username").value,
					Password: document.getElementById("password").value
				});
				stage.removeChild(registerContainer);
				alert("Account Created");
				loginSuccessful();
			} else {
				document.getElementById("username").value = ""
				document.getElementById("password").value = ""
				alert("Username already exists.");
			}
		},a
		error: function(error) {
			alert(error.message);
		}
	});
}

function loginSubmitClick(event) {
	var query = new Parse.Query(AccountsTable);
	query.equalTo("Username", document.getElementById("username").value);
	query.find({
		success: function(results) {
			if (results.length == 1) {
				query.equalTo("Password", document.getElementById("password").value);
				query.find({
					success: function(results) {
						if (results.length == 1) {
							document.getElementById("username").value = "";
							document.getElementById("password").value = "";
							loginSuccessful();
						} else {
							document.getElementById("password").value = "";
							alert("That password does not match.");
						}
					},
					error: function(error) {
						alert(error.message);
					}
				});
			} else {
				document.getElementById("username").value = "";
				document.getElementById("password").value = "";
				alert("That Username does not exists.");
			}
		},
		error: function(error) {
			alert(error.message);
		}
	});
}

function loginSuccessful() {
	document.getElementById("username").remove();
	document.getElementById("password").remove();
	stage.removeChild(loginContainer);
	stage.update();
	createGame();
}*/
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>University of Rochester Playing Game: Year 1</title>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/jvfloat.min.js"></script>
	<script src="http://www.parsecdn.com/js/parse-1.3.0.min.js"></script>
	<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
	<script src="init.js"></script>
	<script src="ball.js"></script>
	<script src="createMap.js"></script>

	<link href="css/bootstrap.min.css" rel="stylesheet">
	<link href="css/bootstrap-theme.min.css" rel="stylesheet">
	<link href="css/jvfloat.css" rel="stylesheet">
	<style type="text/css">
	body {
	background-image: url(img/webmain_background2.gif);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	}
	/*input {
	position: absolute;
	left: 525px;
	top: -465px;
	}*/
	#loginContainer {
	height: 500px;
	}
	#loginContainer .paneButtons button {
	font-size: 42px;
	margin-bottom: 24px;
	}
	#loginContainer .form-group .placeHolder {
	font-size: 18px;
	top:-5px;
	color: #222;
	}
	#loginContainer .form-group {
	margin-bottom: 26px;
	}
	</style>

	<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
	<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->

	</head>

	<body onLoad="init();">

	<div class="container">

	<header class="text-center">
	<img src="img/header_trans2.png">
	<span class="sr-only">UofRPG: Year 1</span>
	</header>

	<div class="row">
	<div class="col-sm-12">
	<div class="theGame text-center hidden">
	<canvas id="demoCanvas" width="1000" height="500">
	alternate content
	</canvas>
	</div>
	</div>
	</div>



	<div class="row">
	<div id="loginContainer" class="col-sm-offset-4 col-sm-4">
	<div id="loginContainerAlert" class="alert hidden" role="alert">
	<button type="button" class="close" id="loginContainerAlertCloseBtn"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
	<span id="loginContainerAlertContent"></span>
	</div>

	<div class="paneButtons">
	<button id="btnLogin" class="btn btn-lg btn-block btn-primary">Login</button>
	<button id="btnRegister" class="btn btn-lg btn-block btn-primary">Register</button>
	</div>

	<div class="paneLogin hidden">
	<div class="form-group">
	<!--<label for="formLoginUsername">Username</label>-->
	<input type="text" class="form-control input-lg" id="formLoginUsername" placeholder="Username">
	</div>
	<div class="form-group">
	<!--<label for="formLoginPassword">Password</label>-->
	<input type="password" class="form-control input-lg" id="formLoginPassword" placeholder="Password">
	</div>
	<button type="button" id="formLoginSubmit" data-loading-text="Loading..." class="btn btn-lg btn-primary">
	Submit
	</button>
	</div>

	<div class="paneRegister hidden">
	<div class="form-group">
	<!--<label for="formRegisterUsername">Username</label>-->
	<input type="text" class="form-control input-lg" id="formRegisterUsername" placeholder="Username">
	</div>
	<div class="form-group">
	<!--<label for="formRegisterPassword">Password</label>-->
	<input type="password" class="form-control input-lg" id="formRegisterPassword" placeholder="Password">
	</div>
	<button type="button" id="formRegisterSubmit" data-loading-text="Loading..." class="btn btn-lg btn-primary">
	Submit
	</button>
	</div>

	</div>
	</div>

	<div id="gameDom">
	</div>

	<footer id="mastfoot">
	<section class="container-fluid">
	<div class="row-fluid">
	<article class="span6 credits text-left">
	</article>
	<article class="span6 text-left">
	</article>
	<article class="span6 text-right">
	<font size="10">
	<a href="roles.html">Developer's Roles</a>
	</font>
	</article>
	</div>
	<div class="row-fluid">
	<article class="span6 copyright text-right">
	<p>Copyright © 2014
	<br/>All rights reserved</p>
	</article>
	</div>
	</section>
	</footer>

	</div>
	</body>

	</html>
	var stage, output, holder;
	var tileset;
	var mapData;
	var startContainer, menuContainer, loginContainer, registerContainer, gameContainer;
	var AccountsTable = Parse.Object.extend("Accounts");
	Parse.initialize("dUWpFIH0Iv7AGTYW5ps6TkYScmxjG1LgX8hIlfNV",
	"XSET46QVsV1VfewbHB0T5VoOPyaYpRIoowhtc7vF");
	var accountsTable = new AccountsTable();

	function init() {
	//Create the Stage
	stage = new createjs.Stage("demoCanvas");
	startContainer = new createjs.Container();
	menuContainer = new createjs.Container();
	loginContainer = new createjs.Container();
	registerContainer = new createjs.Container();

	//createjs.Touch.enabled(stage); // just for fun to see what happens
	stage.enableMouseOver();

	/*
	* Setup start container
	*/
	/*var playShape = new createjs.Shape();
	playShape.graphics.beginFill("blue").drawRoundRect(-25, -10, 250, 100, 10);

	var playButton = new createjs.Container();
	playButton.name = "playButton";
	playButton.x = 400;
	playButton.y = 100;

	var playLabel = new createjs.Text("Play", "bold 50px Arial", "#FFFFFF");
	playLabel.name = "playLabel";
	playLabel.x = 100;
	playLabel.y = 45;
	playLabel.textAlign = "center";
	playLabel.textBaseline = "middle";

	playButton.addChild(playShape, playLabel);

	playButton.on("mouseover", function(evt) {
	console.log("Play Button Mouseover");
	playShape.graphics.beginFill("yellow").drawRoundRect(-25, -10, 250, 100, 10);
	playLabel.color = "#000000"
	playButton.addChild(playShape, playLabel);
	stage.update();
	});
	playButton.on("mouseout", function(evt) {
	playShape.graphics.beginFill("blue").drawRoundRect(-25, -10, 250, 100, 10);
	playLabel.color = "#FFFFFF";
	playButton.addChild(playShape, playLabel);
	stage.update();
	});
	playButton.on("click", playClick, true);

	startContainer.addChild(playButton);
	stage.addChild(startContainer);
	stage.update();*/
	$("#btnLogin").click(function() {
	console.log("IS THIS RUNNING AT ALL");
	$(".paneButtons").addClass("hidden");
	$(".paneLogin").removeClass("hidden");
	});

	$("#btnRegister").click(function() {
	$(".paneButtons").addClass("hidden");
	$(".paneRegister").removeClass("hidden");
	});

	$("#formLoginSubmit").click(function() {
	var query = new Parse.Query(AccountsTable);
	query.equalTo("Username", $("#formLoginUsername").val());
	query.find({
	success: function(results) {
	if (results.length == 1) {
	query.equalTo("Password", $("#formLoginPassword").val());
	query.find({
	success: function(results) {
	if (results.length == 1) {
	$("#formLoginUsername").val("");
	$("#formLoginPassword").val("");
	loginSuccessful();
	} else {
	$("#formLoginPassword").val("");
	showLoginMessage("That password does not match.", "danger");
	}
	},
	error: function(error) {
	showLoginMessage(error.message, "danger");
	}
	});
	} else {
	$("#formLoginUsername").val("");
	$("#formLoginPassword").val("");
	showLoginMessage("That username does not exist.", "warning");
	}
	},
	error: function(error) {
	showLoginMessage(error.message, "danger");
	}
	});
	});

	$("#formRegisterSubmit").click(function() {
	var query = new Parse.Query(AccountsTable);
	query.equalTo("Username", $("#formRegisterUsername").val());
	query.find({
	success: function(results) {
	if (results.length == 0) {
	accountsTable.save({
	Username: $("#formRegisterUsername").val(),
	Password: $("#formRegisterPassword").val()
	});
	stage.removeChild(registerContainer);
	showLoginMessage("Account created!", "success");
	loginSuccessful();
	} else {
	$("#formRegisterUsername").val("");
	$("#formRegisterPassword").val("");
	showLoginMessage("Username already exists.", "danger");
	}
	},
	error: function(error) {
	showLoginMessage(error.message, "danger");
	}
	});
	});

	$("#loginContainerAlertCloseBtn").click(function() {
	$("#loginContainerAlert").addClass("hidden");
	});

	$('#formLoginUsername').jvFloat();
	$('#formLoginPassword').jvFloat();
	$('#formRegisterUsername').jvFloat();
	$('#formRegisterPassword').jvFloat();
	}
	init();


	function loginSuccessful() {
	$("#loginContainer").addClass("hidden");
	$(".theGame").removeClass("hidden");
	createGame();
	}

	function showLoginMessage(message, level) {
	$("#loginContainerAlert").removeClass("hidden");
	$("#loginContainerAlert").removeClass("alert-success");
	$("#loginContainerAlert").removeClass("alert-danger");
	$("#loginContainerAlert").removeClass("alert-warning");
	$("#loginContainerAlert").removeClass("alert-info");
	$("#loginContainerAlert").addClass("alert-"+level);
	$("#loginContainerAlertContent").html(message);
	}


	/*
	* Setup Main Menu container
	*/
	// * Setup Login Button
	/* var loginShapes = new createjs.Shape();
	loginShapes.name = "background";

	var loginLabel = new createjs.Text("Login", "bold 50px Arial", "#FFFFFF");
	loginLabel.name = "loginLabel";
	loginLabel.x = 100;
	loginLabel.y = 45;
	loginLabel.textAlign = "center";
	loginLabel.textBaseline = "middle";

	var login = new createjs.Container();
	login.name = "loginButton";
	login.x = 400;
	login.y = 50;
	login.addChild(loginShapes, loginLabel);
	login.on("click", loginClick, true);
	loginShapes.graphics.beginFill("blue").drawRoundRect(-25, -10, 250, 100, 10);

	login.on("mouseover", function(evt) {
	console.log("Login Button Mouseover");
	loginShapes.graphics.beginFill("yellow").drawRoundRect(-25, -10, 250, 100, 10);
	loginLabel.color = "#000000";
	login.addChild(loginShapes, loginLabel);
	stage.update();
	});
	login.on("mouseout", function(evt) {
	loginShapes.graphics.beginFill("blue").drawRoundRect(-25, -10, 250, 100, 10);
	loginLabel.color = "#FFFFFF";
	login.addChild(loginShapes, loginLabel);
	stage.update();
	});
	menuContainer.addChild(login, output);
	// * Setup Register Button
	var regShapes = new createjs.Shape();
	regShapes.name = "regShapes";

	var registerLabel = new createjs.Text("Register", "bold 50px Arial", "#FFFFFF");
	registerLabel.name = "registerLabel";
	registerLabel.x = 100;
	registerLabel.y = 45;
	registerLabel.textAlign = "center";
	registerLabel.textBaseline = "middle";

	var register = new createjs.Container();
	register.name = "registerButton";
	register.x = 400;
	register.y = 200;
	register.addChild(regShapes, registerLabel);
	menuContainer.addChild(register, output);
	register.on("click", regClick, true);
	regShapes.graphics.beginFill("blue").drawRoundRect(-25, -10, 250, 100, 10);

	register.on("mouseover", function(evt) {
	console.log("Register Button Mouseover");
	regShapes.graphics.beginFill("yellow").drawRoundRect(-25, -10, 250, 100, 10);
	registerLabel.color = "#000000";
	register.addChild(regShapes, registerLabel);
	stage.update();
	});
	register.on("mouseout", function(evt) {
	regShapes.graphics.beginFill("blue").drawRoundRect(-25, -10, 250, 100, 10);
	registerLabel.color = "#FFFFFF";
	register.addChild(regShapes, registerLabel);
	stage.update();
	});
	menuContainer.addChild(register, output);
	stage.update();


	var logUsernameLabel = new createjs.Text("Username:", "bold 40px Arial", "#000000"); //DC143C
	logUsernameLabel.name = "logUsernameLabel";
	logUsernameLabel.x = 225;
	logUsernameLabel.y = 55;
	logUsernameLabel.textAlign = "center";
	logUsernameLabel.textBaseline = "middle";

	var logPasswordLabel = new createjs.Text("Password:", "bold 40px Arial", "#000000"); //DC143C
	logPasswordLabel.name = "logPasswordLabel";
	logPasswordLabel.x = 225;
	logPasswordLabel.y = 175;
	logPasswordLabel.textAlign = "center";
	logPasswordLabel.textBaseline = "middle";

	loginContainer.addChild(logUsernameLabel);
	loginContainer.addChild(logPasswordLabel);

	var logSubmitShape = new createjs.Shape();
	logSubmitShape.name = "logSubmitShape";

	var logSubmitLabel = new createjs.Text("Submit", "bold 50px Arial", "#FFFFFF");
	logSubmitLabel.name = "logSubmitLabel";
	logSubmitLabel.x = 85;
	logSubmitLabel.y = 45;
	logSubmitLabel.textAlign = "center";
	logSubmitLabel.textBaseline = "middle";

	var logSubmitButton = new createjs.Container();
	logSubmitButton.name = "logSubmitButton";
	logSubmitButton.x = 400;
	logSubmitButton.y = 225;
	logSubmitButton.addChild(logSubmitShape, logSubmitLabel);
	loginContainer.addChild(register, output);
	logSubmitButton.on("click", loginSubmitClick, true); //doRegister, true);

	logSubmitShape.graphics.beginFill("blue").drawRoundRect(-25, -10, 225, 100, 10);

	logSubmitButton.on("mouseover", function(evt) {
	logSubmitShape.graphics.beginFill("yellow").drawRoundRect(-25, -10, 225, 100, 10);
	logSubmitLabel.color = "#000000";
	logSubmitButton.addChild(logSubmitShape, logSubmitLabel);
	stage.update();
	});
	logSubmitButton.on("mouseout", function(evt) {
	logSubmitShape.graphics.beginFill("blue").drawRoundRect(-25, -10, 225, 100, 10);
	logSubmitLabel.color = "#FFFFFF";
	logSubmitButton.addChild(logSubmitShape, logSubmitLabel);
	stage.update();
	});
	loginContainer.addChild(logSubmitButton);


	var regUsernameLabel = new createjs.Text("Username:", "bold 40px Arial", "#000000"); //DC143C
	regUsernameLabel.name = "registerLabel";
	regUsernameLabel.x = 225;
	regUsernameLabel.y = 55;
	regUsernameLabel.textAlign = "center";
	regUsernameLabel.textBaseline = "middle";

	var regPasswordLabel = new createjs.Text("Password:", "bold 40px Arial", "#000000"); //DC143C
	regPasswordLabel.name = "registerLabel";
	regPasswordLabel.x = 225;
	regPasswordLabel.y = 175;
	regPasswordLabel.textAlign = "center";
	regPasswordLabel.textBaseline = "middle";

	registerContainer.addChild(regUsernameLabel);
	registerContainer.addChild(regPasswordLabel);

	var regSubmitShape = new createjs.Shape();
	regSubmitShape.name = "regSubmitShape";

	var regSubmitLabel = new createjs.Text("Submit", "bold 50px Arial", "#FFFFFF");
	regSubmitLabel.name = "regSubmitLabel";
	regSubmitLabel.x = 85;
	regSubmitLabel.y = 45;
	regSubmitLabel.textAlign = "center";
	regSubmitLabel.textBaseline = "middle";

	var regSubmitButton = new createjs.Container();
	regSubmitButton.name = "regSubmitButton";
	regSubmitButton.x = 400;
	regSubmitButton.y = 225;
	regSubmitButton.addChild(regSubmitShape, regSubmitLabel);
	menuContainer.addChild(register, output);
	regSubmitButton.on("click", regSubmitClick, true); //doRegister, true);

	regSubmitShape.graphics.beginFill("blue").drawRoundRect(-25, -10, 225, 100, 10);

	regSubmitButton.on("mouseover", function(evt) {
	regSubmitShape.graphics.beginFill("yellow").drawRoundRect(-25, -10, 225, 100, 10);
	regSubmitLabel.color = "#000000";
	regSubmitButton.addChild(regSubmitShape, regSubmitLabel);
	stage.update();
	});
	regSubmitButton.on("mouseout", function(evt) {
	regSubmitShape.graphics.beginFill("blue").drawRoundRect(-25, -10, 225, 100, 10);
	regSubmitLabel.color = "#FFFFFF";
	regSubmitButton.addChild(regSubmitShape, regSubmitLabel);
	stage.update();
	});
	registerContainer.addChild(regSubmitButton);

	stage.update();
	}

	// function handleClick(event) {
	function playClick(event) {
	stage.removeChild(startContainer);
	stage.addChild(menuContainer);
	stage.update();
	}

	function regClick(event) {
	stage.removeChild(menuContainer);
	stage.addChild(registerContainer);

	var usernameField = document.createElement("input");
	usernameField.setAttribute("id", "username");
	usernameField.maxLength = 12;
	usernameField.style.width = '200px';
	usernameField.style.height = '3em';
	usernameField.placeholder = "Username";
	usernameField.autofocus = true;

	var passwordField = document.createElement("input");
	passwordField.setAttribute("id", "password");
	passwordField.type = "password";
	passwordField.maxLength = 12;
	passwordField.style.width = '200px';
	passwordField.style.height = '3em';
	passwordField.style.top = "-350px";
	passwordField.placeholder = "Password";

	var gameDom = new createjs.DOMElement("gameDom");
	gameDom.htmlElement.appendChild(usernameField);
	gameDom.htmlElement.appendChild(passwordField);

	stage.update();
	}

	function loginClick(event) {
	stage.removeChild(menuContainer);
	stage.addChild(loginContainer);

	var usernameField = document.createElement("input");
	usernameField.setAttribute("id", "username");
	usernameField.maxLength = 12;
	usernameField.style.width = '200px';
	usernameField.style.height = '3em';
	usernameField.placeholder = "Username";
	usernameField.autofocus = true;

	var passwordField = document.createElement("input");
	passwordField.setAttribute("id", "password");
	passwordField.type = "password";
	passwordField.maxLength = 12;
	passwordField.style.width = '200px';
	passwordField.style.height = '3em';
	passwordField.style.top = "-350px";
	passwordField.placeholder = "Password";

	var gameDom = new createjs.DOMElement("gameDom");
	gameDom.htmlElement.appendChild(usernameField);
	gameDom.htmlElement.appendChild(passwordField);

	stage.update();
	}

	function regSubmitClick(event) {
	var query = new Parse.Query(AccountsTable);
	query.equalTo("Username", document.getElementById("username").value);
	query.find({
	success: function(results) {
	if (results.length == 0) {
	accountsTable.save({
	Username: document.getElementById("username").value,
	Password: document.getElementById("password").value
	});
	stage.removeChild(registerContainer);
	alert("Account Created");
	loginSuccessful();
	} else {
	document.getElementById("username").value = ""
	document.getElementById("password").value = ""
	alert("Username already exists.");
	}
	},a
	error: function(error) {
	alert(error.message);
	}
	});
	}

	function loginSubmitClick(event) {
	var query = new Parse.Query(AccountsTable);
	query.equalTo("Username", document.getElementById("username").value);
	query.find({
	success: function(results) {
	if (results.length == 1) {
	query.equalTo("Password", document.getElementById("password").value);
	query.find({
	success: function(results) {
	if (results.length == 1) {
	document.getElementById("username").value = "";
	document.getElementById("password").value = "";
	loginSuccessful();
	} else {
	document.getElementById("password").value = "";
	alert("That password does not match.");
	}
	},
	error: function(error) {
	alert(error.message);
	}
	});
	} else {
	document.getElementById("username").value = "";
	document.getElementById("password").value = "";
	alert("That Username does not exists.");
	}
	},
	error: function(error) {
	alert(error.message);
	}
	});
	}

	function loginSuccessful() {
	document.getElementById("username").remove();
	document.getElementById("password").remove();
	stage.removeChild(loginContainer);
	stage.update();
	createGame();
	}*/