<animation>
<title>Splitted</title>
<style>
<!--
-->
</style>
<script>
<![CDATA[

var splitted_do={

update_all_split:function()
{
var d=new Date();
var dnum=d.getMonth()+""+d.getDay()+""+d.getHours()+""+d.getMinutes()+""+d.getSeconds()+""+d.getMilliseconds();
var datenow=d.getHours()+"."+d.getMinutes()+"."+d.getSeconds();

/* The xin.loadtarget() function is the same as the attribute 'load' - see buttons below */

if(document.getElementById('splitted_1')){xin.loadtarget("","","setStyle('color','gray',splitted_1.firstChild)","splitted_1","splitted_1");}
if(document.getElementById('splitted_2')){xin.loadtarget("","","setStyle('color','gray',splitted_2.firstChild)","splitted_2","splitted_2");}
if(document.getElementById('splitted_3')){xin.loadtarget("","","setStyle('color','gray',splitted_3.firstChild)","splitted_3","splitted_3");}
if(document.getElementById('comments')){xin.loadtarget("","","appendToTop(comments, '_span_ "+datenow+" _/span_: widget_login: Resetting split example.',10)","comments","chatty",2);}
}


}

function init_splitted()
{
xin.widget_call('http://www.naltabyte.se/widgets/chatty.xml','','comments','chatty',2);
}

]]>
</script>


<div id="splitted">
<button style="border:silver 1px solid;margin:1px;background-color:white;color:black;text-decoration:none;font-family:verdana;font-size:12" load="setStyle('color','blue',splitted_1.firstChild)" box="splitted_1">Click 1</button>
<button style="border:silver 1px solid;margin:1px;background-color:white;color:black;text-decoration:none;font-family:verdana;font-size:12" load="setStyle('color','orange',splitted_2.firstChild)" box="splitted_2">Click 2</button>
<button style="border:silver 1px solid;margin:1px;background-color:white;color:black;text-decoration:none;font-family:verdana;font-size:12" load="setStyle('color','red',splitted_3.firstChild)" box="splitted_3">Click 3</button>
<button style="border:silver 1px solid;margin:1px;background-color:white;color:black;text-decoration:none;font-family:verdana;font-size:12" onmousedown="splitted_do.update_all_split()">Reset</button>
<div style="color:gray;font-family:verdana;font-size:10px">(System messages)</div>
<div id="comments" style="margin:5px;margin-top:20px;text-align:left;width:300px;overflow:hidden">
</div>
</div>

<div id="splitted_1">
<span style="color:gray;font-size:14px;font-weight:bold;font-family:verdana">Hello world 1</span>
</div>

<div id="splitted_2">
<span style="color:gray;font-size:14px;font-weight:bold;font-family:verdana">Hello world 2</span>
</div>

<div id="splitted_3">
<span style="color:gray;font-size:14px;font-weight:bold;font-family:verdana">Hello world 3</span>
</div>


</animation>