//illustrative interactive phase diagram


//functions to change the phase diagram image

 var p1="0.3"
 var p2="0.3"
 
 
 function callphp(theForm) {
	 p1 = theForm.elements[0].value;
	 p2 = theForm.elements[1].value;	 
 } 
 
 
 
 function getData() {
	 var myForm = document.forms[0];
	 var obj = document.getElementById("diaghere");
	 p1 = myForm.elements[0].value;
	 p2 = myForm.elements[1].value; 
//	 callphp(myForm);
	 obj.setAttribute("src","scripts/phasediag.php?ADval="+p1+"&BDval="+p2);
 }
	 
	
 
 // general form handling functions
 
 function resetFields(whichform) {
	 for (var i=0; i<whichform.elements.length; i++) {
		 var element = whichform.elements[i];
		 if (element.type == "button") continue;
		 if (!element.defaultValue) continue;
		 element.onfocus = function() {
			 if(this.value == this.defaultValue) {
				 this.value = "";
			 }
		 }
		 element.onblur = function() {
			 if (this.value == "") {
				 this.value = this.defaultValue;
			 }
		 }
	 }
 }
 
 function prepareForms() {
	 for (var i=0; i<document.forms.length; i++) {
		 var thisForm = document.forms[i];
		 resetFields(thisForm);
	 }
 }
 
//create container and form for the interactive phase diagram.

function intpdiagram(){
	var formdiv = document.createElement("div");
	formdiv.setAttribute("id","formbox");
	formdiv.style.textAlign = "center";
	var intdiv = document.getElementById("interactive");
	intdiv.appendChild(formdiv);
	var formelement = document.createElement("form");
	formelement.setAttribute("id", "formelement");
	formdiv.appendChild(formelement);
	var headingadv = document.createElement("p");
	headingadv.setAttribute("id", "paraadv");
	headingadv = document.createTextNode("D value of B in A:  ");
	formelement.appendChild(headingadv);
	var inputadv = document.createElement("input");
	inputadv.setAttribute("id", "inputadv");
	inputadv.setAttribute("type", "text");
	inputadv.setAttribute("value", "0.3");
	inputadv.setAttribute("size", "5");
	formelement.appendChild(inputadv);
	formelement.appendChild(document.createElement("br"));
	var headingbdv = document.createElement("p");
	headingbdv.setAttribute("id", "parabdv");
	headingbdv = document.createTextNode("D value of A in B:  ");
	formelement.appendChild(headingbdv);
	var inputbdv = document.createElement("input");
	inputbdv.setAttribute("id", "inputbdv");
	inputbdv.setAttribute("type", "text");
	inputbdv.setAttribute("value", "0.3");
	inputbdv.setAttribute("size", "5");
	formelement.appendChild(inputbdv);
	formelement.appendChild(document.createElement("br"));
	var calcbutton = document.createElement("input");
	calcbutton.setAttribute("id", "calcbutton");
	calcbutton.setAttribute("type", "button");
	calcbutton.setAttribute("value", "calculate phase diagram");
	calcbutton.style.backgroundColor = "#E0EDC5";
	formelement.appendChild(calcbutton);
	calcbutton.onclick = function() {
		return getData();
	}
	var diagramdiv = document.createElement("div");
	diagramdiv.setAttribute("id", "diagramdiv");
	diagramdiv.style.textAlign = "center";
	intdiv.appendChild(diagramdiv);
	var diaghere = document.createElement("img");
	diaghere.setAttribute("id", "diaghere");
	diaghere.setAttribute("src", "scripts/phasediag.php?ADval=0.3&BDval=0.3");
	diaghere.setAttribute("height", "280");
	diaghere.setAttribute("width", "300");
	diaghere.setAttribute("alt", "phase diagram in preparation");
	diagramdiv.appendChild(diaghere);
	diagramdiv.appendChild(document.createElement("br"));
	diagramdiv.appendChild(document.createElement("br"));	
}

function revealPara(){
	var swpara = document.getElementById("switch");
	swpara.className = "";
}

//run the necessary functions

loadEvent(intpdiagram);
loadEvent(prepareForms);
loadEvent(revealPara);