// JavaScript Document

function addCheat(){
		$("#container").addClass("cheat");				   
	};
function closeOverlay(div){
		$(div).remove();
		$("#overlay").remove();
	};
	
function messagePicker(mile){
	var num = parseFloat(mile);
	switch(num){
		case 1: msg = "Straight up to start. Sweet?";
			break;
		case 2: msg = "Gotta fight to get to the top deck of this bridge. I've heard the bottom deck is like a … toilet.";
			break;
		case 3: msg = "Should be feelin optimistic at this point. Loose.";
			break;
		case 4: msg = "Where my people at?";
			break;
		case 5: msg = "Five miles. Four more of those and I'll be <em>near</em> the end.";
			break;
		case 6: msg = "Six miles. 6-pack. 6 cold, delicious beers.<br />BEER GET OUT OF MY HEAD.";
			break;
		case 7: msg = "Ol' Number 7, the Mick. Thirteen miles 'til the Bronx &amp; a warm Bronx cheer.";
			break;
		case 8: msg = "Going up again? So soon?";
			break;
		case 9: msg = "And up again. WHY?!";
			break;
		case 10: msg = "A nice round number. Not even close to done.";
			break;
		case 11: msg = "Eleven. If only it were easy like two ones.";
			break;
		case 12: msg = "A dozen miles down, a dozen donuts tomorrow.";
			break;
		case 13: msg = "Almost halfway, 90% to go.";
			break;
		case 14: msg = 'Hope to be thinking "I just can\'t believe how fast these miles are ticking by."';
			break;
		case 15: msg = "Dreaming of an ice-cold martini bathtub.";
			break;
		case 16: msg = "Into Manhattan, but not for long.";
			break;
		case 17: msg = "Why are we running away from the finish line?";
			break;
		case 18: msg = "Soon I'll be too tired to be angry.";
			break;
		case 19: msg = "My longest training run was this far. Oops?";
			break;
		case 20: msg = "The Bronx. Home of Yankee Stadium. A $9 PBR will sound reasonable at this point.";
			break;
		case 21: msg = "Hello Mr. Wall! But I thought I was supposed to hit you!";
			break;
		case 22: msg = "Haha, Mr. Wall. It's funny how <em>hard</em> you're hitting my legs.";
			break;
		case 23: msg = "Hey, 23 is Don Mattingly's old number. He should be in the Hall of &hellip; OH MY GOD MY LEGS!";
			break;
		case 24: msg = "Zombies! Stay away from me!<br />Must &hellip; keep &hellip; running.";
			break;
		case 25: msg = 'Running at this point is really more like "crying".';
			break;
		case 26: msg = "Finish &hellip; unngh &hellip; finish &hellip; unngh &hellip; finish &hellip; unngh &hellip; ";
			break;
		case 26.2: msg = "Must find the guy in the medical tent who has the secret Advil&#8212;the one as big as my head.";
			break;
		default: msg = 'Oooofa.';
		}
	return msg;
	};

function createOverlay(obj){
		var mile = location.hash.replace("#",'');
		//var mile = (mile == "26.2") ? location.hash.replace("#26.2",'27') : location.hash.replace("#",'');
		var offset = parseFloat(mile.replace("26.2",'27')) * 100 - 100; 
		var intro = messagePicker(mile);
		$("<div>").attr("id","overlay").attr("style","z-index: 2;").appendTo("body").fadeIn("fast").bind("click",function(){closeOverlay("#modal")});
		$("<div>").attr("id","modal").attr("class",obj.attr("class")).attr("style","z-index: 100;").appendTo("body").fadeIn("fast") ;
		$("<h2>").html("Mile " + mile + "&#8212;an excellent choice!").attr("style","background-position: 0 -" + offset + "px;").appendTo("#modal");
		$("<div>").attr("id","msg").appendTo("#modal") ;
		$("<p>").addClass("intro").html("<span>Mile " + mile + "</span>" + intro).appendTo("#msg");
		$("<p>").html("Sponsoring <em>mile " + mile + "</em> means you're good for a <em>$" + mile + " donation</em> to a deserving Boston-area family in need, through SmallCanBeBig.").appendTo("#msg");
		$("<p>").html("<em>Step 1 of 2</em>: enter your email address (and your Twitter username, if you've got one) so that after the marathon, I can share with you the difference we made together for this family. (Your donation comes next.)").appendTo("#msg");
		$("<a>").html("Close").attr("id","close").appendTo("#msg");

//	action="/thanks.php" name="pledger" id="pledger" method="post"
		$("<form>").attr("id","pledger").attr("name","pledger").attr("action","/thanks.php").attr("method","post").appendTo("#msg");
		$("#pledger").submit(function(){
			$.ajax({
				type: "POST",
				url: "thanks.php",
				data: $("form").serialize(),
				async: false,
				success: function(msg){
					$("#msg").html(msg);
					}
				});
			return false;																										
			});
		$('<div class="field pledge"><label for="pledge">Pledge</label><input type="text" disabled="disabled" name="pledge" id="pledge" value="$' + mile + '" /></div>').appendTo("#pledger");
		$('<div class="field email"><label for="email">Email address (required)</label><input type="text" name="email" id="email" value="" /></div>').appendTo("#pledger");
		$('<div class="field twitter-username"><label for="twitter_username">Twitter username</label><input type="text" name="twitter_username" id="twitter_username" value="" /></div>').appendTo("#pledger");
		$('<input type="hidden" name="amount" id="amount" value="' + mile + '" />').appendTo("#pledger");
		$('<div class="field submit"><input type="submit" name="submit" id="submit" value="Submit" /></div>').appendTo("#pledger");
		
		$('<p>').html("I won't share your information or use it for anything other than to say thanks.").attr("style","clear: left;").appendTo("#msg");
		//alert(str);
		//$("#modal").load("/pledge-form.html form") ;
		//$("#modal #amount").attr("value", location.hash);
	};
	
function createAmount(trigger){
		var text = trigger.html();
		var myClass = trigger.parent().attr("class");
		var numStr = myClass.replace(/mile-/, '');
		var amountOffset = (numStr == "26-2") ? "2600" : parseInt(numStr) * 100 - 100 ;
		var elevationOffset = (numStr == "26-2") ? "930" : 35 * numStr + 20 - 35;
		var amountBgPos = 'background-position: 0px -' + amountOffset + 'px;';
		var elevationBg = 'background: url("/i/elevation-hover.png") -' + elevationOffset + 'px 0px no-repeat;';
	
		$("<div>").attr("id","amount").attr("style", amountBgPos).html(text).prependTo("#elevation").fadeIn("fast");
		$("ul#graphic li." + myClass + " a").attr("style",elevationBg);
	};
function offsetRemainingMiles(){
		//var offset = 0;
		$("#remaining-miles ul li a").each(function(i){
			var numStr = $(this).parent().attr("class").replace(/mile-/,'');
			var offset = parseInt(numStr);
			var pos = (i == 26) ? 'background-position: 0 -' + offset * 20 + 'px;' : 'background-position: -15px -' + offset * 20 + 'px;';
			$(this).attr("style",pos);
			//offset ++;
		});
	};
function toolTip(a){
	$("<span>").html(a.attr("title")).attr("class","tooltip").appendTo(a);
	};


	$(document).ready(function(){
						   
	//createMilesArray();
	//offsetRemainingMiles();
	
	//if (location.href.match("#bg")) {
	//	addCheat();				   
	//}

	//$("#cheat-link").click(function(){
	//	$("#container").toggleClass("cheat");
	//	return false;
	//});

	//	when the elevation link is hovered, add an absoulutely positioned block-level element to the container
	//	put the contents of the hovered link into that
	//	destroy the layer on mouseoff
	
	//	trying hover
/*	$("#elevation, #remaining-miles ul").hover(
		function(){
			$("#elevation h2").attr("style","background-position: 0 -40px");
			},
		function(){
			$("#elevation h2").removeAttr("style");
			}
	);
*/	
	$("ul#graphic li a").hover(
		function(){
			createAmount($(this));
			//toolTip($(this));
			},
		function(){
			$("#amount").remove();
			$("ul#graphic li a").removeAttr("style");
			//$(".tooltip").remove();
			}
	);
	
	$("ul#graphic li a").click(function(e){
		e.preventDefault;
		location.hash = $(this).attr("href").replace("/pledge.php?mile=",'');
		createOverlay($(this).parent());
		//_trackEvent("ul#graphic li a", "click", optional_label, optional_value);
		//bnGAEvent($(this).attr("class"), "click");

		return false;
	});

	$("#remaining-miles li a").hover(
		function(){
			createAmount($(this));
			var newPos = ($(this).parent().attr("class") == "mile-27") ? this.style.backgroundPosition.replace(/0/,"-60") : this.style.backgroundPosition.replace(/-15/,"-75") ;
			$(this).attr("style","background-position:" + newPos);
			},
		function(){
			$("#amount").remove();
			$("ul#graphic li a").removeAttr("style");
			var newPos = ($(this).parent().attr("class") == "mile-27") ? this.style.backgroundPosition.replace(/-60/,"0") : this.style.backgroundPosition.replace(/-75/,"-15");
			$(this).attr("style","background-position:" + newPos);
			}
	);

	$("#remaining-miles li a, #miles-ranked li a").click(function(){
		//	createOverlay('mile-26');
		location.hash = $(this).attr("href").replace("/pledge.php?mile=",'');
		createOverlay($(this).parent());
		return false;
	});

	$("#submit").live("click", function(){
		//alert($("#email").val());
		if($("#email").val().search("@") == -1){
			alert("Please use a valid email address.");
			return false;
			}
	});
	$("#close").live("click", function(){
		closeOverlay("#modal");
		});
/*
	$("#pledge-btn").live("click",function(){
		//	change the value of the amount field
		$("#modal #amount").val(location.hash);
		//	return false;
		if($("#email").val.search("@") == -1){alert("hi")};
	});
*/
});