//what is mancala? http://en.wikipedia.org/wiki/Mancala

var buckets = new Array();
var seedimages = new Array();
var gameCount = 0;
var leftBucket;
var rightBucket;
var whoseTurn;
var gameOver;
var firstMove;
var ADotCreated = false;
var BDotCreated = false;
var playermode = 1;
var	playcomputer;
var level=1;
var Ascore=0;
var Bscore=0;
var	ballnum=false;
var gameInProgress;
var savedLevel=1;
var animatingImg;
var clickedBucket;
var goAgain=false;
var nextBucketID;
var isAnimating;
var endNumberBeads;
var extraBeadstomove=0;
var slotToRemoveBeadsID=99;
var numExtraBeads=0;
var boardVisible=false;

/////////// SETUP STUFF //////////////

function setup(){
   // if(0 == (gameCount % 5)) {
	//	support();
    //}
	// make the window scroll up so the URL bar goes away
	setTimeout("scrollToTop()", 250);
	setTimeout("scrollToTop()", 500);
	setTimeout("scrollToTop()", 750);
	setTimeout("scrollToTop()", 1000);
	setTimeout("scrollToTop()", 2500);
	setTimeout("scrollToTop()", 5000);

	if (!ballnum){
		for(var x = 0; x < 48; x++){
			createSeed(x);
		}
		ballnum = true;
	}
	for(var i = 0; i < 12; i++){
		buckets[i] = new bucket(i, 4);
		var seedbucket = document.getElementById(""+i);
		addSeed(seedbucket,buckets[i]);
	}
	
	leftBucket = new bucket("leftScoreBucket", 0);
	rightBucket = new bucket("rightScoreBucket", 0);
	document.getElementById("rightBeadCountText").innerHTML = "0";
	document.getElementById("leftBeadCountText").innerHTML = "0";
	document.getElementById("scoreA").innerHTML = ""+ Ascore;
	document.getElementById("scoreB").innerHTML = ""+ Bscore;
	
	if (window.orientation==0){
		createVerticalBoard();
	}
	else{
		createHorizontalBoard();
	}
	if (playermode==2){
		firstMove = true;	/*on setup, clear whoseTurn, because it is the first move */
		playcomputer = false;
		set2PlayerButtonOn();
	}
	else{				/*playing computer*/
		firstMove = false;
		playcomputer = true;
		whoseTurn = 'B';
		set1PlayerButtonOn();
	}
	initDots();
	updateStatusText("");
	gameOver = false;
	gameInProgress = false;
	firstClick=99;
	isAnimating = false;
	endNumberBeads=0;
}

function createSeed(seedID){
	var img = document.createElement("img");
	img.setAttribute("src", "images/ball-1.png");	//make all balls yellow
	img.setAttribute("id", "bead"+seedID);
	img.setAttribute("width", 15);
	img.setAttribute("height", 15);
	seedimages[seedID]=img;
}

function addSeed(seedbucket, bucket){
	var x;
	var image;
	var number = parseInt(bucket.id);	
	for (x = (number * 4); x < ((number*4)+4); x++){
		image = seedimages[x];
		seedbucket.appendChild(image);
		makeBeadBig(image);
	}
}

function bucket(id, numOfBeads){
	this.id = id;
	this.numberBeads = numOfBeads;
	return this;
}

function changeLevel(){
	if (playermode==2){
		return;
	}
	level++;
//still bugs in level 3
//	if (level>3){
	if (level>2){
		level=1;
	}
	setLevel();
}

function setLevel(){
	if (level==0){
		var image = document.getElementById("levelImage");
		image.setAttribute("src", "images/level0.png");
	}
	if (level==1){
		var image = document.getElementById("levelImage");
		image.setAttribute("src", "images/level1.png");
	}
	else if (level==2){
		var image = document.getElementById("levelImage");
		image.setAttribute("src", "images/level2.png");
	}
	else if (level==3){
		var image = document.getElementById("levelImage");
		image.setAttribute("src", "images/level3.png");
	}
}

function restoreLevel(){
	if (level==0){
		if (savedLevel==0){
			savedLevel=1;
		}
		level=savedLevel;
	}
}

function init1Player(){
	if (!gameOver){
		if (!gameInProgress && playermode == 1){
			return;
		}
		else if (gameInProgress){
			if (!confirm("Are you sure you want to start a new game?")){
				return;
			}
		}
	}
	playermode = 1;
	gameCount++;
	restoreLevel();
	setLevel();
	setup();
}

function init2Player(){
	if (!gameOver){
		if (!gameInProgress && playermode == 2){
			return;
		}
		else if (gameInProgress){
			if (!confirm("Are you sure you want to start a new game?")){
				return;
			}
		}
	}
	playermode = 2;
	gameCount++;
	savedLevel=level;
	level=0;
	setLevel();
	setup();
}

function set1PlayerButtonOn(){
	document.getElementById("player1").style.fontWeight="bolder";
	document.getElementById("player2").style.fontWeight="normal";
	document.getElementById("player1").style.color="#000";
	document.getElementById("player2").style.color="#fff";
}

function set2PlayerButtonOn(){
	document.getElementById("player2").style.fontWeight="bolder";
	document.getElementById("player1").style.fontWeight="normal";
	document.getElementById("player2").style.color="#000";
	document.getElementById("player1").style.color="#fff";
}

//////// MAIN STUFF ////////////

function divClicked(clicked) {
	//if game is over, don't allow clicks
	if (gameOver){
		return; 
	}
	else if (isAnimating){
		return;
	}
	else if (!howManyBeads(clicked)){
		return;
	}
	else{
		//set the initial whoseTurn
		if(!firstMove){
			//if you clicked on wrong side of board, do nothing
			if ((whoseTurn == 'A' && (clicked.id%12) > 5) || (whoseTurn == 'B' && ((clicked.id%12) <= 5))){ 
				return; 
			}
		}
		else if (!playcomputer){
			firstMove = false;	//it is no longer the first move, now we need to set whoseTurn it is
			setInitWhoseTurn(clicked);
		}
		goAgain = false;
		gameInProgress = true;
		updateStatusText("");
		clickedBucket = clicked;
		setupMoveBeads();
	}
}

function setupMoveBeads(){
	setNextBucketID(clickedBucket.id);
	setEndNumberBeads();
	moveBeads();
}

function myDelay(myTime) {
  rightNow = new Date();
  var now = new Date();
  now.setTime(now.getTime() + myTime);

  while(rightNow < now) {
    rightNow = new Date();
  }
}

function computerMove(){
	goAgain=false;
	if (level==1){
		computerLevel1();
	}
	else if (level==2){
		computerLevel2();
		if (clickedBucket==99){
			computerLevel1();
		}
	}
	else{
		computerLevel3();
		if (clickedBucket==99){
			computerLevel2();
		}
		if (clickedBucket==99){
			computerLevel1();
		}
	}
	setupMoveBeads();
}

function computerLevel1(){
	var firstBucket = Math.round(Math.random() * 5);
	var computerclick = document.getElementById(""+firstBucket);
	
	while(buckets[computerclick.id].numberBeads == 0){
		firstBucket = Math.round(Math.random() * 5);
		computerclick = document.getElementById(""+firstBucket);
	}
	clickedBucket = computerclick;
}

function computerLevel2(){
	for (var i=0; i<=5; i++){
		var num = document.getElementById(""+i);
		//found a goAgain opportunity
		if (buckets[num.id].numberBeads == (6-i)){
			i=5;
			clickedBucket = num;
		}
		else if (i==5){
			clickedBucket=99;
		}
	}
}

function computerLevel3(){
	for (var i=1; i<=5; i++){
		var num = document.getElementById(""+i);
		//are there any empty buckets on computer's side?
		if (buckets[num.id].numberBeads==0){
			//found an extra bead opportunity
			for (var j=0; j<=i; j++){
				var otherbucket = document.getElementById(""+j);
				if (buckets[otherbucket.id].numberBeads==(i-j)){
					clickedBucket=otherbucket;
				}
			}
		}
		else if (i==5){
			//add this functionality later
			//check to see if we have 1 bucket with lots of beads in it
			//check other side to see if they only have a few beads left
			//choose the bucket with lots of beads in it
			clickedBucket=99;
		}
	}
}

function moveBeads(){
	if (buckets[clickedBucket.id%12].numberBeads > endNumberBeads){
		isAnimating=true;
		moveNextBead();
		setTimeout('moveBeads()', 200);
	}
	else{
		isAnimating=false;
		if (checkGameOver()){
			return;
		}
		if (!goAgain){
			findExtraBeads();
			if (slotToRemoveBeadsID != 99){
				moveLastandExtraBeads();
			}
		}
		beadCleanup();
	}
}

function moveNextBead(){
	var originalNumBeads = buckets[clickedBucket.id%12].numberBeads;
	
	if (nextBucketID==111 || nextBucketID==51){
		checkscorebucketnext();
	}
	
	//a bead has been moved, return
	if (buckets[clickedBucket.id%12].numberBeads < originalNumBeads){
		if (buckets[clickedBucket.id%12].numberBeads == endNumberBeads){
			goAgain = true;
		}
	}
	
	//a bead has not been moved, so put one in the next bucket
	else{
		buckets[nextBucketID % 12].numberBeads++;		
		moveSeedImage(""+(nextBucketID % 12),clickedBucket.childNodes[originalNumBeads+1]);
		buckets[clickedBucket.id%12].numberBeads--;
		if (buckets[clickedBucket.id%12].numberBeads > endNumberBeads){
			setNextBucketID(nextBucketID%12);
		}
	}
}

function moveLastandExtraBeads(){
		var totalExtraBeads = numExtraBeads+1;
		updateStatusText(totalExtraBeads+" EXTRA!");
		moveLastBead();
		moveAllExtraBeads();
}

function moveLastBead(){
	var lastBucket = document.getElementById(""+nextBucketID%12);
	
	if(whoseTurn == "A"){
		moveBeadsRightScoreBucket(1);
		moveSeedImage("rightScoreBucket",lastBucket.childNodes[2]);
	}
	else{
		moveBeadsLeftScoreBucket(1);
		moveSeedImage("leftScoreBucket",lastBucket.childNodes[2]);
	}
	buckets[nextBucketID%12].numberBeads = 0;
}

function moveAllExtraBeads(){
	if (numExtraBeads>0){
		isAnimating=true;
		moveExtraBead();
		setTimeout('moveAllExtraBeads()', 200);
	}
	else{
		isAnimating=false;
		slotToRemoveBeadsID = 99;
	}
}

function setEndNumberBeads(){
	if (buckets[clickedBucket.id%12].numberBeads>12){
		endNumberBeads = parseInt(buckets[clickedBucket.id%12].numberBeads/12);
	}
	else{
		endNumberBeads = 0;
	}
}

function beadCleanup(){
	if (isAnimating){
		setTimeout('beadCleanup()', 100);
		return;
	}
	if (checkGameOver()){
		return;
	}
	if (goAgain){
		if (playcomputer & whoseTurn=='A'){
			updateStatusText("COMPUTER GO AGAIN");
			myDelay(300);
			computerMove();
		}
		else{
			updateStatusText("GO AGAIN");
		}
	}
	else{
		updateStatusText("");
		if (whoseTurn == 'A'){
			whoseTurn = 'B';
			switchDots("BTurnIndicator");
		}
		else if (whoseTurn == 'B'){
			whoseTurn = 'A';
			switchDots("ATurnIndicator");
			if (playcomputer){
				updateStatusText("COMPUTER'S MOVE");
				myDelay(250);
				computerMove();
			}
		}
	}
}

function moveExtraBeadRight(){
	var otherBeadBucket = document.getElementById(""+slotToRemoveBeadsID);
	// update score bucket
	moveBeadsRightScoreBucket(1);	
	//	move images
	moveSeedImage("rightScoreBucket",otherBeadBucket.childNodes[2]);

}

function moveExtraBeadLeft(){
	var otherBeadBucket = document.getElementById(""+slotToRemoveBeadsID);
	// update score bucket
	moveBeadsLeftScoreBucket(1);
	//	move images
	moveSeedImage("leftScoreBucket",otherBeadBucket.childNodes[2]);
}

function moveExtraBead(){
	if(whoseTurn == "A"){
		moveExtraBeadRight();
	}
	else{
		moveExtraBeadLeft();
	}
	buckets[slotToRemoveBeadsID].numberBeads--;
	numExtraBeads--;
}

function findExtraBeads(){
	//check the last bucket in which a bead placed
	//was it on your side and was it empty?
	//if so, you get to place all the beads opposite that bucket and your last bead into your score bucket

	var lastBucketID = (nextBucketID%12);
	
	if (buckets[lastBucketID].numberBeads == 1){
		if (((whoseTurn == 'A') && (lastBucketID >=0 && lastBucketID <=5)) || ((whoseTurn == 'B') && (lastBucketID >=6 && lastBucketID <=11))){
			slotToRemoveBeadsID = getPair(lastBucketID);
			numExtraBeads = buckets[slotToRemoveBeadsID].numberBeads;
		}
	}
}

function checkscorebucketnext(){
	var numBeads = buckets[clickedBucket.id%12].numberBeads;

	// put a bead in score bucket first if clicked on bucket 5 or 11
	if (nextBucketID == 51){
		nextBucketID=6;
		moveBeadsRightScoreBucket(1);		
		moveSeedImage("rightScoreBucket", clickedBucket.childNodes[numBeads+1]);	
		buckets[clickedBucket.id%12].numberBeads--;
	}
	else if (nextBucketID == 111){
		nextBucketID=0;
		moveBeadsLeftScoreBucket(1);
		moveSeedImage("leftScoreBucket", clickedBucket.childNodes[numBeads+1]);
		buckets[clickedBucket.id%12].numberBeads--;
	}
}

function setNextBucketID(id){
	if (id == 11 && whoseTurn=='B'){
		nextBucketID=111;
	}
	else if (id == 5 && whoseTurn == 'A'){
		nextBucketID=51;
	}
	else{
		nextBucketID = (parseInt(id)+1)%12;
	}
}

function moveSeedImage(string, whichSeedImage){
	//move images... please note that the index into the array must start at the 2nd position because of the format of the html file
	animatingImg = whichSeedImage;
	var newSeed=document.getElementById(string);
	newSeed.appendChild(whichSeedImage);
	
	if (string == "rightScoreBucket"){
		makeBeadSmall(whichSeedImage);
	}
	else if (string == "leftScoreBucket"){
		makeBeadSmall(whichSeedImage);
	}
}

function makeBeadSmall(theBeadImg){
	theBeadImg.setAttribute("width", 11);
	theBeadImg.setAttribute("height", 11);
}

function makeBeadBig(theBeadImg){
	theBeadImg.setAttribute("width", 15);
	theBeadImg.setAttribute("height", 15);
}

function updateStatusText(string){
	var text = document.getElementById("statusText");
	text.innerHTML = "" + string;	
}

function moveBeadsRightScoreBucket(numBeads){
	rightBucket.numberBeads = rightBucket.numberBeads + numBeads;
	var nextBucket = document.getElementById("rightBeadCountText");
	if (rightBucket.numberBeads != 0){
		nextBucket.innerHTML = "" + rightBucket.numberBeads;
	}
	else{
		nextBucket.innerHTML = "";
	}
}

function moveBeadsLeftScoreBucket(numBeads){
	leftBucket.numberBeads = leftBucket.numberBeads + numBeads;
	var nextBucket = document.getElementById("leftBeadCountText");
	if (leftBucket.numberBeads != 0){
		nextBucket.innerHTML = "" + leftBucket.numberBeads;
	}
	else{
		nextBucket.innerHTML = "";
	}
}

function getPair(last){
	var a = (11-last);
	return a;
}

function checkBuckets(x,y){
	while (x>=y){
		if (buckets[x].numberBeads > 0){
			return 0;	//game not over, there are still beads to move
		}
		x--;
	}
	return 1;	//game over
}

function setInitWhoseTurn(clicked){
	//if first person to play clicked on buckets 6-11, then B is going first
	if (clicked.id>5 && clicked.id<=11){
		whoseTurn = 'B';
		deleteADot();
	}
	else{
		whoseTurn = 'A';
		deleteBDot();
	}
}

function initDots(){
	if (!playcomputer){
		createADot();
		createBDot();
	}
	//when playing the computer, the person goes first
	else{
		createBDot();
		deleteADot();
	}
}

function createADot(){
	if(!ADotCreated){
		var theContainer = document.getElementById("ATurnIndicator");
		var imgA = document.createElement("img");        
		if (playcomputer){
			imgA.setAttribute("src", "images/loading.gif");
		}
		else{
			imgA.setAttribute("src", "images/redball.png");
		}
		imgA.setAttribute("id", "ATurnIndicator-img");
		imgA.setAttribute("width", 20);
		imgA.setAttribute("height", 20);
		imgA.style.position="absolute";
		if(window.orientation==0){
			imgA.style.right="-12px";
		}
		else{
			imgA.style.right="0px";
		}
		imgA.style.top="0px";
		theContainer.appendChild(imgA);
		ADotCreated = true;
	}
}

function createBDot(){
	if (!BDotCreated){
		var theContainer = document.getElementById("BTurnIndicator");
		var imgB = document.createElement("img");        
		imgB.setAttribute("src", "images/redball.png");
		imgB.setAttribute("id", "BTurnIndicator-img");
		imgB.setAttribute("width", 20);
		imgB.setAttribute("height", 20);
		imgB.style.position="absolute";
		if(window.orientation==0){
			imgB.style.left="-10px";
			imgB.style.top="85px";
		}
		else{
			imgB.style.left="0px";
			imgB.style.top="0px";
		}
		theContainer.appendChild(imgB);
		BDotCreated = true;
	}
}

function deleteADot(){
	if (ADotCreated){
		var theContainer = document.getElementById("ATurnIndicator");
		var theChild = document.getElementById("ATurnIndicator-img");        
		theContainer.removeChild(theChild);
		ADotCreated = false;
	}
}

function deleteBDot(){
	if (BDotCreated){
		var theContainer = document.getElementById("BTurnIndicator");
		var theChild = document.getElementById("BTurnIndicator-img");        
		theContainer.removeChild(theChild);
		BDotCreated = false;
	}
}

function switchDots(whichDot){
	if (whichDot == "BTurnIndicator"){
		deleteADot();
		createBDot();
	}
	else{
		deleteBDot();
		createADot();
	}
}

function removeRules(){
	var cont = document.getElementById("container");
	var p = document.getElementById("instructions-paragraph");
	cont.removeChild(p);
	var span = document.getElementById("instructions-span");
	cont.removeChild(span);
}

////// GAME OVER STUFF /////////////

function checkGameOver(){
	if (gameOver){
		return gameOver;
	}
	//check player A side for any beads
	if (checkBuckets(5,0)==0){
		//player A still had beads, check player B
		if (checkBuckets(11,6)==0){
			//player B also has beads, so game not over
			gameOver = false;
			return gameOver;
		}
		var	firstToClear = 'B';
	}
	else{
		var firstToClear = 'A';
	}
	// game over, so collect all leftover beads on opponent's side and put in your score bucket
	var x=11;
	while (x>=0){
		if (buckets[x].numberBeads > 0){
			var beadDiv = document.getElementById(""+x);
			if (firstToClear == 'A'){
				moveBeadsRightScoreBucket(buckets[x].numberBeads);
				for (var z=buckets[x].numberBeads+1; z>1; z--){
					moveSeedImage("rightScoreBucket",beadDiv.childNodes[z]);
				}
			}
			else{
				moveBeadsLeftScoreBucket(buckets[x].numberBeads);
				for (var z=buckets[x].numberBeads+1; z>1; z--){
					moveSeedImage("leftScoreBucket",beadDiv.childNodes[z]);
				}
			}
		}
		x--;
	}
	gameOver = true;
	gameInProgress = false;
	gameOverCleanup();		//since game is over, do cleanup
	return gameOver;
}

function gameOverCleanup(){
	var x = whoWon();
	if (x==1){
		if(playcomputer){
			var wonText = 'computer won!';
		}
		else{
			var wonText = 'A won!';
		}
		Ascore++;
		document.getElementById("scoreA").innerHTML = ""+ Ascore;
		createADot();
		deleteBDot();	
	}
	if (x==0){
		if(playcomputer){
			var wonText = 'you won!';
		}
		else{
			var wonText = 'B won!';
		}
		Bscore++;
		document.getElementById("scoreB").innerHTML = ""+ Bscore;
		
		deleteADot();
		createBDot();
	}
	if (x==2){
		var wonText = 'TIE!';
		createADot();
		createBDot();
	}	
	updateStatusText("Game Over, "+ wonText);
}

function whoWon(){
	if (leftBucket.numberBeads < rightBucket.numberBeads){
		//A wins
		return 1;
	}
	else if (leftBucket.numberBeads > rightBucket.numberBeads){
		//B wins
		return 0;
	}
	else{
		// it's a tie!
		return 2;
	}
}

function howManyBeads(clicked){
	return buckets[clicked.id].numberBeads;
}

/////// GOOGLE AD, ETC. STUFF ////////

function support() {
    showAdd();
}

function closeSupport() {
    hideAdd();
	setup();
	document.getElementById("container").style.visibility="visible";
	boardVisible=true;
}

function showRules(){
	new Effect.Appear('overlay', { duration: overlayDuration, from: 0.0, to: 0.5});
    new Effect.Appear('rules', { duration: overlayDuration * 2.0, from: 0.0, to: 1.0});
}

function showRules2(){
	var e= window.event;
	e.cancelBubble=true;
	if (e.stopPropagation){
		e.stopPropagation();
	}
	new Effect.Fade('rules', { duration: overlayDuration});
    new Effect.Appear('rules2', { duration: overlayDuration * 2.0, from: 0.0, to: 1.0});
}

function backRules1(){
	var e= window.event;
	e.cancelBubble=true;
	if (e.stopPropagation){
		e.stopPropagation();
	}
	new Effect.Fade('rules2', { duration: overlayDuration});
    new Effect.Appear('rules', { duration: overlayDuration * 2.0, from: 0.0, to: 1.0});
}

function hideRules() {
	new Effect.Fade('rules', { duration: overlayDuration});
	new Effect.Fade('overlay', { duration: overlayDuration});
}
function hideRules2() {
	new Effect.Fade('rules2', { duration: overlayDuration});
	new Effect.Fade('overlay', { duration: overlayDuration});
}

// this function causes the url bar to scroll away
function scrollToTop() {
    window.scrollTo(0,1);
}

function orientationChanged() {
	if (window.orientation==0){
		if (boardVisible){
			createVerticalBoard();
		}
	}
	else{
		if (boardVisible){
			createHorizontalBoard();
		}
	}
    setTimeout("scrollToTop()", 200);
}

function createHorizontalBoard(){
	var statusText = document.getElementById("statusText");
	statusText.style.right = "100px";
	var scoreA = document.getElementById("scoreA");
	scoreA.style.top="200px";
	scoreA.style.right="18px";
	var scoreB = document.getElementById("scoreB");
	scoreB.style.top="7px";
	scoreB.style.left="18px";
	var advert = document.getElementById("advert");
	advert.style.width="480px";
	advert.style.height="270px";
	advert.style.left="115px";
	var rules = document.getElementById("rules");
	rules.style.width="480px";
	rules.style.height="270px";
	var nextRules = document.getElementById("next");
	nextRules.style.top = "220px";
	nextRules.style.left ="215px";
	var rules2 = document.getElementById("rules2");
	rules2.style.width="480px";
	rules2.style.height="270px";
	var prevRules = document.getElementById("prev");
	prevRules.style.top = "220px";
	prevRules.style.left = "215px";
	//var overlay = document.getElementById("overlay");
	//overlay.style.width="480px";
	//overlay.style.height="270px";
	var container = document.getElementById("container");
	container.style.width="480px";
	container.style.height="270px";
	container.style.backgroundImage="url('./images/WoodiPhone.jpg')";
	document.getElementById("button-bar").style.width="480px";
	document.getElementById("0").style.left="85px";
	document.getElementById("1").style.left="136px";
	document.getElementById("2").style.left="188px";
	document.getElementById("3").style.left="241px";
	document.getElementById("4").style.left="292px";
	document.getElementById("5").style.left="343px";
	document.getElementById("11").style.left="85px";
	document.getElementById("10").style.left="136px";
	document.getElementById("9").style.left="188px";
	document.getElementById("8").style.left="241px";
	document.getElementById("7").style.left="292px";
	document.getElementById("6").style.left="343px";
	for(var x=0; x<6; x++){
		var topbucketid = document.getElementById(""+x);
		topbucketid.style.height="102px";
		topbucketid.style.width="50px";
	}
	for(var y=6; y<12; y++){
		var bottombucketid = document.getElementById(""+y);
		bottombucketid.style.height="102px";
		bottombucketid.style.width="50px";
		bottombucketid.style.top="114px";
	}
	var leftScoreBucket = document.getElementById("leftScoreBucket");
	leftScoreBucket.style.top="30px";
	leftScoreBucket.style.left="5px";
	leftScoreBucket.style.width="55px";
	leftScoreBucket.style.height="165px";
	var rightScoreBucket = document.getElementById("rightScoreBucket");
	rightScoreBucket.style.right="5px";
	rightScoreBucket.style.top="30px";
	rightScoreBucket.style.width="55px";
	rightScoreBucket.style.height="165px";
	var rightBeadCountText = document.getElementById("rightBeadCountText");
	rightBeadCountText.style.right="60px";
	rightBeadCountText.style.top="83px";
	var leftBeadCountText = document.getElementById("leftBeadCountText");
	leftBeadCountText.style.left="60px";
	leftBeadCountText.style.top="83px";
	if (ADotCreated){
		document.getElementById("ATurnIndicator-img").style.right="0px";
	}
	if (BDotCreated){
		document.getElementById("BTurnIndicator-img").style.left ="0px";
		document.getElementById("BTurnIndicator-img").style.top = "0px";
	}
}

function createVerticalBoard(){
	var statusText = document.getElementById("statusText");
	statusText.style.right = "45px";
	var scoreA = document.getElementById("scoreA");
	scoreA.style.top="282px";
	scoreA.style.right="5px";
	var scoreB = document.getElementById("scoreB");
	scoreB.style.top="13px";
	scoreB.style.left="6px";
	var advert = document.getElementById("advert");
	advert.style.width="320px";
	advert.style.height="320px";
	advert.style.left="35px";
	var rules = document.getElementById("rules");
	rules.style.width="320px";
	rules.style.height="320px";
	var nextRules = document.getElementById("next");
	nextRules.style.top = "220px";
	nextRules.style.left ="135px";
	var rules2 = document.getElementById("rules2");
	rules2.style.width="320px";
	rules2.style.height="320px";
	var prevRules = document.getElementById("prev");
	prevRules.style.top = "220px";
	prevRules.style.left = "135px";
	//var overlay = document.getElementById("overlay");
	//overlay.style.width="320px";
	//overlay.style.height="360px";
	var container = document.getElementById("container");
	container.style.width="320px";
	container.style.height="360px";
	container.style.backgroundImage="url('./images/WoodiPhonesmall.jpg')";
	document.getElementById("button-bar").style.width="320px";
	document.getElementById("button-bar").style.bottom="0px";
	document.getElementById("0").style.left="58px";
	document.getElementById("1").style.left="93px";
	document.getElementById("2").style.left="128px";
	document.getElementById("3").style.left="163px";
	document.getElementById("4").style.left="197px";
	document.getElementById("5").style.left="231px";
	document.getElementById("11").style.left="58px";
	document.getElementById("10").style.left="93px";
	document.getElementById("9").style.left="128px";
	document.getElementById("8").style.left="163px";
	document.getElementById("7").style.left="197px";
	document.getElementById("6").style.left="231px";
	for(var x=0; x<6; x++){
		document.getElementById(""+x).style.height="148px";
		document.getElementById(""+x).style.width="30px";
	}
	for(var y=6; y<12; y++){
		document.getElementById(""+y).style.height="148px";
		document.getElementById(""+y).style.width="30px";
		document.getElementById(""+y).style.top="160px";
	}
	var leftScoreBucket = document.getElementById("leftScoreBucket");
	leftScoreBucket.style.left="1px";
	leftScoreBucket.style.top="39px";
	leftScoreBucket.style.width="37px";
	leftScoreBucket.style.height="235px";
	var rightScoreBucket = document.getElementById("rightScoreBucket");
	rightScoreBucket.style.right="1px";
	rightScoreBucket.style.top="39px";
	rightScoreBucket.style.width="37px";
	rightScoreBucket.style.height="235px";
	var rightBeadCountText = document.getElementById("rightBeadCountText");
	rightBeadCountText.style.right="35px";
	rightBeadCountText.style.top="125px";
	var leftBeadCountText = document.getElementById("leftBeadCountText");
	leftBeadCountText.style.left="35px";
	leftBeadCountText.style.top="125px";
	if (ADotCreated){
		document.getElementById("ATurnIndicator-img").style.right="-12px";
	}
	if (BDotCreated){
		document.getElementById("BTurnIndicator-img").style.left ="-10px";
		document.getElementById("BTurnIndicator-img").style.top = "85px";
	}
}