$(function() {
	// This only needs to be done once.
	$("#kitty-clues .clue").each(function(index) { createkc($(this), index) });
	init();
})



var libs = new Array()
function createkc(kcNode, index) {
	var name = kcNode.attr('name');
	var fields = kcNode.find('span');
	libs.push({id: index, name: name, node: kcNode, fields: fields});
}

function otraVez() {
	$("#ui").fadeOut(
		function() {
			init();
			$("#ui").fadeIn();
		}
	);
}

function init() {
	var listItems = "";
	for (var i=0; i<libs.length;++i)
		listItems += "<li><a href='#' id='" + libs[i].id + "'>" + libs[i].name + "</a></li>";
	$("#ui")
		.html('<div class="tagline"><p>Want to make Rumblewick go totally bats on a broomstick?</p><p>Pick a story below and reveal your very own Rumblewick diary entry!!</p></div>')
		.append( "<ul class='kc-list'>" + listItems + "</ul>" );
	$('#ui a').click(
		function() {
			var lib = libs[$(this).attr('id')];
			$("#ui").fadeOut(
				function(){

					var submit = $( "<a id='"+ lib.id +"' class='big-button' href='#'>See Kitty Clue!</a>" );
					$("#ui")
						.html( "<h2>" + lib.name + "</h2>" )
						.append('<p class="error hidden">Don&rsquo;t forget to fill out all of the blanks!!</p>')
						.append( "<div id='kc-form'><form><ul></ul></form></div>" )
						.append( "<a class='big-button' onclick='otraVez();return false;' href='#'>Try Another One!</a>" );

					var fieldContainer = $("#ui").find('ul');

					// Individual kc fields
					var listItems = "";
					for ( var i=0; i<lib.fields.length; ++i) {
						var field = $( lib.fields[i] );
						var inputID = "lib_field_" + i;
						var evenClass = i%2 ? " class='even'" : "";

						//fieldContainer.append(
						listItems += "<li" + evenClass + "><label for='"+ inputID +"'>"+field.attr('name')+"</label><input id='"+inputID+"' type='text' /></li>";
					}
					
					fieldContainer
						.append( listItems )
						.after( submit );
					$("#ui").fadeIn();

					submit.click(function(){submitKC();return false;});
				}
			);

			function submitKC() {
				var errors = new Array()
				for ( var i=0; i<lib.fields.length; ++i ) {
					var field = $( lib.fields[i] );
					var input = $("#ui").find('#lib_field_' + i);
					input.removeClass("error");
					if( input.val() == "" ) errors.push(i);
					field.html( input.val() )
				}

				if ( errors.length==0 ) {
					$("#kc-form").fadeOut(
						function() {
							$("#kc-form")
								.html( $(lib.node) ).fadeIn();
						}
					);
				} else {
					$("#ui p.error").fadeIn().animate({"opacity":"1.0"},2000,
						function(){
							$(this).fadeOut()
						}
					);
					for (var i=0;i<errors.length;++i)
						$('#lib_field_' + errors[i]).addClass("error");
				}
			}
			return false;
		}
	)
}