var publishTable="<b>JAVASCRIPT EXAMPLES : SVG SPIRALS REFERENCE</b><table>"

var basicTable
function writeBasicTable()
{

	var lastUpdate=document.lastModified
	var lastSplit=lastUpdate.split(" ")
	lastUpdateSpan.innerText=lastSplit[0]

	 basicTable="<center>"+
	"<input disabled title='reduce examples' type=checkbox id=reduceExampleCheck  checked onclick='reduceExample()' >"+
	"<input title='expand examples'  type=checkbox id=expandExampleCheck  style='width:25;height:25'  onclick='expandExample()' >"+
	"<span style='width:30'> </span><b>SVG SPIRAL BASICS</B>"+
	"</center>"

	basicTable+="<TABLE cellpadding=5 class=medium id='tableMethod' border=0 cellpadding=3 cellspacing=1 style='font-family:arial;width:"+(890*FactorW)+";background-color:blue'>"

	var reSp=/ /g //--replaces space with underscore---
	for(i=0;i<basicArray.length;i++)
	{
		basicSplit=basicArray[i].split("@")
		basic=basicSplit[0]
		file=basic.replace(reSp,"_")
	   	format=basicSplit[1]
		dwgDescr=basicSplit[2]

		sourceDescr=basicSplit[3]

 		var bgColor="style='background-color:#FFFFCC'"
		bgFlag=(i+1)/2
		bgFlag=bgFlag+""
		if(bgFlag.indexOf(".")==-1)
		bgColor="style='background-color:#FFFF99'"

		 basicFunct="<a href=javascript:reset();importBasic('"+file+"');hiliteRow('"+file+"') title='show this example'>"+basic+"</a><br>"+format+"</td>"

		basicTable+="<TR valign=top  id="+file+"Row "+bgColor+">"+
			"<TD onClick=scrollMoveDiv() style='width:"+(300*FactorW)+"'>"+
				basicFunct+
			"</TD>"+
			"<TD style='width:"+(300*FactorW)+"'>"+dwgDescr+"</TD>"+
			"<TD style='width:"+(300*FactorW)+"'>"+sourceDescr+"</TD>"+
		"</TR>"


		publishTable+="<tr><td><a href='http://www.mobiusPortal.com/Methods/"+file+".htm'>Javascript XML/SVG Spiral example:  "+basic+"</a></td><td>"+format+"</td><td>"+dwgDescr+"</td><td>"+sourceDescr+"</td></tr>"
	}

	basicTable+="</table>"

}

function writeExampleTable()
{
	//---publish utility---
	publishTable+="<b>DYNAMIC SVG SPIRAL  EXAMPLES</b>"
	publishTable+="<table>"

	
	var exampleTable="<center>"+
	"<b>DYNAMIC SVG SPIRAL EXAMPLES</b>"+
	"</center>"

	 exampleTable+="<TABLE cellpadding=5 class=medium id='tableExample' border=0 cellpadding=3 cellspacing=1 style='font-family:arial;width:"+(890*FactorW)+";background-color:blue'>"


	for(i=1;i<exampleArray.length;i++)
	{
		exampleSplit=exampleArray[i].split("@")
		exampleDescr=exampleSplit[0]
		dwgDescr=exampleSplit[1]
		sourceDescr=exampleSplit[2]


		exampleId="example"+i
		
		var bgColor="style='background-color:#CCFFCC'"
		bgFlag=(i+1)/2
		bgFlag=bgFlag+""
		if(bgFlag.indexOf(".")==-1)
		bgColor="style='background-color:#99FF99'"



		exampleTable+="<tr id="+exampleId+"Row "+bgColor+">"+
			"<TD valign=top onClick=scrollMoveDiv() style='width:"+(300*FactorW)+"'>"+
			"<a style='text-decoration:none;color:purple;font-weight:bold' href=javascript:reset();importExample('"+exampleId+"');hiliteRow('"+exampleId+"')  title='show this example'>"+i+".  "+exampleDescr+"</a></td>"+
			"<TD style='text-align:justify;width:"+(300*FactorW)+"'>"+dwgDescr+"</TD>"+
			"<TD style='text-align:justify;width:"+(300*FactorW)+"'>"+sourceDescr+"</TD>"+
		"</TR>"

				//---publish utility---
					publishTable+="<tr><td><b><a href='http://www.mobiusPortal.com/Examples/example"+i+".htm'>XML / SVG DOM Javascript Example : "+exampleDescr+"</b></a></td><td>"+dwgDescr+"</td><td>"+sourceDescr+"</td></tr>"

	}


		publishTable+="</table>"
		var reBut=/<button/g
		var reeBut=/<\/button>/g
		var reIn=/<input/g
		var reSpan=/<span/g
		var reSpanE=/<\/span>/g
		var reId=/id=/g
		publishTable=publishTable.replace(reBut,"")
		publishTable=publishTable.replace(reeBut,"")
		publishTable=publishTable.replace(reIn,"")
		publishTable=publishTable.replace(reSpan,"")
		publishTable=publishTable.replace(reSpanE,"")
		publishTable=publishTable.replace(reId,"")



	//---provide vertical 'spacer' to allow the bottommost examples to scroll umder the drawing.---
	exampleTable+="<tr><td class=medium valign=top align=center colspan=3 style='background-color:lemonchiffon;height:"+(250*FactorW)+";'>- - - - - - END - - - - - - </td></tr>"
					
	exampleTable+="</table>"
	
	exampleDiv.innerHTML=basicTable+exampleTable
}

var basicArray=new Array();
basicArray[0]='The Spiral Path'+
'@The SVG path element builds a spiral'+
'@<center><button disabled id=The_Spiral_PathClockwiseButton class=small onclick=Imp.clockwise()>clockwise</button> &nbsp;<button class=small  disabled id=The_Spiral_PathCounterclockwiseButton onclick=Imp.counterclockwise()>counterclockwise</button></center>' +
'@The direction of the spiral is determined by the movement of the angles that create its points.'


basicArray[1]='Spiral Variables'+
'@Selecting spiral parameters: Points, Separation, and Revolutions'+
'@<center>Change parameters<br>'+
'<select disabled onchange=Imp.showChange() id=Spiral_VariablesSpiralPointsSelect>'+
'<option>Points</option>'+
'<option value=100>100</option>'+
'<option value=200>200</option>'+
'<option value=300>300</option>'+
'<option selected value=400>400</option>'+
'<option value=500>500</option>'+
'<option value=600>600</option>'+
'<option value=700>700</option>'+
'<option value=800>800</option>'+
'<option value=800>900</option>'+
'<option value=1000>1000</option>'+
'</select>'+
'<select disabled  onchange=Imp.showChange()  id=Spiral_VariablesSeparationSelect>'+
'<option>Separation</option>'+
'<option value=10>10</option>'+
'<option value=20>20</option>'+
'<option value=25>25</option>'+
'<option value=30>30</option>'+
'<option selected  value=35>35</option>'+
'<option value=40>40</option>'+
'<option value=45>45</option>'+
'<option value=50>50</option>'+
'<option value=55>55</option>'+
'<option value=60>60</option>'+
'</select>'+
'<select disabled  onchange=Imp.showChange() id=Spiral_VariablesRevsSelect>'+
'<option>Revs</option>'+
'<option value=1>1</option>'+
'<option value=2>2</option>'+
'<option value=3>3</option>'+
'<option selected value=4>4</option>'+
'<option value=5>5</option>'+
'<option value=6>6</option>'+
'<option value=7>7</option>'+
'<option value=8>8</option>'+
'<option value=9>9</option>'+
'<option value=10>10</option>'+
'</select><br>'+
'Width: <span id=Spiral_VariablesWidthValue style="width:45;background-color:white"></span> px.  &nbsp;Height: <span id=Spiral_VariablesHeightValue style="background-color:white;width:45"></span> px.'+
'@The spiral can be arranged to fit a specific application'

basicArray[2]='Radial Lines'+
'@A line from the center to each path point'+
'@<center>Change Spiral Points<br>'+
'<select disabled  onchange=Imp.showChange() id=Radial_LinesSpiralPointsSelect>'+
'<option value=20>20</option>'+
'<option value=50>50</option>'+
'<option value=100>100</option>'+
'<option value=150>150</option>'+
'<option selected value=200>200</option>'+
'<option value=250>250</option>'+
'<option value=300>300</option>'+
'<option value=350>350</option>'+
'<option value=400>400</option>'+

'</select>'+
'@The angle is the same between each line. The distance between adjacent points increase as they move away from the center.'


basicArray[3]='Spiral Chords'+
'@The lines connecting adjacent points for a 16-point spiral'+
'@<center>Change Points<br>'+
'<button disabled title=back id=Spiral_ChordsBackButton onclick=Imp.backPnt()>&nbsp;<b>&lt;</b>&nbsp;</button>&nbsp'+
'<button disabled title=forward id=Spiral_ChordsForwardButton onclick=Imp.forwardPnt()>&nbsp;<b>&gt;</b>&nbsp;</button>'+
'</center>'+
'@Computes the distance(d) between adjacent points.'



basicArray[4]='SVG 3D Spiral'+
'@3D cartesian coordinates: 30-degree perspective'+
'@<center>Select Spiral Direction<br>'+
'<select disabled onchange=Imp.spiralDirection() id=SVG_3D_SpiralSelect>'+
'<option >Upward</option>'+
'<option >Downward</option>'+
'<option >Left</option>'+
'<option >Right</option>'+
'</select></center>'+
'@The y coordinate is a linear function of the z value from the equation for the spiral.'

basicArray[5]='Spiral 3D Effect'+
'@Placing elements at x,y points of the spiral with a programmed offset'+
'@<center>Select Elements<br>'+
'<select disabled onchange=Imp.spiralEffect() id=Spiral_3D_EffectSelect>'+
'<option >Ellipses</option>'+
'<option >Circles</option>'+
'<option >Rectangles</option>'+
'<option >All Elements</option>'+
'<option >No Elements</option>'+
'</select></center>'+
'@Elements are serpentined along the spiral, appearing to be 3 dimensional'

basicArray[6]='Reverse Viewing'+
'@3D Effect Spirals are turned inside-out to be reverse viewed.'+
'@<center><button  disabled=true id=Reverse_ViewingFrontButton onClick=Imp.frontView()>front view</button>&nbsp;'+
'<button disabled=true id=Reverse_ViewingBackButton onClick=Imp.backView()>back view</button></center>'+
'@The back-most elements of very deep spirals can be quickly viewed.'


basicArray[7]='Spiral Navigation'+
'@Various viewing, search and sort stratagies can be used'+
'@Use the above slider to view individual data discs.<center>'+
'<select title="View, Search and Sort" disabled style="width:222" id=searchSelect onChange=Imp.searchSpiral() ><option>View, Search & Sort</option>'+
'<option>Show black discs</option>'+
'<option>Show maroon discs</option>'+
'<option>Show crimson discs</option>'+
'</select>'+
'<button disabled onClick=Imp.backSort() id=backSortButton>sort back</button>&nbsp;<button disabled onClick=Imp.frontSort() id=frontSortButton>sort front</button>'+
'</center>'+
'@Individual data discs are viewable no matter where they reside along the spiral.'

basicArray[8]="The Data Disc"+
"@Building a data disc to display status for an application. The example disc is made up of 10 elements, contained in a group symbol."+
"@The disc shown above displays its normal status. click 'status' below to see various simulated states:<br>"+
"<center><button disabled id=statusClickButton onClick=Imp.statusClick()>status</button>:<input type=text style='width:80' id=statusValue value='Normal'>"+
"@The Disc is designed so its various status changes are discernable from its neighbors along the spiral."

basicArray[9]='Application Spiral Design'+
'@After the Data Disc has been built the spiral design, to fit an application, requires tuning of seven(7) properties: '+
'<span class=small>1.maximum number of discs, 2.disc scale, 3.center point, 4.starting angle, 5.twist, 6.separation, and 7.revolutions</span>'+
'@<center>Adjust values to view their result<br>'+
'<table class=medium id=appTable disabled style="background-color:black">'+
'<tr style="background-color:white" align=center class=small>'+
'<td>discs</td>'+
'<td>scale</td>'+
'<td>center</td>'+
'<td>st. &gt;</td>'+
'<td>twist</td>'+
'<td>sep.</td>'+
'<td>revs</td>'+
'</tr>'+
'<tr align=center style="background-color:white" >'+
'<td><input id=appDiscValue type=text style="width:35" value=240 ></td>'+
'<td><input id=appScaleValue  type=text style="width:40" value=.25 ></td>'+
'<td><input id=appCenterValue  type=text style="width:70" value=165,165 ></td>'+
'<td><input id=appAngleValue  type=text style="width:30" value=4 ></td>'+
'<td><input id=appTwistValue  type=text style="width:30" value=.4 ></td>'+
'<td><input id=appSepValue  type=text style="width:30" value=56 ></td>'+
'<td><input id=appRevValue  type=text style="width:40" value=1.98 ></td>'+
'</tr>'+
'</table>'+
'<button disabled id=appViewResultButton onclick=Imp.appViewResult()>view result</button>'+
'<br><button class=small disabled id=appViewResetButton onclick=Imp.appViewReset()>reset</button>'+

'@The maximum number of discs expected for an application are shown. The application could start with a single disc and evolve toward the maximum.'


basicArray[10]='Dynamic Data Spiral'+
'@View data changes plus data disc viewing and sort methods for a typical application.'+
'@<center>Send changes'+
"<br><button  disabled  id=randomDataChangeButton onClick=Imp.randomDataChange()>send data changes</button>"+
"<br>Sort Changed Discs:<input onclick=Imp.sortOnStatus() type=checkbox id=sortOnStatusCheck></center>"+

'@Click on a disc to view it and its immediate neighbors. Click on the target disc or one of its neighbors to hide'

/*



basicArray[]='methodName'+
'@myElem.methodName(prop)'+
'@this describes what it provides'+
'@this describes its advantages if used'

*/

/*
'<table cellpadding=0 cellspacing=0>'+
'<tr>'+
'<td><button disabled onClick=Imp.navigateUL() id=ULbutton style="width:35;height:35;"><img src=Basics/ULarrow.gif></button></td>'+
'<td><button disabled  title="Center" onClick=Imp.navigateUC()  id=UCbutton style="width:35;height:35;background-image:url(Basics/UCarrow.gif)"><img src=Basics/UCarrow.gif></button></button></td>'+
'<td><button disabled  onClick=Imp.navigateUR()  id=URbutton style="width:35;height:35;background-image:url(Basics/URarrow.gif)"><img src=Basics/URarrow.gif></button></button></td>'+
'</tr>'+
'<tr>'+
'<td><button disabled  onClick=Imp.navigateL()  id=Lbutton style="width:35;height:35;background-image:url(Basics/Larrow.gif)"><img src=Basics/Larrow.gif></button></button></td>'+
'<td><button disabled  title="Original View" onClick=Imp.navigateX()  id=Xbutton style="cursor:hand;position:relative;top:0;left:0;width:35;height:35;"><span style="cursor:hand;position:absolute;top:-7;left:3;font-size:30;font-weight:bold;color:crimson;font-family:comic sans ms">X</span></button></td>'+
'<td><button disabled  onClick=Imp.navigateR()  id=Rbutton style="width:35;height:35;background-image:url(Basics/Rarrow.gif)"><img src=Basics/Rarrow.gif></button></button></td>'+
'</tr>'+
'<tr>'+
'<td><button disabled  onClick=Imp.navigateLL()  id=LLbutton style="width:35;height:35;background-image:url(Basics/LLarrow.gif)"><img src=Basics/LLarrow.gif></button></button></td>'+
'<td><button disabled  onClick=Imp.navigateLC()  id=LCbutton style="width:35;height:35;background-image:url(Basics/LCarrow.gif)"><img src=Basics/LCarrow.gif></button></button></td>'+
'<td><button disabled  onClick=Imp.navigateLR()  id=LRbutton style="width:35;height:35;background-image:url(Basics/LRarrow.gif)"><img src=Basics/LRarrow.gif></button></button></td>'+
'</tr>'+
'</table>'+

*/

var exampleArray=[];

exampleArray[0]=""



exampleArray[1]="Updating Spiral Discs from a Database"+
"@Select 'start' to begin the data flow to the spiral data discs.<center><button title='Start data flow' id=startData_Example1Button disabled onClick=startData_Example1()>start</button> &nbsp;<button title='Stop data flow' id=stopData_Example1Button disabled onClick=stopData_Example1()>stop</button></center>"+
"<span class=small>The server is downloading updates every 12 seconds</span>"+
"@<span id=example1_discStatusSpan>The server is sending XML data packets, updating the status of community discs. The incoming data is shown above in the Source textarea.<center><span class=small style='font-style:italic'>(This community has 240 discs)</span></center></span>"


exampleArray[2]="Searching Spiral Data Communities with SVG Thumbnail images"+
"@Search the status(color) of data-disc types(elements). Choose an element and its color. Select 'go' to display thumbnails of their communities.<br>"+
"<center><select disabled class=snall id=example2_elemSelect>"+
"<option value='ellipse'>ellipse-disc</option>"+
"<option value='path'>path-disc</option>"+
"<option value='polygon'>polygon-disc</option>"+
"<option class=snall  value='circle'>circle-disc</option>"+
"</select>"+
"<select disabled  onchange=example2_goButton.focus() class=snall  style='width:100'  id=example2_colorSelect>"+
"<option  style='background-color:blue'  value='blue'> </option>"+
"<option  style='background-color:darkorchid'  value='darkorchid'> </option>"+
"<option style='background-color:forestgreen'  value='forestgreen'> </option>"+
"<option style='background-color:darkorange'  value='darkorange'> </option>"+
"<option  style='background-color:indigo'  value='indigo'> </option>"+
"<option style='background-color:crimson' value='crimson'> </option>"+
"<option  style='background-color:maroon'  value='maroon'> </option>"+
"</select>"+
" &nbsp;<button disabled  class=snall  id=example2_goButton onClick=example2_go()>go</button></center>"+
"<span class=small style='text-align:justify'>The most relevant 9 thumbnails are shown. Click thumbnail to toggle full/thumb image. At full image, use the context menu and/or <b>Ctrl/Alt</b> keys to zoom in.</span>"+
"@<span id=example2_foundSpan>A search/thumbnail algorithm scans the community files and finds the communities with the most status/discs that match the search criteria. A representative portion of the community is returned for its thumbnail."+
"<center><span class=small>There are over 400 serpentined data communities with more than a  1000 data discs in each. </span></span>"


/*
exampleArray[0]="example description"+
"@ what you have to do to participate"+
"@ What was demonstrated in the example"
*/