//// dialog component creation ////

function createDlgComp_button(value, clickact) {
	var theNewButton = document.createElement("input");
	theNewButton.setAttribute("type", "button");
	theNewButton.setAttribute("value", value);
	if (clickact != null) {
//		theNewButton.setAttribute("onclick", onclick);
		theNewButton.onclick = clickact;
	}
	return theNewButton;
}

function createDlgComp_contain(dlgid) {
	var theNewDialog = document.createElement("div");
	theNewDialog.setAttribute("class", "dialog");
	theNewDialog.setAttribute("id", dlgid);
	return theNewDialog;
}

function createDlgComp_title(t) {
	var theNewTitle = document.createElement("div");
	theNewTitle.setAttribute("class", "ftitle");
	theNewTitle.appendChild(document.createTextNode(t));
	return theNewTitle;
}

/// assume contents is a DocumentFragment holding the main contents of dialog,
/// to be inserted at the appropriate place
function createDlgComp_mat(contents, title) {
	var theMat = document.createElement("table");
	theMat.className = "contents";
	var topLeftCell = createDlgComp_cornerCell("top left", "/watch/dlgtl.gif");
	var topRightCell = createDlgComp_cornerCell("top right", "/watch/dlgtr.gif");
	var botLeftCell = createDlgComp_cornerCell("bottom left", "/watch/dlgbl.gif");
	var botRightCell = createDlgComp_cornerCell("bottom right", "/watch/dlgbr.gif");
	
	var topRow = theMat.insertRow(-1);
	topRow.appendChild(topLeftCell);
	var titleCell = document.createElement("td");
	if (title) {
		titleCell.className = "title"; // don't clutter the CSS unless we have to
		titleCell.appendChild(document.createTextNode(title));
	}
	topRow.appendChild(titleCell);
	topRow.appendChild(topRightCell);
	
	var contentRow = theMat.insertRow(-1);
	contentRow.appendChild(document.createElement("td"));  // left 'empty' cell
	var mainCell = document.createElement("td");
	mainCell.className = "mainContent";
	if (contents) {
		// as contents is DocumentFragment instance, this should actually append each of the _children_ of the fragment here, as siblings within this TD
		mainCell.appendChild(contents);
	}
	contentRow.appendChild(mainCell);
	contentRow.appendChild(document.createElement("td"));  // right 'empty' cell
	
	var botRow = theMat.insertRow(-1);
	botRow.appendChild(botLeftCell);
	botRow.appendChild(document.createElement("td")); // bottom middle 'empty' cell
	botRow.appendChild(botRightCell);
	
	return theMat;
}

function createDlgComp_cornerCell(cl, img) {
	var theCell = document.createElement("td");
	theCell.className = cl;
	var theCorner = document.createElement("img");
	theCorner.src = img;
	theCell.appendChild(theCorner);
	return theCell;
}

/// dialog manipulation

// THIS ONLY WORKS WHEN content DOESN'T DEPEND ON REFERENCE TO DIALOG (e.g., for button action closure)
// content: a DocumentFragment instance containing the structure of the dialog
// id: HTML id attribute for the constructed dialog
// title: dialog title string, if applicable (may be left null)
function createDialog(content, id, title) {
	var dialog = createDlgComp_contain(id);
	dialog.appendChild(createDlgComp_mat(content, title));

	return dialog;
}

function removeDialog(nd) {
	if (nd && nd.nodeType == Node.ELEMENT_NODE) {
		var theParent = nd.parentNode;
		theParent.removeChild(nd);
	} else {
		alert("Attempted to remove dialog but found none");
	}	
}

// over should be the overlay layer onto which the dialog is to be placed
function placeDialog(dlg, over) {
	/// eventually, this would handle everything sexy: showing dashboard layer, placing content, etc.
	document.body.appendChild(dlg); // just put dialog into flow
	over.style.display = "block";
	dlg.style.display = "block";
}

function removeOverlay(nd) {
	if (nd && nd.nodeType == Node.ELEMENT_NODE) {
		nd.style.display = "none";
	}
}
	
	// assume dlg is constructed containing res of createDlgComp_mat() inside createDlgComp_contain()
function replaceContentWithProgress(dlg) { // expects a dialog _node_
	var theMat = dlg.getElementsByTagName("table")[0];
	var theMainCell = theMat.rows[1].cells[1]; // middle cell in second row
	var theCancelButton = null;
	var inputs = dlg.getElementsByTagName("input"); // we need to get buttons
	for (var i=0; theCancelButton == null && i<inputs.length; i++) {
		if (inputs[i].className == "cancelButton") {
			theCancelButton = inputs[i];
		}
	}
	if (theMainCell.hasChildNodes()) {
		// remove existing contents
		for (var kid = theMainCell.firstChild; kid != null; kid = kid.nextSibling) {
			theMainCell.removeChild(kid);
		}
	}
	var theStatText = document.createElement("div");
	theStatText.className = "statusText";
	theStatText.appendChild(document.createTextNode("processing..."));
	var theSpinner = document.createElement("img");
	theSpinner.className = "spin";
	theSpinner.setAttribute("alt", "busy spinner");
	theSpinner.setAttribute("src", "bigSpinner.gif");
	theMainCell.appendChild(theStatText);
	theMainCell.appendChild(theSpinner);
	if (theCancelButton == null) {
		alert("Could not find cancel button... may not be able to stop processing");
	} else {
		var buttonBox = document.createElement("div");
		buttonBox.className = "buttonBox";
		buttonBox.appendChild(theCancelButton);
		theMainCell.appendChild(buttonBox);
	}
}