window.onload = init;

//var pcode = "GLW16";
	var material = "";


function init(){
	//	var pcode = "GLW16";
	//get all string names to populate dropdown and register eventhandler for the dropdown
	var dropdown = document.getElementById("initdrop");
	dropdown.onchange=getStringData;
	getStringNames();

	var materialdrop = document.getElementById("materialdrop");
	document.getElementById("materialdrop").options.selectedIndex="all";
	var materialSelected="all";

	material=materialSelected; // global and set to the initial default value of all.
	materialdrop.onchange=getStringData;
	//register eventhandler for change in spec shoices
	var changes = document.getElementsByName("specs");
	for(i=0; i<changes.length; i++){
		field = changes[i];
		field.onclick = getStringData;
	}
	var instructbut = document.createElement("button");
	var instructtext = document.createTextNode("Show/Hide Instructions");
	instructbut.appendChild(instructtext);
	instructbut.className="instructbutton";
	instructbut.style.marginBottom="5px";
	var instructions = document.getElementById("key");
	instructions.style.visibility="visible";
	addEventHandler(instructbut, "click", showtoggle);
	var addto = document.getElementById("instructionbutton");
	addto.appendChild(instructbut);

}


//call php to return all names of strings for dropdown
function getStringNames(){
	var request = createRequest();
		if (request == null){
			alert("unable to create request");
			return;
		}
	url = "stringnames.php";
	request.open("POST", url, true);
	request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	request.onreadystatechange = addnames;
	//Firefor needed an argument whereas Safari did not.
	request.send(null);
}



//callback fucntion for getStringNames to populate dropdown menu in display
function addnames(){
	if(request.readyState == 4){
		if(request.status == 200){
			var answer = request.responseText;
			var stringspecs = eval('(' + answer + ')');
			var select = document.createElement("select");
				select.name="string";
				select.className="stringDropDown";
				select.id="stringDrop";
				select.onchange=getStringData;
			for(i=0; i<stringspecs.length; i++){
				if(i==0){
					pcode=stringspecs[i].pcode;  //pcode declared as global for first time displayed. global replaced after every choice.
				}
				var pcode1 = stringspecs[i].pcode;
				var brand1 = stringspecs[i].brand;
				var model1 = stringspecs[i].model;
				select.options[i]=new Option(brand1+" "+model1, pcode1, false, false); 
				//set default selected option
				if (pcode1=="ALUSTR"){
					select.options[i]=new Option(brand1+" "+model1, pcode1, false, true);
					pcode = pcode1;
				}else{
					select.options[i]=new Option(brand1+" "+model1, pcode1, false, false); 
				}
			}
			var dropdiv = document.getElementById("dropdown");
			var toreplace = document.getElementById("initdrop");
			dropdiv.replaceChild(select, toreplace);
			//after dropdown is completed get initial stiffness data for pcode
			getStringData();
		}
	}
}




//////next four functions are all involved in getting, showing and hiding spec explanations
function showHide(e){
	var me = getActivatedObject(e);
	var toshow = me.name;
	getexplanation(toshow);
}



function getexplanation(name){
	var name = name;
	var request = createRequest();
		if (request == null){
			alert("unable to create request");
			return;
		}
	var urladd = "spec=" + name;
	url = "specexplain.php";
	request.open("POST", url, true);
	request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	request.onreadystatechange = showexplanation;
	request.send(urladd);
}


function showexplanation(){
	if(request.readyState == 4){
		if(request.status == 200){
			var explanation = request.responseText;
			var explainarray = explanation.split("|");
			var spec = explainarray[0];
			var adddiv = document.getElementById(explainarray[0]+"text");
			var addtext = document.createTextNode(explainarray[1]);
			var hide = document.createElement("button");
			hide.id=spec+"hide";
			hide.className="buttontext";
			hide.name=spec;
			var buttontext = document.createTextNode("Hide " + spec + " explanation");
			hide.appendChild(buttontext);
			hide.onclick=hideexplanation;
			adddiv.replaceChild(hide, adddiv.firstChild);
			adddiv.appendChild(addtext);
		}
	}
}



function hideexplanation(){
	var spec=this.name;
	var parentdiv=document.getElementById(spec+"text");
	var show = document.createElement("button");
	show.id=spec+"show";
	show.className="buttontext";
	show.name=spec;
	var buttontext = document.createTextNode("Show " + spec + " explanation");
	show.appendChild(buttontext);
	show.onclick=showHide;
	parentdiv.replaceChild(show, parentdiv.firstChild);
	parentdiv.removeChild(parentdiv.lastChild);
}


function showtoggle(){
	var toggle = document.getElementById("key");
	var status = toggle.style.visibility;
	if(status=="visible"){
		toggle.style.visibility="hidden";
		toggle.style.display="none";
	}else if (status=="hidden"){
		toggle.style.visibility="visible";
		toggle.style.display="block";
	}
}


function getscalestrings(id){
	var cellclicked=id;
	var scalerequest = createRequest();
		if (scalerequest == null){
			alert("unable to create request");
			return;
		}
	var urladd = "cellclicked=" + cellclicked;
	url = "scalenames.php";
	scalerequest.open("POST", url, true);
	scalerequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	scalerequest.onreadystatechange = (function(){
		if(request.readyState == 4){
			if(request.status == 200){
				 jsontext = request.responseText;
				 scalestrings = eval('(' + jsontext + ')');
			}
		}
	});
	scalerequest.send(urladd);
	return scalestrings;
}



//////Zoom in and out functions, i.e, make table go from 9 data cells to 1 and back again.
function expand(e){
	//call utility function
	var me = getActivatedObject(e);
	var cellclicked = me.id;	//in form of stiffness|0|1 where 0 and 1 are array index numbers, not swing and tension numbers.
	var initialvalue = document.getElementById(cellclicked+"_stringtext").firstChild.nodeValue;


	//table cells are created in form of spec|row|col.
	//find clicked on cell so we can remove all other data cells (rows first then cols.)
	var expandcell = cellclicked.split("|");
	var tableid = expandcell[0];
	var rowid = expandcell[1];
	var colid = expandcell[2];
	var thetable = document.getElementById(tableid);
	var thetd = document.getElementById(cellclicked);

	//find parent and remove rows
	var tdrow = thetd.parentNode; //row parent
	var tdtablebody = tdrow.parentNode; //table body parent
	var tdtable = tdtablebody.parentNode;
	var tdheader = tdtable.firstChild;
	var tdheaderrow = tdheader.firstChild;
	var tdth = tdheaderrow.firstChild.nextSibling.nextSibling;
	if(rowid == 0){
		tdtablebody.removeChild(tdrow.nextSibling);
		tdtablebody.removeChild(tdrow.nextSibling);
	}else if (rowid == 1){
		tdtablebody.removeChild(tdrow.previousSibling);
		tdtablebody.removeChild(tdrow.nextSibling);
	}else if (rowid == 2){
		tdtablebody.removeChild(tdrow.previousSibling);
		tdtablebody.removeChild(tdrow.previousSibling);
	}

	//remove col cells and headers
	if(colid == 0){
		tdheaderrow.removeChild(tdheaderrow.firstChild.nextSibling.nextSibling);
		tdrow.removeChild(thetd.nextSibling);
		tdheaderrow.removeChild(tdheaderrow.firstChild.nextSibling.nextSibling);
		tdrow.removeChild(thetd.nextSibling);
		
	}else if (colid == 1){
		tdheaderrow.removeChild(tdheaderrow.firstChild.nextSibling.nextSibling.nextSibling);
		tdrow.removeChild(thetd.nextSibling);
		tdheaderrow.removeChild(tdheaderrow.firstChild.nextSibling.nextSibling.previousSibling);
		tdrow.removeChild(thetd.previousSibling);
	}else if (colid == 2){
		tdheaderrow.removeChild(tdheaderrow.firstChild.nextSibling.nextSibling.nextSibling.previousSibling);
		tdrow.removeChild(thetd.previousSibling);
		tdheaderrow.removeChild(tdheaderrow.firstChild.nextSibling.nextSibling.previousSibling);
		tdrow.removeChild(thetd.previousSibling);
	}

	//expand width of bars in graph to match new size of cell.
	var bars = thetd.getElementsByTagName("img");
	for(k=0; k<bars.length; k++){
		var oldwidth = bars[k].width;
		var newwidth = oldwidth*4;
		bars[k].width=newwidth;
		//get the maximg width for max width of scale
		if(k==0){
			  minscalewidth=newwidth;
		}else if(k==1){
			stringscalewidth=newwidth;
		}else if(k==2){
			maxscalewidth=newwidth;
		}
	}


	var sliderwidth=maxscalewidth-minscalewidth + 10;		//+11: 10 px for button width and extra 1 for margin for rounding discrepancies.
	var buttonadjust = stringscalewidth-minscalewidth;

	var sliderrow = document.createElement("tr");
	var sliderlabel = document.createElement("th");
	sliderlabel.className="thleft";
	var slidercell = document.createElement("td");
		slidercell.className="slidercell";
	var table2 = document.createElement("table");
		table2.className="slidertable";
	var table2tbody = document.createElement("tbody");
		var table2row = document.createElement("tr");
			var table2cell1 = document.createElement("td");
			table2cell1.className="scalecell";
			var sliderholder= document.createElement("div");
			sliderholder.className="sliderholder";
				var sliderscale = document.createElement("div");
					sliderscale.className="sliderscale";
					sliderscale.id=cellclicked+"_scale";
					sliderscale.style.width=sliderwidth+"px";
					sliderscale.style.left=minscalewidth+"px";


					var sliderbutton = document.createElement("div");
						sliderbutton.id=cellclicked+"_but";
						sliderbutton.className="sliderbutton";
						sliderbutton.style.left=buttonadjust+"px";
				sliderscale.appendChild(sliderbutton);
				sliderholder.appendChild(sliderscale);
			table2cell1.appendChild(sliderholder);
		table2row.appendChild(table2cell1);
	
			var table2cell2 = document.createElement("td");
				var table2cell2text = document.createTextNode(initialvalue);
				table2cell2.id = cellclicked+"_label";
			table2cell2.appendChild(table2cell2text);
			table2row.appendChild(table2cell2);
		table2tbody.appendChild(table2row);
		table2.appendChild(table2tbody);

	var sliderlabeltext=document.createTextNode("Comparison Slider");
	sliderlabel.appendChild(sliderlabeltext);
	sliderlabel.innerHTML=sliderlabel.firstChild.nodeValue+"<br><span class=\"textlight\">(% of selected string)</span>";

	sliderrow.appendChild(sliderlabel);
	slidercell.appendChild(table2);
	sliderrow.appendChild(slidercell);
	tdtablebody.appendChild(sliderrow);
	
	addEventHandler(sliderbutton, "mousedown", dragHandler);
	addEventHandler(thetd, "click", zoomout);
	addEventHandler(sliderbutton, "mouseover", buttonover);
	addEventHandler(sliderbutton, "mouseout", buttonout);
	var scalestringsrow = document.createElement("tr");
	var scalestringsth = document.createElement("th");
	scalestringsth.className="thtop";
	scalestringsth.style.textAlign="left";	
	var scalestringscell = document.createElement("td");
		scalestringscell.className="scalestringscell";
	var scalestringsdiv = document.createElement("div");
		scalestringsdiv.id = cellclicked +"_scalestrings";
		scalestringsdiv.className="scalestrings";
	var scalestringstext = document.createTextNode("Drag slider to see strings at scale locations.");
	var scalestringsthtext = document.createTextNode("Matching Strings");
	scalestringsth.appendChild(scalestringsthtext);
	scalestringsth.innerHTML=scalestringsth.firstChild.nodeValue+"<br><span class=\"textlight\">(linked to string<br>description)</span>";
	scalestringsdiv.appendChild(scalestringstext);
	scalestringsdiv.innerHTML="<span class=\"textboldred\">Drag slider above</span> to see list of matching strings.";
	scalestringscell.appendChild(scalestringsdiv);
	scalestringsrow.appendChild(scalestringsth);
	scalestringsrow.appendChild(scalestringscell);
	tdtablebody.appendChild(scalestringsrow);
	scalestringsrow.style.visibility="visible";

	//zoomed in cells have a zoomout event handler.
	//zoomed out tables have a zoomin event handler by clicking on border of cell.
}



function buttonover(e){
	var me = getActivatedObject(e);
	var over = me.id;	//in form of stiffness|0|1 where 0 and 1 are array index numbers, not swing and tension numbers.
	var changebutton = document.getElementById(over);
	changebutton.style.background="#0066b3";
}

function buttonout(e){
	var me = getActivatedObject(e);
	var out = me.id;	//in form of stiffness|0|1 where 0 and 1 are array index numbers, not swing and tension numbers.
	var changebutton = document.getElementById(out);
	changebutton.style.background="#ff9900";
}


function cleanup(e) {
	//remove both the document wide event handlers that are only to apply while in draghandler's control, not after leave draghandler.
	removeEventHandler(document, "mousemove", moveHandler);
//	removeEventHandler(document, "mouseover", dragHandler);
	removeEventHandler(document, "mouseup", cleanup);

	//	document.removeEventListener("mousemove", moveHandler, false);
	//	document.removeEventListener("mouseup", cleanup, false);
	//      document.onmousemove=null;
	//      document.onmouseup=null;
	//      savedTarget.style.cursor=orgCursor;
	//      dragOK=false;
}


//find the slider button that triggered the event
function findObject(e) {
	var targ;
	if (!e) var e = window.event;
	if (e.target) targ = e.target;
	else if (e.srcElement) targ = e.srcElement;
	if (targ.nodeType == 3) // defeat Safari bug
		targ = targ.parentNode;
	return targ;
}


//find X starting position of slider scale
function findPosX(obj){
	var curleft = 0;
	if(obj.offsetParent)
		while(1) 
		{
	 	 curleft += obj.offsetLeft;
	 	 if(!obj.offsetParent)
			break;
	  	obj = obj.offsetParent;
		}
	else if(obj.x)
		curleft += obj.x;
	return curleft;
}


//find Y starting position of slider scale
function findPosY(obj){
	var curtop = 0;
	if(obj.offsetParent)
		while(1)
		{
		  curtop += obj.offsetTop;
	 	 if(!obj.offsetParent)
			break;
	 	 obj = obj.offsetParent;
		}
	else if(obj.y)
		curtop += obj.y;
	return curtop;
}


//for the mousedown portion of the event
function dragHandler(e){
//	var object=findObject(e);	//button that triggered event
	var object=getActivatedObject(e);
	buttonMoved = object.id;	//id of triggering button in form of stiffness|0|0_but
	var changebuttonout = document.getElementById(buttonMoved);
	changebuttonout.style.background="#0066b3";	
	buttonparsed =buttonMoved.split("_");		//get rid of _but
	buttonstripped = buttonparsed[0];

	scalestrings=getscalestrings(buttonstripped);
	//somehow cell id format and barimage id format are different: cell = stiffness|0|0 index and barimg is minstiffness1_1 index plus 1.
	buttonstrippedarray = buttonstripped.split("|");	//e.g. and array of stiffness, 0, 0
	buttonstrippedarray[1] =parseInt(buttonstrippedarray[1])+1;
	buttonstrippedarray[2] =parseInt(buttonstrippedarray[2])+1;
	buttonstrippedid = "max"+buttonstrippedarray[0]+buttonstrippedarray[1]+"_"+buttonstrippedarray[2];	//this is barimg notation
	var thebutton=document.getElementById(buttonMoved);
	scaleMovedId= buttonMoved.split('_')[0]+"_scale";
	scaleLabelId= buttonMoved.split('_')[0]+"_label";
	scalePicked = document.getElementById(scaleMovedId);
	scaleWidth = parseInt(scalePicked.style.width);
	startLeft = findPosX(scalePicked);	//x start pos of scale to the document
	var startTop = findPosY(scalePicked);	//y start pos of scale to the document
	addEventHandler(document, "mousemove", moveHandler);
	addEventHandler(document, "mouseup", cleanup);
	e.preventDefault();
	return false;		//cancels browser's default drag behavior of selecting text
}



//for the mouse move portion of the event
function moveHandler(e){
	scaleWidth=scaleWidth;
	var newposition=mousePosition(e);
	var len = newposition.length;
	var newx = newposition[0];
	if(newx > startLeft + scaleWidth - 10){		//10 is the width of the button. If that changes in css it must change here.
		newx = startLeft + scaleWidth - 10;
	}else if (newx < startLeft){
		newx = startLeft;
	}
	var newy = newposition[1];
	var but = document.getElementById(buttonMoved);
	var offsetx= newx-startLeft;
	but.style.left=offsetx+'px';
	var minID =buttonstripped+"_mintext";
	var maxID =buttonstripped+"_maxtext";
	var stringID =buttonstripped+"_stringtext";
	var barimg = document.getElementById(buttonstrippedid);
	var maximgwidth = parseInt(barimg.width); //always 400
	var specid=buttonstrippedarray[0];
	var bars = document.getElementById(specid).getElementsByTagName("img");
	for(k=0; k<bars.length; k++){
		var barwidth = bars[k].width;
		//get the maximg width for max width of scale
		if(k==0){
			  minbarwidth=barwidth;
		}else if(k==1){
			stringbarwidth=barwidth;
		}else if(k==2){
			maxbarwidth=barwidth;
		}
	}

	//barwidth sizes determined with respect to max bar img so cell is filled. string value is determined with respect to min because comes that way from database.
	stringvalue=stringbarwidth;
	minvalue=minbarwidth;
	maxvalue=maxbarwidth;

	stringvalue=stringvalue/minvalue;
	stringvalue=Math.round(stringvalue*100);
	
	maxvalue=maxvalue/minvalue;
	maxvalue=Math.round(maxvalue.toFixed(2)*100);
	minvalue=minvalue/minvalue;
	minvalue=Math.round(minvalue.toFixed(2)*100);

	var pixtopercent = minbarwidth/minvalue;

	var butlocation = parseInt(offsetx);	//number of pixels from start of slider scale
	var butfinalvalue=  100 + butlocation/pixtopercent;	//percent  corresponding to the pixel offset. 100 is the starting percent of the min string so final percent is percent of min string.
	offsetxpercent=butfinalvalue.toFixed(0);
	var butwidth = butlocation + minbarwidth;
	percentofstring=(butwidth/stringbarwidth*100).toFixed(2);
	var keepers = new Array();
	var pcodefound="";
	for(i=0; i<scalestrings.length; i++){
	var scalestringwidth=Math.round(100*scalestrings[i].percent/scalestrings[i].maxpercent)*4;	//4 is the zoom in multiple.

		if(butwidth==scalestringwidth){
	 		keepers.push(new Array(scalestrings[i].brand,scalestrings[i].model,scalestrings[i].accode,scalestrings[i].pcode));
		}
	}
	keepers=keepers.sort();
	for(i=0; i<keepers.length; i++){
		keepers[i]="<br>"+"<a href='http://www.tennis-warehouse.com/descpage"+keepers[i][2]+"-"+keepers[i][3]+".html'" + "target='_blank'>"+keepers[i][0]+" "+keepers[i][1]+"</a>";
	}
	if(keepers[0]){keepers[0]=keepers[0].replace(/^<br>/, "");}

	if(percentofstring > 100){
		document.getElementById(scaleLabelId).innerHTML= "+ "+((percentofstring-100).toFixed(2)) +"%";
	}else if(percentofstring == 100){
		document.getElementById(scaleLabelId).innerHTML=percentofstring-100 +"%";
	}else if(percentofstring < 100){
		document.getElementById(scaleLabelId).innerHTML=(percentofstring-100).toFixed(2) +"%";
	}

	if(keepers.length>=1){
		if(percentofstring < 100){
			var percentselect = (100-percentofstring).toFixed(2) + "% less "+  buttonstrippedarray[0];
		}else if(percentofstring==100){
			var percentselect = " equal "+  buttonstrippedarray[0];
		}else if(percentofstring > 100){
			var percentselect = (percentofstring-100).toFixed(2) + "% more " + buttonstrippedarray[0];
		}

		document.getElementById(buttonstripped +"_scalestrings").innerHTML="Strings with "+percentselect+" than the selected string (blue)<br>"+keepers;
		document.getElementById(buttonstripped +"_scalestrings").style.color="black";
	}else{
			var nostrings = 'No strings';
			document.getElementById(buttonstripped +"_scalestrings").innerHTML=nostrings;
			document.getElementById(buttonstripped +"_scalestrings").style.color="red";
	}
	e.preventDefault();
//	return false;	//cancels browser's default drag behavior of selecting text
}



function mousePosition(e) {
	var posx = 0;
	var posy = 0;
	if (!e) {
		var e = window.event;
	}
	if (e.pageX || e.pageY) 	{
		posx = e.pageX;
		posy = e.pageY;
	}
	else if (e.clientX || e.clientY) 	{
		posx = e.clientX + document.body.scrollLeft
			+ document.documentElement.scrollLeft;
		posy = e.clientY + document.body.scrollTop
			+ document.documentElement.scrollTop;
	}
	return [posx,posy];
	// posx and posy contain the mouse position relative to the document
	
}


function zoomout(e){
	var me = getActivatedObject(e);
	var tableid = me.id;
	var tableid = tableid.split("|")[0];
	getStringData(tableid);
}



//////request and display all the string's testing data for asked for specs. tableid passed when coming from zoomout
function getStringData(tableid){
	var stringIndex=document.getElementById("stringDrop").options.selectedIndex;
	var stringSelected=document.getElementById("stringDrop").options[stringIndex].value;
	var pcode=stringSelected;
	var materialIndex=document.getElementById("materialdrop").options.selectedIndex;
	var materialSelected=document.getElementById("materialdrop").options[materialIndex].value;
	var material=materialSelected; //local material just to send to the server. Not the same as the globaal that will be reassigned after out of this function.
	var tableid = tableid;
	var request = createRequest();
		if (request == null){
			alert("unable to create request");
			return;
		}
	var urladd = "pcode=" + pcode+"&"+"tableid=" + tableid+"&"+"material="+material;

	url = "stringdata.php";
	request.open("POST", url, true);
	request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	request.onreadystatechange = showdata;
	request.send(urladd);

}



function showdata(){
	if(request.readyState == 4){
		if(request.status == 200){
			//get pcode of selected string on drop down 
			//pcode of string selected from dropdown. The old string is the global value pcode. pcodeselected will become the new global after it is used to compare to old pocode(i.e., global).
			var jsondata = request.responseText;
//alert(jsondata);
			 stringdetails = eval('(' + jsondata + ')');  // global
			//add string title to page
			var stringdiv = document.getElementById("string");
			var h2exist = stringdiv.getElementsByTagName("h2");
			var detaillength = stringdetails[1].length;
				var newpcode = stringdetails[0][0][0][0].pcode;
				pcodeSelected=newpcode;

			var materialIndex=document.getElementById("materialdrop").options.selectedIndex;
			var stringMaterialSelected=document.getElementById("materialdrop").options[materialIndex].value;
			var materialSelected=stringMaterialSelected;			//material selected on dropdown menu
			var h2value = h2exist[0];
				var brand = stringdetails[0][0][0][0].brand;
				var model = stringdetails[0][0][0][0].model;
				//tableid is only used on zoom outs. If there is a tableid coming from php in model array, then it was initiated by a zoom out lick on border of zoomed cell.
				var zoominid = stringdetails[0][0][0][0].tableid;
				if(!h2value || h2value == "undefined"){
					var title = document.createElement("h2");
					title.id="title";
					var titletext = document.createTextNode(brand + " " + model);
					title.appendChild(titletext);
					stringdiv.appendChild(title);
				}else{
					var titletext = document.createTextNode(brand + " " + model);
					//last child below just in case a nbsp is before it.
					h2value.replaceChild(titletext, h2value.lastChild);
					
				}

			//get array of currently displayed spec tables
			var existing = new Array();
			var zoomarray = new Array();
			var colheads = new Array("", "High Tension (60\'s)", "Medium Tension (50\'s)", "Low Tension (40\'s)");
			var rowheads = new Array("Fast Swing", "Medium Swing", "Slow Swing");

			//determine which specs user is asking for. Compare to ones already displayed.
			var specchoices = document.getElementsByName("specs");

			//pcode is the global pcode which holds the last dropdown string value. If pcodeSelected and pcode match, it is the same string and tables to don't have to be redrawn.
			// material is variable that holds the previous material chosen from dropdown.
			if(pcodeSelected == pcode && materialSelected==material){		//material here is the global variable defined in init function.
				if(materialSelected != material){
					var select = document.createElement("select");
						select.name="string";
						select.className="stringDropDown";
						select.id="stringDrop";
						select.onchange=getStringData;
					for(i=0; i<stringdetails[1].length; i++){
						var pcode1 = stringdetails[1][i].pcode;
						var brand1 = stringdetails[1][i].brand;
						var model1 = stringdetails[1][i].model;
						if(i==0){
							select.options[i]=new Option(brand1+" "+model1, pcode1, false, true); 
						}
						else if(pcode==stringdetails[1][i].pcode){
							select.options[i]=new Option(brand1+" "+model1, pcode1, false, true); 
						}
						else{
							select.options[i]=new Option(brand1+" "+model1, pcode1, false, false); 
						}
					}
					var dropdiv = document.getElementById("dropdown");
					var toreplace = document.getElementById("stringDrop");
					dropdiv.replaceChild(select, toreplace);
				}
				var divisions =document.getElementsByTagName("div");
				for(i=0; i<divisions.length;i++){
					if(divisions[i].className=='explanation'){
						var tables = divisions[i].getElementsByTagName("table");
						if(tables.length==3){
							var zoomcellid = tables[0].getElementsByTagName("td")[0].id;
							zoomarray.push(zoomcellid);
						}
						existing.push(tables[0].id);
					}
					zoomcellid = "";
				}
			for(h=0; h<specchoices.length; h++){
				if(specchoices[h].checked){
					var spec = specchoices[h].value;
					//Don't make new tables if asked for and already displayer.
					//Determine if the spec table asked for is already displayed on the page. If so don't do it again.
					for(g=0; g<existing.length; g++){
						//spec != zoominid because if it was the table  would have to be replaced by a zoomed in table. (zoominid only exists coming from click on a zoomed in cell border.
						if(spec==existing[g] && (spec != zoominid && material==materialSelected)){
						//	&& document.getElementById('string').getElementsByTagName("h2")[0].value == brand+" "+model
							var skip = "yes";
						}
					}
					//skip existing tables and continue to look for new requested tables.
					if(skip=="yes"){
						skip="no";
						continue;
					}
					//make new tables for new asked for specs.
					//if spec table not displayed, create a div for spec information. create a div inside spec div for spec explanation.
					//create and add show/hide explanation button.
					var specdiv = document.createElement("div");
						specdiv.id=spec + "div";
						specdiv.className="explanation";
					var spectext = document.createElement("div");
						spectext.id=spec+"text";
						spectext.className="spectext";
					var show = document.createElement("button");
						show.id=spec+"show";
						show.className="buttontext";
						show.name=spec;
						var buttontext = document.createTextNode("Show " + spec + " explanation");
						show.appendChild(buttontext);
						addEventHandler(show, "click", showHide);
						spectext.appendChild(show);
					//Create spec table, heads, cells, images, etc.
					var table = document.createElement("table");
					table.id=spec;
					table.className="datatable";
					var thead = document.createElement("thead");
					var tr = document.createElement("tr");
					//determine row 1 col 1 which will be the table topic header
					for(j=0; j<colheads.length; j++){
						var th = document.createElement("th");
						if(j=="0"){
							var text = document.createTextNode(spec);
							th.id = "tabletopic";
							th.className="thleft";
						}else{
							var text = document.createTextNode(colheads[j]);
						}
						th.appendChild(text);
						tr.appendChild(th);
					} //end for j
			
					thead.appendChild(tr);
					table.appendChild(thead);
					var tbody = document.createElement("tbody");
					// example of retrieving data: var specc = stringdetails[0][0][0][0].brand;
					//create th row. stringdetails[0] has 3 arrays, each one a row of the table.
					for(i=0; i<stringdetails[0].length; i++){			//rows
						var tr = document.createElement("tr");
						var th = document.createElement("th");
						th.className="thleft";
						var zoominstruct = "<span class=\"textlight\">(click borders<br>to zoom)</span>";
						if(i=="0"){
							var	thtext = document.createTextNode(rowheads[0]);
						}else if(i=="1"){
							var	thtext = document.createTextNode(rowheads[1]);
						}else if(i=="2"){
							var	thtext = document.createTextNode(rowheads[2]);
						}
								th.appendChild(thtext);
						th.innerHTML=th.firstChild.nodeValue+"<br>"+zoominstruct;
								tr.appendChild(th);
						//create td content cells. each j is a column. So there will be j= 0,1,2
						for(j=0; j<stringdetails[0][i].length; j++){	//cells
							var td = document.createElement("td");
							var tdid=table.id+"|"+i+"|"+j;
							td.id=tdid + "|"+materialSelected;
							td.className="expandable";
							var rownumber = i;
							var colnumber = j;
							var mintextid = td.id+"_mintext";
							var maxtextid = td.id+"_maxtext";
							var stringtextid = td.id+"_stringtext";
							var rowplus1 = i+1;
							var colplus1 = j+1;

							addEventHandler(td, "click", expand);

							for(k=0; k<stringdetails[0][i][j].length; k++){		//specs
								if(stringdetails[0][i][j][k].name==spec){
								//create bar graph table
								var celltable = document.createElement("table");
                                    celltable.className="graphtable";
                                var graphtbody = document.createElement("tbody");

									var pmin=(stringdetails[0][i][j][k].min / stringdetails[0][i][j][k].min * 100).toFixed(0);
									var pstring=(stringdetails[0][i][j][k].string / stringdetails[0][i][j][k].min * 100).toFixed(0);
									var pmax=(stringdetails[0][i][j][k].max / stringdetails[0][i][j][k].min * 100).toFixed(0);
									var minrow = document.createElement("tr");
										var minbarcell = document.createElement("td");
											var minimg = document.createElement("img");
												minimg.src="../../images/stringselector/orangebar.gif";
										//		minimg.width=stringdetails[0][i][j][k].min / stringdetails[0][i][j][k].max * 100;
												minimg.width=Math.round((pmin/pmax)*100);
												minimg.height="10";
												var minimgbarid = "min"+table.id+rowplus1+"_"+colplus1;
												minimg.id=minimgbarid;
												addEventHandler(minimg, "mouseover", minmaxnames);
												addEventHandler(minimg, "mouseout", hideminmaxnames);
										var mintextcell = document.createElement("td");
												mintextcell.id=mintextid;
												
									var stringrow = document.createElement("tr");
										var stringbarcell = document.createElement("td");
											var stringimg = document.createElement("img");
												stringimg.src="../../images/stringselector/twbluebar.gif";
									//			stringimg.width=stringdetails[0][i][j][k].string / stringdetails[0][i][j][k].max * 100;
												stringimg.width=Math.round(pstring/pmax*100);
												stringimg.height="10";
												stringimg.id=td.id+"_stringbar";
												addEventHandler(stringimg, "mouseover", stringnames);
												addEventHandler(stringimg, "mouseout", hideminmaxnames);
										var stringtextcell = document.createElement("td");
												stringtextcell.id=stringtextid;
												
									var maxrow = document.createElement("tr");
										var maxbarcell = document.createElement("td");
											var maximg = document.createElement("img");
												maximg.src="../../images/stringselector/orangebar.gif";
												
								//				maximg.width=stringdetails[0][i][j][k].max / stringdetails[0][i][j][k].max * 100;
												maximg.width=Math.round(pmax/pmax*100);
												
												var maximgbarid = "max"+table.id+rowplus1+"_"+colplus1;
												maximg.id=maximgbarid;
												maximg.height="10";
												addEventHandler(maximg, "mouseover", minmaxnames);
												addEventHandler(maximg, "mouseout", hideminmaxnames);
										var maxtextcell = document.createElement("td");
												maxtextcell.id=maxtextid;


											var minpercent =(-1*100*(1-minimg.width/stringimg.width));
												minpercent = minpercent.toFixed(0);
											var mintext =document.createTextNode(minpercent+"%");
					
											stringpercent =stringimg.width/stringimg.width*100;
												stringpercent = stringpercent.toFixed(0);
											var stringtext =document.createTextNode("choice");
					
											var maxpercent =(maximg.width/stringimg.width)*100-100;
												maxpercent = "+" + maxpercent.toFixed(0);
											var maxtext =document.createTextNode(maxpercent+"%");


												
										//put it all together
										mintextcell.appendChild(mintext);
										stringtextcell.appendChild(stringtext);
										maxtextcell.appendChild(maxtext);
										minbarcell.appendChild(minimg);
										stringbarcell.appendChild(stringimg);
										maxbarcell.appendChild(maximg);

										minrow.appendChild(minbarcell);
										minrow.appendChild(mintextcell);
										stringrow.appendChild(stringbarcell);
										stringrow.appendChild(stringtextcell);
										maxrow.appendChild(maxbarcell);
										maxrow.appendChild(maxtextcell);
										graphtbody.appendChild(minrow);
										graphtbody.appendChild(stringrow);
										graphtbody.appendChild(maxrow);
										celltable.appendChild(graphtbody);
								} 	//end if
							} 	//end for k
								td.appendChild(celltable);
								tr.appendChild(td);
						} 	//end for j
						tbody.appendChild(tr);
						table.appendChild(tbody);
						if(spec==zoominid){
							var tablereplace = document.getElementById(zoominid);
							tablereplace.parentNode.replaceChild(table, tablereplace);
						}else{
							specdiv.appendChild(table);
							specdiv.appendChild(spectext);


							var content = document.getElementById("content");
							content.appendChild(specdiv);
						}
					} 	//end for i

				//remove unchecked tables
				}else{	//check to see if spec is displayed on page but is no longer checked--so remove it.
					var spec = specchoices[h].value;
					for(g=0; g<existing.length; g++){
						if(spec==existing[g]){
							var remove = "yes";
						}
					}
					if(remove=="yes"){
						remove="no";
						var toremove = document.getElementById(spec + "div");
						var content = document.getElementById("content");
						content.removeChild(toremove);
						continue;
					}
				}	//if(specchoices[h].checked)
			} 	//end for(h=0; h<specchoices.length; h++)
		//if pcodeSelected doesn't equal pcode, then they are differrent strings and exiting tables must be replaced
		//i.e., make new tables for new string.
		}else if (pcodeSelected != pcode || (pcodeSelected == pcode && materialSelected != material)){		//else if(pcodeSelected == pcode && materialSelected==material)
			if(materialSelected != material){
				var select = document.createElement("select");
					select.name="string";
					select.className="stringDropDown";
					select.id="stringDrop";
					select.onchange=getStringData;
				for(i=0; i<stringdetails[1].length; i++){
					var pcode1 = stringdetails[1][i].pcode;
					var brand1 = stringdetails[1][i].brand;
					var model1 = stringdetails[1][i].model;

					if(i==0){
						select.options[i]=new Option(brand1+" "+model1, pcode1, false, true); 
					}
					else if(pcode==stringdetails[1][i].pcode){
						select.options[i]=new Option(brand1+" "+model1, pcode1, false, true); 
					}
					else{
						select.options[i]=new Option(brand1+" "+model1, pcode1, false, false); 
					}
				}
				var dropdiv = document.getElementById("dropdown");
				var toreplace = document.getElementById("stringDrop");
				dropdiv.replaceChild(select, toreplace);
				material=materialSelected;
			}	// end if(materialSelected != material)
			var divisions =document.getElementsByTagName("div");
			for(i=0; i<divisions.length;i++){
				if(divisions[i].className=='explanation'){
					var tables = divisions[i].getElementsByTagName("table");
					if(tables.length==3){
						var zoomcellid = tables[0].getElementsByTagName("td")[0].id;
						zoomarray.push(zoomcellid);
					}
					existing.push(tables[0].id);
				}
				zoomcellid = "";
			}
 				var zoomed = "";
				for(h=0; h<specchoices.length; h++){
					if(specchoices[h].checked){
						var spec = specchoices[h].value;

						//Determine if the spec table asked for is already displayed on the page. If so don't do it again.
						for(g=0; g<existing.length; g++){
							if(zoomarray){
								for(m=0; m<zoomarray.length; m++){
									var zoomcomparearray = zoomarray[m].split("|");
									var zoomcompare = zoomcomparearray[0];
									if(spec==zoomcompare){
										var zoomrow = zoomcomparearray[1];
										var zoomcol = zoomcomparearray[2];
										var zoommaterial = zoomcomparearray[3];
										var zoomed = 'yes';
										break;
									}
								}
							}
							if(spec==existing[g] && zoomed != 'yes'){
								//if spec table not displayed, create a div for spec information. create a div inside spec div for spec explanation.
								//create and add show/hide explanation button.
								var specdiv = document.createElement("div");
									specdiv.id=spec + "div";
									specdiv.className="explanation";
								var spectext = document.createElement("div");
									spectext.id=spec+"text";
									spectext.className="spectext";
								var show = document.createElement("button");
									show.id=spec+"show";
									show.className="buttontext";
									show.name=spec;
									var buttontext = document.createTextNode("Show " + spec + " explanation");
									show.appendChild(buttontext);
									show.onclick=showHide;
									spectext.appendChild(show);
								//Create spec table, heads, cells, images, etc.
								var table = document.createElement("table");
								table.id=spec;
								table.className="datatable";
								var thead = document.createElement("thead");
								var tr = document.createElement("tr");
								//determine row 1 col 1 which will be the table topic header
									for(j=0; j<colheads.length; j++){
										var th = document.createElement("th");
										if(j=="0"){
											var text = document.createTextNode(spec);
											th.id = "tabletopic";
											th.className="thleft";
										}else{
											var text = document.createTextNode(colheads[j]);
										}
										th.appendChild(text);
										tr.appendChild(th);
									} //end for j
								thead.appendChild(tr);
								table.appendChild(thead);
								var tbody = document.createElement("tbody");
								// example of retrieving data: var specc = stringdetails[0][0][0][0].brand;
								//create th row
								for(i=0; i<stringdetails[0].length; i++){			//rows
									var tr = document.createElement("tr");
									var th = document.createElement("th");
									th.className="thleft";
									var zoominstruct = "<span class=\"textlight\">(click borders<br>to zoom)</span>";
									if(i=="0"){
										var	thtext = document.createTextNode(rowheads[0]);
									}else if(i=="1"){
										var	thtext = document.createTextNode(rowheads[1]);
									}else if(i=="2"){
										var	thtext = document.createTextNode(rowheads[2]);
									}
										th.appendChild(thtext);
										th.innerHTML=th.firstChild.nodeValue+"<br>"+zoominstruct;
										tr.appendChild(th);
									//create td content cells
									for(j=0; j<stringdetails[0][i].length; j++){	//cells
										var td = document.createElement("td");
										var tdid=table.id+"|"+i+"|"+j;
										td.id=tdid + "|"+materialSelected;
										td.className="expandable";
										var rownumber = i+1;
										var colnumber = j+1;
										var minname = "min"+table.id+rownumber+"_"+colnumber;
										var maxname = "max"+table.id+rownumber+"_"+colnumber;
										var stringname = "string"+table.id+rownumber+"_"+colnumber;
										var mintextid = td.id+"_mintext";
										var maxtextid = td.id+"_maxtext";
										var stringtextid = td.id+"_stringtext";
										addEventHandler(td, "click", expand);
										for(k=0; k<stringdetails[0][i][j].length; k++){		//specs
											if(stringdetails[0][i][j][k].name==spec){
												//create bar graph table
												var celltable = document.createElement("table");
													celltable.className="graphtable";
													var thead = document.createElement("thead");
                              						var graphtbody = document.createElement("tbody");

												var pmin=(stringdetails[0][i][j][k].min / stringdetails[0][i][j][k].min * 100);
												var pstring=stringdetails[0][i][j][k].string / stringdetails[0][i][j][k].min * 100;
												var pmax=stringdetails[0][i][j][k].max / stringdetails[0][i][j][k].min * 100;
                              						
												var minrow = document.createElement("tr");
													var minbarcell = document.createElement("td");
														var minimg = document.createElement("img");
															minimg.src="../../images/stringselector/orangebar.gif";
															minimg.width=Math.round((pmin/pmax)*100);
															minimg.height="10";
															minimg.id=minname;
															addEventHandler(minimg, "mouseover", minmaxnames);
															addEventHandler(minimg, "mouseout", hideminmaxnames);
													var mintextcell = document.createElement("td");
															mintextcell.id =mintextid;


												var stringrow = document.createElement("tr");
													var stringbarcell = document.createElement("td");
														var stringimg = document.createElement("img");
															stringimg.src="../../images/stringselector/twbluebar.gif";
															stringimg.width=Math.round(pstring/pmax*100);
															stringimg.height="10";
															//stringimg.id=stringname;
															addEventHandler(stringimg, "mouseover", stringnames);
															addEventHandler(stringimg, "mouseout", hideminmaxnames);
													var stringtextcell = document.createElement("td");
															stringtextcell.id =stringtextid;

												var maxrow = document.createElement("tr");
													var maxbarcell = document.createElement("td");
														var maximg = document.createElement("img");
															maximg.src="../../images/stringselector/orangebar.gif";
															maximg.width=Math.round(pmax/pmax*100);
															maximg.height="10";
															maximg.id=maxname;
															addEventHandler(maximg, "mouseover", minmaxnames);
															addEventHandler(maximg, "mouseout", hideminmaxnames);
													var maxtextcell = document.createElement("td");
															maxtextcell.id =maxtextid;

													var minpercent =(-1*100*(1-minimg.width/stringimg.width));
														minpercent = minpercent.toFixed(0);
													var mintext =document.createTextNode(minpercent+"%");
													stringpercent =stringimg.width/stringimg.width*100;
														stringpercent = stringpercent.toFixed(0);
													var stringtext =document.createTextNode("choice");
							
													var maxpercent =(maximg.width/stringimg.width)*100-100;
														maxpercent = "+" + maxpercent.toFixed(0);
													var maxtext =document.createTextNode(maxpercent+"%");
							

													//put it all together
													mintextcell.appendChild(mintext);
													stringtextcell.appendChild(stringtext);
													maxtextcell.appendChild(maxtext);
													minbarcell.appendChild(minimg);
													stringbarcell.appendChild(stringimg);
													maxbarcell.appendChild(maximg);
			
													minrow.appendChild(minbarcell);
													minrow.appendChild(mintextcell);
													stringrow.appendChild(stringbarcell);
													stringrow.appendChild(stringtextcell);
													maxrow.appendChild(maxbarcell);
													maxrow.appendChild(maxtextcell);
													graphtbody.appendChild(minrow);
													graphtbody.appendChild(stringrow);
													graphtbody.appendChild(maxrow);
													celltable.appendChild(graphtbody);

													celltable.appendChild(graphtbody);
													celltable.appendChild(thead);

											} 	//end if(stringdetails[0][i][j][k].name==spec)
										} 	//end for(k=0; k<stringdetails[0][i][j].length; k++)
										td.appendChild(celltable);
										tr.appendChild(td);
									} 	//end for(j=0; j<stringdetails[0][i].length; j++)
									tbody.appendChild(tr);
									table.appendChild(tbody);
									var byebye = document.getElementById(spec);
									byebye.parentNode.replaceChild(table, byebye);
									zoomed="";	
								} 	//end for(i=0; i<stringdetails[0].length; i++)
							}else if(spec==existing[g] && zoomed == 'yes'){		//else if part of if(spec==existing[g] && zoomed != 'yes')
								var specdiv = document.createElement("div");
									specdiv.id=spec + "div";
									specdiv.className="explanation";
								var spectext = document.createElement("div");
									spectext.id=spec+"text";
									spectext.className="spectext";
								var show = document.createElement("button");
									show.id=spec+"show";
									show.className="buttontext";
									show.name=spec;
									var buttontext = document.createTextNode("Show " + spec + " explanation");
									show.appendChild(buttontext);
									show.onclick=showHide;
									spectext.appendChild(show);
								//Create spec table, heads, cells, images, etc.
								var table = document.createElement("table");
								table.id=spec;
								table.className="datatable";
								var thead = document.createElement("thead");
								var tr = document.createElement("tr");
								var zoomcellparts = zoomcellid.split("|");
								var zoomspec = zoomcellparts[0];
								var zoomrow = parseInt(zoomcellparts[1]);
								var zoomcol = parseInt(zoomcellparts[2]);
								//determine row 1 col 1 which will be the table topic header
								if(zoomarray){
									for(m=0; m<zoomarray.length; m++){
										var zoomcomparearray = zoomarray[m].split("|");
										var zoomcompare = zoomcomparearray[0];
										if(spec==zoomcompare){
											var zoomrow = zoomcomparearray[1];
											var zoomcol = zoomcomparearray[2];
											var zoommaterial = zoomcomparearray[3];
											zoommaterial = materialSelected;
											break;
										}else{
											continue;
										}
									}
								}
								for(j=0; j<colheads.length; j++){
									zoomcol = parseInt(zoomcol) + 1;
									if(j=="0"){
										var th = document.createElement("th");
										var text = document.createTextNode(spec);
										th.id = "tabletopic";
										th.className="thleft";
										th.appendChild(text);
										tr.appendChild(th);
									}else if(j==zoomcol){
										var th = document.createElement("th");
										var text = document.createTextNode(colheads[j]);
										th.appendChild(text);
										tr.appendChild(th);
									}
									zoomcol = parseInt(zoomcol) - 1;
								} //end for j
								thead.appendChild(tr);
								table.appendChild(thead);
								var tbody = document.createElement("tbody");
								// example of retrieving data: var specc = stringdetails[0][0][0][0].brand;
								//create th row
								var howlong = stringdetails[0].length;
								for(i=0; i<stringdetails[0].length; i++){			//rows, each i is a row. length is 3
									var tr = document.createElement("tr");
									var th = document.createElement("th");
									th.className="thleft";
						var zoominstruct = "<span class=\"textlight\">(click borders<br>to zoom)</span>";
									if(i==zoomrow){
										var	thtext = document.createTextNode(rowheads[i]);
									}else{
										continue;
									}
									th.appendChild(thtext);
									th.innerHTML=th.firstChild.nodeValue+"<br>"+zoominstruct;
									tr.appendChild(th);
									//create td content cells


									for(j=0; j<stringdetails[0][i].length; j++){	//cells
										var td = document.createElement("td");
										td.id=zoomcompare+"|"+zoomrow+"|"+zoomcol+"|"+zoommaterial;
										td.className="expandable";
										//following names are same as in pcode=pcode above but with different names (long story)
										var rownumber = i;
										var colnumber = j;
										var rowplus1=i+1;
										var colplus1=j+1;
										var minname = "min"+table.id+rowplus1+"_"+colplus1;
										var maxname = "max"+table.id+rowplus1+"_"+colplus1;
										var mintextid = td.id+"_mintext";
										var maxtextid = td.id+"_maxtext";
										var stringtextid = td.id+"_stringtext";
										addEventHandler(td, "click", zoomout);
										if(i==zoomrow && j==zoomcol){
											var zoomlevel = 4;	//magnification of graph bars compared to full chart presentation
											for(k=0; k<stringdetails[0][i][j].length; k++){		//specs
												if(stringdetails[0][i][j][k].name==spec){
													//create bar graph table
													var celltable = document.createElement("table");
														celltable.className="graphtable";
														var thead = document.createElement("thead");
                              							var graphtbody = document.createElement("tbody");
														var pmin=(stringdetails[0][i][j][k].min / stringdetails[0][i][j][k].min * 100);
														var pstring=stringdetails[0][i][j][k].string / stringdetails[0][i][j][k].min * 100;
														var pmax=stringdetails[0][i][j][k].max / stringdetails[0][i][j][k].min * 100;

													var minrow = document.createElement("tr");
														var minbarcell = document.createElement("td");
															var minimg = document.createElement("img");
																minimg.src="../../images/stringselector/orangebar.gif";
																minimg.width=Math.round((pmin/pmax)*100*zoomlevel);
																var minscalewidth =minimg.width;
																minimg.height="10";
																minimg.id=minname;
																addEventHandler(minimg, "mouseover", minmaxnames);
																addEventHandler(minimg, "mouseout", hideminmaxnames);
														var mintextcell = document.createElement("td");
																mintextcell.id=mintextid;
													var stringrow = document.createElement("tr");
														var stringbarcell = document.createElement("td");
															var stringimg = document.createElement("img");
																stringimg.src="../../images/stringselector/twbluebar.gif";
																stringimg.width=Math.round(pstring/pmax*100*zoomlevel);
																var stringscalewidth = stringimg.width;
																stringimg.height="10";
																addEventHandler(stringimg, "mouseover", stringnames);
																addEventHandler(stringimg, "mouseout", hideminmaxnames);
														var stringtextcell = document.createElement("td");
																stringtextcell.id=stringtextid;
													var maxrow = document.createElement("tr");
														var maxbarcell = document.createElement("td");
															var maximg = document.createElement("img");
																maximg.src="../../images/stringselector/orangebar.gif";
																maximg.width=Math.round(pmax/pmax*100*zoomlevel);
																var maxscalewidth = maximg.width;
																maximg.height="10";
																maximg.id=maxname;
																var sliderwidth=maximg.width;
																addEventHandler(maximg, "mouseover", minmaxnames);
																addEventHandler(maximg, "mouseout", hideminmaxnames);
														var maxtextcell = document.createElement("td");
																maxtextcell.id=maxtextid;
														var buttonadjust = stringscalewidth - minscalewidth;
														var sliderwidth = maxscalewidth-minscalewidth;
														var minpercent =(-1*100*(1-minimg.width/stringimg.width));
															minpercent = minpercent.toFixed(0);
														var mintext =document.createTextNode(minpercent+"%");
								
														stringpercent =stringimg.width/stringimg.width*100;
															stringpercent = stringpercent.toFixed(0);
														var stringtext =document.createTextNode("choice");
														var initialvalue = stringtext.nodeValue;
								
														var maxpercent =(maximg.width/stringimg.width)*100-100;
															maxpercent = "+" + maxpercent.toFixed(0);
														var maxtext =document.createTextNode(maxpercent+"%");

														//put it all together
														mintextcell.appendChild(mintext);
														stringtextcell.appendChild(stringtext);
														maxtextcell.appendChild(maxtext);
														minbarcell.appendChild(minimg);
														stringbarcell.appendChild(stringimg);
														maxbarcell.appendChild(maximg);
														minrow.appendChild(minbarcell);
														minrow.appendChild(mintextcell);
														stringrow.appendChild(stringbarcell);
														stringrow.appendChild(stringtextcell);
														maxrow.appendChild(maxbarcell);
														maxrow.appendChild(maxtextcell);

														graphtbody.appendChild(minrow);
														graphtbody.appendChild(stringrow);
														graphtbody.appendChild(maxrow);
														celltable.appendChild(graphtbody);
	
														celltable.appendChild(graphtbody);
														celltable.appendChild(thead);
												} 	//end if name=spec
											} 	//end for k
										td.appendChild(celltable);
										tr.appendChild(td);
										} //end if(i==zoomrow && j==zoomcol)
									} 	//end for(j=0; j<stringdetails[0][i].length; j++)
									tbody.appendChild(tr);
									var sliderrow = document.createElement("tr");
									var sliderlabel = document.createElement("th");
										sliderlabel.className="thleft";
									var slidercell = document.createElement("td");
										slidercell.className="slidercell";
									var table2 = document.createElement("table");
										table2.className="slidertable";
									var table2tbody = document.createElement("tbody");
									var table2row = document.createElement("tr");
										var table2cell1 = document.createElement("td");
										table2cell1.className="scalecell";
									var sliderholder= document.createElement("div");
										sliderholder.className="sliderholder";

										var sliderscale = document.createElement("div");
											sliderscale.className="sliderscale";
									var cellclicked = table.id+"|"+zoomrow+"|"+zoomcol+"|"+materialSelected;
									var thetd = document.getElementById(cellclicked);
									sliderwidth=maxscalewidth-minscalewidth + 11;
									buttonadjust=stringscalewidth-minscalewidth;
										sliderscale.id=cellclicked+"_scale";
										sliderscale.style.width=sliderwidth+"px";
										sliderscale.style.left=minscalewidth+"px";
									var sliderbutton = document.createElement("div");
										sliderbutton.id=cellclicked+"_but";
										sliderbutton.className="sliderbutton";
										sliderbutton.style.left=buttonadjust+"px";
									sliderscale.appendChild(sliderbutton);
									sliderholder.appendChild(sliderscale);
									table2cell1.appendChild(sliderholder);
									table2row.appendChild(table2cell1);
										var table2cell2 = document.createElement("td");
											var table2cell2text = document.createTextNode(initialvalue+"%");
											table2cell2.id = cellclicked+"_label";
										table2cell2.appendChild(table2cell2text);
										table2row.appendChild(table2cell2);
										table2tbody.appendChild(table2row);
										table2.appendChild(table2tbody);
									var sliderlabeltext=document.createTextNode("Comparison Slider");
									sliderlabel.appendChild(sliderlabeltext);
									sliderlabel.innerHTML=sliderlabel.firstChild.nodeValue+"<br><span class=\"textlight\">(% of selected string)</span>";
									sliderrow.appendChild(sliderlabel);
									slidercell.appendChild(table2);
									sliderrow.appendChild(slidercell);
									addEventHandler(sliderbutton, "mousedown", dragHandler);
									addEventHandler(sliderbutton, "mouseover", buttonover);
									addEventHandler(sliderbutton, "mouseout", buttonout);
									//zoomed in cells have a zoomout event handler.
									//zoomed out tables have a zoomin event handler by clicking on border of cell.
								
									tbody.appendChild(sliderrow);
								
									var scalestringsrow = document.createElement("tr");
									var scalestringsth = document.createElement("th");
										scalestringsth.className="thtop";
										scalestringsth.style.textAlign="left";	
								
									var scalestringscell = document.createElement("td");
										scalestringscell.className="scalestringscell";
									var scalestringsdiv = document.createElement("div");
										scalestringsdiv.id = cellclicked +"_scalestrings";
										scalestringsdiv.className="scalestrings";
									var scalestringstext = document.createTextNode("Drag slider to see strings at scale locations.");
									var scalestringsthtext = document.createTextNode("Matching Strings");
									scalestringsth.appendChild(scalestringsthtext);
									scalestringsth.innerHTML=scalestringsth.firstChild.nodeValue+"<br><span class=\"textlight\">(linked to string<br>description)</span>";
									scalestringsdiv.appendChild(scalestringstext);
									scalestringsdiv.innerHTML="<span class=\"textboldred\">Drag slider above</span> to see list of matching strings.";
									scalestringscell.appendChild(scalestringsdiv);
									scalestringsrow.appendChild(scalestringsth);
									scalestringsrow.appendChild(scalestringscell);
									tbody.appendChild(scalestringsrow);
									scalestringsrow.style.visibility="visible";
										table.appendChild(tbody);
										var byebye = document.getElementById(spec);
										byebye.parentNode.replaceChild(table, byebye);
								} //end for(i=0; i<stringdetails[0].length; i++)
							} //end if(spec==existing[g] && zoomed != 'yes')
						} // end for(g=0; g<existing.length; g++)
					} //end if(specchoices[h].checked)
					zoomed = "";
				} 	//end for h
			} //end if(pcodeSelected == pcode && materialSelected==material)
			//now that all comparisons and display are done, change global pcode value to reflect that all tables are reflections of this pcode and make mateial global.					
			pcode=pcodeSelected;
			material=materialSelected;
		} 	//end if(request.status == 200)
	} 	//end if(request.readyState == 4)
}  // end showdata




////Tooltip function

var tooltip=function(){		//tooltip is an object made with the function. it is a "function literal". Properties of function/object literals are in name: value pairs separated by commas.
	var id = 'tt';
	var top = 3;
	var left = 3;
	var maxw = 300;
	var speed = 50;	//20-50 works well but 20 is too slow in IE and fade is too long.
	var timer = 20;	
	var endalpha = 95;
	var alpha = 0;
	var tt,t,c,b,h;
	var ie = document.all ? true : false;
	return{
		show:function(v,w){		//tooltip object consists of name:value pairs. the value in this case is a function. these properties are accessed like this tooltip.show().
			var bubblelist = new Array();
			var strings = "";
			var vlength = v.length;
			for(i=0; i<v.length; i++){
				strings = strings + v[i] + "<br>";
			}
			//breakup and sort strings to display in ordered list in bubble
			bubblelist = strings.replace(/\<br\>/g, ",");
			bubblelist = bubblelist.substring(0, bubblelist.length-1);
			var bubblelistarray = bubblelist.split(",");
			var bubblelistsort = bubblelistarray.sort();
			strings=bubblelistsort.join("<br>");

			if(tt == null){
				tt = document.createElement('div');
				tt.setAttribute('id',id);
				c = document.createElement('div');
				c.setAttribute('id',id + 'cont');
				tt.appendChild(c);
				document.body.appendChild(tt);
				tt.style.opacity = 0;
				tt.style.filter = 'alpha(opacity=0)';
				tt.style.textAlign="left";
				addEventHandler(document, "mousemove", this.pos);

			}
			tt.style.display = 'block';
//			tt.zindex=100;
			c.innerHTML = strings;
			tt.style.width = w ? w + 'px' : 'auto';
			if(!w && ie){
//				t.style.display = 'none';
//				b.style.display = 'none';
				tt.style.width = tt.offsetWidth;
//				t.style.display = 'block';
//				b.style.display = 'block';
			}
			if(tt.offsetWidth > maxw){tt.style.width = maxw + 'px'}

			h = parseInt(tt.offsetHeight) + top;
			clearInterval(tt.timer);
			tt.timer = setInterval(function(){tooltip.fade(1)},timer);
		},	//Each name-value pair is separated from its neighbors by a comma, and internally delimited by a colon. The last pair must not be followed by a comma!

		pos:function(e){
			var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY;
			var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX;
			tt.style.top = (u - h) + 'px';
			tt.style.left = (l + left) + 'px';
		},
		fade:function(d){
			var a = alpha;
			if((a != endalpha && d == 1) || (a != 0 && d == -1)){
				var i = speed;
				if(endalpha - a < speed && d == 1){
					i = endalpha - a;
				}else if(alpha < speed && d == -1){
					i = a;
				}
				alpha = a + (i * d);
				tt.style.opacity = alpha * .01;
				tt.style.filter = 'alpha(opacity=' + alpha + ')';
			}else{
				clearInterval(tt.timer);
				if(d == -1){tt.style.display = 'none'}
			}
		},
		hide:function(){
			clearInterval(tt.timer);
			tt.timer = setInterval(function(){tooltip.fade(-1)},timer);
		}
	};
}();		//the () invokes the function



function minmaxnames(e){
	var me = getActivatedObject(e);
	var barover = me.id;
	var names = stringdetails[2][barover];
	tooltip.show(names);
}


function stringnames(){
	var names = [stringdetails[0][0][0][0].brand + " " + stringdetails[0][0][0][0].model];
	tooltip.show(names);
}



function hideminmaxnames(e){
	tooltip.hide();
}