//////////////////////////////////////////////////////////////////////
// Name: HTML UI Components Ver1.4.1
// Author: Myhyli
// E-Mail: myhyli@hotmail.com
// Homepage: http://myhyli.digichina.net
//////////////////////////////////////////////////////////////////////

HR:
---
Parameter:
[width]			width
[height]		height
[shading]		whether or not use shadow
[allow color]		whether or not allow fill with color
[color]			fill color(only available when "allow color" is true)

Image:
------
Parameter:
[src]			jpg or swf file url
[size fixed]		whether or not use the specified size
[width]			width(only available when "size fixed" is true)
[height]		height(only available when "size fixed" is true)
[url]			add a hyper link to the image
[target]		specify which window will open the url

HyperLink:
----------
Parameter:
[text]			link text
[url]			url
[target]		specify which window will open the url
[font]			font face
[size]			font size
[link color]		font color
[bold]			whether or not use bold
[underline]		whether or not use underline
[italic]		whether or not use italic
[transparent]		whether or not allow the background tranparent
[bg color]		background color(only available when "transparent" is false)
[hover color]		font color(only available when the mouse roll over)
[bold]			whether or not use bold(only available when the mouse roll over)
[underline]		whether or not use underline(only available when the mouse roll over)
[italic]		whether or not use italic(only available when the mouse roll over)
[transparent]		whether or not allow the background tranparent(only available when the mouse roll over)
[bg color]		background color(only available when "transparent" is false)

Tabular Data:
-------------
Parameter:
[Data URL]		needs a xml-format file, it will be import as the table's data source
[Font]			font face
[Font size]		font size
[Wrap Text]		whether or not allow wrap text
[Linage]		set the number of rows that will show(set 0 or less will show whole table)
[Hover BG]		background color(only available when the mouse roll over)
[Hover Color]		font color(only available when the mouse roll over)
[Active BG]		background color(only available when click)
[Active Color]		font color(only available when click)

Method:
- instancename.deleteRow(rowIndex)
	[instancename]		name of the instance of the component
	[rowIndex]		number. the index of the table row you want to delete
	sample:			xxx.deleteRow(1)

- instancename.insertRow([text,foncolor,bgcolor,align],[text,foncolor,bgcolor,align],[text,foncolor,bgcolor,align],,,)
- instancename.insertRow(rowIndex,[text,foncolor,bgcolor,align],[text,foncolor,bgcolor,align],[text,foncolor,bgcolor,align],,,)
- instancename.insertRow(text,text,text,,,)
	[instancename]		name of the instance of the component
	[text]			text
	[fontcolor]		font color ('#000000')
	[bgcolor]		background color ('#000000')
	[align]			text align ('left/center/right')
	[rowIndex]		the position you want to insert the new row
	sample 1:		xxx.insertRow(['aaa','','#CCCCCC','center'],['bbb','','#DDDDDD'],['ccc','','#EEEEEE','right'],['ddd','#FF00FF','#FFFFFF'],['eee','','#FFFFFF'],['fff','#FF00FF','#FFFFFF'])
	sample 2:		xxx.insertRow(1,['aaa','','#CC0000','center'],['bbb','','#CC0000'],['ccc','','#CC0000','right'],['ddd','','#CC0000'],'eee','fff')
	sample 3:		xxx.insertRow('123','312','456','abc')

- instancename.sortTable(cellIndex)
	[instancename]		name of the instance of the component
	[cellIndex]		number. the index of the table cell you want to sort by
	sample:			xxx.sortTable(3)

- instancename.readData(url)
	[instancename]		name of the instance of the component
	[url]			data file's url
	sample:			xxx.readData('table.xml')

- instancename.nextPage(number)
	[number]		number. the next page relative to current, positive or negative integer is valid
	sample 1:		xxx.nextPage(2)
	sample 2:		xxx.nextPage(-1)

- instancename.gotoPage(number)
	[number]		number. the absolute page number, only positive integer or zero is valid
	sample:			xxx.gotoPage(3)

- instancename.showAll()	no arguments. show whole table or the specified rows number
	sample:			xxx.showAll()

Data file format:
	<table	border="0"			<-- optional,set border width
		cellspacing="1"			<-- optional,set spacing between each cell
		bgcolor="#000000"		<-- optional,set background color
		cellpadding="2"			<-- optional,set padding within each cell
		bordercollapse="false"		<-- optional,set border whether collapse or not
		bordercolordark="#808080"	<-- optional,set border dark color
		bordercolorlight="#DAD0C8"	<-- optional,set border light color
		>
		<th>
			<td	width="50"		<-- required,set td width
				color="#FFFF00"		<-- optional,set font color
				bgcolor="#000000"	<-- optional,set background color
				sort="string"		<-- optional,set sort order (string/number)
				align="center"		<-- optional,set text aign (center/left/right)
				link="http://"		<-- optional,set a link url
				target="_blank"		<-- optional,set the window to open linked url (_blank/_self/_top/_parent/[frame name])
				>thead</td>
			<td width="100" color="#FFFFFF" bgcolor="#000000" sort="number">thead</td>
		</th>
		<tr>
			<td color="#FF0000" bgcolor="#CCCCCC" align="center">content</td>
			<td color="#FFFFFF" bgcolor="#CCCCCC" align="right">content</td>
		</tr>
	</table>

- you can freely use any tag name
- if you set the first row's tag name to '<th>', it will be render as table's header, click each cell of this row will sort the table as your specified order, and an arrow will show in the cell.
- each property is optional, except 'width' in first row's '<td>' is required
- if you want to show the arrow, or specify the sort order, set 'sort'(in 'td')to "string" or "number"
- you can set 'link' property to '<td>', it will allow you to open a url when click it

Data file sample 1:
	<?xml version="1.0"?>
	<table border="0" cellspacing="1" bgcolor="#000000">
		<th>
			<td width="50" color="#FFFF00" bgcolor="#000000" align="center">Center</td>
			<td width="60" color="#FFFFFF" bgcolor="#000000">String</td>
			<td width="80" color="#FFFFFF" bgcolor="#000000" align="right">Right</td>
			<td width="100" color="#FFFFFF" bgcolor="#000000" sort="number">Number</td>
		</th>

		<tr>
			<td width="50" bgcolor="#CCCCCC" color="#FFFFFF" align="center">short a</td>
			<td width="60" bgcolor="#CCCCCC">looooooooong</td>
			<td width="80" bgcolor="#CCCCCC" align="right">normal</td>
			<td width="100" bgcolor="#CCCCCC">41234</td>
		</tr>
	</table>

Data file sample 2:
	<?xml version="1.0"?>
	<table border="5" cellspacing="3" cellpadding="3" bordercolordark="#808080" bordercolorlight="#DAD0C8" bordercollapse="false">
		<tr>
			<td width="40" color="#FF0000">aaaa</td>
			<td width="90" color="#FF0000">bbbbbbbbbb</td>
			<td width="70" color="#FF0000">cccccccccc</td>
			<td width="100" color="#FF0000" link="http://myhyli.digichina.net" target="_blank">this is a link</td>
		</tr>
		<tr>
			<td color="#FF0000">bbb</td>
			<td color="#FF0000">aaaaaaaaaa</td>
			<td color="#FF0000">cccccc</td>
			<td color="#FF0000">eeeeeeeee</td>
		</tr>
	</table>

Subtype:
-------------
Parameter:
[Data URL]		needs a xml-format file, it will be import as the table's data source
[Subtype]		specify the subtype(radar/line/histogram/pie)
[Opacity]		set the opacityof the graph
[Font]			font face
[Font Size]		font size
[Font Color]		font color
[Line Color]		set the axis line color or border color of the graph

Method:
- instancename.readData(url)
	[instancename]		name of the instance of the component
	[url]			data file's url
	sample:			xxx.readData('subtype.xml')

- instancename.drawGraph(subtype)
	[subtype]		string, subtype of the data
	sample 1:		xxx.drawGraph('line')
	sample 2:		xxx.drawGraph('histogram')
	sample 3:		xxx.drawGraph('pie')
	sample 4:		xxx.drawGraph('radar')

Data file format:
	<root>
		<base>
			<data	value="Jan"		<-- required, set text of field
				color="0x00CC00"	<-- only required under "pie" mode
				/>
			<data value="Feb" color="0x0000CC"/>
			<data value="Mar" color="0xCC0000"/>
			<data value="Apr" color="0x00CCCC"/>
			<data value="May" color="0xCCCC00"/>
		</base>
		<record		value="2003"		<-- only required under "pie" mode
				color="0x333333"	<-- optional, set fill color, default to black
				>
			<data	value="30"		<-- required, data value
				/>
			<data value="40"/>
			<data value="20"/>
			<data value="20"/>
			<data value="85"/>
		</record>
	</root>