var rowCount=0;
var colCount=0;
var strTableStart;
var strTableEnd="</table>";
var tablePreviewCode="";
var ph;
var topRowHasHeaders;
var leftColHasHeaders;
var strTableSummary;
var strTableId;
var cellVal;
var useScope = false;
$(document).ready(function(){
	
	$("#tableCode textarea").focus(function(){
		$(this).select();
	}).hide();
	$("#step2").hide();
	
	function generateTablePreview()
	{
	$("#tableScaffolding").show();
	ph=$("#placeholderText").val();
	colCount = parseInt($("#txtColCount").val());
	rowCount = parseInt($("#txtRowCount").val());
	strTableSummary = $("#tableSummary").val();
	strTableId = $("#tableId").val();
	if (strTableId.length==0) {strTableId = "table"}
	strTableStart="<table summary=\"" + strTableSummary + "\" id=\"" + strTableId + "\">\n";
	topRowHasHeaders = false;
	leftColHasHeaders = false;
	if ((rowCount==0)&&(colCount>0))
		{
		rowCount=1;
		}
	if ($("#chktopRowIsHeader:checked").val()=="on") {
		topRowHasHeaders = true;
	}
	if ($("#chkLeftColIsHeader:checked").val()=="on") {
		leftColHasHeaders = true;
	}
	tablePreviewCode="";
	for (r=1;r<rowCount+1;r++)
		{
		tablePreviewCode = tablePreviewCode + " <tr>\n";
		for (c=1;c<colCount+1;c++)
			{
			if ((r==1)&&(topRowHasHeaders))
				{
				if ((r==1)&&(c==1)&&(leftColHasHeaders))
					{
					tablePreviewCode = tablePreviewCode + "  <th></th>\n";
					}
				else
					{
					tablePreviewCode = tablePreviewCode + "  <th>hdr</th>\n";
					}
				}
			else
				{
				if ((c==1)&&(leftColHasHeaders))
					{
					tablePreviewCode = tablePreviewCode + "  <th>hdr</th>\n";
					}
				else
					{
					tablePreviewCode = tablePreviewCode + "  <td>" + ph + "</td>\n";
					}
				}
			}
		tablePreviewCode = tablePreviewCode + " </tr>\n";
		}
	tablePreviewCode = strTableStart + tablePreviewCode + strTableEnd;
	if ((colCount>0)&&(rowCount>0))
	{
		$("#tableScaffoldingInner").html(tablePreviewCode);
	}
	$("#tableCode textarea").val("<!-- Note: <thead> and <tbody> will be added in next step-->\n" + tablePreviewCode);
	}
	
	function editTableCellContents(){
		// $("#step1").slideUp('fast');
		$("#step1").hide();
		$("#goToStep1").show();
		$("#tableScaffolding table").before("<p>Enter values you want in each cell below . The markup in the text area  above will update as you type.</p><p><input type=\"checkbox\" id=\"chkEditHeadersOnly\" value=\"hdrsOnly\"> <label for=\"chkEditHeadersOnly\">Edit only table headers</label> (leave <code>td</code>s as they are)</p><!-- <p id=\"hdrEditModeP\"><input type=\"checkbox\" id=\"chkSelectOtherTableHeaders\" value=\"chkSelectOtherTableHeaders\"> <label for=\"chkSelectOtherTableHeaders\">Identify other table headers</label></p>-->");
		$("#tableScaffolding th, #tableScaffolding td").each(function(){
			$(this)
			.html("<input value=\"" + ph + "\">");
		})
		generateFinalTableCode();
		if (topRowHasHeaders && leftColHasHeaders)
			{
			$("#tableScaffolding input[type=text]:first").hide();
			}

		$("#rebuildTableCode, input[name=radScopeOrIdHeaders]").click(function(){
			generateFinalTableCode();
		});
		$("#tableScaffolding input").keydown(function(){
			generateFinalTableCode();
		});
		$("#tableScaffolding input[type=text]").blur(function(){
			generateFinalTableCode();
		});
		$("#tableScaffolding input[type=text]").mouseout(function(){
			generateFinalTableCode();
		});
		$("#tableScaffolding input").focus(function(){
			$(this).select();
		})
		$("#chkEditHeadersOnly").click(function(){
		 var hdrsOnly = ($("#chkEditHeadersOnly:checked").val()=="hdrsOnly");
			if (hdrsOnly) {
				$("#tableScaffolding td input").hide();
				$("#tableScaffolding td input").val('');
				}
			else {
				$("#tableScaffolding td input").show();
				$("#tableScaffolding td input").val(ph);
			}
		})
	}
	
	function generateFinalTableCode()
	{
		if (topRowHasHeaders && leftColHasHeaders) {
			useScope=false;
			}
			else {
			useScope=true;
			}
		
		var strFinalTableCode = "";
		var thisRow = 0;
		var thisCol = 0;
		$("#tableScaffolding tr").each(function(){
			thisRow++;
			thisCol=0;
			if ((thisRow==1)&&(topRowHasHeaders))
				{
				strFinalTableCode += " <thead>\n"
				}
			if (((thisRow==2)&&(topRowHasHeaders))||((thisRow==1)&&(!topRowHasHeaders)))
				{
				strFinalTableCode += " <tbody>\n"
				}
			strFinalTableCode += "  <tr>\n"
			$(this).find("th").each(function(){
				thisCol++;
				cellVal = $(this).find("input").val();
				strFinalTableCode += "   <th";
				if (useScope)
				{
				if (!(topRowHasHeaders && leftColHasHeaders && (thisCol==1) && (thisRow==1)))
					{
					if (topRowHasHeaders && (thisRow==1)){
						strFinalTableCode += " scope=\"col\"";
						}
					if (leftColHasHeaders && (thisCol==1)){
						strFinalTableCode += " scope=\"row\"";
						}
					}
				}
				else
				{
				if (!(topRowHasHeaders && leftColHasHeaders && (thisCol==1) && (thisRow==1)))
					{
					if (topRowHasHeaders && (thisRow==1)){
//						strFinalTableCode += " id=\"tblColHdr" + thisCol +"\"";
						strFinalTableCode += " id=\"" + strTableId + "ColHdr" + thisCol +"\"";
						}
					if (leftColHasHeaders && (thisCol==1)){
//						strFinalTableCode += " id=\"tblRowHdr" + thisRow +"\"";
						strFinalTableCode += " id=\"" + strTableId + "RowHdr" + thisRow +"\"";
						}
					}
				}

				strFinalTableCode += ">";
				if (topRowHasHeaders && leftColHasHeaders && (thisCol==1) && (thisRow==1))
					{
					cellVal="";
					}
				strFinalTableCode += cellVal;
				strFinalTableCode += "</th>\n";
			})
			$(this).find("td").each(function(){
				thisCol++;
				cellVal = $(this).find("input").val();
				strFinalTableCode += "   <td";
				if ((!useScope)&&(topRowHasHeaders || leftColHasHeaders))
					{
					if (topRowHasHeaders && leftColHasHeaders){
//						strFinalTableCode += " headers=\"tblColHdr" + thisCol +" tblRowHdr" + thisRow + "\"";
						strFinalTableCode += " headers=\"" + strTableId + "ColHdr" + thisCol +" " + strTableId + "RowHdr" + thisRow + "\"";
						}
					else {
						if (topRowHasHeaders){
							strFinalTableCode += " headers=\"" + strTableId + "ColHdr" + thisCol + "\"";
							}
						if (leftColHasHeaders){
							strFinalTableCode += " headers=\"" + strTableId + "RowHdr" + thisRow + "\"";
							}
						}
					}
				strFinalTableCode += ">";
				strFinalTableCode += cellVal;
				strFinalTableCode += "</td>\n";
			})
			strFinalTableCode += "  </tr>\n"
			if ((thisRow==1)&&(topRowHasHeaders))
				{
				strFinalTableCode += " </thead>\n"
				}
			if (thisRow==rowCount)
				{
				strFinalTableCode += " </tbody>\n"
				}
		})
		strFinalTableCode = strTableStart + strFinalTableCode + strTableEnd;
		$("#tableCode textarea").show();
		$("#tableCode textarea").val(strFinalTableCode);
	}	
	$("#addColumn").click(function(){
		$("#txtColCount").val(parseInt($("#txtColCount").val())+1);
		generateTablePreview();
	})
	$("#addRow").click(function(){
		$("#txtRowCount").val(parseInt($("#txtRowCount").val())+1);
		generateTablePreview();
	})
	$("#removeColumn").click(function(){
		var c = parseInt($("#txtColCount").val())-1;
		if (c==-1) {c=0};
		$("#txtColCount").val(c);
		generateTablePreview();
	})
	$("#removeRow").click(function(){
		var r = parseInt($("#txtRowCount").val())-1;
		if (r==-1) {r=0};
		$("#txtRowCount").val(r);
		generateTablePreview();
	})
	$("#rebuildTable, #chktopRowIsHeader, #chkLeftColIsHeader").click(function(){
		generateTablePreview();
	});
	$("#tableSummary, #txtColCount, #txtRowCount").keydown(function(){
		generateTablePreview();
	});
	$("#step1 input[type=text]").blur(function(){
		generateTablePreview();
	});
	$("#step1 input[type=text]").mouseout(function(){
		generateTablePreview();
	});
	$("#goToStep2").click(function(){
		$("#step2").show();
		$("#tableScaffolding")
		.css("top","195px")
		.css("height","270px")
		generateTablePreview();
		editTableCellContents();
	})
	$("#goToStep1").click(function(){
		$("#step2").hide();
		$("#tableScaffolding")
		.css("top","280px")
		.css("height","180px")
		// $("#step1").slideDown('fast');
		$("#step1").show();
		$("#goToStep1, #tableCode textarea").hide();
		generateTablePreview();
	})
	
});