davidgenn/Leaders challenge

## Leaders challenge
<!DOCTYPE html>
<html>
<head>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<style>


.shadow {
box-shadow:10px 10px 20px #aaaaaa;
}
#leader {font-size: 163px; line-height: 163px;
padding: 20px; border-radius:25px;margin:0;text-align:center;}
#finished {font-size: 100px;line-height:100px;padding: 20px; margin:0;text-align:center;}
.container {padding-top:30px;}
.hidden{display:none;}
</style>
</head>
<body>
<div class="container">
<div class="row" id="spinner">
<div class="offset4 span4">
<img src="http://apps.nea.gov/GrantSearch/images/ajaxSpinner.gif" />
</div>
</div>
<div class="hidden" id="wrapper">
<div id="nameList" class="row" data-bind="visible: stage() == 'SELECT'">
<div class="offset3 span6">
<h3>Enter the list of names</h3>
<!-- ko foreach: leadersNames -->
        <span data-bind="text: $data"></span><br/>
    <!-- /ko -->
  <div class="input-append">
<input type="text" name="name" id="name"/>

<button id="addButton" class="btn" data-bind="click:addName">Add</button>

</div>
<br/>
<button id="done" data-bind="visible: stage() == 'SELECT'" class="btn btn-large btn-primary">Done</button>
</div>
</div>


<div class="row" data-bind="visible: stage() == 'READY'">
<div class="offset5 span1">
<button id="go"  class="btn btn-large btn-primary">Go!</button>
</div>
</div>
<div class="row" >
<div class="offset1 span10">
<h2 id="leader"></h2>
<h3 id="finished"></h2>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<script type="text/javascript">
var model =  {

leadersNames : ko.observableArray(),
stage : ko.observable("SELECT"),

addName : function(name) {
  this.leadersNames.push($("#name").val());
  $("#name").val("").focus();
},

setStage : function(stageToSet) {
 this.stage(stageToSet);
}
}

ko.applyBindings(model);

var namesSize;
var namesToChoseFrom;
var times;

var displayName = function(interval, i, currentName) {
setTimeout(function(){
  var nameToDisplay;
  i++;
  console.log("Number of times: " + i);
 if (i == 0) {
  displayName(interval * 1.10, i, nameToDisplay);
 } else {
 nameToDisplay = currentName;
 while (nameToDisplay == currentName) {
   nameToDisplay = namesToChoseFrom [Math.floor(Math.random() * namesSize)];
 }
 }

 if (i <= times) {
 $("#leader").html(nameToDisplay);
   displayName(interval * 1.10, i, nameToDisplay);
 } else {
 $("#leader").hide();
 $("#leader").html(nameToDisplay);
 $("#leader").show("bounce", 500);
 $("#leader").animate({
          backgroundColor: "#FF0000",
          color: "#000000"
        }, 1000 ).animate({
          color: "#FFFFFF"
        }, 1000 )
		setTimeout(function() {
		$("#leader").addClass("shadow");
		}, 2100);
		setTimeout(function() {
		$("#finished").html("has been chosen...!");
		}, 3700);

 }
 }, interval);
}

$("#done").click(function() {
model.setStage("READY");
});

$("#go").click(function() {
model.setStage("RUN");
namesSize = model.leadersNames().length;
namesToChoseFrom = model.leadersNames();
times = Math.floor(Math.random() * 11) + (namesToChoseFrom .length * 2);
  displayName(70, -1, "");
});

$("#spinner").remove();
$("#wrapper").removeClass("hidden");
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
	<style>



	.shadow {
	box-shadow:10px 10px 20px #aaaaaa;
	}
	#leader {font-size: 163px; line-height: 163px;
	padding: 20px; border-radius:25px;margin:0;text-align:center;}
	#finished {font-size: 100px;line-height:100px;padding: 20px; margin:0;text-align:center;}
	.container {padding-top:30px;}
	.hidden{display:none;}
	</style>
	</head>
	<body>
	<div class="container">
	<div class="row" id="spinner">
	<div class="offset4 span4">
	<img src="http://apps.nea.gov/GrantSearch/images/ajaxSpinner.gif" />
	</div>
	</div>
	<div class="hidden" id="wrapper">
	<div id="nameList" class="row" data-bind="visible: stage() == 'SELECT'">
	<div class="offset3 span6">
	<h3>Enter the list of names</h3>
	<!-- ko foreach: leadersNames -->
	<span data-bind="text: $data"></span><br/>
	<!-- /ko -->
	<div class="input-append">
	<input type="text" name="name" id="name"/>

	<button id="addButton" class="btn" data-bind="click:addName">Add</button>

	</div>
	<br/>
	<button id="done" data-bind="visible: stage() == 'SELECT'" class="btn btn-large btn-primary">Done</button>
	</div>
	</div>





	<div class="row" data-bind="visible: stage() == 'READY'">
	<div class="offset5 span1">
	<button id="go" class="btn btn-large btn-primary">Go!</button>
	</div>
	</div>
	<div class="row" >
	<div class="offset1 span10">
	<h2 id="leader"></h2>
	<h3 id="finished"></h2>
	</div>
	</div>
	</div>
	</div>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
	<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
	<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
	<script type="text/javascript">
	var model = {

	leadersNames : ko.observableArray(),
	stage : ko.observable("SELECT"),

	addName : function(name) {
	this.leadersNames.push($("#name").val());
	$("#name").val("").focus();
	},

	setStage : function(stageToSet) {
	this.stage(stageToSet);
	}
	}

	ko.applyBindings(model);

	var namesSize;
	var namesToChoseFrom;
	var times;

	var displayName = function(interval, i, currentName) {
	setTimeout(function(){
	var nameToDisplay;
	i++;
	console.log("Number of times: " + i);
	if (i == 0) {
	displayName(interval * 1.10, i, nameToDisplay);
	} else {
	nameToDisplay = currentName;
	while (nameToDisplay == currentName) {
	nameToDisplay = namesToChoseFrom [Math.floor(Math.random() * namesSize)];
	}
	}

	if (i <= times) {
	$("#leader").html(nameToDisplay);
	displayName(interval * 1.10, i, nameToDisplay);
	} else {
	$("#leader").hide();
	$("#leader").html(nameToDisplay);
	$("#leader").show("bounce", 500);
	$("#leader").animate({
	backgroundColor: "#FF0000",
	color: "#000000"
	}, 1000 ).animate({
	color: "#FFFFFF"
	}, 1000 )
	setTimeout(function() {
	$("#leader").addClass("shadow");
	}, 2100);
	setTimeout(function() {
	$("#finished").html("has been chosen...!");
	}, 3700);

	}
	}, interval);
	}

	$("#done").click(function() {
	model.setStage("READY");
	});

	$("#go").click(function() {
	model.setStage("RUN");
	namesSize = model.leadersNames().length;
	namesToChoseFrom = model.leadersNames();
	times = Math.floor(Math.random() * 11) + (namesToChoseFrom .length * 2);
	displayName(70, -1, "");
	});

	$("#spinner").remove();
	$("#wrapper").removeClass("hidden");
	</script>
	</body>
	</html>