function urlencode(e){var f={},histogram_r={},code=0,tmp_arr=[];var g=e.toString();var h=function(a,b,c){var d=[];d=c.split(a);return d.join(b)};f['!']='%21';f['%20']='+';g=encodeURIComponent(g);for(search in f){replace=f[search];g=h(search,replace,g)}return g.replace(/(\%([a-z0-9]{2}))/g,function(a,b,c){return"%"+c.toUpperCase()});return g}
$(document).ready(function(e){
	var allowNestedLists = true;
	var RowCount=0;
	var subRowCount=0;
	var strList;
	var chosenStyle;
	var nestedList=false;
	var params = "?orientation=h";
	
	function addRow()
	{
	var strRow="";
	var defText1="e.g. 'About Us'";
	var defText2="e.g. '/about/index.html'";
	var defText3="e.g. 'Information about the company ...";
	RowCount++;
	strRow += "<div class='row' id='row" + RowCount + "'>";
		strRow += "<div class='cell'>";
			strRow += "<label for='l1_link" + RowCount + "'>Link text:</label> <input type='text' class='mandatory' id='l1_link" + RowCount + "' name='l1_link" + RowCount + "' value=\""+defText1+"\">";
		strRow += "</div>";
		strRow += "<div class='cell'>";
			strRow += "<label for='l1_url" + RowCount + "'>Address/URL:</label> <input type='text' class='mandatory' id='l1_url" + RowCount + "' name='l1_url" + RowCount + "' value=\""+defText2+"\">";
		strRow += "</div>";
		strRow += "<div class='cell'>";
			strRow += "<label for='l1_title" + RowCount + "'>Title attr (optional):</label> <input type='text' id='l1_title" + RowCount + "' name='l1_title" + RowCount + "' value=\""+defText3+"\">";
		strRow += "</div>";
		if (allowNestedLists)
			{
			strRow += "<div class='hasChildren'>";
				strRow += "<input type='checkbox' class='hasChildren' rel='row" + RowCount + "' id='l1_hasChildren" + RowCount + "' name='l1_hasChildren" + RowCount + "'>";
				strRow += "<label for='l1_hasChildren" + RowCount + "'>This link contains sub-level navigation (optional):</label>";
			strRow += "</div>";
			}
	strRow += "</div>";
	$("#rows").append(strRow);
	$("#rows input").focus(function(e){
		if ((this.value==defText1)||(this.value==defText2)||(this.value==defText3))
		this.value="";
		});

	$("input.hasChildren").unbind("click");
	$("input.hasChildren").click(function(e){
		var thisRow = this.getAttribute("rel");
		if (this.checked) {
			addSubRow(thisRow);
			}
		else {
			$("#" + thisRow + " .subRow").remove();
			$("#" + thisRow + " .addSubItem").remove();
			$("#" + thisRow).removeClass("hasChildren");
			}
		});
	}

	function addSubRow(parentRow)
	{
	var strSubRow="";
	subRowCount++;
	strSubRow += "<div class='subRow' id='subRow" + subRowCount + "'>";
		strSubRow += "<div class='cell'>";
			strSubRow += "<label for='l2_link" + subRowCount + "'>Link text:</label> <input type='text' class='mandatory' id='l2_link" + subRowCount + "' name='l2_link" + subRowCount + "'>";
		strSubRow += "</div>";
		strSubRow += "<div class='cell'>";
			strSubRow += "<label for='l2_url" + subRowCount + "'>URL:</label> <input type='text' class='mandatory' id='l2_url" + subRowCount + "' name='l2_url" + subRowCount + "'>";
		strSubRow += "</div>";
		strSubRow += "<div class='cell'>";
			strSubRow += "<label for='l2_title" + subRowCount + "'>Title attr (optional):</label> <input type='text' id='l2_title" + subRowCount + "' name='l2_title" + subRowCount + "'>";
		strSubRow += "</div>";
	strSubRow += "</div>";
	$("#" + parentRow).append(strSubRow);
	$("#" + parentRow).addClass("hasChildren");

	$("#" + parentRow).append("<a href='#' class='addSubItem' title='Add sub navigation item'>[+]</a>")
	$("#rows a.addSubItem").click(function(e){
		addSubRow(parentRow);
		return false;
	});
	}

	addRow();
	$("#listo-loading").hide();

	$("p#addAnother a").click(function(e){
		addRow();
		$("#rows .row:last input:first").focus();
		return false;
	
	});

	var allFieldsEntered=true;
	function previewMarkup()
	{
		buildList();
		$("#ListMarkupPreview").show();
	}
	function validateFields()
	{
		$("#ListMarkupPreview").hide();
		allFieldsEntered=true;
		$("input.mandatory").each(function(){
			if (this.value=="")
			{
				allFieldsEntered = false;
				$(this).addClass("mandatory-highlight");
			}
			else
			{
				$(this).removeClass("mandatory-highlight");
			}
		});
		if (!allFieldsEntered)
		{
			alert("You need to enter a value for all link text and URL fields");
			document.forms['lom'].txtListMarkup.value = "";
		}
		else
		{
			buildList();
			 if (nestedList) {
				params += "&nested=y";
				}
			else {
				params += "&nested=n";
				}
			$("#listoStylePreview").load("display-images.php" + params, function(){addClickToSelect()});
			$("#step1").hide();
			$("#step2").show();
		}
	}
	function addClickToSelect()
	{
		$("#listoStylePreview a").click(function(){
			$("#listoStylePreview a").removeClass("selected");
			$("#listoStylePreview a span").remove();
			$(this).addClass("selected").append("<span class='s'>This style selected</span>").fadeTo('fast',0.6).fadeTo('fast',1);
			$(".showMarkup").fadeTo('medium',0.4).fadeTo('medium',1).fadeTo('medium',0.4).fadeTo('medium',1);
			chosenStyle = $(this).attr("id");
			return false;
		});
	}
	function managePanels()
	{
		$(".showPreview").click(function(e){
			previewMarkup();
			});
		$(".showAvailableStyles").click(function(e){
			//see if it's a nested list
			nestedList = false;
			$("input.hasChildren").each(function(){
				if (this.checked) {
					nestedList = true;
				};
			});
			validateFields();
			});
		$(".showMarkup").click(function(e){
			if (chosenStyle==undefined)
				{
					alert("You haven't picked a style yet. You know what to do ...");
					return false;
				}
			else
				{
					$("#step2").hide();
					$("#step3").show();
					$("#ajaxGetCSS").load("select-style-css.php?id="+ chosenStyle);
					$("#viewResult").attr("href","final-result.php?id="+ chosenStyle + "&markup=" + urlencode(strList));
					$("#viewResult").attr("target","blank");
					gen();
				}
			});
			$(".editListItems").click(function(e){
				$("#step2").hide();
				$("#step3").hide();
				$("#step1").show();
				$("#result").hide();
			});
			$(".pickDifferentStyle").click(function(e){
				$("#step3").hide();
				$("#step2").show();
				$("#result").hide();
			});
			$(".startAgain").click(function(e){
				if (confirm("Are you *sure* you want to reset everything?"))
				{
					$("#step1").show();
					$("#step2").hide();
					$("#step3").hide();
					$("#listoStylePreview a").removeClass("selected");
					strList="";
					$("#rows div").remove();
					addRow();
				}
			});
	}
	function buildList()
	{
		var i=0;
		strList = "<ul id=\"main-nav\">\n";
		$("#rows .row").each(function(){
			i++;
			//get values from inputs
			var s1 = $("#row" + i + " input:eq(0)").attr("value"); // link text
			var s2 = $("#row" + i + " input:eq(1)").attr("value"); // url
			var s3 = $("#row" + i + " input:eq(2)").attr("value"); // title
			if (s3) {
				s3 = " title=\"" + s3 + "\"";
			}
			else {
				s3="";
			}
			strList+=" <li><a href=\"" + s2 + "\"" + s3 + ">" + s1 + "</a>";
			if ($("#row" + i).hasClass("hasChildren"))
				{
					strList+="\n  <ul>";
					//loop through all the sub rows
					$("#row" + i + " .subRow").each(function(){
						var subRowId = this.id;
						s1 = $("#" + subRowId + " input:eq(0)").attr("value"); // link text
						s2 = $("#" + subRowId + " input:eq(1)").attr("value"); // url
						s3 = $("#" + subRowId + " input:eq(2)").attr("value"); // title
						if (s3) {
							s3 = " title=\"" + s3 + "\"";
						}
						else {
							s3="";
						}
						strList+="\n   <li><a href=\"" + s2 + "\"" + s3 + ">" + s1 + "</a></li>";
					});
					strList+="\n  </ul>\n ";
				}
			strList+="</li>\n";
		});
		strList+="</ul>";
		document.forms['lom'].txtListMarkup.value = strList;
	}
	function gen()
	{
		document.forms['lom'].genHTML.value = strList;
	}
	function setupPanels()
	{
		$("#step2").hide();
		$("#step3").hide();
	}
	$("#orientation input").click(function(){
		var o = $(this).attr("value");
		if (nestedList) {
			params = "?orientation=" + o + "&nested=y";
		}
		else {
			params = "?orientation=" + o + "&nested=n";
		}
		$("#listoStylePreview").load("display-images.php" + params, function(){addClickToSelect()});
		$("#listoStylePreview").removeClass("h").removeClass("v");
		$("#listoStylePreview").addClass(o);
	});
	$("a#ListMarkupPreview_Hide").click(function(){
		$("#ListMarkupPreview").hide();
		return false;
		});
	setupPanels();
	managePanels();
	//ARIA live regions
	$("#listoStylePreview").attr("aria-live","assertive");
	$("#result_css,#result_html").attr("aria-live","assertive");
	
	


});