/*
	Helper Function for document.createElement
*/
function ce(elementName, className, content){
	var element = document.createElement(elementName);
	if (className !== undefined) {
			element.className = className;
	}
	if (content !== undefined) {
		if (elementName == 'img'){
			element.src = content;
		}
		else{
			element.innerHTML = content;
		}
	}
	return element;
}
/* helper function for common xmlHttpRequests */
function xhRequest(url, wrapper, success, failure){
	var xhr = new XMLHttpRequest();
	xhr.async = false;
	xhr.withCredentials = true;
	xhr.open('GET', url);
	xhr.onload = function() {
	    if (xhr.status === 200) {
	        success(xhr.responseText,wrapper);
	    }
	    else {
	        failure(xhr, wrapper);
	    }
	};
	xhr.send();
}

/*
	Prototype game wrapper for Superbook Games.  Work in progress.
*/
function SuperbookGame(id, type, gameStartCallback, resizeCallback){
	this.type = type; //'session' or 'state'
	this.id = id;
	this.sessionId = 0;
	this.gameStartCallback = gameStartCallback;
	this.resizeCallback = resizeCallback;
	this.wrapperDiv = null;
	this.resizeClock = 0;
	this.ended = false;
	this.topScoreScreen = false;
	this.badgesScreen = false;
	this.loggedIn = false;
	this.strings = {
		topScoresDailyName: "Today's Scores",
		topScoresWeeklyName: "This Week's Scores",
		topScoresAllTimeName: "All Top Scores",
		gameEndTitle: "Great Job!",
		scoreLabel: "SCORE",
		youWonLabel: "YOU WON",
		superpointsCaption: "SUPERPOINTS",
		multiplicationSymbol: "x",
		superpointsLockedMessage: 'Sign Up to Earn SuperPoints',
		replayButtonText: 'Play Again',
		registerButtonText: 'SIGN UP!',
		shareButtonLabel: 'Share',
		gameEndMessage: 'GREAT<br/>JOB!',
		topScoresLoadingMessage:  "LOADING...",
		tableHeaderRank: "RANK",
		tableHeaderPlayer: "PLAYER",
		tableHeaderScore: "SCORE"
	};
	this.gameData = {};
	this.topScoresSelectionIndex = 0;
	this.gameEndBackground = false;
	this.topScoreTables = {};
	this.topScoresLoaded = false;
	this.panelOpen = false;
	this.isFullScreen = false;
	this.sliderWidth;
	this.sideBarWidth;
	this.hostName = "/";
	this.slidePanelState = 'closed';
	this.selectedBadgeCategory = 'count';
	/*
		resize
		intended to be private, called automatically upon window resizing,
		pass a resizeCallback into the constructor to add your own functionality
	*/
	this.resize = function (){

		var viewportWidth = window.innerWidth;
		var viewportHeight = window.innerHeight;
		if(window.visualViewport){
			 viewportWidth = window.visualViewport.width;
			 viewportHeight = window.visualViewport.height;
		}
		this.wrapperDiv.style.width = viewportWidth;
		this.wrapperDiv.style.height = viewportHeight;
		document.body.height = viewportHeight;
		if(this.isFullScreen){
			this.vendorGameElement.style.width = viewportWidth;
		}
		else{
			var sliderWidth = this.getSidebarWidth();
			this.vendorGameElement.style.width = viewportWidth - sliderWidth;
			if(this.gameEndBackground){
				this.gameEndBackground.style.width = viewportWidth - sliderWidth;
				var bgWidth = this.gameEndBackground.style.width.replace("px","");
				//3:1856
				var fontSize = (bgWidth / 619) + 'em';
				this.gameEndBackground.style.fontSize = fontSize;
			}
		}

		this.vendorGameElement.style.height = viewportHeight;
		this.sliderWidth = document.getElementById('gameSideSlider').offsetWidth;
		this.sideBarWidth = document.getElementById('gameSidebar').offsetWidth;
		if (this.panelOpen){
			this.openSlidePanel();
		}
		else{
			this.hideSlidePanel(false);
		}
		if (typeof(this.resizeCallback) != "undefined"){
			this.resizeCallback();
		}

	}
	/*
		loadGameData
	*/
	this.loadGameData = function(key, successCallback, errorCallback){

		if (key === undefined) {
			key = 'DEFAULT';
		}

		var xhr = new XMLHttpRequest();
		xhr.withCredentials = true;
		xhr.async = false;
		xhr.open('GET', this.hostName +'a/games/load?game_id='+this.id);
		xhr.onload = function() {
			if (xhr.status === 200) {
				var responseJson = JSON.parse(xhr.responseText);
				if (responseJson.return_code == "SUCCESS"){
					this.gameData[key] = responseJson.data;
					if (successCallback !== undefined) {
						successCallback(this.gameData[key]);
					}
					else{
						console.log('synchronous data load was successful, but no callback was provided to handle it.')
						console.log(this.gameData[key]);
					}
				}
				else{
					errorCallback();
				}
			}
			else {
				if (errorCallback !== undefined) {
					console.log('Did not load game data');
				}
				else{
					errorCallback();
				}
			}
		}.bind(this);
		xhr.send();
		if (successCallback === undefined) {
			console.log('The value returned by loadGameData may be out of date.  Pass a callback to handle the up-to-date value.')
			return this.gameData[key];
		}
		else{
			//no return should be expected if a callback is provided.
			return true;
		}
	};
	/*
		saveGameData
		For state based games only - saves game data for this user, for this game to the server
	*/
	this.saveGameData = function(data, key, successCallback){
		if (key === undefined) {
			key = 'DEFAULT';
		}
		var xhr = new XMLHttpRequest();
		xhr.async = false;
		xhr.withCredentials = true;
		xhr.open('POST', this.hostName +'a/games/save?game_id='+this.id+'&key='+key);
		xhr.onload = function() {
			if (xhr.status === 200) {
				var responseJson = JSON.parse(xhr.responseText);
				if (responseJson.return_code == "SAVED"){
					successCallback();
				}
				else{
					console.log('save unavailable - user logged off.')
				}
				//success(xhr.responseText, wrapper);
			}
			else {
				console.log('save failed');
			}
		};
		xhr.send(JSON.stringify(data));
	};
	/*
		start
		for either state or session based games, tells the game to start,
		may be modified later on to include additional code.
	*/
	this.start = function(){
		this.ended = false;
		xhRequest(
			this.hostName+'a/games/start?game_id='+this.id,
			this,
			function(data,wrapper){
				//this = wrapper;
				data = JSON.parse(data);
				wrapper.strings = data.strings;
				if(data.gameStrings){
					wrapper.gameStrings = data.gameStrings;
				}

				//console.log(wrapper.strings);
				if (typeof(wrapper.gameStartCallback) != "undefined"){
					wrapper.gameStartCallback();
					if (data.return_code == "SUCCESS"){
						wrapper.sessionId = data.session_id;
						wrapper.loggedIn = true;
						if (data.gameData){
							wrapper.gameData = data.gameData;
						}
						var badgesButtons = document.getElementsByClassName('game-badges-button');
						if(badgesButtons.length == 1){
							var badgesButton = badgesButtons[0];
							badgesButton.className = badgesButton.className.replace(" hidden","")
						}
					}
				}
			},
			function(xhr,wrapper){

				alert('Problem connecting to Superbook Site. Please Try Again Later.');
				console.log(xhr);
			}
		);

	};

	this.sendShare = function(e){
		var selected = document.getElementsByClassName('share-selected');
		var ids = [];
		for(var i = 0; i< selected.length; i++){
			ids.push(selected[i].getAttribute('data-id'))
		}
		this.closeShareModal();
		var shareLoader = ce('div','share-loader','Sending...');
		shareLoader.id = 'shareLoader';
		var shareParent = document.getElementsByClassName('game-window')[0];
		shareParent.appendChild(shareLoader);

		console.log(ids);
		xhRequest(
			this.hostName+'a/games/share?g='+this.id+"&f="+ids.join(),
			this,
			function(data,wrapper){
				var shareLoader = document.getElementById('shareLoader');
				shareLoader.parentNode.removeChild(shareLoader);
				data = JSON.parse(data);
				wrapper.loadBadgeData();
			},
			function(xhr,wrapper){
				var shareLoader = document.getElementById('shareLoader');
				shareLoader.parentNode.removeChild(shareLoader);
				alert('Problem connecting to Superbook Site. Please Try Again Later.');
				console.log(xhr);
			}
		);
	}
	this.openShareModal = function(e){
		e.preventDefault();
		this.hideSlidePanel(true);
		if(!document.getElementById('shareModal')){
			var shareModal = ce('div','share-modal');
			shareModal.id = 'shareModal';
			var shareBackground = ce('div','share-background')
			shareModal.appendChild(shareBackground);
			var closeShareButton = ce('button','share-close','x');
			closeShareButton.onclick=this.closeShareModal;

			shareModalHeader = ce('div','share-header','Share');
			shareModalHeader.appendChild(closeShareButton)
			shareBackground.appendChild(shareModalHeader);

			var shareBody = ce('div','share-body','Loading...');
			shareBackground.appendChild(shareBody);
			shareBody.id = 'shareBody';
			var sendShareButton =ce('button','send-share-button hidden');
			shareBackground.appendChild(sendShareButton);
			var shareParent = document.getElementsByClassName('game-window')[0];
			shareParent.appendChild(shareModal);

			xhRequest(
				this.hostName+'a/games/share_list?id='+this.id,
				this,
				function(data,wrapper){

					data = JSON.parse(data);
					var shareBody = document.getElementById('shareBody');
					shareBody.innerHTML = data.responseMessage;
					if(data.returnCode == "SUCCESS"){

						var friendIds = Object.keys(data.availableFriends);
						for(var i = 0; i< friendIds.length; i++){
							var friendId = friendIds[i];
							var friend = data.availableFriends[friendId];
							var friendPanel = ce('div','friend-share-panel');
							var src = wrapper.generateUserImageSrc(friend);
							var friendPanelImage = ce('img','', src)
							friendPanel.appendChild(friendPanelImage);
							var friendPanelName = ce('span','friend-panel-name',friend.name)
							friendPanel.appendChild(friendPanelName);
							shareBody.appendChild(friendPanel);
							friendPanel.setAttribute('data-id',friendId);
							friendPanel.onclick = function(e){
								e.preventDefault();
								if (this.className == 'friend-share-panel'){
									this.className = 'friend-share-panel share-selected';
								}
								else{
									this.className = 'friend-share-panel';
								}
							}
						}
						sendShareButton.className = 'send-share-button';
						sendShareButton.innerHTML = 'Send Share';
							sendShareButton.onclick = wrapper.sendShare.bind(wrapper);
					}
					else{
						sendShareButton.className = 'send-share-button';
						sendShareButton.innerHTML = 'OK';
						sendShareButton.onclick = wrapper.closeShareModal.bind(wrapper);
					}

				},
				function(xhr,wrapper){
					alert('Problem connecting to Superbook Site. Please Try Again Later.');
					console.log(xhr);
				}
			);
		}

	}
	this.closeShareModal = function(){
		var shareModal = document.getElementById('shareModal')
		shareModal.parentNode.removeChild(shareModal);
	}

	this.scoreScreen = function(score,superpoints){

		this.gameEndBackground.innerHTML = "";
		this.gameEndBackground.style.overflowX = "hidden";
		this.gameEndBackground.style.overflowY = "auto";
		var gameEndTitle = ce("div","great-job-header",this.strings.gameEndTitle);
		this.gameEndBackground.appendChild(gameEndTitle);
		var scorePanel = ce("div",'score-panel');
		scorePanel.className = 'score-panel';
		var scoreLabel = ce("label",'game-score-label',this.strings.scoreLabel);
		var scoreValue = ce("span","game-score-value", score);

		scorePanel.appendChild(scoreLabel);
		scorePanel.appendChild(scoreValue);
		this.gameEndBackground.appendChild(scorePanel);

		var pointsPanel = ce("div",'score-panel');
		var pointsLabel = ce("label",'game-superpoints-label',this.strings.youWonLabel);
		var pointsValue = ce("span",'game-superpoints-value', superpoints);
		var pointsSymbol = ce("div",'game-superpoints-symbol');
		var spImage = ce('img',"",'../sb_game/images/superpoint.svg');

		pointsSymbol.appendChild(spImage);
		var spSymbolCaption = ce('span','game-sp-symbol-label', this.strings.superpointsCaption);
		pointsSymbol.appendChild(spSymbolCaption);
		var spMultSymbol = ce('div','game-superpoints-mult-symbol',this.strings.multiplicationSymbol);
		pointsSymbol.appendChild(spMultSymbol);
		pointsPanel.appendChild(pointsLabel);
		pointsPanel.appendChild(pointsValue);
		pointsPanel.appendChild(pointsSymbol)


		var actionPanel = ce('div','game-end-action-panel');

		if (this.loggedIn == false){
			//Sign Up to Earn SuperPoints
			var lockedPointsSection = ce('div','locked-points-section');
			var gradientTop = ce('div','locked-points-gradient-top');
			var gradientBottom = ce('div','locked-points-gradient-bottom');
			lockedPointsSection.appendChild(gradientTop);
			lockedPointsSection.appendChild(gradientBottom);

			var lockedPointsMessageBox = ce('div','locked-points-message-box');
			lockedPointsSection.appendChild(lockedPointsMessageBox);
			lockedPointsMessageText = ce('div','locked-points-message-text',this.strings.superpointsLockedMessage);
			lockedPointsMessageBox.appendChild(lockedPointsMessageText);
			this.gameEndBackground.appendChild(lockedPointsSection);
			var lockedPointsImage = ce("img",'locked-points-image','../sb_game/images/lock.svg');
			this.gameEndBackground.appendChild(lockedPointsImage);
			this.gameEndBackground.appendChild(pointsPanel);

			var playAgainButton = ce("a",'game-play-again-button',this.strings.replayButtonText);
			playAgainButton.href = '#';
			playAgainButton.onclick = function(e){
				e.preventDefault();
				window.location.reload();
				return false;
			}

			var href = '/signup';
			if (channel == "app"){
				href = "superbook://bible#view-name=signup"
			}
			var signUpButton =this.bigRoundButton(this.strings.registerButtonText,href);
			/*signUpButton.onclick = function(e){
				e.preventDefault();
				window.location.href = '/signup';
				return false;
			}*/
			actionPanel.appendChild(playAgainButton);
			actionPanel.appendChild(signUpButton);
			this.gameEndBackground.appendChild(actionPanel);


		}
		else{
			this.gameEndBackground.appendChild(pointsPanel);
			var shareButton = ce("a",'game-share-button',this.strings.shareButtonLabel);
			shareButton.href = '#';
			shareButton.onclick = this.openShareModal.bind(this);


			var newGameButton =this.bigRoundButton(this.strings.replayButtonText, false);
			newGameButton.onclick = function(e){
				e.preventDefault();
				window.location.reload();
				return false;
			}
			actionPanel.appendChild(shareButton);
			actionPanel.appendChild(newGameButton);
			this.gameEndBackground.appendChild(actionPanel);
		}

	}
	this.getSidebarWidth = function(){
		var rect = document.getElementById('gameSidebar').getBoundingClientRect();
		return rect.width;
	}
	/*
		end
		for either state or session based games, tells the game to end,
		required for session based games - displays user's final score, etc.
		optional for state based games.
		may be modified later on to include additional code.
	*/
	this.end = function(score){
		if (!this.ended){
			this.ended = true;
			this.cancelFullScreen();
			var b = document.getElementsByClassName('fs-button');
			for(var i = 0; i< b.length; b++){
				b[i].parentNode.removeChild(b[i]);
			}
			this.vendorGameElement.parentNode.removeChild(this.vendorGameElement);
			var gameEndBackground = ce('div');
			this.gameEndBackground = gameEndBackground;
			var viewportWidth = window.innerWidth;
			var viewportHeight = window.innerHeight;
			if(window.visualViewport){
				 viewportWidth = window.visualViewport.width;
				 viewportHeight = window.visualViewport.height;
			}
			var sliderWidth = this.getSidebarWidth();
			this.gameEndBackground.style.width = viewportWidth - sliderWidth;
			var bgWidth = this.gameEndBackground.style.width.replace("px","");
			var fontSize = (bgWidth / 619) + 'em';
			this.gameEndBackground.style.fontSize = fontSize;
			gameEndBackground.className = 'game-end-screen';
			var gameEndCanvas = ce('canvas');
			gameEndCanvas.id = 'game-end-canvas';
			gameEndCanvas.width = '1024';
			gameEndCanvas.height = '768';

			gameEndCanvas.style.width = '100%';
			gameEndCanvas.style.height = '100%';
			var ctx = gameEndCanvas.getContext("2d");
			var grd = ctx.createLinearGradient(0,0,0,768);
			grd.addColorStop(0,"#03ADE7");
			grd.addColorStop(1,"#70D49E");
			ctx.fillStyle=grd;
			ctx.fillRect(0,0,1024,768)

			var hourglasses = [[.7,1,'#44BFBB'],[1.2,1.6,'#487BD3'],[0.5,0.2,'#2EB2CB'],
			                   [-.7,-1,'#44BFBB'],[-1.2,-1.6,'#487BD3'],[-0.5,-0.2,'#2EB2CB']]

			for (var i = 0; i < hourglasses.length; i++){
				var m1= hourglasses[i][0];
				var m2 = hourglasses[i][1];
				ctx.fillStyle = hourglasses[i][2];
				ctx.beginPath();


				var b1 = (m1) + 384;
				var x1 = -512;
				var y1 = m1*x1 + b1;
				ctx.moveTo(x1+512,y1);
				var x2 = 512;
				var y2 = m1*x2 + b1;
				ctx.lineTo(x2+512,y2);
				var b2 = (m2) + 384;
				var x3 = 512;
				var y3 = m2*x3 + b2;
				ctx.lineTo(x3+512,y3);
				var x4 = -512;
				var y4 = m2*x4 + b2;
				ctx.lineTo(x4+512,y4);
				ctx.lineTo(x1+512,y1);
				ctx.fill();
				ctx.closePath();
			}
			var lineFill = 'rgba(96,204,168,.3)';
			ctx.fillStyle = lineFill;
			for(i = 1; i < 100; i+=5){
				ctx.fillRect(0,i*10, 1024,25);
			}

			gameEndBackground.appendChild(gameEndCanvas);

			var gameEndMessage = ce('div','game-end-message',this.strings.gameEndMessage);
			gameEndBackground.appendChild(gameEndMessage);
			this.wrapperDiv.appendChild(gameEndBackground)
			setTimeout(function(){
				gameEndBackground.className += " shown";
				gameEndMessage.style.fontSize = '6em';
			},10);
			var continueButton = ce('div','continue-button hidden');
			gameEndBackground.appendChild(continueButton);
			var thisController = this;
			if (this.loggedIn == false){
				gameEndCanvas.onclick = this.scoreScreen.bind(this,score,0);
				gameEndCanvas.style.cursor-'pointer';
				continueButton.className = 'continue-button';
			}
			else{
				var gameEndLoader = ce("div",'game-end-ajax-loader');


				xhRequest(
					this.hostName+'a/games/end?session_id='+this.sessionId+'&score='+score,
					this,
					function(data,wrapper){

						data = JSON.parse(data);
						wrapper.gameEndBackground.removeChild(gameEndLoader);
						continueButton.className = 'continue-button';
						gameEndCanvas.onclick = wrapper.scoreScreen.bind(wrapper,score, data.superpoints);
						gameEndCanvas.style.cursor-'pointer';
						wrapper.loadBadgeData()
					},
					function(xhr,wrapper){

						alert('Problem connecting to Superbook Site. Please Try Again Later.');
						console.log(xhr);
					}
				);

				gameEndBackground.appendChild(gameEndLoader);
			}

		}

	};
	this.endFullScreenEvent = function(e){
		//needs to be coded;
		this.isFullScreen = document.fullScreen;
	}
	this.endFullScreenEventWebkit = function(e){
		this.isFullScreen = document.webkitIsFullScreen;
	}
	this.endFullScreenEventMoz = function(e){
		this.isFullScreen = document.mozFullScreen;
	}
	/*
		renderGameArea
		draws the Superbook elements to the page and provides a game parent element
		for vendor use.
	*/
	this.renderGameArea = function(){
		document.addEventListener("fullscreenchange", this.endFullScreenEvent, false);
		document.addEventListener("webkitfullscreenchange", this.endFullScreenEventWebkit.bind(this), false);
		document.addEventListener("mozfullscreenchange", this.endFullScreenEventMoz, false);
		/*
			40 pixels on the right side are reserved -
			will be later modified to add site utility to page
		*/
		var div = ce("div");
		var viewportWidth = window.innerWidth;
		var viewportHeight = window.innerHeight;
		if(window.visualViewport){
			 viewportWidth = window.visualViewport.width;
			 viewportHeight = window.visualViewport.height;
		}
		div.style.width = viewportWidth;
		div.style.height = viewportHeight;
		div.className = 'game-window';
		var sideSlider = ce("div",'game-side-slider');
		sideSlider.id = 'gameSideSlider';
		var sidebar = ce("div",'game-sidebar');
		sidebar.id = 'gameSidebar';
		sideSlider.appendChild(sidebar);
		div.appendChild(sideSlider);

		var buttonBox = ce("div","game-sidebar-button-box");
		var sideBarGraphic = ce("img",'game-sidebar-image','../sb_game/images/GamePageOverlay_Bar_Top.svg');
		sidebar.appendChild(sideBarGraphic);
		sidebar.appendChild(buttonBox);


		var badgesButton = ce("button",'panel-button game-badges-button hidden');
		badgesButton.onclick = this.showBadges.bind(this,badgesButton);
		buttonBox.appendChild(badgesButton);


		var topScoreButton = ce("button",'panel-button ts-button');
		topScoreButton.onclick = this.showTopScores.bind(this,topScoreButton);
		buttonBox.appendChild(topScoreButton);



		//do not show full screen button on browsers that do not support it.
		var element = document.body;
		if ((element.requestFullscreen)
		|| (element.mozRequestFullScreen)
		|| (element.webkitRequestFullscreen)
		|| (element.msRequestFullscreen)) {
			var fullscreenButton = ce("button",'panel-button fs-button');
			fullscreenButton.onclick = this.fullScreen.bind(this);
			buttonBox.appendChild(fullscreenButton);
		}

		var vendorGameElement = ce("div");
		vendorGameElement.style.width = viewportWidth * .95; //temporary vaue, set below based on slider Width;
		vendorGameElement.style.height = viewportHeight;
		vendorGameElement.style.backgroundColor = "rgb(12, 63, 118)";
		//vendorGameElement.style.backgroundColor = '#0c3f76';
		this.vendorGameElement = vendorGameElement;
		div.appendChild(vendorGameElement);

		/*sideSlider.style.right='-30%';*/
		document.body.appendChild(div);
		this.sliderWidth = sideSlider.offsetWidth;
		this.sideBarWidth = sidebar.offsetWidth;
		this.hideSlidePanel(false);
		var sliderWidth = this.getSidebarWidth();
		vendorGameElement.style.width = viewportWidth - sliderWidth;
		this.wrapperDiv = div;
		//this.vendorGameElement = vendorGameElement;
		document.body.style.overflowX = 'hidden';
		document.body.style.overflowY = 'hidden';
		window.onresize = (function(){
			clearTimeout(this.resizeClock);
			this.resizeClock = setTimeout(this.resize.bind(this),10);
			//this.resize.bind(this);
		}).bind(this);
	}


	this.fullScreen = function (){
		if (typeof(this.vendorGameElement) != "undefined"){
			// if already full screen; exit
			// else go fullscreen
			if (
				document.fullscreenElement ||
				document.webkitFullscreenElement ||
				document.mozFullScreenElement ||
				document.msFullscreenElement
				) {
					if (document.exitFullscreen) {
					  document.exitFullscreen();
					} else if (document.mozCancelFullScreen) {
					  document.mozCancelFullScreen();
					} else if (document.webkitExitFullscreen) {
					  document.webkitExitFullscreen();
					} else if (document.msExitFullscreen) {
					  document.msExitFullscreen();
					}
				} else {
					element = this.vendorGameElement;
					if (element.requestFullscreen) {
					  element.requestFullscreen();
					} else if (element.mozRequestFullScreen) {
					  element.mozRequestFullScreen();
					} else if (element.webkitRequestFullscreen) {
					  element.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
					} else if (element.msRequestFullscreen) {
					  element.msRequestFullscreen();
					}
					else{
					}
				}
		}
	};
	this.getSelectedTopScoreCategory = function(){
		var selectedType = "day";
		if (((this.topScoresSelectionIndex % 3) == -1) || (this.topScoresSelectionIndex % 3) == 2){
			selectedType = "all_time";
		}
		if (((this.topScoresSelectionIndex % 3) == -2) || (this.topScoresSelectionIndex % 3) == 1){
			selectedType = "week"
		}
		return selectedType;
	}
	this.generateUserImageSrc = function(userRow){
		/*
		#1 = Skin
		#2 = Eyes
		#3 = Head Gear
		#4 = Top
		#5 = pants
		#6 = shoes
		*/
		var imageToken = userRow.gender + "-" + userRow.Skin + "-" + userRow.Eyes + "-" + userRow.HeadGear + "-"  + userRow.Tops + "-0-0";

		var strokeWidth = (userRow.gender=="m")?30:40;
		return  "https://us-en.superbook.cbn.com/c/agi/"  + imageToken +"-z-50x50-"+strokeWidth+"-FFFFFF.png";
	}
	this.loadTopScores = function (){
		var selectedType = this.getSelectedTopScoreCategory();
		var thisWrapper = this;
		if(document.getElementById('topScoreTableBody')){
			var tbodies = {all_time:ce("ul"),day:ce("ul"),week:ce("ul")}
			tableBody = document.getElementById('topScoreTableBody');
			tableBody.innerHTML = this.strings.topScoresLoadingMessage;
			xhRequest(this.hostName+'a/games/top_scores?nid='+this.id, this, function(data){
				data = JSON.parse(data);
				tableBody.innerHTML = "";
				var scoreTypes = ["all_time","day","week"];
				for(var i = 0; i< scoreTypes.length; i++){
					var type = scoreTypes[i];
					delete data[type].user_data;
					delete data[type].user_rank;
					var lastRow = false;
					var scoreValues = Object.keys(data[type]);
					for(var j = 0; j < scoreValues.length; j++){
						var scoreValue = scoreValues[j];

						var row = data[type][scoreValue];
						var users = row.users;
						var rank = row.rank;
						var userIDs = Object.keys(users);
						for(var k = 0; k < userIDs.length; k++){
							var userID = userIDs[k];
							var userRow = users[userID];
							var userName = userRow.name;
							//var userHref = this.hostName + userRow.url;

							var userRankElement = ce("div",'top-score-cell-end ts-rank');
							userRankElement.innerHTML = rank;
							var userNameElement = ce("div",'top-score-cell-center ts-player');

							var src = thisWrapper.generateUserImageSrc(userRow)

							var userImage = ce("img", '', src);
							//userImage.style.width = '50px';
							//userImage.style.height = '50px';
							var userLink = ce("span");
							userLink.className = 'ts-user-box';
							userLink.appendChild(userImage);
							//userLink.href = userHref;
							userNameElement.appendChild(userLink);
							var userNameText = ce("span",'',userName);
							userLink.appendChild(userNameText);
							var userScoreElement = ce("div", 'top-score-cell-end ts-score');
							userScoreElement.innerHTML = scoreValue;
							var userRow = ce("li","ts-user-row");
							userRow.appendChild(userRankElement);
							userRow.appendChild(userNameElement);
							userRow.appendChild(userScoreElement);
							if(lastRow != false){
								tbodies[type].insertBefore(userRow,lastRow);
							}
							else{
								tbodies[type].appendChild(userRow);
							}
							lastRow = userRow;

						};
					}
				}
				thisWrapper.topScoreTables = tbodies;
				thisWrapper.topScoresLoaded = true;
				tableBody.innerHTML = tbodies[selectedType].innerHTML;

			}, function(){
				console.log('failed to load top scores')
			})
		}
	}
	this.getTopScoresScreen = function(){
		if (this.topScoreScreen == false){
			this.topScoreScreen = ce('div','top-score-screen');
			//this.topScoreScreen.style.height = window.visualViewport.height;
			var slider = document.getElementById('gameSideSlider');
			slider.appendChild(this.topScoreScreen);
			var tss = this.topScoreScreen;

			var thisWrapper = this;
			//console.log(thisWrapper);
			tss.className += " shown";
			tss.innerHTML = "";
			var topScoreHeader = ce('div','top-score-header');

			var topScoreContainer = ce('div','top-score-container');
			var topScoreWrapper = ce('div','top-score-wrapper');
			topScoreContainer.appendChild(topScoreWrapper);
			var topScoreDecoration = ce('div','top-score-decoration');

			topScoreWrapper.appendChild(topScoreDecoration);
			tss.appendChild(topScoreHeader);
			tss.appendChild(topScoreContainer);
			if(this.loggedIn){
				var shareButton = ce("a",'game-share-button',this.strings.shareButtonLabel);
				shareButton.href = '#';
				shareButton.onclick = this.openShareModal.bind(this);
				var topScoreFooter = ce('div','top-score-footer');
				topScoreFooter.appendChild(shareButton);
				tss.appendChild(topScoreFooter);
			}

			var scoreToggleLeft = document.createElementNS("https://www.w3.org/2000/svg", "svg");
			scoreToggleLeft.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "https://www.w3.org/1999/xlink");
			//scoreToggleLeft.setAttribute('width', '80');
			//scoreToggleLeft.setAttribute('height', '80');
			scoreToggleLeft.setAttribute('viewBox', '0 0 28 25');
			var stlGroup = document.createElementNS("https://www.w3.org/2000/svg", "g");
			stlGroup.setAttribute("transform","scale(-1, 1) translate(-28 0)");
			var stlPath1 = document.createElementNS("https://www.w3.org/2000/svg", "path");
			stlPath1.setAttribute("d","M0.621,0.123l13.641,12.15-13.641,12.256,5.521-12.256Z");
			stlPath1.setAttribute('id','lightning-bolt');
			stlPath1.setAttribute('class','bolt ');
			var leftAnimate = document.createElementNS("https://www.w3.org/2000/svg", "animate");
				leftAnimate.setAttribute('attributeType','CSS');
				leftAnimate.setAttribute('attributeName','fill');
				leftAnimate.setAttribute('fill','freeze');
				leftAnimate.setAttribute('values','#FFFFFF;#72c2f8;#FFFFFF');
				leftAnimate.setAttribute('dur','2s');
				leftAnimate.setAttribute('repeatCount','indefinite');
			stlPath1.appendChild(leftAnimate);
			var stlPath2 = document.createElementNS("https://www.w3.org/2000/svg", "path");
			stlPath2.setAttribute("d","M9.225,2.993l18.125,9.292-18.125,9.374,7.335-9.374Z");
			stlPath2.setAttribute('class','bolt ');
			var leftAnimate2 = document.createElementNS("https://www.w3.org/2000/svg", "animate");
				leftAnimate2.setAttribute('attributeType','CSS');
				leftAnimate2.setAttribute('attributeName','fill');
				leftAnimate2.setAttribute('fill','freeze');
				leftAnimate2.setAttribute('values','#FFFFFF;#72c2f8;#FFFFFF');
				leftAnimate2.setAttribute('dur','2s');
				leftAnimate2.setAttribute('repeatCount','indefinite');
			stlPath2.appendChild(leftAnimate2);
			//stlPath1.style.fill='#72c2f8';
			//stlPath2.style.fill='#72c2f8';
			stlGroup.appendChild(stlPath1);
			stlGroup.appendChild(stlPath2);

			var defs = document.createElementNS("https://www.w3.org/2000/svg","defs");
			var filter = document.createElementNS("https://www.w3.org/2000/svg","filter");
			filter.id = 'bolt-inner-shadow';
			defs.appendChild(filter);
			var feOffset = document.createElementNS("https://www.w3.org/2000/svg",'feOffset')
				feOffset.setAttribute('dx',0);
				feOffset.setAttribute('dy',0);
			filter.appendChild(feOffset);
			var feGaussianBlur = document.createElementNS("https://www.w3.org/2000/svg",'feGaussianBlur')
				feGaussianBlur.setAttribute('stdDeviation',2);
				feGaussianBlur.setAttribute('result','offset-blur');
			filter.appendChild(feGaussianBlur)
			var feComposite1 = document.createElementNS("https://www.w3.org/2000/svg",'feComposite')
				feComposite1.setAttribute('operator','out');
				feComposite1.setAttribute('in','SourceGraphic');
				feComposite1.setAttribute('in2','offset-blur');
				feComposite1.setAttribute('result','inverse');
			filter.appendChild(feComposite1);
			var feFlood = document.createElementNS("https://www.w3.org/2000/svg",'feFlood');
				feFlood.setAttribute('flood-color','6B2C22');
				feFlood.setAttribute('flood-opacity',1);
				feFlood.setAttribute('result','color');
			filter.appendChild(feFlood);
			var feComposite2 = document.createElementNS("https://www.w3.org/2000/svg",'feComposite')
				feComposite2.setAttribute('operator','in');
				feComposite2.setAttribute('in','color');
				feComposite2.setAttribute('in2','inverse');
				feComposite2.setAttribute('result','shadow');
			filter.appendChild(feComposite2);
			var feComposite3 = document.createElementNS("https://www.w3.org/2000/svg",'feComposite')
				feComposite3.setAttribute('operator','over');
				feComposite3.setAttribute('in','shadow');
				feComposite3.setAttribute('in2','SourceGraphic');
			filter.appendChild(feComposite3);

			scoreToggleLeft.appendChild(defs);
			scoreToggleLeft.appendChild(stlGroup);
			scoreToggleLeft = document.createElement("button");
			scoreToggleLeft.innerHTML = "&lt;";
			var topScoreTextLeft = ce("div",'', this.strings.topScoresAllTimeName);
			topScoreTextLeft.style.left = "-100%";
			var topScoreTextMiddle = ce("div",'', this.strings.topScoresDailyName);
			var topScoreTextRight = ce("div",'', this.strings.topScoresWeeklyName);
			var animationEnabled = true;
			scoreToggleLeft.onclick = function(e){
				if(animationEnabled && (thisWrapper.topScoresLoaded)){
					thisWrapper.topScoresSelectionIndex--;

					animationEnabled = false;
					e.preventDefault();
					e.stopPropagation();
					topScoreTextLeft.style.zIndex = 2;
					topScoreTextLeft.style.left = "0%";
					setTimeout(function(){
						animationEnabled = true;
						var tmp = topScoreTextRight.innerHTML;
						topScoreTextRight.innerHTML = topScoreTextMiddle.innerHTML;
						topScoreTextMiddle.innerHTML = topScoreTextLeft.innerHTML;
						topScoreTextLeft.innerHTML = tmp;
						topScoreTextLeft.style.zIndex = 0;
						topScoreTextLeft.style.left = "";
						var selectedType = thisWrapper.getSelectedTopScoreCategory();
						if (document.getElementById('topScoreTableBody')){
							document.getElementById('topScoreTableBody').innerHTML = thisWrapper.topScoreTables[selectedType].innerHTML;
						}

					},500);
				}
			}
			topScoreHeader.appendChild(scoreToggleLeft);

			var topScoreText = ce("div",'top-score-text');
			topScoreText.appendChild(topScoreTextLeft);
			topScoreText.appendChild(topScoreTextMiddle);
			topScoreText.appendChild(topScoreTextRight);

			topScoreHeader.appendChild(topScoreText);
			var scoreToggleRight = document.createElementNS("https://www.w3.org/2000/svg", "svg");
			scoreToggleRight.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "https://www.w3.org/1999/xlink");
			//scoreToggleRight.setAttribute('width', '80');
			//scoreToggleRight.setAttribute('height', '80');
			scoreToggleRight.setAttribute('viewBox', '0 0 28 25');
			var strGroup = document.createElementNS("https://www.w3.org/2000/svg", "g");
			var strPath1 = document.createElementNS("https://www.w3.org/2000/svg", "path");
			strPath1.setAttribute("d","M0.621,0.123l13.641,12.15-13.641,12.256,5.521-12.256Z");
			var strPath2 = document.createElementNS("https://www.w3.org/2000/svg", "path");
			strPath2.setAttribute("d","M9.225,2.993l18.125,9.292-18.125,9.374,7.335-9.374Z");
			var rightAnimate = document.createElementNS("https://www.w3.org/2000/svg", "animate");
				rightAnimate.setAttribute('attributeType','CSS');
				rightAnimate.setAttribute('attributeName','fill');
				rightAnimate.setAttribute('fill','freeze');
				rightAnimate.setAttribute('values','#72c2f8;#FFFFFF;#72c2f8');
				rightAnimate.setAttribute('dur','2s');
				rightAnimate.setAttribute('repeatCount','indefinite');
			strPath1.appendChild(rightAnimate);

			var rightAnimate2 = document.createElementNS("https://www.w3.org/2000/svg", "animate");
				rightAnimate2.setAttribute('attributeType','CSS');
				rightAnimate2.setAttribute('attributeName','fill');
				rightAnimate2.setAttribute('fill','freeze');
				rightAnimate2.setAttribute('values','#72c2f8;#FFFFFF;#72c2f8');
				rightAnimate2.setAttribute('dur','2s');
				rightAnimate2.setAttribute('repeatCount','indefinite');
			strPath2.appendChild(rightAnimate2);

			//strPath1.style.fill='#72c2f8';
			//strPath2.style.fill='#72c2f8';
			strPath1.setAttribute('class','bolt');
			strPath2.setAttribute('class','bolt');
			strGroup.appendChild(strPath1);
			strGroup.appendChild(strPath2);
			scoreToggleRight.appendChild(strGroup);
			scoreToggleRight = document.createElement("button");
			scoreToggleRight.innerHTML = "&gt;";
			scoreToggleRight.setAttribute('class', 'right-button');
			scoreToggleLeft.setAttribute('class', 'left-button');

			scoreToggleRight.onclick = function(e){
				if(animationEnabled && (thisWrapper.topScoresLoaded)){
					thisWrapper.topScoresSelectionIndex++;


					animationEnabled = false;
					e.preventDefault();
					e.stopPropagation();
					topScoreTextRight.style.zIndex = 2;
					topScoreTextRight.style.left = "-200%";
					setTimeout(function(){
						animationEnabled = true;
						var tmp = topScoreTextLeft.innerHTML;
						topScoreTextLeft.innerHTML = topScoreTextMiddle.innerHTML;
						topScoreTextMiddle.innerHTML = topScoreTextRight.innerHTML;
						topScoreTextMiddle.style.zIndex = 1;
						topScoreTextRight.style.zIndex = 0;
						topScoreTextRight.style.left = "";
						topScoreTextRight.innerHTML = tmp;
						var selectedType = thisWrapper.getSelectedTopScoreCategory();
						if (document.getElementById('topScoreTableBody')){
							document.getElementById('topScoreTableBody').innerHTML = thisWrapper.topScoreTables[selectedType].innerHTML;
						}
					},500);
				}
			}
			topScoreHeader.appendChild(scoreToggleRight);
			//topScoreFooter.innerHTML = 'FOOTER_PLACEHOLDER';
			var table = ce("div",'top-score-table');
			var tableBody = ce("ul");
			tableBody.id = 'topScoreTableBody';

			var tableHeaderRow = ce("div","ts-header-row");
			var tableHeaderRank = ce("div","ts-rank", this.strings.tableHeaderRank);
			var tableHeaderPlayer = ce("div","ts-player", this.strings.tableHeaderPlayer);
			var tableHeaderScore = ce("div","ts-score", this.strings.tableHeaderScore);

			tableHeaderRow.appendChild(tableHeaderRank);
			tableHeaderRow.appendChild(tableHeaderPlayer);
			tableHeaderRow.appendChild(tableHeaderScore);
			//tableHead.appendChild(tableHeaderRow);
			table.appendChild(tableHeaderRow);
			table.appendChild(tableBody);
			topScoreWrapper.appendChild(table);
		}
		return this.topScoreScreen;
	}
	this.hideScreen = function(className){
		var screenElements = document.getElementsByClassName(className);
		for(var i = 0; i< screenElements.length; i++){
			screenElements[i].className += " hidden";
		}
	}
	this.showScreen = function(className){
		var screenElements = document.getElementsByClassName(className);
		for(var i = 0; i< screenElements.length; i++){
			screenElements[i].className = screenElements[i].className.replace(/hidden/g,"");
			screenElements[i].className = screenElements[i].className.replace(/\s\s/g," ");
		}
	}
	this.showTopScores = function (button) {
		this.cancelFullScreen();
		var thisWrapper = this;
		var tss = this.getTopScoresScreen();
		this.hideScreen('badges-screen');
		if(this.slidePanelState != 'top-scores'){
			this.loadTopScores();
			this.slidePanelState = 'top-scores';
			this.openSlidePanel();
			var openButton = document.getElementsByClassName('open-button');
			for(var i = 0; i< openButton.length; i++){
				openButton[i].className = openButton[i].className.replace("open-button","");
			}
			button.className = 'panel-button ts-button open-button';
			this.showScreen('top-score-screen');
		}
		else{
			if(this.slidePanelState == 'top-scores'){
				this.hideSlidePanel(true);
			}

		}

	}
	this.badgeToast = function (badge, order){

		var badgeStart = order * 3000;
		setTimeout(function(order){
			var gameWindow = document.getElementsByClassName('game-window')[0];
			var badgeButton = document.getElementsByClassName('game-badges-button')[0];
			var toastElement = ce('div','badge-toast');
			var badgeMain = ce('div','badge-main',badge.title);
			toastElement.appendChild(badgeMain);

			var badgeRect = badgeButton.getBoundingClientRect();
			var width = badgeRect.height * (25/6);
			toastElement.style.top = badgeRect.y;
			toastElement.style.left = badgeRect.x - width;
			toastElement.style.height = badgeRect.height;
			toastElement.style.width = width;

			var toastImage = ce('img','badge-image',badge.full_filename);
			toastElement.appendChild(toastImage);
			gameWindow.appendChild(toastElement);

			var badgeEnd = 2500;
			toastElement.className += " shown";
			setTimeout(function(element){
				element.style.left = document.documentElement.clientWidth;
				setTimeout(function(e2){
					element.parentNode.removeChild(element);
				}.bind(this,element),1000);
			}.bind(this,toastElement), badgeEnd);
		}.bind(this,order), badgeStart);


	}
	this.largeBadgePanel = function(title, image, description, progress, requirement, completeDate){
		var panel = ce('div','large-badge-panel');
		//var leftHandle = ce('div','badge-left-handle');
		var badgeMain = ce("div","badge-main");
		var badgeImage = ce("img","badge-image",'https://us-en.superbook.cbn.com/'+image);
		//var rightFace = ce('div','badge-right-face')
		var badgeTitle = ce("h4","badge-title",title);
		var badgeDescription = ce("div","badge-description marquee","<div><span>"+description+"</span><span class='marquee-extra'>"+description+"</span></div>");


		badgeMain.appendChild(badgeTitle);
		badgeMain.appendChild(badgeDescription);

		if (!(completeDate > 0)){
			if (requirement != false){
				if (progress < requirement){
					var badgeProgress = ce("div","badge-progress");
					var badgeProgressValue = ce("div","badge-progress-value");
					var badgeProgressCaption = ce("div","badge-progress-caption",progress+" / "+requirement)
					var completionPercentage = progress/requirement;
					badgeProgressValue.style.width = (Math.round((completionPercentage)*100)) + "%";
					badgeProgress.appendChild(badgeProgressCaption);
					if (Math.round((completionPercentage)*100) > 2){
						badgeProgress.appendChild(badgeProgressValue)
					}
					badgeMain.appendChild(badgeProgress);
				}
			}
		}

		//panel.appendChild(leftHandle);
		panel.appendChild(badgeMain);
		panel.appendChild(badgeImage);
		//panel.appendChild(rightFace);
		return panel;
	}
	this.switchBadgeCategory = function(categoryKey){
		this.selectedBadgeCategory = categoryKey;
		var tabs = document.getElementsByClassName('badge-tab');
		var containers = document.getElementsByClassName('cbe');
		for(var i = 0; i< tabs.length; i++){
			if (tabs[i].getAttribute("data-category") == categoryKey){
				tabs[i].className = "badge-tab selected";
				containers[i].className = 'cbe';
			}
			else{
				tabs[i].className = "badge-tab";
				containers[i].className = 'cbe hidden';
			}
		}
		/*
		for(var i = 0; i< containers.length; i++){
			console.log(containers[i].getAttribute("data-category"));
		}
		*/
	}
	this.loadBadgeData = function(){
		xhRequest(
			this.hostName+'a/games/badges?id='+this.id,
			this,
			function(data,wrapper){

				data = JSON.parse(data);
				for (var a = 0; a< data.badges_won_now.length; a++){
					this.badgeToast(data.badges_won_now[a],a);
				}
				if (!this.badgesWrapper){
					this.createBadgesScreen();
				}
				this.badgesWrapper.innerHTML = '';
				var badgesTabs = ce("ul",'badge-tabs-list');
				this.badgesWrapper.appendChild(badgesTabs);
				var badgeIndex = 0;
				if(this.badgesScreen){
					var category_keys = Object.keys(data.available_badges);
					for(var c = 0; c< category_keys.length; c++){

						var categoryKey = category_keys[c];
						var category = data.available_badges[categoryKey];
						var selected = '';
						if (categoryKey == this.selectedBadgeCategory){
							selected = 'selected';
						}
						var bcTab = ce("li",'badge-tab '+selected, category.name);
						bcTab.setAttribute('data-category',categoryKey);
						badgesTabs.appendChild(bcTab);
						bcTab.onclick = this.switchBadgeCategory.bind(this,categoryKey)
						var categorizedBadgeElements = ce("div",'cbe badge-category-'+categoryKey);
						categorizedBadgeElements.setAttribute('data-category',categoryKey);
						if (categoryKey != this.selectedBadgeCategory){
							categorizedBadgeElements.className += ' hidden';
						}
						for(var i = 0; i < category.badges.length; i++){

							//var badgeId = badgeIds[i];
							var badge = category.badges[i];
							//var testBadge = {title:badge.title,full_filename:"http://cdn.superbook.cbn.com/"+badge.filename};
							//this.badgeToast(testBadge,badgeIndex);
							badgeIndex++;

							var progress = 0;
							var completeDate = false;
							if (badge.date_earned){
								completeDate = badge.date_earned;
							}
							if (badge.progress){
								if (badge.progress != "hidden"){
									progress = badge.progress;
								}
							}
							var badgeElement = null;
							if (badge.requirement){
								badgeElement = this.largeBadgePanel(badge.title,badge.filename,badge.body,progress,badge.requirement,completeDate);

							}
							else{
								badgeElement = this.largeBadgePanel(badge.title,badge.filename,badge.body,0,false,completeDate);
							}
							categorizedBadgeElements.appendChild(badgeElement);
						}
						this.badgesWrapper.appendChild(categorizedBadgeElements);
					}
				}

			}.bind(this),
			function(xhr,wrapper){

				alert('Problem connecting to Superbook Site. Please Try Again Later.');
				console.log(xhr);
			}
		);
	}
	this.createBadgesScreen = function(){
		if (this.badgesScreen == false){

			this.badgesScreen = ce('div','badges-screen');
			var slider = document.getElementById('gameSideSlider');
			slider.appendChild(this.badgesScreen);
			var thisWrapper = this;
			//console.log(thisWrapper);
			this.badgesScreen.className += " shown";
			this.badgesScreen.innerHTML = "";
			//var badgesFooter = ce('div','top-score-footer');
			//badgesFooter.innerHTML = 'FOOTER_PLACEHOLDER';
			var badgesContainer = ce('div','badge-screen-container');
			var badgesContainer2 = ce('div','top-score-wrapper');
			var badgeScreenHeader = ce("div",'badge-screen-header');
			var badgeGameTitle = ce('h4','badge-screen-header-title',this.gameStrings.cmsGameTitle)
			badgeScreenHeader.appendChild(badgeGameTitle);
			var badgeHeaderCaption = ce('div','badge-header-caption','&mdash; CHOOSE A BADGE CATEGORY');
			badgeScreenHeader.appendChild(badgeHeaderCaption);
			this.badgesScreen.appendChild(badgeScreenHeader);
			this.badgesWrapper = ce('div','badges-container');
			this.badgesWrapper.id = 'badgesWrapper';
			badgesContainer.appendChild(badgesContainer2);
			badgesContainer2.appendChild(this.badgesWrapper)
			this.badgesScreen.appendChild(badgesContainer);

			var shareButton = ce("a",'game-share-button',this.strings.shareButtonLabel);
			shareButton.href = '#';
			shareButton.onclick = this.openShareModal.bind(this);
			var topScoreFooter = ce('div','top-score-footer');
			topScoreFooter.appendChild(shareButton);
			this.badgesScreen.appendChild(topScoreFooter);
			//this.badgesScreen.appendChild(badgesFooter);

		}
		if (this.slidePanelState != 'badges'){
			this.loadBadgeData();
		}
	}
	this.showBadges = function(button) {
		this.cancelFullScreen();
		var thisWrapper = this;
		this.hideScreen('top-score-screen');
		if(this.slidePanelState != 'badges'){
			this.createBadgesScreen();
			this.slidePanelState = 'badges';
			this.openSlidePanel();
			var openButton = document.getElementsByClassName('open-button');
			for(var i = 0; i< openButton.length; i++){
				openButton[i].className = openButton[i].className.replace("open-button","");
			}
			button.className = 'panel-button game-badges-button open-button';
			this.showScreen('badges-screen');
		}
		else{
			//button.className = 'panel-button game-badges-button';
			if(this.slidePanelState == 'badges'){
				this.hideSlidePanel(true);
			}
		}
	}
	this.hideSlidePanel = function(animate){
		var openedButtons = document.getElementsByClassName("open-button");
		for(var i = 0; i < openedButtons.length; i++){
			openedButtons[i].className = openedButtons[i].className.replace("open-button","");
		}
		var closedRight = (this.sideBarWidth - this.sliderWidth ) + "px";
		var slider = document.getElementById('gameSideSlider');
		if (animate == false){
			slider.className = 'game-side-slider disabled-transition';
		}
		slider.style.right = closedRight;
		if (animate == false){
			setTimeout(function(){
				this.className = 'game-side-slider';
			}.bind(slider),1250)
		}
		this.panelOpen = false;
		this.slidePanelState = 'closed';
	}
	this.openSlidePanel = function() {
		var slider = document.getElementById('gameSideSlider');
		slider.style.right = '0px';
		this.panelOpen = true;
	}
	this.cancelFullScreen = function(){
		if (
			document.fullscreenElement ||
			document.webkitFullscreenElement ||
			document.mozFullScreenElement ||
			document.msFullscreenElement
			) {
				if (document.exitFullscreen) {
				  document.exitFullscreen();
				} else if (document.mozCancelFullScreen) {
				  document.mozCancelFullScreen();
				} else if (document.webkitExitFullscreen) {
				  document.webkitExitFullscreen();
				} else if (document.msExitFullscreen) {
				  document.msExitFullscreen();
				}
			}
	}
	/*
		getVendorGameElement
		when used after renderGameArea, returns the parent element for the vendor to attach
		the game
	*/
	this.getVendorGameElement = function (){
		if (typeof(this.vendorGameElement) != "undefined"){
			return this.vendorGameElement;
		}
		else{
			return false;
		}
	};
	this.bigRoundButton = function(innerHTML, href){
		var parentElement = ce('a','big-round-button');
		if (href != false){
			parentElement.href = href;
		}

		var svg = document.createElementNS("https://www.w3.org/2000/svg", "svg");
		svg.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "https://www.w3.org/1999/xlink");
		var width = 250;
		var height = 25;

		svg.setAttribute('width', '100%');//width+50);
		svg.setAttribute('height', '100%');
		svg.setAttribute('viewBox', '0 0 '+(width+50)+' '+(height+50));
		var bgPath = document.createElementNS("https://www.w3.org/2000/svg", "path");
		bgPath.setAttribute("d","M"+(height+25)+" 2.5 L "+((width+25)-height)+" 2.5 A 5 5 0 0 1 "+((width+25)-height)+" "+(height+47.5)+"  L "+(height+25)+" "+(height+47.5)+" A 5 5 0 0 1 "+(height+25)+" 2.5");
		bgPath.setAttribute('stroke','white')
		bgPath.setAttribute('stroke-width','3')
		bgPath.setAttribute('class','big-round-button-background');


		var topArc = document.createElementNS("https://www.w3.org/2000/svg", "path");
		var radius = 35;//need to calculate these better.
		var innerRadius = 35;//need to calculate these better.
		var innerXOffset = 16.5;//need to calculate these better.
		var shortRightX = ((width+25)-height);
		var shortLeftX = 25+height;
		var rightEnd = (width+(50-innerXOffset))+" "+((height+50)/2);
		var leftEnd = innerXOffset + " "+((height+50)/2);

		var corner =  ((width+25)-height)+" "+((height+50)/2);


		topArc.setAttribute("d","M "+shortRightX+",2.5 " +
				" A "+radius+" "+radius+" 0 0 1 "+rightEnd+
				" A "+innerRadius+" "+innerRadius+" 0 0 0, "+shortRightX+", 7.5"+
				" L "+shortLeftX+" 7.5"+
				" A "+innerRadius+" "+innerRadius+" 0 0 0, "+leftEnd+
				" A "+radius+" "+radius+" 0 0 1, "+shortLeftX+" 2.5");
		topArc.setAttribute('opacity','0.5');
		topArc.setAttribute('class','top-shade');
		var bottomArc = document.createElementNS("https://www.w3.org/2000/svg", "path");

		bottomArc.setAttribute("d","M "+shortRightX+" "+((height+50)-2.5)+" " +
				" A "+radius+" "+radius+" 0 0 0 "+rightEnd+
				" A "+innerRadius+" "+innerRadius+" 0 0 1, "+shortRightX+", "+((height+50)-7.5)+
				" L "+shortLeftX+" "+((height+50)-7.5)+
				" A "+innerRadius+" "+innerRadius+" 0 0 1, "+leftEnd+
				" A "+radius+" "+radius+" 0 0 0, "+shortLeftX+" "+((height+50)-2.5));
		bottomArc.setAttribute('opacity','0.5');
		bottomArc.setAttribute('class','bottom-shade');
		svg.appendChild(bgPath);

		svg.appendChild(topArc);
		svg.appendChild(bottomArc);

		parentElement.appendChild(svg);
		var anchor = ce("a",'big-round-button-text', innerHTML);
		parentElement.appendChild(anchor);
		return parentElement;
	}
}