<?xml version="1.0" encoding="UTF-8" ?>
<application id="main">
<container type="separatorContainer" width="max" height="max" mode="vertical" auto="yes">
<zone id="header" size="45">
<element id="header_content" type="htmlElement" classname="maintitle" left="0" top="*" height="28"><![CDATA[
<img src="../../skins/images/wa5.gif" style="vertical-align: middle; height: 27px; margin-right: 10px;" alt="WAJAF v1 Examples" title="WAJAF v1 Examples" />
The WAJAF Examples - <span id="wajafversion" class="alttitle"></span> - Control Center with XML files.]]>
</element>
<element id="timer" type="htmlElement" classname="timertitle" width="300" height="20" right="150" top="28"></element>
<element id="ajaxflag" type="htmlElement" classname="flaggreen" width="16" height="10" right="50" top="5">
<help>
<summary><![CDATA[Ajax Status flag]]></summary>
<title><![CDATA[Ajax Status flag]]></title>
<description><![CDATA[The flag is green when there is no AJAX request.<br />If there is an AJAX request on the go, the flag turns red during the request.<br />]]></description>
</help>
</element>
<element id="ddflag" type="htmlElement" classname="flaggreen" width="16" height="10" right="30" top="5">
<help>
<summary><![CDATA[Drag&Drop Status flag]]></summary>
<title><![CDATA[Drag&Drop Status flag]]></title>
<description><![CDATA[The flag is green when there is no D&D movement.<br />If there is a D&D movement on the go, the flag turns red during the dragging.<br />]]></description>
</help>
</element>
<element id="debugbutton" type="htmlElement" classname="flagyellow" width="16" height="10" right="10" top="5">
<event type="onclick">
<code><![CDATA[
function(e)
{
var popupdebug = window.open('', 'debug', 'scrollbars=1,width=400,height=600');
popupdebug.moveTo(0,0);
WA.debug.console = popupdebug.document;
}
]]></code>
</event>
<help>
<summary><![CDATA[Click to open the debug console]]></summary>
<title><![CDATA[Debug console]]></title>
<description><![CDATA[You can click on this button to open the debug console.<br />The debug console is a popup window. Be sure the popups are authorized in your browser to let it appear.]]></description>
</help>
</element>
<element id="myconfig" type="htmlElement" classname="buttonmenuconfig" width="16" height="16" right="50" top="25">
<event type="onclick">
<code><![CDATA[
function(e)
{
var node = this._4gl.app.getNode('app_config');
if (!node)
{
this._4gl.app.getNode('application').newZone('app_config', 'Configuration', undefined, undefined, 'config|single', 'yes', 'alt+c');
}
this._4gl.app.getNode('application').activateZone('app_config');
}
]]></code>
</event>
<help>
<summary><![CDATA[Click here to open the configuration screen]]></summary>
<title><![CDATA[Configuration]]></title>
<description><![CDATA[You can access the configuration screen click on this button.<br />You can change here the skin of the examples dynamically.]]></description>
</help>
</element>
<element id="help_header" type="htmlElement" classname="buttonmenuhelpfull" width="16" height="16" right="30" top="25">
<event type="onclick">
<code><![CDATA[
function(e)
{
switch (WA.Managers.help.getMode())
{
case 2: setHelp(0); break;
case 1: setHelp(2); break;
case 0: setHelp(1); break;
}
}
]]></code>
</event>
<help>
<summary><![CDATA[Click to change the help status. Wait on the icon to get more information if the help is turned on full status.]]></summary>
<title><![CDATA[Help level:]]></title>
<description><![CDATA[This option let you change the interactive help status of the system.<br />
The icon <img src="../../skins/images/help-light.png" alt="Over help" title="Over help" style="vertical-align: middle;" /> is shown when the help is only showing a hint on the element.<br />
The icon <img src="../../skins/images/help-on.png" alt="Full help" title="Full help" style="vertical-align: middle;" /> is shown when the interactive help is in full mode. In this case, put the mouse over an element first show a rapid hint, and waiting 4 seconds will pop a help window that can be navigated.<br />
The icon <img src="../../skins/images/help-off.png" alt="No help" title="No help" style="vertical-align: middle;" /> desactivates all the help.<br />
Click on the icon to switch the interactive help mode to hint/full/none.]]></description>
</help>
</element>
<element id="sound_header" type="htmlElement" classname="buttonmenusoundon" width="16" height="16" right="10" top="25">
<event type="onclick">
<code><![CDATA[
function(e)
{
if (WA.Managers.sound.on)
setSound(false);
else
setSound(true);
}
]]></code>
</event>
<help>
<summary><![CDATA[Click to change the sound status On or Off.]]></summary>
<title><![CDATA[Sound on/off:]]></title>
<description><![CDATA[This option let you turn the sound of the system on or off.<br />
The icon <img src="../../skins/images/sound-on.png" alt="Sound On" title="Sound On" style="vertical-align: middle;" /> is shown when the sound is working.<br />
The icon <img src="../../skins/images/sound-off.png" alt="Sound Off" title="Sound Off" style="vertical-align: middle;" /> is shown when the sound is turned off.<br />
Click on the icon to switch the sound on or off.]]></description>
</help>
</element>
</zone>
<zone id="workarea" size="*">
<container type="separatorContainer" width="max" height="max" mode="horizontal">
<zone size="200" style="margin-left: 0px; margin-top: 0px;">
<container id="menu" type="treeContainer">
<template name="folder">
<element type="imageElement" classname="imagemenu" width="16" height="16" src="../../skins/images/{image}"><![CDATA[{name}]]></element>
<element type="textElement" classname="textmenulink"><![CDATA[{name}]]>
<help>
<summary>Click to open/close the folder</summary>
<title>Folder:</title>
<description>Click the name or the icon to open and close the folder.</description>
</help>
<event type="onclick">
<code><![CDATA[
function(e)
{
var n = this._4gl.app.getNode('menu');
n.switchzone('{id}');
}
]]></code>
</event>
</element>
</template>
<template name="example">
<element type="imageElement" classname="imagemenu" width="16" height="16" src="../../skins/images/{image}"><![CDATA[{name}]]></element>
<element type="textElement" classname="textmenulink"><![CDATA[{name}]]>
<help>
<summary>Click to access the example</summary>
<title>Example:</title>
<description>Click the name of the example to open it in the tabs in the right part of the viewport.</description>
</help>
<event type="onclick">
<code><![CDATA[
function(e)
{
var node = this._4gl.app.getNode('app_example_{id}');
if (!node)
{
var tree = {tag:'zone',attributes:{id:'app_example_{id}',title:'{name}',closeable:'yes'},children:[{tag:'container',attributes:{id:'app_example_{id}_tc',type:'tabContainer',mode:'top',width:'max',height:'max'},children:[{tag:'zone',attributes:{title:'Result',closeable:'no',application:'{id}|single',params:''}},{tag:'zone',attributes:{title:'Source code',closeable:'no',application:'{id}|source',params:'Source=true'}}]}]};
this._4gl.app.createTree('application', tree);
}
this._4gl.app.getNode('application').activateZone('app_example_{id}');
}
]]></code>
</event>
</element>
</template>
<dataset>
{row:[
{id:'combined', template:'folder', image:'examplegroup.png', name:'Combined', father: null, closeable: true, loadable: false},
{id:'ex_groupContainer', template:'example', image:'example.png', name:'groupContainer', father: 'combined', closeable: false, loadable: false},
{id:'ex_gridContainerSimple', template:'example', image:'example.png', name:'gridContainerSimple', father: 'combined', closeable: false, loadable: false},
{id:'ex_gridContainer', template:'example', image:'example.png', name:'gridContainer', father: 'combined', closeable: false, loadable: false},
// {id:'ex_email', template:'example', image:'example.png', name:'EMail interface', father: 'combined', closeable: false, loadable: false},
// {id:'ex_explorer', template:'example', image:'example.png', name:'Files explorer', father: 'combined', closeable: false, loadable: false},
// {id:'ex_rssfeed', template:'example', image:'example.png', name:'RSS Feeds', father: 'combined', closeable: false, loadable: false},
// {id:'ex_elementlab', template:'example', image:'example.png', name:'Element Lab', father: 'combined', closeable: false, loadable: false},
// {id:'ex_containerlab', template:'example', image:'example.png', name:'Container Lab', father: 'combined', closeable: false, loadable: false},
{id:'containers', template:'folder', image:'examplegroup.png', name:'Containers', father: null, closeable: true, loadable: false},
{id:'ex_simpleContainer', template:'example', image:'example.png', name:'simpleContainer', father: 'containers', closeable: false, loadable: false},
{id:'ex_separatorContainer', template:'example', image:'example.png', name:'separatorContainer', father: 'containers', closeable: false, loadable: false},
{id:'ex_tabContainer', template:'example', image:'example.png', name:'tabContainer', father: 'containers', closeable: false, loadable: false},
// {id:'ex_expandableContainer', template:'example', image:'example.png', name:'expandableContainer', father: 'containers', closeable: false, loadable: false},
// {id:'ex_treeContainer', template:'example', image:'example.png', name:'treeContainer', father: 'containers', closeable: false, loadable: false},
// {id:'ex_dommaskContainer', template:'example', image:'example.png', name:'dommaskContainer', father: 'containers', closeable: false, loadable: false},
{id:'elements', template:'folder', image:'examplegroup.png', name:'Elements', father: null, closeable: true, loadable: false},
{id:'ex_htmlElement', template:'example', image:'example.png', name:'htmlElement', father: 'elements', closeable: false, loadable: false},
{id:'ex_textElement', template:'example', image:'example.png', name:'textElement', father: 'elements', closeable: false, loadable: false},
// {id:'ex_imageElement', template:'example', image:'example.png', name:'imageElement', father: 'elements', closeable: false, loadable: false},
{id:'ex_buttonElement', template:'example', image:'example.png', name:'buttonElement', father: 'elements', closeable: false, loadable: false}
]}
</dataset>
</container>
</zone>
<zone size="*" style="border: 0px; background-color: transparent; margin-left: 0px; margin-top: 0px;">
<container id="application" type="tabContainer" width="max" height="max" mode="top">
<zone id="controlcenter" title="Dash Board">
<element type="htmlElement" classname=""><![CDATA[Welcome to the WebAbility Javascript Application Framework - WAJAF - v1.<br /><br />The examples work perfectly under Firefox 3+, Chrome 1+, Safari 4+, Opera 10+ and Internet Explorer 7/8.<br /><br />
The whole examples are build on <b>XML files describing the applications</b>.<br />You can display the XML code on each example.<br /><br />]]>
</element>
<element type="buttonElement">Show the viewport source code
<event type="click">
<code><![CDATA[
function(e)
{
var node = this.app.getNode('viewport_source');
if (!node)
{
this.app.getNode('application').newZone('viewport_source', 'Viewport Source', undefined, undefined, 'main|source', 'yes', 'alt+c', 'Source=true');
}
this.app.getNode('application').activateZone('viewport_source');
}
]]></code>
</event>
</element>
<element type="buttonElement">Reload the menu tree at the left
<event type="click">
<code><![CDATA[
function(e)
{
WA.$N('menu').reload();
}
]]></code>
</event>
</element>
</zone>
</container>
</zone>
</container>
</zone>
<zone id="footer" size="30">
<element id="footer_content" type="htmlElement" classname="footertitle" anchorleft="0" left="0" top="*"><![CDATA[WAJAF - The WebAbility® Javascript Application Framework - © 2008-2012 Philippe Thomassigny - <a href="http://www.webability.info/?P=wajaf" target="_blank">http://www.webability.info/?P=wajaf</a>]]>
</element>
</zone>
</container>
<element type="codeElement"><![CDATA[
function addzero(num)
{
if (num < 10)
return '0' + num;
return num;
}
function timer()
{
var fecha=new Date();
WA.browser.setInnerHTML(WA.toDOM('main|single|timer'), WA.Date.format(fecha, 'l, F j, Y, H:i:s'));
setTimeout( function() { timer(); }, 1000 );
}
function setSound(status)
{
WA.Managers.sound.on = status;
if (status)
WA.toDOM('main|single|sound_header').className = 'buttonmenusoundon';
else
WA.toDOM('main|single|sound_header').className = 'buttonmenusoundoff';
}
function setHelp(status)
{
switch (status)
{
case 0:
WA.Managers.help.switchOff();
WA.toDOM('main|single|help_header').className = 'buttonmenuhelpmute';
break;
case 1:
WA.Managers.help.switchAlt();
WA.toDOM('main|single|help_header').className = 'buttonmenuhelp';
break;
case 2:
WA.Managers.help.switchOn();
WA.toDOM('main|single|help_header').className = 'buttonmenuhelpfull';
break;
}
}
var numajax = 0;
function ajaxListener(event)
{
if (event == 'start')
numajax ++;
else if (event == 'stop')
numajax --;
if (numajax > 0)
WA.toDOM('main|single|ajaxflag').className = 'flagred';
else
WA.toDOM('main|single|ajaxflag').className = 'flaggreen';
}
function ddListener(event)
{
if (event == 'start' || event == 'drag')
WA.toDOM('main|single|ddflag').className = 'flagred';
else if (event == 'stop')
WA.toDOM('main|single|ddflag').className = 'flaggreen';
}
]]></element>
<event type="start">
<code><![CDATA[
function()
{
WA.browser.setInnerHTML(WA.toDOM('wajafversion'), WA.version);
timer();
WA.Managers.ajax.setListener(ajaxListener);
WA.Managers.dd.setListener(ddListener);
WA.toDOM('loading').style.display = 'none';
}
]]></code>
</event>
<element id="colortheme" type="htmlElement" style="display: none;"><![CDATA[
<!-- color Popup picker -->
<div id="colorpicker" style="background-color: #ffffff; width: 245px; position: absolute;">
<table cellpadding="1" cellspacing="3" border="1" bordercolor="#000000" width="245">
<tr>
<td id="pickerview" width="30%" height="20" style="font-family: Arial; font-size: 12px; cursor: move;"> </td>
<td id="pickername" width="70%" height="20" style="font-family: Arial; font-size: 12px; cursor: move;"> </td>
</tr>
</table>
<table cellpadding="1" cellspacing="3" border="1" bordercolor="#000000" width="245">
<tr>
<td id="picker1" style="background-color: black; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker2" style="background-color: silver; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker3" style="background-color: gray; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker4" style="background-color: white; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker5" style="background-color: maroon; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker6" style="background-color: red; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker7" style="background-color: purple; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker8" style="background-color: fuchsia; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker9" style="background-color: green; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker10" style="background-color: lime; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker11" style="background-color: olive; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker12" style="background-color: yellow; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker13" style="background-color: navy; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker14" style="background-color: blue; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker15" style="background-color: teal; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker16" style="background-color: aqua; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
</tr>
</table>
<table cellpadding="1" cellspacing="3" border="1" bordercolor="#000000" width="245">
<tr>
<td id="picker17" style="background-color: #000000; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker18" style="background-color: #111111; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker19" style="background-color: #222222; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker20" style="background-color: #333333; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker21" style="background-color: #444444; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker22" style="background-color: #555555; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker23" style="background-color: #666666; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker24" style="background-color: #777777; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker25" style="background-color: #888888; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker26" style="background-color: #999999; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker27" style="background-color: #aaaaaa; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker28" style="background-color: #bbbbbb; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker29" style="background-color: #cccccc; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker30" style="background-color: #dddddd; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker31" style="background-color: #eeeeee; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker32" style="background-color: #ffffff; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
</tr>
<tr>
<td id="picker33" style="background-color: #330000; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker34" style="background-color: #550000; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker35" style="background-color: #770000; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker36" style="background-color: #990000; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker37" style="background-color: #bb0000; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker38" style="background-color: #dd0000; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker39" style="background-color: #ff0000; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker40" style="background-color: #ff2222; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker41" style="background-color: #ff4444; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker42" style="background-color: #ff6666; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker43" style="background-color: #ff8888; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker44" style="background-color: #ffaaaa; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker45" style="background-color: #ffbbbb; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker46" style="background-color: #ffcccc; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker47" style="background-color: #ffdddd; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker48" style="background-color: #ffeeee; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
</tr>
<tr>
<td id="picker49" style="background-color: #003300; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker50" style="background-color: #005500; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker51" style="background-color: #007700; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker52" style="background-color: #009900; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker53" style="background-color: #00bb00; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker54" style="background-color: #00dd00; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker55" style="background-color: #00ff00; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker56" style="background-color: #22ff22; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker57" style="background-color: #44ff44; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker58" style="background-color: #66ff66; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker59" style="background-color: #88ff88; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker60" style="background-color: #aaffaa; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker61" style="background-color: #bbffbb; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker62" style="background-color: #ccffcc; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker63" style="background-color: #ddffdd; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker64" style="background-color: #eeffee; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
</tr>
<tr>
<td id="picker65" style="background-color: #000033; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker66" style="background-color: #000055; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker67" style="background-color: #000077; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker68" style="background-color: #000099; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker69" style="background-color: #0000bb; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker70" style="background-color: #0000dd; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker71" style="background-color: #0000ff; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker72" style="background-color: #2222ff; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker73" style="background-color: #4444ff; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker74" style="background-color: #6666ff; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker75" style="background-color: #8888ff; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker76" style="background-color: #aaaaff; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker77" style="background-color: #bbbbff; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker78" style="background-color: #ccccff; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker79" style="background-color: #ddddff; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker80" style="background-color: #eeeeff; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
</tr>
<tr>
<td id="picker81" style="background-color: #003333; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker82" style="background-color: #005555; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker83" style="background-color: #007777; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker84" style="background-color: #009999; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker85" style="background-color: #00bbbb; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker86" style="background-color: #00dddd; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker87" style="background-color: #00ffff; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker88" style="background-color: #22ffff; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker89" style="background-color: #44ffff; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker90" style="background-color: #66ffff; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker91" style="background-color: #88ffff; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker92" style="background-color: #aaffff; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker93" style="background-color: #bbffff; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker94" style="background-color: #ccffff; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker95" style="background-color: #ddffff; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker96" style="background-color: #eeffff; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
</tr>
<tr>
<td id="picker97" style="background-color: #330033; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker98" style="background-color: #550055; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker99" style="background-color: #770077; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker100" style="background-color: #990099; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker101" style="background-color: #bb00bb; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker102" style="background-color: #dd00dd; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker103" style="background-color: #ff00ff; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker104" style="background-color: #ff22ff; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker105" style="background-color: #ff44ff; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker106" style="background-color: #ff66ff; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker107" style="background-color: #ff88ff; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker108" style="background-color: #ffaaff; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker109" style="background-color: #ffbbff; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker110" style="background-color: #ffccff; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker111" style="background-color: #ffddff; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker112" style="background-color: #ffeeff; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
</tr>
<tr>
<td id="picker113" style="background-color: #333300; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker114" style="background-color: #555500; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker115" style="background-color: #777700; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker116" style="background-color: #999900; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker117" style="background-color: #bbbb00; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker118" style="background-color: #dddd00; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker119" style="background-color: #ffff00; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker120" style="background-color: #ffff22; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker121" style="background-color: #ffff44; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker122" style="background-color: #ffff66; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker123" style="background-color: #ffff88; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker124" style="background-color: #ffffaa; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker125" style="background-color: #ffffbb; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker126" style="background-color: #ffffcc; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker127" style="background-color: #ffffdd; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker128" style="background-color: #ffffee; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
</tr>
<tr>
<td id="picker129" style="background-color: #331900; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker130" style="background-color: #552a00; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker131" style="background-color: #773b00; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker132" style="background-color: #994c00; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker133" style="background-color: #bb5e00; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker134" style="background-color: #dd6f00; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker135" style="background-color: #ff7f00; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker136" style="background-color: #ff9933; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker137" style="background-color: #ffaa55; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker138" style="background-color: #ffbb77; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker139" style="background-color: #ffcb99; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker140" style="background-color: #ffd3aa; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker141" style="background-color: #ffddbb; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker142" style="background-color: #ffe5cc; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker143" style="background-color: #ffefdd; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker144" style="background-color: #fff7ee; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
</tr>
<tr>
<td id="picker145" style="background-color: #003319; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker146" style="background-color: #00552a; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker147" style="background-color: #00773b; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker148" style="background-color: #00994c; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker149" style="background-color: #00bb5e; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker150" style="background-color: #00dd6f; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker151" style="background-color: #00ff7f; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker152" style="background-color: #33ff99; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker153" style="background-color: #55ffaa; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker154" style="background-color: #77ffbb; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker155" style="background-color: #99ffcb; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker156" style="background-color: #aaffd3; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker157" style="background-color: #bbffdd; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker158" style="background-color: #ccffe5; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker159" style="background-color: #ddffef; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker160" style="background-color: #eefff7; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
</tr>
<tr>
<td id="picker161" style="background-color: #330019; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker162" style="background-color: #55002a; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker163" style="background-color: #77003b; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker164" style="background-color: #99004c; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker165" style="background-color: #bb005e; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker166" style="background-color: #dd006f; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker167" style="background-color: #ff007f; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker168" style="background-color: #ff3399; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker169" style="background-color: #ff55aa; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker170" style="background-color: #ff77bb; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker171" style="background-color: #ff99cb; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker172" style="background-color: #ffaad3; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker173" style="background-color: #ffbbdd; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker174" style="background-color: #ffcce5; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker175" style="background-color: #ffddef; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker176" style="background-color: #ffeef7; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
</tr>
<tr>
<td id="picker177" style="background-color: #001933; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker178" style="background-color: #002a55; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker179" style="background-color: #003b77; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker180" style="background-color: #004c99; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker181" style="background-color: #005ebb; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker182" style="background-color: #006fdd; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker183" style="background-color: #007fff; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker184" style="background-color: #3399ff; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker185" style="background-color: #55aaff; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker186" style="background-color: #77bbff; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker187" style="background-color: #99cbff; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker188" style="background-color: #aad3ff; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker189" style="background-color: #bbddff; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker190" style="background-color: #cce5ff; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker191" style="background-color: #ddefff; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker192" style="background-color: #eef7ff; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
</tr>
<tr>
<td id="picker193" style="background-color: #193300; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker194" style="background-color: #2a5500; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker195" style="background-color: #3b7700; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker196" style="background-color: #4c9900; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker197" style="background-color: #5ebb00; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker198" style="background-color: #6fdd00; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker199" style="background-color: #7fff00; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker200" style="background-color: #99ff33; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker201" style="background-color: #aaff55; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker202" style="background-color: #bbff77; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker203" style="background-color: #cbff99; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker204" style="background-color: #d3ffaa; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker205" style="background-color: #ddffbb; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker206" style="background-color: #e5ffcc; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker207" style="background-color: #efffdd; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker208" style="background-color: #f7ffee; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
</tr>
<tr>
<td id="picker209" style="background-color: #190033; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker210" style="background-color: #2a0055; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker211" style="background-color: #3b0077; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker212" style="background-color: #4c0099; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker213" style="background-color: #5e00bb; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker214" style="background-color: #6f00dd; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker215" style="background-color: #7f00ff; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker216" style="background-color: #9933ff; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker217" style="background-color: #aa55ff; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker218" style="background-color: #bb77ff; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker219" style="background-color: #cb99ff; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker220" style="background-color: #d3aaff; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker221" style="background-color: #ddbbff; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker222" style="background-color: #e5ccff; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker223" style="background-color: #efddff; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker224" style="background-color: #f7eeff; width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
</tr>
</table>
<table cellpadding="1" cellspacing="3" border="1" bordercolor="#000000" width="245">
<tr>
<td id="pickernocolor" style="height: 12px; cursor: pointer; text-align: center;"> No usar color </td>
<td id="pickergorgb" style="height: 12px; cursor: pointer; text-align: center;"><b>RGB</b></td>
</tr>
</table>
</div>
<!-- end color Popup -->
<!-- RGB color Popup -->
<div id="colorrgb" style="background-color: #ffffff; display: none; width: 245px; position: absolute;">
<table cellpadding="1" cellspacing="3" border="1" bordercolor="#000000" width="245">
<tr>
<td id="rgbview" width="30%" height="20" style="font-family: Arial; font-size: 12px; cursor: move;"> </td>
<td id="rgbname" width="70%" height="20" style="font-family: Arial; font-size: 12px; cursor: move;"> </td>
</tr>
</table>
<table cellpadding="0" cellspacing="3" border="1" bordercolor="#000000" width="245">
<tr><td width="102"><table cellpadding="1" cellspacing="3" border="0" bordercolor="#000000">
<tr>
<td id="rgbred" style="cursor: crosshair; position: relative;"><img src="/pics/tools/red.jpg" width="30" height="256"></td>
<td id="rgbgreen" style="cursor: crosshair; position: relative;"><img src="/pics/tools/green.jpg" width="30" height="256"></td>
<td id="rgbblue" style="cursor: crosshair; position: relative;"><img src="/pics/tools/blue.jpg" width="30" height="256"></td>
</tr>
</table></td>
<td width="143" valign="top" style="text-align: center;">
<table cellpadding="0" cellspacing="0" border="0"><tr><td><img src="/skins/images/dot.png" height="3"></td></tr></table>
<table cellpadding="1" cellspacing="2" border="1" bordercolor="#000000">
<tr>
<td id="picker1001" style="width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker1002" style="width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker1003" style="width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker1004" style="width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker1005" style="width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker1006" style="width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker1007" style="width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker1008" style="width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
</tr><tr>
<td id="picker1009" style="width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker1010" style="width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker1011" style="width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker1012" style="width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker1013" style="width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker1014" style="width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker1015" style="width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8" height="8" alt="" /></td>
<td id="picker1016" style="width: 8px; height: 8px; cursor: pointer;"><img src="/skins/images/dot.png" width="8"></td>
</tr>
</table>
<br /><br /><br />
<table>
<tr><td style="text-align: right;">Rojo:</td><td id="rgbredvalue" width="50" style="font-weight: bold;"></td></tr>
<tr><td style="text-align: right;">Verde:</td><td id="rgbgreenvalue" width="50" style="font-weight: bold;"></td></tr>
<tr><td style="text-align: right;">Azul:</td><td id="rgbbluevalue" width="50" style="font-weight: bold;"></td></tr>
<tr><td colspan="2" style="text-align: center;">Color actual:</td></tr>
<tr><td colspan="2" id="rgbnameselected" style="text-align: center; font-weight: bold;"> </td></tr>
<tr><td colspan="2" id="rgbcolorselected" style="text-align: center; cursor: pointer;"> </td></tr>
<tr><td colspan="2" style="text-align: center; font-size: 8px;">(Click para seleccionar)</td></tr>
</table>
</td>
</tr>
</table>
<table cellpadding="1" cellspacing="3" border="1" bordercolor="#000000" width="245" bgcolor="#ffffff">
<tr>
<td id="rgbnocolor" style="height: 12px; cursor: pointer; text-align: center;"> No usar color</td>
<td id="rgbgopicker" style="height: 12px; cursor: pointer; text-align: center;"><b>Colores</b></td>
</tr>
</table>
</div>
<!-- end RGB color Popup -->
]]>
</element>
</application>
|
Download
