tripal/theme_tripal/js/jgcharts/include/gui/plugins/jggui/jggui.html

<form method="post" action="#">
<div id="jggui">
    <ul class="ui-tabs-nav">
        <li><a href="#panel-1"><span>Type</span></a></li>
        <li><a href="#panel-2"><span>Options</span></a></li>
        <li><a href="#panel-3"><span>Colors</span></a></li>
        <li><a href="#panel-4"><span>Background</span></a></li>
        <li><a href="#panel-5"><span>Grid</span></a></li>
        <li><a href="#panel-6"><span>Export</span></a></li>
    </ul>
    <div id="panel-1" class="ui-tabs-panel">
	    <div class="icon"><img src="img/bvg.png" /></div>
	    <div class="icon"><img src="img/bvs.png" /></div>
	    <div class="icon"><img src="img/bhg.png" /></div>
	    <div class="icon"><img src="img/bhs.png" /></div>
	    <div class="icon"><img src="img/p.png" /></div>
	    <div class="icon"><img src="img/p3.png" /></div>
	    <div class="icon"><img src="img/lc.png" /></div>
	    <div class="icon"><img src="img/fillall.png" /></div>
	    <div class="icon"><img src="img/fillbottom.png" /></div>
    </div>
    <div id="panel-2" class="ui-tabs-panel">
	    <table width="40%" style="float:left;">
			<colgroup>
				<col width="40%"></col>
				<col width="60%"></col>
			</colgroup>
		   <tbody>
			   <tr>
			        <th>Title</th>
				    <td>
					<input type="text" name="title" class="title" />
	             	</td>
	   		   </tr>
			   <tr>
			        <th>Title size</th>
				    <td >
					<input type="text" class="spinner custom" id="title_size" value="12" size="3" />
	             	</td>
	   		   </tr>
			   <tr>
			        <th>Title color</th>
				    <td class="color">
						<input type="text" id="title_color" name="title_color" class="hex" value="e6e6e6" />
		            </td>
	   		   </tr>
		</tbody>
		</table>
		<table width="40%" style="float:right;">
			<colgroup>
				<col width="40%"></col>
				<col width="60%"></col>
			</colgroup>
		   <tbody>
			   <tr>
			        <th>Height</th>
				    <td><!-- todo : class hex custom , continue bg -->
					<input type="text" name="height" class="spinner custom" id="ch_height" size="5"/>
	             	</td>
	   		   </tr>
			   <tr>
			        <th>Width</th>
				    <td >
					<input type="text" name="width" class="spinner custom" id="ch_width" size="5" />
	             	</td>
	   		   </tr>
			   <tr class="bar">
			        <th>Bar Width</th>
				    <td>
					<input type="text" name="bar_width" class="spinner custom" id="bar_width" size="5"/>
	             	</td>
	   		   </tr>
			   <tr class="bar">
			        <th>Bar Spacing</th>
				    <td >
					<input type="text" name="bar_spacing" class="spinner custom" id="bar_spacing" size="5" />
	             	</td>
	   		   </tr>
	   		   <tr class="axis_step">
			        <th>Axis step</th>
				    <td>
					<input type="text" class="spinner" id="axis_step" />
		           	</td>
			   </tr>
		</tbody>
		</table>
		<div class="clearfix">
			<div class="right">
				<input type="button" name="refresh" value="refresh" class="button refresh" />
			</div>
		</div>
    </div>
    <div id="panel-3" class="ui-tabs-panel">
    	<table width="50%" style="float:left;" id="seriestable">
			<thead>
				<tr>
					<th class="state">Serie</th>
					<th>Color</th>
					<th class="line">Line Width</th>
					<th class="line">Length Line</th>
					<th class="line">Length Blank</th>
				</tr>
		   </thead>
		   <tbody>
		</tbody>
		</table>
		<table width="40%" style="float:left;" id="filltable">
				<thead>
					<tr>
						<th class="state">Option</th>
						<th>Value</th>
					</tr>
			   </thead>
			   <tbody>
				   <tr class="filltop">
				        <th>Fill Top Color</th>
					    <td>
						<input type="text" class="hex" id="filltop" />
		             	</td>
		   		   </tr>

		   		   
			</tbody>
		</table>
		<div class="clearfix">
			<div class="right">
				<input type="button" name="refresh" value="refresh" class="button refresh" />
			</div>
		</div>
    </div>
    <div id="panel-4" class="ui-tabs-panel">
    	<table width="40%" style="float:left;" id="background">
				<caption>Background</caption>
				<thead>
					<tr>
						<th class="state">Option</th>
						<th>Value</th>
					</tr>
			   </thead>
			   <tbody>
				   <tr class="">
				        <th>Type</th>
					    <td>
						<select name="chart-background" id="chart-background">
						<option selected="selected">disabled</option>
						<option>solid</option>
						<option>gradient</option>
						<option>stripes</option>
						</select>
		             	</td>
		   		   </tr>
				   <tr class="background1">
				        <th>Primary color</th>
					    <td>
						<input type="text" class="hex custom" id="background1" />
		             	</td>
		   		   </tr>
				   <tr class="background2">
				        <th>Secondary color</th>
					    <td>
						<input type="text" class="hex custom" id="background2" />
		             	</td>
		   		   </tr>
				   <tr class="bg_angle">
				        <th>Angle</th>
					    <td>
						<input type="text" class="spinner custom" id="bg_angle" size="3" />
		             	</td>
		   		   </tr>
		   		   <tr class="stripe_width">
				        <th>Stripe width</th>
					    <td>
						<input type="text" class="spinner custom" id="stripe_width" size="3" />
		             	</td>
		   		   </tr>
		   		   <tr class="bg_trasparency">
				        <th>Trasparency</th>
					    <td>
						<div class="bg_trasparency_bool">
						<input type="text" class="spinner custom" id="bg_trasparency"  size="4" />
						</div>
						
						<input type="checkbox" id="bg_trasparency_bool" />
		             	</td>
		   		   </tr>
		   		   
		   		   
			</tbody>
		</table>
		<table width="40%" style="float:left;" id="chartarea">
				<caption>Background</caption>
				<thead>
					<tr>
						<th class="state">Option</th>
						<th>Value</th>
					</tr>
			   </thead>
			   <tbody>
				   <tr class="">
				        <th>Type</th>
					    <td>
						<select name="chartarea-background" id="chartarea-background">
						<option selected="selected">disabled</option>
						<option>solid</option>
						<option>gradient</option>
						<option>stripes</option>
						</select>
		             	</td>
		   		   </tr>
				   <tr class="ch_background1">
				        <th>Primary color</th>
					    <td>
						<input type="text" class="hex custom" id="ch_background1" />
		             	</td>
		   		   </tr>
				   <tr class="ch_background2">
				        <th>Secondary color</th>
					    <td>
						<input type="text" class="hex custom" id="ch_background2" />
		             	</td>
		   		   </tr>
				   <tr class="ch_bg_angle">
				        <th>Angle</th>
					    <td>
						<input type="text" class="spinner custom" id="ch_bg_angle" size="3" />
		             	</td>
		   		   </tr>
		   		   <tr class="ch_stripe_width">
				        <th>Stripe width</th>
					    <td>
						<input type="text" class="spinner custom" id="ch_stripe_width" size="3" />
		             	</td>
		   		   </tr>
		   		   <tr class="ch_bg_trasparency">
				        <th>Trasparency</th>
					    <td>
						<div class="ch_bg_trasparency_bool">
						<input type="text" class="spinner custom" id="ch_bg_trasparency"  size="4" />
						</div>
						
						<input type="checkbox" id="ch_bg_trasparency_bool" />
		             	</td>
		   		   </tr>
		   		   
		   		   
			</tbody>
		</table>
		<div class="clearfix">
			<div class="right">
				<input type="button" name="refresh" value="refresh" class="button refresh" />
			</div>
		</div>
    </div>
    <div id="panel-5" class="ui-tabs-panel">
    	<table width="40%" style="float:left;" id="gridtable">
				<caption>Grid</caption>
				<thead>
					<tr>
						<th class="state">Option</th>
						<th>Value</th>
					</tr>
			   </thead>
			   <tbody>
				   <tr class="">
				        <th>Type</th>
					    <td>
						<input type="checkbox" id="grid" />
		             	</td>
		   		   </tr>
				   <tr class="grid_x">
				        <th>Grid step x</th>
					    <td>
						<input type="text" class="spinner custom" id="grid_x" size="3" value="10" />
		             	</td>
		   		   </tr>
		   		   <tr class="grid_y">
				        <th>Grid step y</th>
					    <td>
						<input type="text" class="spinner custom" id="grid_y" size="3" value="10"  />
		             	</td>
		   		   </tr>
		   		   <tr class="grid_line">
				        <th>Grid length line</th>
					    <td>
						<input type="text" class="spinner custom" id="grid_line" size="3" value="1"  />
		             	</td>
		   		   </tr>
		   		   <tr class="grid_blank">
				        <th>Grid length blank</th>
					    <td>
						<input type="text" class="spinner custom" id="grid_blank" size="3" value="1"  />
		             	</td>
		   		   </tr>
			</tbody>
		</table>
		<div class="clearfix">
			<div class="right">
				<input type="button" name="refresh" value="refresh" class="button refresh" />
			</div>
		</div>
    </div>
    <div id="panel-6" class="ui-tabs-panel">
    	<ul class="ui-tabs-nav export">
	        <li><a href="#panel-6a"><span>Html</span></a></li>
	        <li><a href="#panel-6b"><span>Metadata</span></a></li>
	        <li><a href="#panel-6c"><span>Url</span></a></li>
	        <li><a href="#panel-6d"><span>jgcharts</span></a></li>
	    </ul>
    	<div id="panel-6a" class="ui-tabs-panel export">
	        <p>
			<textarea id="export_html" rows="6" class="export"></textarea>
	        </p>
    	</div>
    	<div id="panel-6b" class="ui-tabs-panel export">
	        <p>
			<textarea id="export_metadata" rows="6" class="export"></textarea>
	        </p>
    	</div>
    	<div id="panel-6c" class="ui-tabs-panel export">
	        <p>
			<textarea id="export_url" rows="6" class="export"></textarea>
	        </p>
    	</div>
    	<div id="panel-6d" class="ui-tabs-panel export">
	        <p>
			<textarea id="export_jgcharts" rows="6" class="export"></textarea>
	        </p>
    	</div>
    </div>

</div>
</form>