var publishTable="<b>JAVASCRIPT EXAMPLES : SVG SYMBOLS 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 SYMBOL BASICS</B>"+
	"</center>"

	basicTable+="<TABLE cellpadding=5 class=medium id='tablebasic' 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:resetSymbol();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='text-align:justify;width:"+(300*FactorW)+"'>"+sourceDescr+"</TD>"+
		"</TR>"


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

	basicTable+="</table>"

}

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

	
	var exampleTable="<b>SYMBOL LIBRARY APPLICATIONS </b><br>"
exampleTable+="<button title='View Example Library images and source' id=viewSVGButton onclick=toolLibraryFrame.viewSVGLibrary() style='cursor:hand;border-width:0;background-color:transparent;color:blue;text-decoration:underline'>View Example Library</button>"

	 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:resetSymbol();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>"

		if(i==5)
			exampleTable+="<tr><td class=medium valign=top align=center colspan=3 "+bgColor+">"+
			"<span id=toolDeploySpan style='visibility:visible;height:1;width:100%;overflow:hidden;'><iframe id=toolDeployFrame style='width:100%;height:100%' framespacing=0 frameborder=0 scrolling=no  src=blank.htm></iframe></span>"+
			"</td></tr>"

		if(i==13)
			exampleTable+="<tr><td class=medium valign=top align=center colspan=3 "+bgColor+">"+
			"<span id=svgImageSpan style='visibility:visible;height:1;width:100%;overflow:hidden;'><iframe id=svgImageFrame style='width:100%;height:100%' framespacing=0 frameborder=0 scrolling=no  src=blank.htm></iframe></span>"+
			"</td></tr>"

		if(i==14)
			exampleTable+="<tr><td class=medium valign=top align=center colspan=3 "+bgColor+">"+
			"<span id=svgButtonSpan style='visibility:visible;height:1;width:100%;overflow:hidden;'><iframe id=svgButtonFrame style='width:100%;height:100%' framespacing=0 frameborder=0 scrolling=no  src=blank.htm></iframe></span>"+
			"</td></tr>"

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

	}


		publishTable+="</table>"
		var reSelect=/<select/g
		var reeSelect=/<\/select>/g
		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(reSelect,"")
		publishTable=publishTable.replace(reeSelect,"")
		publishTable=publishTable.replace(reBut,"")
		publishTable=publishTable.replace(reeBut,"")
		publishTable=publishTable.replace(reIn,"")
		publishTable=publishTable.replace(reSpan,"")
		publishTable=publishTable.replace(reSpanE,"")
		publishTable=publishTable.replace(reId,"")


    exampleTable+="<tr><td style='background-color:lemonchiffon;' align=center colspan=3 ><button title='View Example Library images and source' id=viewSVGButton onclick=toolLibraryFrame.viewSVGLibrary() style='cursor:hand;border-width:0;background-color:transparent;color:blue;text-decoration:underline'>View Example Library</button></td></tr>"

	//---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]='Bounding Box'+
'@myElement.getBBox(). A rectangle that encloses an element. Our Ghost element, the kids bounding box, is shown in white. It encloses them as a group. Also, each element has a bounding box.'+
'@<center>'+
'<button id=makeBboxButton disabled onClick=Imp.makeBbox()>make bounding boxes</button>&nbsp;'+
'</center>'+
'<span class=small>Each element is shown with their individual bounding boxes at the place they were originally created. (Each had been translated to make up the group.)</span>'+
'@The bounding box provides the size  and location of an element <b> at the time it was initially created</b>. However it remains locked at its original location/size and does not track transforms(translate, scale, rotate, skew) following its creation.'

basicArray[1]='SVG Wrapper'+
'@Provides a bounding box for transformed elements. Tracks the element through transformations.'+
'@<center>Wrap the kids:<br>'+
'<button disabled id=SVG_WrapperButton style="color:blue" onClick=Imp.wrapUs()>wrap us!</button></center>'+
'<span class=small>Wrapper bounding boxes, are shown in blue, for each kid. It has followed the kids translation.</span>'+
'@The SVG wrapper will be used to determine element size and locations for the symbol library.'



basicArray[2]='Rebuilding Elements'+
'@Each element is rebuilt with their centers at the origin(0,0)'+
'@<center>Rebuild Each Element:<br>'+
'<button disabled id=rebuildBubbleButton onClick=Imp.rebuildBubble()>Bubble</button>'+
'<button disabled id=rebuildBoxButton onClick=Imp.rebuildBox()>Box</button>'+
'<button disabled id=rebuildOvalButton onClick=Imp.rebuildOval()>Oval</button>'+
'<button disabled id=rebuildSpiderButton onClick=Imp.rebuildSpider()>Spider</button></center><br>'+
'<span class=small>The element is rebuilt at the origin then translated to the center of the group.</span>'+
'@The center of the element is computed. The difference between	its original x,y value(s) and the center value replaces	the original value. This results in centering the element at the origin.'


basicArray[3]='Make Symbol'+
'@Creates a symbol element from the 4 kids, and deploys a use element'+
'@<center>'+
'<button id=makeSymbolButton disabled onClick=Imp.makeSymbol()>make symbol</button></center>'+
'<span class=small>Each element within the symbol is rebuilt, then stacked with their centers aligned. A use element, sized at 50%, is then created and placed in the image.</span>'+
'@Note: It is best to create elements of a symbol at \'full-size\' rather than the size of the expected use. Therefore it is easier to make refinements to the elements.'

basicArray[4]='Element Offset'+
'@Elements that make up a symbol, and are not to be centered, will be offset from the center point.'+
'@<center>Insert center offset(+/-) value(s)<br>'+
'<table>'+
'<tr><td>Bubble</td><td> x:<input id=bubbleOffsetXValue style="width:30" value=0> &nbsp;y:<input id=bubbleOffsetYValue  style="width:30" value=0></td></tr>'+
'<tr><td>Box</td><td> x:<input id=boxOffsetXValue  style="width:30" value=0> &nbsp;y:<input id=boxOffsetYValue   style="width:30" value=0></td></tr>'+
'<tr><td>Oval</td><td> x:<input id=ovalOffsetXValue  style="width:30" value=0> &nbsp;y:<input id=ovalOffsetYValue   style="width:30" value=0></td></tr>'+
'<tr><td>Spider</td><td> x:<input id=spiderOffsetXValue  style="width:30" value=0> &nbsp;y:<input id=spiderOffsetYValue   style="width:30" value=0></td></tr></table>'+
'<button disabled  id=offsetElementButton onClick=Imp.applyOffset()>apply offset</button>'+
'@The default value of each element of the symbol is that its center point aligns with the symbol\'s center point. Offset values may then applied on various elements to finalize the symbol layout.'

basicArray[5]='SVG Symbol Element'+
'@The symbol element of a library, deployed as use elements, provides the most flexibility for multible applications.'+
'@<center>Change reference symbol element<br>'+
'<select disabled onChange=Imp.selectGlobalChange() id=globalChangeSelect >'+
'<option>reset global changes</option>'+
'<option>Ellipse to blue</option>'+
'<option>Increase viewBox</option>'+
'<option>Decrease viewBox</option>'+
'<option>Rotate symbol element</option>'+
'</select>'+
'</center>'+
'<span class=small>Changes made dynamically on the symbol element are immediately displayed in all of its deployed use elements.</span>'+
'@Each symbol element includes the viewBox attribute. This is can be used for sizing the application\'s use elements. Also, the elements within the symbol can each be accessed/modified as a child node.'


basicArray[6]='Symbol Element Attributes'+
'@The attributes for the element(s) of a symbol can be defined at the symbol. The element(s), therefore would not have those attributes listed.'+
'@The fill attribute of the ellipse in the above use elements is at the symbol<br><center>'+
'<select disabled onChange=Imp.selectAttribChange() id=attribChangeSelect >'+
'<option>symbol fill=(default)</option>'+
'<option>symbol fill=red</option>'+
'<option>symbol fill=gradient</option>'+
'<option>symbol fill=pattern</option>'+
'</select>'+

'@It is advantageous to assign the fill and stroke attribute for the symbol\'s primary element to be located at the symbol. Different colors, patterns, and gradients can then be applied to applications.'

basicArray[7]='Symbol Sizing'+
'@The width or height of the reference symbol element can be specified for each application. It will retain its aspect ratio'+
'@<center>reference symbol element<br>'+
'<span class=small>Change either width or height. The other value will automatically compute its aspect ratio value</span>'+
'<table><tr><td> width:<input disabled    onmouseover=Imp.aspectRatioW()   onmousemove=Imp.aspectRatioW()   onmouseout=Imp.aspectRatioW()    id=symbolSizingWidthValue style="width:50" value=0>px. &nbsp;&nbsp;height:<input  disabled   onmouseover=Imp.aspectRatioH()   onmousemove=Imp.aspectRatioH()   onmouseout=Imp.aspectRatioH()    id=symbolSizingHeightValue  style="width:50" value=0>px.</td></tr></table>'+
'<button id=symbolSizingButton disabled onClick=Imp.sizeSymbol() onmouseover=Imp.setAspectRatio()>size symbol</button>'+
'</center>'+
'@The symbol\'s viewBox attribute is adjusted to change the base size of the symbol element.'

basicArray[8]='Use Element Sizing'+
'@The use element default size is the same as its referenced symbol element. However, each use element size can be adjusted as a percentage value of its reference symbol element.'+
'@<center>size a use element(%)<br>'+
'<span class=small>The adjusted value will retain the aspect ratio of the symbol value with the resulting pixel size shown below.</span>'+
'<table>'+
'<tr><td colspan=2 align=center> Relative Size:<input  id=usePercentValue style="width:50" value=0>% </td></tr>'+
'<tr><td colspan=2 align=center><button disabled id=useSizingButton onClick=Imp.sizeUse() >size use</button> </td></tr>'+
'<tr><td> width:<input  onfocus=blur()   id=useWidthPxValue style="width:50" value=0>px. &nbsp;&nbsp;height:<input   onfocus=blur()     id=useHeightPxValue  style="width:50" value=0>px.</td></tr>'+
'</table>'+
'</center>'+
'@Each use element will be relative to the size of the reference symbol element. The width and height values are set at identical percentage(%) values.'



/*

*/



var exampleArray=[];

exampleArray[0]="" //--blank---

exampleArray[1]="Dynamic Properties of the Use Element.<br>"+
"<span style='font-weight:normal'>Each individual use element can be adjusted after it is deployed within an application.</span>"+
"@<center>Select an option<br>"+
"<select disabled id=dynamicUseSelect onchange=Imp.dynamicUseProperties()>"+
"<option>Use Dynamic Properties</option>"+
"<option>onmouseover: resize</option>"+
"<option>onmouseover: rotate</option>"+
"<option>onmouseover: skew</option>"+
"<option>onmouseover: opacity</option>"+
"<option>onmouseover: filter</option>"+
"<option>onmouseover: xlink:href</option>"+
"</select></center>"+
"<span class=small>After the option is selected, place cursor over each"+
" use element to observe the changes</span>"+
"@Each use element, following deployment, can be dynamically changed in: location, size, rotation, skew, opacity, filters, and xlink:href."


exampleArray[2]="Sizing Use Elements for an Application."+
"<br><span style='font-weight:normal'>The use element width and height value is a percentage of the library symbol size.</span>"+
"@Adjust the above slider and view the corresponding width, height, and percentage values. "+
"@The library tool can preview each symbol's native size in the Editor segment. Adjust the slider to view pixel width/height and the resulting percentage value."+
"That percentage value can then be used to size the use element for an application."


exampleArray[3]="Setting Fill/Stroke Attribute for a Symbol Element."+
"<br><span style='font-weight:normal'>The library symbol can be formatted with a fill and stroke value. These values will be applied to one or more elements of the symbol that do not have their own fill/stroke attribute.</span>"+
"@<center>place cursor over below:<br>"+
"<button disabled id=symbolFillRedButton onmouseover=Imp.symbolFill('red') style=' width:200; '>symbol fill=red </button><br>"+
"<button disabled id=symbolFillWhiteButton  onmouseover=Imp.symbolFill('white')  style=' width:200; '>symbol fill=white </button><br>"+
"<button disabled id=symbolFillBlueButton  onmouseover=Imp.symbolFill('blue')  style=' width:200; '>symbol fill=blue </button>"+
"</center>"+
"<span class=small>The ellipse of the above use elements obtains its fill value from the symbol fill attribute value.</span>"+
"@The library tool can add this symbol fill/stroke attribute in the Editor segment. Select a specific element and its attributes."+
" Choose a desired default fill/stroke colors, then select the checkbox to set that element's fill and stroke to be controlled by the symbol."

exampleArray[4]="Rebuilding a Symbol"+
"<br><span style='font-weight:normal'>Elements of the symbol in the library can be added/deleted and rearranged.</span>"+
"@<center>place cursor over below:<br>"+
"<button disabled id=symbolBeforeChangeButton onmouseover=Imp.symbolBeforeChange() style=' width:200; '>symbol before change</button><br>"+
"<button disabled id=symbolAfterChangeButton  onmouseover=Imp.symbolAfterChange()  style=' width:200; '>symbol after change </button><br>"+
"</center>"+

"@The symbol can be loaded into the Builder segment of the library tool and modified. It can then be saved as a new symbol or update the loaded symbol."


exampleArray[5]="Deploying Use Elements for an Application<br>"+
"<span style='font-weight:normal'>The required symbols will be extracted from the library."+
" The use elements will be sized, defined and located."+
"@Insert the size value for the symbol's use elements. Include an id for each symbol. Select a radio button, then click on the SVG image to locate each use element. Click on a use element to remove it."+
"@To determine desired sizes, preview and adjust the size slider for the the various symbols in the Editor segment of the tool. Also, if an exact width or height value is desired, insert that value and the percentage will be calculated."

exampleArray[6]="Include Data Attributes at Use Elements.<br><span style='font-weight:normal'>The use element is a convenient repository for information associated with each element.</span><br><span class=small>(<i>Elements are randomly changed in: size, rotation, skew, opacity, filters, and xlink:href.</i>)</span>"+
"@<center>Start data flow:<br><button disabled id=startDataFlowButton onClick=Imp.startDataFlow() >start</button>&nbsp;<button disabled id=stopDataFlowButton onClick=Imp.stopDataFlow() >stop</button>&nbsp;<button disabled id=resetDataFlowButton onClick=Imp.resetDataFlow() >reset</button><br>"+
"<select disabled onChange=Imp.selectUseData() id=useDataSelect>"+
"<option>show changed uses</option>"+
"<option>show resize change</option>"+
"<option>show rotate change</option>"+
"<option>show skew change</option>"+
"<option>show opacity change</option>"+
"<option>show filter change</option>"+
"<option>show xlink:href change</option>"+
"</select></center>"+
"<span class=small>The server is downloading data every 5 seconds. Allow data  to run for about 30 seconds. Then select various change options to view their graphic response.</span>"+
"@<span id=useChangeSpan>Historical data is recorded and retained at each use. The application\'s data can then be searched, sorted, and played back graphically via the use elements.</span>"

exampleArray[7]="Hilite Use Elements via Background Ghost<br><span style='font-weight:normal'>Each symbol element has a companion ghost element that creates a single use element.</span>"+
"@Place cursor over each element and observe the hilite."+
"@The ghost use element is sized 30% greater than its hilited use, opacity is set at .5, plus it is inserted before the related use."

exampleArray[8]="Hilite Use Elements via Resize<br><span style='font-weight:normal'>This method changes width/height value by a fixed percentage.</span>"+
"@Place cursor over each element and observe the hilite."+
"@This method renders well, plus allows it to accept an application's dynamic changes for the symbol/use elements."

exampleArray[9]="Hilite Use Elements via Custom Ghost and Resize<br><span style='font-weight:normal'>This method changes width/height value by a fixed percentage, plus has a related ghost element.</span>"+
"@Place cursor over each element and observe the hilite."+
"@This works well in high-density areas, where many similar uses are clustered. The focused element is called to the top then reinserted at its original position."

exampleArray[10]="Display Full Image-Sized Element<br><span style='font-weight:normal'>The use element can be resized to center and fill the complete image</span>"+
"@Click on a element to toggle full/normal size."+
"@This applies where elements contain details not visble at it normal size. The focused element is called to the top then reinserted at its original position."

exampleArray[11]="Attach Data for Display at each Use<br><span style='font-weight:normal'>The use element includes a data attribute whose value is displayed at each use</span>"+
"@Click on a element to toggle full/normal size."+
"@The use has a companion text element linked to its location. At full size a dynamic text symbol element is loaded with each use's data attribute value."

exampleArray[12]="Convert Symbol to svg Elements<br><span style='font-weight:normal'>For elements where each requires dynamic change capabilities not possible with the use element</span>"+
"@Click on each svg 'use' element star or rectangle to change its individual color."+
"@The symbol from the library is converted to an svg element and cloned for each use. This allows each svg 'use' element and/or its child elements to be individually modified."

exampleArray[13]="Placing Individual Symbols As SVG Images in HTML files<br><span style='font-weight:normal'>Placing the symbol as an svg image file, rather than converting to a raster image, provides powerful dynamic capabilities and a high quality image.</span>"+
"@"+
"The individual svg images, following placement can  be dynamically changed. Select the button below to resize and change color of the heart image:"+
"<center><button id=changeHeartButton disabled onClick=Imp.changeHeartImageX()>change heart</button></center>"+
"@The symbol element is converted to an svg file plus offsetting the viewBox by 50%(-150 -150 300 300) for centering, and placed in an embed.<br>"+
"<span class=small>The individual SVG files are shown above in the Source textarea</span>"



/*
exampleArray[0]="example title<br><span style='font-weight:normal'>example description</span>"+
"@ what you have to do to participate"+
"@ What was demonstrated in the example"
*/