/* 
 * JS for Whose Tweet is This by Christian Montoya, Mappdev 
 * Mappdev.com - Games you love to play! 
 * Requires jQuery 
 */ 

// just keeping this clean 
function quickPercent(num, den) { 
	return Math.floor((num/den)*100); 
}

// layout abstraction, I guess 
var interface = { 
	defaultimg:"http://static.twitter.com/images/default_profile_normal.png", 
	loadingoverlay:"#loadingoverlay", 
	main:"#maincontent", 
	side:"#sidecontent", 
	sub:"#subcontent", 
	login: "#loginform", 
	loginmessage: "#loginmessage"
}; 

// game object 
var game = { 
	loadingOverlay: function(id) { 
		$(interface.loadingoverlay).css('display','block'); 
	}, 
	loadingOverlayComplete: function(id) { 
		$(interface.loadingoverlay).css('display','none'); 
	}, 
	handleLogin: function(data) { 
		if(data.response == 'invalid') { } 
		else if(data.response == 'error') { 
			if(data.payload.type=='message') { 
				$(interface.loginmessage).html("<div class='error'>"+data.payload.message+"</div>"); 
			}
			else { 
				$(interface.loginmessage).html("<div class='error'>A problem has occurred that is outside the expected range of problems. This needs investigation on the part of the developer to solve. Please contact Mappdev and let them know at what time that the problem occurred. Also, if you have Firebug or a similar tool, you can forward the response body to Mappdev.</div>"); 
			}
		}
		else if(data.response == 'success') { 
			$(interface.main).empty(); 
			$(interface.main).append("<h2>Are you ready?</h2>"); 
			$(interface.main).append("<p>This game is a race to get the most right in the least amount of time. When you are ready, hit <a href='#' onclick='game.start("+'"'+data.payload.gamehash+'"'+");return false'><strong>Start &rarr;</strong></a></p>"); 
			$("#userprofileimage").attr('src',''+data.payload.userimage); 
			$("#userprofilename").text(''+data.payload.username); 
			$("#userprofilescreenname").text(''+data.payload.userscreenname); 
		}
	}, 
	basicRound: function(data) { 
		$(interface.main).empty(); 
		$(interface.main).append("<h2>Whose Tweet is This? <span class='quiet'>Just click on the right user</span></h2>"); 
  	$(interface.main).append("<div class='userdisplay' id='roundstatus'><div class='pic'><img src='"+interface.defaultimg+"' width='48' height='48' alt=''></div><div class='name'><b>&ldquo;"+data.payload.gamestatus+"&rdquo;</b></div></div>"); 
  	var roundoptions = $("<div id='roundoptions'></div>"); 
  	$(data.payload.gameset).each( function() { 
  		$(roundoptions).append("<a href='#' class='userdisplay' onclick='game.attempt("+'"'+data.payload.gamehash+'"'+","+this.id+");return false'><span class='pic'><img src='"+this.profile_image_url+"' width='48' height='48' alt=''></span><span class='name'><strong>"+this.name+"</strong><span class='quiet'>"+this.screen_name+"</span></span></a>"); 
  	} ); 
  	$(interface.main).append(roundoptions); 
  	$(interface.main).append("<div id='roundmeta'><div class='metatitle'>Score</div><div class='metavalue'>"+data.payload.gamescore+"</div><div class='metatitle'>Turns left</div><div class='metavalue'>"+data.payload.turnsleft+"</div></div>"); 
	}, 
	lastRoundResult: function(data) { 
		if(data.payload.gameresult.result=='right') { 
			$("#roundmeta").append("<div class='metamessage metaright'>Right! Nice work.</div>"); 
		}
		else {
			var user = data.payload.gameresult.was.name; 
			if(data.payload.gameresult.was.screen_name != data.payload.gameresult.was.name) { 
				user += '/'+data.payload.gameresult.was.screen_name; 
			} 
			$("#roundmeta").append("<div class='metamessage metawrong'>Wrong. The correct user was: <strong>"+user+"</strong></div>"); 
		}
	}, 
	completeMessage: function(score) { 
		var message = ''; 
		switch(score) { 
			case 20: message = 'PERFECT!'; break; 
			case 19: case 18: message = 'incredible!'; break; 
			case 17: case 16: case 15: message = 'awesome!'; break; 
			case 14: case 13: case 12: message = 'really good!'; break; 
			case 11: case 10: case 9: message = 'OK, but you could do better.'; break; 
			case 8: case 7: case 6: message = 'not very good. You need to keep in touch more.'; break; 
			case 5: case 4: case 3: message = 'bad. You don&rsquo;t know much about your friends!'; break; 
			case 2: case 1: message = 'terrible! Do you care about your friends at all?'; break; 
			case 0: message = 'the worst score possible. Are you a hermit or something?'; break; 
		}
		return message; 
	}, 
	complete: function(data) { 
		$(interface.main).empty(); 
		var mainresults = $("<div class='column span-17'></div>"); 
		$(mainresults).append("<h2>Game complete! <span class='quiet'>Here&rsquo;s how you did</span></h2>"); 
		$(mainresults).append("<div id='roundmeta'><div class='metatitle'>Final Score</div><div class='metavalue'>"+data.payload.gamescore+"</div></div>"); 
		
		var roundcomplete = $("<div id='roundcomplete'></div>"); 
		var finalscoremessage = ""+data.payload.gamescore+" out of 20 = "+quickPercent(data.payload.gamescore, 20)+"%. "; 
		$(roundcomplete).append("<p id='finalmessage'>"+finalscoremessage+"That&rsquo;s "+game.completeMessage(data.payload.gamescore)+"</p>"); 
		$(mainresults).append(roundcomplete); 
		
		$(interface.main).append(mainresults); // done with section 1
		
		var options = $("<div class='column span-9 append-1'>"); 
		$(options).append("<h2>Now you have options</h2>"); 
		var optionslist = $("<ul></ul>"); 
		$(optionslist).append("<li id='roundcompletepublish'><a href='#' onclick='game.publishScore("+'"'+data.payload.gamehash+'"'+");return false'>Publish your score to your Twitter account</a></li>"); 
  	$(optionslist).append("<li id='roundcompleteagain'><a href='#' onclick='game.playAgain("+'"'+data.payload.gamehash+'"'+");return false'>Play again</a></li>"); 
  	$(optionslist).append("<li><a href='http://mappdev.com/'>Visit Mappdev for more games</a></li>"); 
  	$(options).append(optionslist); 
  	$(options).append("<p>As always, thanks for playing! <em class='quiet'>&mdash; Mappdev</em></p>"); 
  	
  	$(interface.main).append(options);  
		
		var leaderboard = $("<div class='column span-7'></div>"); 
		$(leaderboard).append("<h2>Today&rsquo;s top players</h2>"); 
		var leaderboardlist = $("<ol></ol>"); 
		
		if(data.payload.leaderboard) { 
			$.each(data.payload.leaderboard, function() { 
				$(leaderboardlist).append("<li><a href='http://twitter.com/"+this.sn_name+"'>"+this.sn_name+"</a>: "+this.score+"/20, "+quickPercent(this.score, 20)+"%</li>"); 
			}); 
		}
		
		$(leaderboard).append(leaderboardlist); 
		
		$(interface.main).append(leaderboard); 
	}, 
	start: function(hash) { 
		game.loadingOverlay(interface.main); 
		$.post("do", {gamehash:hash, type:"json"}, function(data) {
			game.basicRound(data); 
			game.loadingOverlayComplete(interface.main); 
		}, "json"); 
	}, 
	attempt: function(hash, id) { 
		game.loadingOverlay(interface.main); 
		$.post("do", {gamehash:hash, attempt:id, type:"json"}, function(data) { 
			if(data.payload.gamecomplete) { 
				game.complete(data); 
				game.lastRoundResult(data); 
			}
			else { 
				game.basicRound(data); 
				game.lastRoundResult(data); 
			}
			game.loadingOverlayComplete(interface.main); 
		}, "json"); 
	}, 
	publishScore: function(hash) { 
		game.loadingOverlay(interface.main); 
		$.post("do", {gamehash:hash, action:"publish", type:"json"}, function(data) { 
			$("#roundcompletepublish").text(''+data.payload.message); 
			game.loadingOverlayComplete(interface.main); 
		}, "json"); 
	}, 
	saveScore: function(hash) { 
		game.loadingOverlay(interface.main); 
		$.post("do", {gamehash:hash, action:"save", type:"json"}, function(data) { 
			$("#roundcompletesave").text(''+data.payload.message); 
			game.loadingOverlayComplete(interface.main);
		}, "json"); 
	}, 
	playAgain: function(hash) { 
		game.loadingOverlay(interface.main); 
		$.post("do", {gamehash:hash, action:"again", type:"json"}, function(data) { 
			if(data.response == 'success') { 
				$(interface.main).empty(); 
				$(interface.main).append("<h2>Are you ready?</h2>"); 
				$(interface.main).append("<p>This game is a race to get the most right in the least amount of time. When you are ready, hit <a href='#' onclick='game.start("+'"'+data.payload.gamehash+'"'+");return false'><strong>Start &rarr;</strong></a></p>"); 
			}
			else { 
				$("#roundcompleteagain").text(''+data.payload.message); 
			}
			game.loadingOverlayComplete(interface.main);
		}, "json"); 
	}
}

$(document).ready( function() { 
	// bind login form 
	$(interface.login).submit( function() { 
		var username = $("#loginusername").val(); 
		var password = $("#loginpassword").val(); 
		if(username && password) { 
			game.loadingOverlay(interface.login); 
			$.post("do", {username: username, password: password, type:"json"}, function(data) { 
				game.handleLogin(data); 
				game.loadingOverlayComplete(interface.login); 
				return false; 
			}, "json"); 
		} 
		else { 
			$(interface.loginmessage).html("<div class='error'>Please enter a username and password</div>"); 
		}
		return false; 
	} ); 
	// take down the loading overlay; JS loading is done 
	game.loadingOverlayComplete(); 
} ); 