<html>
<head>
<link type="text/css" href="gadget-color-picker.css" rel="stylesheet">
</head>
<body>
<h2> Color picker</h2>
<div class="body">
<a href="#unknown">Wrong global route</a>
<ul style="list-style: none;">
<li><a href="#/color/0/0/0/" class="list-item" style="background-color:rgb(0,0,0);"> </a></li>
<li><a href="#/color/0/0/150/" class="list-item" style="background-color:rgb(0,0,150);"> </a></li>
<li><a href="#/color/0/150/0/" class="list-item" style="background-color:rgb(0,150,0);"> </a></li>
<li><a href="#/color/0/150/150/" class="list-item" style="background-color:rgb(0,150,150);"> </a></li>
<li><a href="#/color/150/0/0/" class="list-item" style="background-color:rgb(150,0,0);"> </a></li>
<li><a href="#/color/150/0/150/" class="list-item" style="background-color:rgb(150,0,150);"> </a></li>
<li><a href="#/color/150/150/0/" class="list-item" style="background-color:rgb(150,150,0);"> </a></li>
<li><a href="#/color/150/150/150/" class="list-item" style="background-color:rgb(150,150,150);"> </a></li>
<li style="text-align: center;"><a href="#/color/X/X/X" style="text-decoration: none; display: block; width: 2em;">XXX</a></li>
</ul>
<div class="select-color" style="display: block;">Unknown color (/color/)</div>
<a href="#/gadget-one/">Gadget 1</a> <a href="#/gadget-two/">Gadget 2</a>
<div class="container"></div>
</div>
<script type="text/javascript" language="javascript">
//<![CDATA[
$(document).ready(function() {
gadget = RenderJs.getSelfGadget();
// define entry point which handles an url
gadget.render = function (){
var handler_func;
// Default route. Redirect to color subapp
RenderJs.RouteGadget.add("",
function () {$.url.redirect('/color/');},
1);
handler_func = function () {
// Create sub routed in the container
RenderJs.RouteGadget.add("/color/",
function () {
$('.select-color').text("Please select a color");},
2);
RenderJs.RouteGadget.add("/color/<int:red>/<int:green>/<int:blue>/",
function (red, green, blue) {
$('.select-color').html(
"<div style='background-color:rgb(" + red + "," + green + "," + blue + ");'> <\/div>" +
"<p>Color (" + red + "," + green + "," + blue + ") selected at " + new Date() + "<\/p>");},
2);
RenderJs.RouteGadget.go($.url.getPath(),
function () {
$('.select-color').html("Unknown color (" + $.url.getPath() + ")");},
2);
};
// /color app. Create subroutes and initialize DOM
RenderJs.RouteGadget.add("/color<path:params>", handler_func, 1);
};
});
//]]>
</script>
</body>
</html>