Anonymous avatar Anonymous committed b88f29a Merge

fix conflict old file

Comments (0)

Files changed (45)

 .DS_Store
-test/*
 commit.sh
 js/*.html
 bugs/*

README.html

-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
-<html>
-	<head>
-		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
-		<title>PURE Unobtrusive Rendering Engine for HTML - README.html</title>
-	</head>
-	<body><pre>
-<h1>PURE</h1>
-
-<h2>PURE Unobtrusive Rendering Engine for HTML</h2>
-
-PURE Website: <a href="http://beebole.com/pure/" target="_blank">http://beebole.com/pure/</a><br />
-
-<h3>What is PURE about?</h3>
-<ul><li>Build and render your templates with HTML, CSS and JavaScript, nothing else.</li>
-<li>Unobtrusive, the HTML remains absolutely untouched.</li>
-<li>As a result, any part of your HTML document can become a template.</li>
-<li>Fast, templates are compiled from HTML to Javascript for blazing rendering speed.</li>
-<li>Runs on the browser side.</li>
-<li>JSON data support.</li>
-<li>Can be used as a jQuery plugin.</li>
-<li>Open Source, and released under the MIT License. It means you can use it and modify it as much as you want and where you want.</li>
-</ul>
-<h3>PROJECT TEAM</h3>
-Mic Cvilic<br />
-Hughes Waroquier<br />
-Yves Hiernaux<br />
-guest: Seb Cvilic<br />
-
-<h3>COPYRIGHT</h3>
-Copyright (C) 2008 Michael Cvilic - BeeBole.  All Rights Reserved
-
-PURE is an Open Source Software. You can redistribute  and/or modify it under the terms of the MIT Licence.
-
-	</body>
-</html>

docs/allExamples-for-DOMAssistant.html

-<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns:pure="http://beebole.com/pure" xmlns="http://www.w3.org/1999/xhtml"><head>
-
-	
-		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-		<title>The Features of PURE Unobtrusive Rendering Engine for HTML</title>
-	    <link href="css/white.css" rel="stylesheet" type="text/css">
-		<script type="text/javascript" src="../js/DOMAssistant.js"></script>
-		<script type="text/javascript" src="../js/pure.js"></script>
-		<script type="text/javascript" src="js/allExamples-for-DOMAssistant.js"></script>
-	</head><body class="allExamples">
-		<!-- 
-	/* * * * * * * * * * * * * * * * * * * * * *
-	 *     E X A M P L E      1 
-	 * * * * * * * * * * * * * * * * * * * * * */			
-		-->
-		<h1>What are the features available in PURE today ?</h1>
-		This page groups all the features available in the last release.<br>
-		Click the render buttons to see the result.<br>
-		Look at the source of the page to see comments and usage or <a href="http://github.com/pure/pure/wikis/">have a look at the wiki</a>.
-		<h3>Example 1: Hello Who?</h3>
-		<div class="demo">
-			<input onclick="clickButton(this, render1);" value="render" type="button">
-			<div class="htmlDoc">
-				<div id="hello">
-					Hello <span class="who">World</span>
-				</div>
-			</div>
-			<div id="target1"></div>
-		</div>
-		<!-- 
-	/* * * * * * * * * * * * * * * * * * * * * *
-	 *     E X A M P L E      2 
-	 * * * * * * * * * * * * * * * * * * * * * */			
-		-->
-		<h3>Example 2: Iteration on a Table</h3>
-		<div class="demo">
-			<div class="htmlDoc">
-				<input onclick="clickButton(this, render2);" value="render" type="button">
-				<table class="players 1">
-					<thead>
-						<tr><th class="player">Player</th></tr>
-					</thead>
-					<tbody>
-						<tr class="context">
-							<td class="player context">Chloe</td>
-						</tr>
-					</tbody>
-				</table>
-			</div>
-		</div>
-		<!-- 
-	/* * * * * * * * * * * * * * * * * * * * * *
-	 *     E X A M P L E      3 
-	 * * * * * * * * * * * * * * * * * * * * * */			
-		-->
-		<h3>Example 3: Iteration on a List</h3>
-		<div class="demo">
-			<div class="htmlDoc">
-				<input onclick="clickButton(this, render3);" value="render" type="button">
-				<!-- note the notation "data property"@"attribute name"-->
-				<ol class="teamList id@id">
-					<li class="player sites"><a class="name url@href" href="http://beebole.com/">Beebole</a></li>
-				</ol>
-			</div>
-		</div>
-		<!-- 
-	/* * * * * * * * * * * * * * * * * * * * * *
-	 *     E X A M P L E      4 
-	 * * * * * * * * * * * * * * * * * * * * * */			
-		-->
-		<h3>Example 4: Passing JS Functions as a Directive (Iteration on a table zebra like and attach events)</h3>
-		<div class="demo">
-			<div class="htmlDoc">
-				<p>Works only on an http server</p>
-				<input id="b4_1" onclick="clickButton(this, render4, '#b4_2');" value="render" type="button">
-				<input id="b4_2" onclick="clickButton(this, render4, '#b4_1');" value="render with 500 lines..." type="button">
-				<table class="players 2">
-					<thead>
-						<tr>
-							<th class="player">Player</th>
-						</tr>
-					</thead>
-					<tbody>
-						<tr class="context">
-							<td class="player context">Chloe</td>
-						</tr>
-					</tbody>
-				</table>
-			</div>
-			In addition to the zebra iteration, this example shows a way to attach events by a directive.<br>
-			To see those events, mouse-over the lines of the rendered table, and click on a line.<br>
-		</div>
-		<!-- 
-	/* * * * * * * * * * * * * * * * * * * * * *
-	 *     E X A M P L E      5 
-	 * * * * * * * * * * * * * * * * * * * * * */			
-		-->
-		<h3>Example 5: Nested Iteration</h3>
-		This was not explained in the examples. The objective here is to have a double iteration. First on teams, then on players.<br>
-		It shows the nested iteration and as well how a template can be included in another.
-		<div class="demo">
-			<div class="htmlDoc">
-				<input onclick="clickButton(this, render5);" value="render" type="button">
-				<table class="scoreBoard">
-					<tbody>
-						<tr>
-							<td class="teamName">Team Name</td>
-								<td class="teamPlace">
-								<table class="teamList">
-									<thead>
-										<tr><th class="position">Position</th><th class="player">Player</th><th class="score">Score</th></tr>
-									</thead>
-									<tbody>
-										<tr><td class="position">1</td><td class="player">Chloe</td><td class="score">20</td></tr>
-									</tbody>
-								</table>
-							</td>
-						</tr>
-					</tbody>
-				</table>
-			</div>
-			<div class="transformation">
-				<div id="render5"></div>
-			</div>
-		</div>
-		<!-- 
-	/* * * * * * * * * * * * * * * * * * * * * *
-	 *     E X A M P L E      6 
-	 * * * * * * * * * * * * * * * * * * * * * */			
-		-->
-		<h3>Example 6: Recursive List</h3>
-		<div class="demo">
-			<div class="htmlDoc">
-				<input onclick="clickButton(this, render6);" value="render" type="button">
-				<ul class="treeItem">
-					<li class="children"><a class="name" href="#">name</a></li>
-				</ul>
-			</div>
-		</div>
-		
-		<!-- 
-	/* * * * * * * * * * * * * * * * * * * * * *
-	 *     Hidden templates 
-	 * * * * * * * * * * * * * * * * * * * * * */			
-		-->
-		<div class="templates">
-			<div class="timerTrace">
-				<table class="timerTraceTable">
-					<thead>
-						<tr><th class="timerMsg">(ms)</th><th class="timerDuration">Duration</th><th class="timerTime">Timer</th></tr>
-					</thead>
-					<tbody>
-						<tr class="context"><td class="timerMsg">Start</td><td class="timerDuration">0</td><td class="timerTime">0</td></tr>
-					</tbody>
-				</table>
-			</div>
-		</div>
-	</body></html>

docs/allExamples-for-Sizzle.html

-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xmlns:pure="http://beebole.com/pure">
-	<head>
-		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
-		<title>The Features of PURE Unobtrusive Rendering Engine for HTML</title>
-	    <link href="css/white.css" rel="stylesheet" type="text/css" />
-		<script type="text/javascript" src="../js/sizzle.js"></script>
-		<script type="text/javascript" src="../js/pure.js"></script>
-		<script type="text/javascript" src="js/allExamples-for-Sizzle.js"></script>
-	</head>
-	<body class="allExamples">
- 		<div class="links"><a href="allExamples.html">All Examples</a><br />
-			<a href="howToCompile.html">How to compile your html</a><br />
-			<a href="allExamplesCompiled.html">All Examples Compiled</a><br />
-			<a href="http://groups.google.com/group/Pure-Unobtrusive-Rendering-Engine/post">Post</a> or <a href="mailto:Pure-Unobtrusive-Rendering-Engine@googlegroups.com">mail us</a><br /> your feedback
-		</div>
-		<!-- 
-	/* * * * * * * * * * * * * * * * * * * * * *
-	 *     E X A M P L E      1 
-	 * * * * * * * * * * * * * * * * * * * * * */			
-		-->
-		<h1>What are the features available in PURE today ?</h1>
-		This page groups all the features available in the last release.<br />
-		Click the render buttons to see the result.<br />
-		Look at the source of the page to see comments and usage or <a href="http://github.com/pure/pure/wikis/">have a look at the wiki</a>.
-		<h3>Example 1: Hello Who?</h3>
-		<div class="demo">
-			<input type="button" onclick="clickButton(this, render1);" value="render" />
-			<div class="htmlDoc">
-				<div id="hello">
-					Hello <span class="who">World</span>
-				</div>
-			</div>
-			<div id="target1"></div>
-		</div>
-		<!-- 
-	/* * * * * * * * * * * * * * * * * * * * * *
-	 *     E X A M P L E      2 
-	 * * * * * * * * * * * * * * * * * * * * * */			
-		-->
-		<h3>Example 2: Iteration on a Table</h3>
-		<div class="demo">
-			<div class="htmlDoc">
-				<input type="button" onclick="clickButton(this, render2);" value="render" />
-				<table id="players1" class="players 1">
-					<thead>
-						<tr><th class="player">Player</th></tr>
-					</thead>
-					<tbody>
-						<tr class="context">
-							<td class="player context">Chloe</td>
-						</tr>
-					</tbody>
-				</table>
-			</div>
-		</div>
-		<!-- 
-	/* * * * * * * * * * * * * * * * * * * * * *
-	 *     E X A M P L E      3 
-	 * * * * * * * * * * * * * * * * * * * * * */			
-		-->
-		<h3>Example 3: Iteration on a List</h3>
-		<div class="demo">
-			<div class="htmlDoc">
-				<input type="button" onclick="clickButton(this, render3);" value="render" />
-				<!-- note the notation "data property"@"attribute name"-->
-				<ol id="siteList" class="teamList id@id">
-					<li class="player sites"><a class="name url@href" href="http://beebole.com">Beebole</a></li>
-				</ol>
-			</div>
-		</div>
-		<!-- 
-	/* * * * * * * * * * * * * * * * * * * * * *
-	 *     E X A M P L E      4 
-	 * * * * * * * * * * * * * * * * * * * * * */
-		-->
-		<h3>Example 4: Passing JS Functions as a Directive (Iteration on a table zebra like and attach events)</h3>
-		<div class="demo">
-			<div class="htmlDoc">
-				<input id="b4_1" type="button" onclick="clickButton(this, render4, '#b4_2');" value="render" />
-				<input id="b4_2" style="display:none" type="button" onclick="clickButton(this, render4, '#b4_1');" value="render with 500 lines..." />
-				<div class="timer"></div>
-				<table id="players2" class="players 2">
-					<thead>
-						<tr>
-							<th class="player">Player</th>
-						</tr>
-					</thead>
-					<tbody>
-						<tr class="context">
-							<td class="player context">Chloe</td>
-						</tr>
-					</tbody>
-				</table>
-			</div>
-			In addition to the zebra iteration, this example shows a way to attach events by a directive.<br />
-			To see those events, mouse-over the lines of the rendered table, and click on a line.<br/>
-		</div>
-		<!-- 
-	/* * * * * * * * * * * * * * * * * * * * * *
-	 *     E X A M P L E      5 
-	 * * * * * * * * * * * * * * * * * * * * * */			
-		-->
-		<h3>Example 5: Nested Iteration</h3>
-		This was not explained in the examples. The objective here is to have a double iteration. First on teams, then on players.<br />
-		It shows the nested iteration and as well how a template can be included in another.
-		<div class="demo">
-			<div class="htmlDoc">
-				<input type="button" onclick="clickButton(this, render5);" value="render" />
-				<table class="scoreBoard">
-					<tbody>
-						<tr>
-							<td class="teamName">Team Name</td>
-							<td class="teamPlace">
-								<table class="teamList">
-									<thead>
-										<tr><th class="position">Position</th><th class="player">Player</th><th class="score">Score</th></tr>
-									</thead>
-									<tbody>
-										<tr class="row"><td class="position">P</td><td class="player">Chloe</td><td class="score">20</td></tr>
-									</tbody>
-								</table>
-							</td>
-						</tr>
-					</tbody>
-				</table>
-			</div>
-			<div class="transformation">
-				<div id="render5"></div>
-			</div>
-		</div>
-		<!-- 
-	/* * * * * * * * * * * * * * * * * * * * * *
-	 *     E X A M P L E      6 
-	 * * * * * * * * * * * * * * * * * * * * * */			
-		-->
-		<h3>Example 6: Recursive List</h3>
-		<div class="demo">
-			<div class="htmlDoc">
-				<input type="button" onclick="clickButton(this, render6);" value="render" />
-				<ul class="treeItem">
-					<li class="children"><a class="name" href="#">name</a></li>
-				</ul>
-			</div>
-		</div>
-		
-		<!-- 
-	/* * * * * * * * * * * * * * * * * * * * * *
-	 *     Hidden templates 
-	 * * * * * * * * * * * * * * * * * * * * * */			
-		-->
-		<div class="templates">
-			<div class="timerTrace">
-				<table class="timerTraceTable">
-					<thead>
-						<tr><th class="timerMsg">(ms)</th><th class="timerDuration">Duration</th><th class="timerTime">Timer</th></tr>
-					</thead>
-					<tbody>
-						<tr class="context"><td class="timerMsg">Start</td><td class="timerDuration">0</td><td class="timerTime">0</td></tr>
-					</tbody>
-				</table>
-			</div>
-		</div>
-	</body>
-</html>

docs/allExamples-for-mootools.html

-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xmlns:pure="http://beebole.com/pure">
-	<head>
-		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
-		<title>The Features of PURE Unobtrusive Rendering Engine for HTML</title>
-	    <link href="css/white.css" rel="stylesheet" type="text/css" />
-		<script type="text/javascript" src="../js/mootools.js"></script>
-		<script type="text/javascript" src="../js/pure.js"></script>
-		<script type="text/javascript" src="js/allExamples-for-mootools.js"></script>
-	</head>
-	<body class="allExamples">
- 		<div class="links"><a href="allExamples.html">All Examples</a><br />
-				<a href="howToCompile.html">How to compile your html</a><br />
-				<a href="allExamplesCompiled.html">All Examples Compiled</a><br />
-			<a href="http://groups.google.com/group/Pure-Unobtrusive-Rendering-Engine/post">Post</a> or <a href="mailto:Pure-Unobtrusive-Rendering-Engine@googlegroups.com">mail us</a><br /> your feedback
-		</div>
-		<!-- 
-	/* * * * * * * * * * * * * * * * * * * * * *
-	 *     E X A M P L E      1 
-	 * * * * * * * * * * * * * * * * * * * * * */			
-		-->
-		<h1>What are the features available in PURE today ?</h1>
-		This page groups all the features available in the last release.<br />
-		Click the render buttons to see the result.<br />
-		Look at the source of the page to see comments and usage or <a href="http://github.com/pure/pure/wikis/">have a look at the wiki</a>.
-		<h3>Example 1: Hello Who?</h3>
-		<div class="demo">
-			<input type="button" onclick="clickButton(this, render1);" value="render" />
-			<div class="htmlDoc">
-				<div id="hello">
-					Hello <span class="who">World</span>
-				</div>
-			</div>
-			<div id="target1"></div>
-		</div>
-		<!-- 
-	/* * * * * * * * * * * * * * * * * * * * * *
-	 *     E X A M P L E      2 
-	 * * * * * * * * * * * * * * * * * * * * * */			
-		-->
-		<h3>Example 2: Iteration on a Table</h3>
-		<div class="demo">
-			<div class="htmlDoc">
-				<input type="button" onclick="clickButton(this, render2);" value="render" />
-				<table id="players1" class="players 1">
-					<thead>
-						<tr><th class="player">Player</th></tr>
-					</thead>
-					<tbody>
-						<tr class="context">
-							<td class="player context">Chloe</td>
-						</tr>
-					</tbody>
-				</table>
-			</div>
-		</div>
-		<!-- 
-	/* * * * * * * * * * * * * * * * * * * * * *
-	 *     E X A M P L E      3 
-	 * * * * * * * * * * * * * * * * * * * * * */			
-		-->
-		<h3>Example 3: Iteration on a List</h3>
-		<div class="demo">
-			<div class="htmlDoc">
-				<input type="button" onclick="clickButton(this, render3);" value="render" />
-				<!-- note the notation "data property"@"attribute name"-->
-				<ol id="siteList" class="teamList id@id">
-					<li class="player sites"><a class="name url@href" href="http://beebole.com">Beebole</a></li>
-				</ol>
-			</div>
-		</div>
-		<!-- 
-	/* * * * * * * * * * * * * * * * * * * * * *
-	 *     E X A M P L E      4 
-	 * * * * * * * * * * * * * * * * * * * * * */
-		-->
-		<h3>Example 4: Passing JS Functions as a Directive (Iteration on a table zebra like and attach events)</h3>
-		<div class="demo">
-			<div class="htmlDoc">
-				<input id="b4_1" type="button" onclick="clickButton(this, render4, '#b4_2');" value="render" />
-				<input id="b4_2" type="button" onclick="clickButton(this, render4, '#b4_1');" value="render with 500 lines..." />
-				<table id="players2" class="players 2">
-					<thead>
-						<tr>
-							<th class="player">Player</th>
-						</tr>
-					</thead>
-					<tbody>
-						<tr class="context">
-							<td class="player context">Chloe</td>
-						</tr>
-					</tbody>
-				</table>
-			</div>
-			In addition to the zebra iteration, this example shows a way to attach events by a directive.<br />
-			To see those events, mouse-over the lines of the rendered table, and click on a line.<br/>
-		</div>
-		<!-- 
-	/* * * * * * * * * * * * * * * * * * * * * *
-	 *     E X A M P L E      5 
-	 * * * * * * * * * * * * * * * * * * * * * */			
-		-->
-		<h3>Example 5: Nested Iteration</h3>
-		This was not explained in the examples. The objective here is to have a double iteration. First on teams, then on players.<br />
-		It shows the nested iteration and as well how a template can be included in another.
-		<div class="demo">
-			<div class="htmlDoc">
-				<input type="button" onclick="clickButton(this, render5);" value="render" />
-				<table class="scoreBoard">
-					<tbody>
-						<tr>
-							<td class="teamName">Team Name</td>
-								<td class="teamPlace">
-								<table class="teamList">
-									<thead>
-										<tr><th class="position">Position</th><th class="player">Player</th><th class="score">Score</th></tr>
-									</thead>
-									<tbody>
-										<tr><td class="position">1</td><td class="player">Chloe</td><td class="score">20</td></tr>
-									</tbody>
-								</table>
-							</td>
-						</tr>
-					</tbody>
-				</table>
-			</div>
-			<div class="transformation">
-				<div id="render5"></div>
-			</div>
-		</div>
-		<!-- 
-	/* * * * * * * * * * * * * * * * * * * * * *
-	 *     E X A M P L E      6 
-	 * * * * * * * * * * * * * * * * * * * * * */			
-		-->
-		<h3>Example 6: Recursive List</h3>
-		<div class="demo">
-			<div class="htmlDoc">
-				<input type="button" onclick="clickButton(this, render6);" value="render" />
-				<ul class="treeItem">
-					<li class="children"><a class="name" href="#">name</a></li>
-				</ul>
-			</div>
-		</div>
-		
-		<!-- 
-	/* * * * * * * * * * * * * * * * * * * * * *
-	 *     Hidden templates 
-	 * * * * * * * * * * * * * * * * * * * * * */			
-		-->
-		<div class="templates">
-			<div class="timerTrace">
-				<table class="timerTraceTable">
-					<thead>
-						<tr><th class="timerMsg">(ms)</th><th class="timerDuration">Duration</th><th class="timerTime">Timer</th></tr>
-					</thead>
-					<tbody>
-						<tr class="context"><td class="timerMsg">Start</td><td class="timerDuration">0</td><td class="timerTime">0</td></tr>
-					</tbody>
-				</table>
-			</div>
-		</div>
-	</body>
-</html>

docs/allExamples-for-prototype.html

-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xmlns:pure="http://beebole.com/pure">
-	<head>
-		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
-		<title>The Features of PURE Unobtrusive Rendering Engine for HTML</title>
-	    <link href="css/white.css" rel="stylesheet" type="text/css" />
-		<script type="text/javascript" src="../js/prototype.js"></script>
-		<script type="text/javascript" src="../js/pure.js"></script>
-		<script type="text/javascript" src="js/allExamples-for-prototype.js"></script>
-	</head>
-	<body class="allExamples">
- 		<div class="links"><a href="allExamples.html">All Examples</a><br />
-				<a href="howToCompile.html">How to compile your html</a><br />
-				<a href="allExamplesCompiled.html">All Examples Compiled</a><br />
-			<a href="http://groups.google.com/group/Pure-Unobtrusive-Rendering-Engine/post">Post</a> or <a href="mailto:Pure-Unobtrusive-Rendering-Engine@googlegroups.com">mail us</a><br /> your feedback
-		</div>
-		<!-- 
-	/* * * * * * * * * * * * * * * * * * * * * *
-	 *     E X A M P L E      1 
-	 * * * * * * * * * * * * * * * * * * * * * */			
-		-->
-		<h1>What are the features available in PURE today ?</h1>
-		This page groups all the features available in the last release.<br />
-		Click the render buttons to see the result.<br />
-		Look at the source of the page to see comments and usage or <a href="http://github.com/pure/pure/wikis/">have a look at the wiki</a>.
-		<h3>Example 1: Hello Who?</h3>
-		<div class="demo">
-			<input type="button" onclick="clickButton(this, render1);" value="render" />
-			<div class="htmlDoc">
-				<div id="hello">
-					Hello <span class="who">World</span>
-				</div>
-			</div>
-			<div id="target1"></div>
-		</div>
-		<!-- 
-	/* * * * * * * * * * * * * * * * * * * * * *
-	 *     E X A M P L E      2 
-	 * * * * * * * * * * * * * * * * * * * * * */			
-		-->
-		<h3>Example 2: Iteration on a Table</h3>
-		<div class="demo">
-			<div class="htmlDoc">
-				<input type="button" onclick="clickButton(this, render2);" value="render" />
-				<table id="players1" class="players 1">
-					<thead>
-						<tr><th class="player">Player</th></tr>
-					</thead>
-					<tbody>
-						<tr class="context">
-							<td class="player context">Chloe</td>
-						</tr>
-					</tbody>
-				</table>
-			</div>
-		</div>
-		<!-- 
-	/* * * * * * * * * * * * * * * * * * * * * *
-	 *     E X A M P L E      3 
-	 * * * * * * * * * * * * * * * * * * * * * */			
-		-->
-		<h3>Example 3: Iteration on a List</h3>
-		<div class="demo">
-			<div class="htmlDoc">
-				<input type="button" onclick="clickButton(this, render3);" value="render" />
-				<!-- note the notation "data property"@"attribute name"-->
-				<ol id="siteList" class="teamList id@id">
-					<li class="player sites"><a class="name url@href" href="http://beebole.com">Beebole</a></li>
-				</ol>
-			</div>
-		</div>
-		<!-- 
-	/* * * * * * * * * * * * * * * * * * * * * *
-	 *     E X A M P L E      4 
-	 * * * * * * * * * * * * * * * * * * * * * */
-		-->
-		<h3>Example 4: Passing JS Functions as a Directive (Iteration on a table zebra like and attach events)</h3>
-		<div class="demo">
-			<div class="htmlDoc">
-				<input id="b4_1" type="button" onclick="clickButton(this, render4, '#b4_2');" value="render" />
-				<input id="b4_2" type="button" onclick="clickButton(this, render4, '#b4_1');" value="render with 500 lines..." />
-				<table id="players2" class="players 2">
-					<thead>
-						<tr>
-							<th class="player">Player</th>
-						</tr>
-					</thead>
-					<tbody>
-						<tr class="context">
-							<td class="player context">Chloe</td>
-						</tr>
-					</tbody>
-				</table>
-			</div>
-			In addition to the zebra iteration, this example shows a way to attach events by a directive.<br />
-			To see those events, mouse-over the lines of the rendered table, and click on a line.<br/>
-		</div>
-		<!-- 
-	/* * * * * * * * * * * * * * * * * * * * * *
-	 *     E X A M P L E      5 
-	 * * * * * * * * * * * * * * * * * * * * * */			
-		-->
-		<h3>Example 5: Nested Iteration</h3>
-		This was not explained in the examples. The objective here is to have a double iteration. First on teams, then on players.<br />
-		It shows the nested iteration and as well how a template can be included in another.
-		<div class="demo">
-			<div class="htmlDoc">
-				<input type="button" onclick="clickButton(this, render5);" value="render" />
-				<table class="scoreBoard">
-					<tbody>
-						<tr>
-							<td class="teamName">Team Name</td>
-								<td class="teamPlace">
-								<table class="teamList">
-									<thead>
-										<tr><th class="position">Position</th><th class="player">Player</th><th class="score">Score</th></tr>
-									</thead>
-									<tbody>
-										<tr><td class="position">1</td><td class="player">Chloe</td><td class="score">20</td></tr>
-									</tbody>
-								</table>
-							</td>
-						</tr>
-					</tbody>
-				</table>
-			</div>
-			<div class="transformation">
-				<div id="render5"></div>
-			</div>
-		</div>
-		<!-- 
-	/* * * * * * * * * * * * * * * * * * * * * *
-	 *     E X A M P L E      6 
-	 * * * * * * * * * * * * * * * * * * * * * */			
-		-->
-		<h3>Example 6: Recursive List</h3>
-		<div class="demo">
-			<div class="htmlDoc">
-				<input type="button" onclick="clickButton(this, render6);" value="render" />
-				<ul class="treeItem">
-					<li class="children"><a class="name" href="#">name</a></li>
-				</ul>
-			</div>
-		</div>
-		
-		<!-- 
-	/* * * * * * * * * * * * * * * * * * * * * *
-	 *     Hidden templates 
-	 * * * * * * * * * * * * * * * * * * * * * */			
-		-->
-		<div class="templates">
-			<div class="timerTrace">
-				<table class="timerTraceTable">
-					<thead>
-						<tr><th class="timerMsg">(ms)</th><th class="timerDuration">Duration</th><th class="timerTime">Timer</th></tr>
-					</thead>
-					<tbody>
-						<tr class="context"><td class="timerMsg">Start</td><td class="timerDuration">0</td><td class="timerTime">0</td></tr>
-					</tbody>
-				</table>
-			</div>
-		</div>
-	</body>
-</html>

docs/allExamples.html

-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xmlns:pure="http://beebole.com/pure">
-	<head>
-		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
-		<title>The Features of PURE Unobtrusive Rendering Engine for HTML</title>
-		<link href="css/white.css" rel="stylesheet" type="text/css" />
-		<script type="text/javascript" src="../js/jquery.js"></script>
-		<script type="text/javascript" src="../js/purePacked.js"></script>
-
-		<script type="text/javascript" src="js/allExamples.js"></script>
-	</head>
-	<body class="allExamples">
- 		<div class="links"><a href="allExamples.html">All Examples</a><br />
-				<a href="howToCompile.html">How to compile your html</a><br />
-				<a href="allExamplesCompiled.html">All Examples Compiled</a><br />
-			<a href="http://groups.google.com/group/Pure-Unobtrusive-Rendering-Engine/post">Post</a> or <a href="mailto:Pure-Unobtrusive-Rendering-Engine@googlegroups.com">mail us</a><br /> your feedback
-		</div>
-		<!-- 
-	/* * * * * * * * * * * * * * * * * * * * * *
-	 *     E X A M P L E      1 
-	 * * * * * * * * * * * * * * * * * * * * * */			
-		-->
-		<h1>What are the features available in PURE today ?</h1>
-		This page groups all the features available in the last release.<br />
-		Click the render buttons to see the result.<br />
-		Look at the source of the page to see comments and usage or <a href="http://github.com/pure/pure/wikis/">have a look at the wiki</a>.
-		<h3>Example 1: Hello Who?</h3>
-		<div class="demo">
-			<input type="button" onclick="clickButton(this, render1);" value="render" />
-			<div class="htmlDoc">
-				<div id="hello">
-					Hello <span class="who">World</span>
-				</div>
-			</div>
-			<div id="target1"></div>
-		</div>
-		<!-- 
-	/* * * * * * * * * * * * * * * * * * * * * *
-	 *     E X A M P L E      2 
-	 * * * * * * * * * * * * * * * * * * * * * */			
-		-->
-		<h3>Example 2: Iteration on a Table</h3>
-		<div class="demo">
-			<div class="htmlDoc">
-				<input type="button" onclick="clickButton(this, render2);" value="render" />
-				<table id="players1" class="players 1">
-					<thead>
-						<tr><th class="player">Player</th></tr>
-					</thead>
-					<tbody>
-						<tr class="context">
-							<td class="player context">Chloe</td>
-						</tr>
-					</tbody>
-				</table>
-			</div>
-		</div>
-		<!-- 
-	/* * * * * * * * * * * * * * * * * * * * * *
-	 *     E X A M P L E      3 
-	 * * * * * * * * * * * * * * * * * * * * * */			
-		-->
-		<h3>Example 3: Iteration on a List</h3>
-		<div class="demo">
-			<div class="htmlDoc">
-				<input type="button" onclick="clickButton(this, render3);" value="render" />
-				<!-- note the notation "data property"@"attribute name"-->
-				<ol id="siteList" class="teamList id@id">
-					<li class="player sites"><a class="name url@href" href="http://beebole.com">Beebole</a></li>
-				</ol>
-			</div>
-		</div>
-		<!-- 
-	/* * * * * * * * * * * * * * * * * * * * * *
-	 *     E X A M P L E      4 
-	 * * * * * * * * * * * * * * * * * * * * * */
-		-->
-		<h3>Example 4: Passing JS Functions as a Directive (Iteration on a table zebra like and attach events)</h3>
-		<div class="demo">
-			<div class="htmlDoc">
-				<input id="b4_1" type="button" onclick="clickButton(this, render4, '#b4_2');" value="render" />
-				<input id="b4_2" type="button" onclick="clickButton(this, render4, '#b4_1');" value="render with 500 lines..." />
-				<table id="players2" class="players 2">
-					<thead>
-						<tr>
-							<th class="player">Player</th>
-						</tr>
-					</thead>
-					<tbody>
-						<tr class="context">
-							<td class="player context">Chloe</td>
-						</tr>
-					</tbody>
-				</table>
-			</div>
-			In addition to the zebra iteration, this example shows a way to attach events by a directive.<br />
-			To see those events, mouse-over the lines of the rendered table, and click on a line.<br/>
-		</div>
-		<!-- 
-	/* * * * * * * * * * * * * * * * * * * * * *
-	 *     E X A M P L E      5 
-	 * * * * * * * * * * * * * * * * * * * * * */			
-		-->
-		<h3>Example 5: Nested Iteration</h3>
-		This was not explained in the examples. The objective here is to have a double iteration. First on teams, then on players.<br />
-		It shows the nested iteration and as well how a template can be included in another.
-		<div class="demo">
-			<div class="htmlDoc">
-				<input type="button" onclick="clickButton(this, render5);" value="render" />
-				<table class="scoreBoard">
-					<tbody>
-						<tr>
-							<td class="teamName">Team Name</td>
-								<td class="teamPlace">
-								<table class="teamList">
-									<thead>
-										<tr><th class="position">Position</th><th class="player">Player</th><th class="score">Score</th></tr>
-									</thead>
-									<tbody>
-										<tr class="row"><td class="position">P</td><td class="player">Chloe</td><td class="score">20</td></tr>
-									</tbody>
-								</table>
-							</td>
-						</tr>
-					</tbody>
-				</table>
-			</div>
-			<div class="transformation">
-				<div id="render5"></div>
-			</div>
-		</div>
-		<!-- 
-	/* * * * * * * * * * * * * * * * * * * * * *
-	 *     E X A M P L E      6 
-	 * * * * * * * * * * * * * * * * * * * * * */			
-		-->
-		<h3>Example 6: Recursive List</h3>
-		<div class="demo">
-			<div class="htmlDoc">
-				<input type="button" onclick="clickButton(this, render6);" value="render" />
-				<ul class="treeItem">
-					<li class="children"><a class="name" href="#">name</a></li>
-				</ul>
-			</div>
-		</div>
-		
-		<!-- 
-	/* * * * * * * * * * * * * * * * * * * * * *
-	 *     Hidden templates 
-	 * * * * * * * * * * * * * * * * * * * * * */			
-		-->
-		<div class="templates">
-			<div class="timerTrace">
-				<table class="timerTraceTable">
-					<thead>
-						<tr><th class="timerMsg">(ms)</th><th class="timerDuration">Duration</th><th class="timerTime">Timer</th></tr>
-					</thead>
-					<tbody>
-						<tr class="context"><td class="timerMsg">Start</td><td class="timerDuration">0</td><td class="timerTime">0</td></tr>
-					</tbody>
-				</table>
-			</div>
-		</div>
-	</body>
-</html>

docs/allExamplesCompiled.html

-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xmlns:pure="http://beebole.com/pure">
-	<head>
-		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
-		<title>Tutorial - Pure Unobtrusive Rendering Engine for HTML</title>
-	    <link href="css/white.css" rel="stylesheet" type="text/css" />
-		<script type="text/javascript" src="js/pureRuntimeExample.js"></script>
-		<script type="text/javascript">
-			function transform(htmlName, context, pTarget){
-				var target = document.getElementById(pTarget);
-				$p.render(htmlName, context, target);}
-				
-			function render1(){
-				//this transformation wasn't compiled, thus not saved in $p.compiledFunctions()
-				//do this when you need only a temporary template
-				var html = document.getElementById('hello');
-				var context = { "name": "Mary" };
-				var directive = {"span.who":"name"};
-				html = $p.map( directive, html);
-				var target = document.getElementById('transform1');
-				$p.render(html, context, target);}
-				
-			function lineClick(name){ alert(name); } //example1 of event attachment, still some research needed
-
-			function swapStyle(obj, inOut){ //example2
-				obj.className = (inOut) ? 'player hover' : 'player';};
-			function render2(){
-				var context = ["Alice Keasler", "Charles LeGrand", "Gary Bitemning", "Helen Moren"];
-				transform('f2', context, 'render2');}
-
-			function render3(){
-				var context = [{"name":"Beebole", "url":"http://beebole.com"}, {"name":"BeeLit", "url":"http://beeLit.com"}, {"name":"PURE", "url":"http://beebole.com/pure"}];
-				transform('f3', context, 'render3');}
-
-			var row = {
-				odd: 'odd',
-				even:'even',
-				decorator: function(context, items, pos){
-					return (pos % 2 == 1) ? this.even : this.odd;}}
-			function render4(){
-				var context =["Alice Keasler", "Charles LeGrand", "Gary Bitemning", "Helen Moren"];
-				transform('f4', context, 'render4');}
-
-			function render5(){
-				var context = {	'list': [['Cats', [["Alice Keasler", 14], ["Charles LeGrand", 13], ["Gary Bitemning", 20], ["Helen Moren", 5]]], ['Cows', [["Mary Cain", 15], ["Vicky Benoit", 5], ["Wayne Dartt", 11]]], ['Dogs', [["Ray Braun", 13], ["Aaron Ben", 24], ["Steven Smith", 1], ["Kim Caffey", 19]]], ['Donkeys', [["Natalie Kinney", 16], ["Caren Cohen", 3]]]]};
-				transform('f5', context, 'render5');}
-
-			function render6(){
-				var context = [
-					{"name" : "Home", "url" : "#ho"}, 
-					{"name" : "About", "url" : "http://about...", 
-						"subMenu" : [
-							{"name" : "History", "url" : "http://history..."},
-							{"name" : "Team", "url" : "http://team..."},
-							{"name" : "Offices", "url" : "http://offices...",
-								"subMenu" : [
-									{"name" : "Brussels", "url" : "http://brussels..."},
-									{"name" : "New Delhi", "url" : "http://newdelhi..."}]}]},
-			        {"name" : "Services", "url" : "http://services...",
-						"subMenu" : [
-							{"name" : "Web Design", "url" : "http://web..."},
-							{"name" : "Development", "url" : "http://dev..."}]}];
-					transform('f6', context, 'render6');}	
-
-		</script>
-	</head>
-	<body class="allExamples">
- 		<div class="links"><a href="allExamples.html">All Examples</a><br />
-				<a href="howToCompile.html">How to compile your html</a><br />
-				<a href="allExamplesCompiled.html">All Examples Compiled</a><br />
-			<a href="http://groups.google.com/group/Pure-Unobtrusive-Rendering-Engine/post">Post</a> or <a href="mailto:Pure-Unobtrusive-Rendering-Engine@googlegroups.com">mail us</a><br /> your feedback
-		</div>
-		<h1>Rendering with compiled html's</h1>
-		This page uses HTML's compiled to Javascript functions.<br />
-		The 'render' links below are just calling the compiled function, instead of compiling them on the fly as in the <a href="allExamples.html">all examples pages</a>
-		<h3>Example 2: Iteration on a table</h3>
-		<div class="demo">
-			<div class="htmlDoc">
-				<a href="#" onclick="render2();return false;">render</a>
-                <table class="players">
-                    <thead><tr><th class="player">Player</th></tr></thead>
-                    <tbody><tr><td class="player">Chloe</td></tr></tbody>
-                </table>
-			</div>
-			<div class="transformation">
-				<div id="render2"></div>
-			</div>
-		</div>
-		<h3>Example 3: Iteration on a list</h3>
-		<div class="demo">
-			<div class="htmlDoc">
-				<a href="#" onclick="render3();return false;">render</a>
-				<ol class="teamList">
-					<li class="player"><a href="http://beebole.com">Beebole</a></li>
-				</ol>
-			</div>
-			<div class="transformation">
-				<div id="render3"></div>
-			</div>
-		</div>
-		<h3>Example 4: Passing a JS function as a directive (Iteration on a table zebra like)</h3>
-		<div class="demo">
-			<div class="htmlDoc">
-				Here the target and the source HTML are the same. The HTML will replace itself.<br /> 
-				<a href="#" onclick="render4();return false;">render</a>
-			</div>
-			<div class="transformation">
-				<div id="render4">
-	                <table class="players 2">
-	                    <thead><tr><th class="player">Player</th></tr></thead>
-	                    <tbody><tr><td class="player">Chloe</td></tr></tbody>
-	                </table>
-				</div>
-			</div>
-		</div>
-		<h3>Example 5: Nested Iteration</h3>
-		This was not explained in the examples. The objective here is to have a double iteration. First on teams, then on players.<br />
-		It shows the nested iteration and as well how a template can be included in another.
-		<div class="demo">
-			<div class="htmlDoc">
-				<a href="#" onclick="render5();return false;">render</a>
-				<table class="scoreBoard">
-				    <tbody>
-				        <tr>
-				            <td class="teamName">Team Name</td>
-				            <td class="teamPlace">
-				                <table class="teamList">
-				                    <thead><tr><th class="position">Position</th><th class="player">Player</th><th class="score">Score</th></tr></thead>
-				                    <tbody><tr><td class="position">1</td><td class="player">Chloe</td><td class="score">20</td></tr></tbody>
-				                </table>
-				            </td>
-				        </tr>
-				    </tbody>
-				</table>
-			</div>
-			<div class="transformation">
-				<div id="render5"></div>
-			</div>
-		</div>
-		<h3>Example 6: Recursive List - the recursion is not dynamic :(</h3>
-		<div class="demo">
-			<div class="htmlDoc">
-				<a href="#" onclick="render6();return false;">render</a>
-				<ul id="nav"> 
-					<li><a href="#">About</a> 
-						<ul class="nav1"> 
-							<li><a href="#">Offices</a>
-								<ul class="nav2">
-									<li><a href="#">Brussels</a></li> 
-								</ul>
-							</li> 
-						</ul> 
-					</li> 
-				</ul>
-			</div>
-			<div class="transformation">
-				<div id="render6"></div>
-			</div>
-		</div>
-	</body>
-</html>

docs/css/white.css

-.allExamples{
-	font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
-	background-color:#fff;
-	color:#333;
-	font-size:0.8em;
-	padding-left:10px;
-	padding-bottom:30px;}
-a{	
-	color:#126BAF;
-	text-decoration:none;}
-	
-a:hover{
-	text-decoration:underline;}
-	
-h1{
-	font-size:160%;
-	padding-top:40px;
-	}
-h2{
-	width:85%;
-	font-size:130%;
-	padding-top:20px;
-	border-bottom:solid 1px #555
-	}
-.who{
-	color:#DA7600;
-	font-weight:bold}
-pre {
-	font-family:"Andale Mono", Monaco, "Lucida Console","Bitstream Vera Sans Mono","Courier New",monospace;
-	font-size:110%;
-	color:#0B0;
-	background-color:#333;
-	line-height:1.5em;
-	padding:10px;
-	margin-left:20px;
-	border:solid 1px #AAA
-}
-.note{
-	color:#666;
-	font-style:italic;
-	padding-bottom:10px;
-	padding-left:20px}
-
-.codeHi{
-	color:#DA7600
-}
-div.links{
-	float:right;
-	text-align:center;
-	line-height:180%;
-	background-color:#DEF;
-	border:solid 1px #aaa;
-	padding:5px}
-
-
-div.feedback{
-	float:left}
-span.oops{
-	background-color:#D00;
-	color:#fff;
-	font-size:150%;
-}
-/* all examples */
-#pureMsg{width:100%;height:200px;background-color:#DEF}
-.htmlDoc{width:90%;background-color:#def;}
-.transformation{width:90%;background-color:#DEF;}
-.demo{border:solid 1px #ccc;background-color:#def;padding:10px}
-/*example 1*/
-div#hello {
-	border:solid 1px #AAA;
-	font-size:110%;
-	line-height:1.5em;
-	width:30%;
-	padding:10px;
-	margin:20px;
-}
-/*example 2*/
-table#teamList, table.players{
-	border-collapse:collapse;
-	margin:20px;
-	width:200px
-}	
-td.score, th.score, td.position, th.position{
-	text-align:right;
-	border:solid 1px #aaa;
-	padding:3px;
-	width:30%
-}
-td.player, th.player{
-	text-align:left;
-	border:solid 1px #AAA;
-	padding:3px;
-}
-th.score, th.player, th.position, .hover{
-	background-color:#DA7600;
-	color:#eee;
-}
-/*example 4*/
-tr.odd{ 
-	background-color: #FFF}
-tr.even{
-	background-color: #DFEFFF;
-	color:#222}
-tr.first{ 
-	border-top: solid 2px #FA0}
-tr.last{
-	border-bottom:solid 2px #FA0}
-/*example 4*/
-table.scoreBoard{
-	border-collapse:collapse;
-	margin:20px;
-	width:450px}
-th.teamName, td.teamName{
-	font-size:150%;
-	text-align:left}
-td.teamPlace{padding:5px}
-table.teamList{
-	width:100%;
-	border-collapse:collapse}
-.showSource{
-	text-decoration:none;
-	font-size:80%;
-	color:#555;
-}
-.source{
-	padding-top:5px;
-}
-/*All examples style*/
-#pureRuntime{width:100%;height:200px;background-color:#DEF}
-.htmlDoc{width:90%;background-color:#def;}
-.transformation{width:90%;background-color:#DEF;}
-.demo{border:solid 1px #ccc;background-color:#def;padding:10px}
-
-/*timer*/
-.timerMsg{padding:3px;}
-.timerTime, .timerDuration{
-	border-left:solid 1px #CCC;
-	padding:3px;
-	text-align:right;}
-th.timerMsg, th.timerTime, th.timerDuration{
-	border-bottom:solid 1px #CCC;
-}
-.timerTraceTable{
-	border-collapse:collapse;}
-
-.timerTrace{
-	padding:10px}
-.templates{
-	display:none}

docs/howToCompile.html

-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xmlns:pure="http://beebole.com/pure">
-	<head>
-		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
-		<title>Tutorial - Pure Unobtrusive Rendering Engine for HTML</title>
-	    <link href="css/white.css" rel="stylesheet" type="text/css" />
-		<style type="text/css">
-			.demo{display:none}
-		</style>
-		<script type="text/javascript" src="../js/jquery.js"></script>
-		<script type="text/javascript" src="../js/pure.js"></script>
-		<script type="text/javascript">
-
-/* * * * * * * * * * * * * * * * *
- *			E X A M P L E   4 
- * * * * * * * * * * * * * * * * */
-			function render4(){
-				var context =["Alice Keasler", "Charles LeGrand", "Gary Bitemning", "Helen Moren"];
-				
-				var players2 = $('table.players.2')
-				.mapDirective( {'tbody tr' : 'player <- context',
-					'tbody tr td' : 'player[]',
-					'tbody tr[class]': function(arg){return (arg.pos % 2 == 0) ? 'even' : 'odd';}});
-		        $p.compile(players2, 'f4');
-				$('#render4').html( $p.render('f4', context) );}
-
-/* * * * * * * * * * * * * * * * *
- *			E X A M P L E   5 
- * * * * * * * * * * * * * * * * */
-			var row = {
-				odd: 'odd',
-				even:'even',
-				decorator: function(context, items, pos){
-					return (pos % 2 == 1) ? this.even : this.odd;}}
-					
-			function lineNb(context, items, pos){
-				return pos+1;}
-
-			function render5(){
-				var context = {
-					'list': [['Cats', 
-								[["Alice Keasler", 14], 
-								["Charles LeGrand", 13], 
-								["Gary Bitemning", 20], 
-								["Helen Moren", 5]]], 
-					
-							['Cows', [["Mary Cain", 15], ["Vicky Benoit", 5], ["Wayne Dartt", 11]]], ['Dogs', [["Ray Braun", 13], ["Aaron Ben", 24], ["Steven Smith", 1], ["Kim Caffey", 19]]], ['Donkeys', [["Natalie Kinney", 16], ["Caren Cohen", 3]]]]};
-				
-				var scoreBoard = $('table.scoreBoard').mapDirective({
-					'tbody tr': 'teams <- list',
-					'td.teamName': 'teams[0]'
-				});
-				
-				var teamList = $('table.teamList', scoreBoard)
-					.mapDirective({
-						'tbody tr': 'player <- teams[1]',
-						'td.player': 'player[0]',
-						'td.score': 'player[1]',
-						'td.position': lineNb, //passing the pointer of a function that does not use "this"
-						'tbody tr[class]': function(context, items, pos){ return row.decorator(context, items, pos) } }); //show how to wrap a method and not breack the use of "this"
-				
-				$('td.teamPlace', scoreBoard).html(teamList);
-				$p.compile(scoreBoard, 'f5');
-		      $('#render5').html( $p.render('f5', context) );}
-
-/* * * * * * * * * * * * * * * * *
- *			E X A M P L E   6 
- * * * * * * * * * * * * * * * * */
-			function render6(){
-			
-				var context = [ 
-					{"name" : "Home", "url" : "#ho"}, 
-					{"name" : "About", "url" : "http://about...", 
-						"subMenu" : [
-							{"name" : "History", "url" : "http://history..."},
-							{"name" : "Team", "url" : "http://team..."},
-							{"name" : "Offices", "url" : "http://offices...",
-								"subMenu" : [
-									{"name" : "Brussels", "url" : "http://brussels..."},
-									{"name" : "New Delhi", "url" : "http://newdelhi..."}]}]},
-			        {"name" : "Services", "url" : "http://services...",
-						"subMenu" : [
-							{"name" : "Web Design", "url" : "http://web..."},
-							{"name" : "Development", "url" : "http://dev..."}]}];
-			               
-				var directive = {
-				  "li" : "menu <-",
-				  "a" : "menu.name", 
-				  "a[href]" : "menu.url",
-			     	  "ul.nav1 li" : "sub1 <- menu.subMenu",
-			     	  "ul.nav1 li a" : "sub1.name", 
-				  "ul.nav1 li a[href]" : "sub1.url",
-			     	  "ul.nav2 li" : "sub2 <- sub1.subMenu",
-			     	  "ul.nav2 li a" : "sub2['name']", //same result as sub2.name
-				  "ul.nav2 li a[href]" : "sub2.url"};
-				var menu = $('ul#nav').mapDirective(directive);
-				$p.compile(menu, 'f6');
-				$('ul#nav').replaceWith( $p.render('f6', context));}
-
-			function renderAll(){ $p.compiledFunctions={};render4();render5();render6();}
-		</script>
-	</head>
-	<body class="allExamples">
- 		<div class="links"><a href="allExamples.html">All Examples</a><br />
-				<a href="howToCompile.html">How to compile your html</a><br />
-				<a href="allExamplesCompiled.html">All Examples Compiled</a><br />
-			<a href="http://groups.google.com/group/Pure-Unobtrusive-Rendering-Engine/post">Post</a> or <a href="mailto:Pure-Unobtrusive-Rendering-Engine@googlegroups.com">mail us</a><br /> your feedback
-		</div>
-		<div class="demo">
-			<div class="htmlDoc">
-				Here the target and the source HTML are the same. The HTML will replace itself.<br /> 
-				<input type="button" onclick="render4();this.disabled=true;this.value='Refresh the page to render again.'" value="render" />
-			</div>
-			<div class="transformation">
-				<div id="render4">
-	                <table class="players 2">
-	                    <thead><tr><th class="player">Player</th></tr></thead>
-	                    <tbody><tr><td class="player">Chloe</td></tr></tbody>
-	                </table>
-				</div>
-			</div>
-		</div>
-		<div class="demo">
-			<div class="htmlDoc">
-				<input type="button" onclick="render5();this.disabled=true;this.value='Refresh the page to render again.'" value="render" />
-				<table class="scoreBoard">
-				    <tbody>
-				        <tr>
-				            <td class="teamName">Team Name</td>
-				            <td class="teamPlace">
-				                <table class="teamList">
-				                    <thead><tr><th class="position">Position</th><th class="player">Player</th><th class="score">Score</th></tr></thead>
-				                    <tbody><tr><td class="position">1</td><td class="player">Chloe</td><td class="score">20</td></tr></tbody>
-				                </table>
-				            </td>
-				        </tr>
-				    </tbody>
-				</table>
-			</div>
-			<div class="transformation">
-				<div id="render5"></div>
-			</div>
-		</div>
-		<div class="demo">
-			<div class="htmlDoc">
-				<input type="button" onclick="render6();this.disabled=true;this.value='Refresh the page to render again.'" value="render" />
-				<ul  id="nav"> 
-					<li><a href="#">About</a> 
-						<ul class="nav1"> 
-							<li><a href="#">Offices</a>
-								<ul class="nav2">
-									<li><a href="#">Brussels</a></li> 
-								</ul>
-							</li> 
-						</ul> 
-					</li> 
-				</ul>
-			</div>
-		</div>
-
-		<h1>Compile your HTML and get a higher rendering speed</h1>
-
-		All the <a href="allExamples.html">examples</a> we provided are compiled on the fly, when you render them.<br />
-		The time taken to transform is equal to the compilation time + the rendering time.<br />
-		This compilation takes some time. Altough it is very short, you may want to suppress this processing time in your production system.<br />
-		It is possible to compile all the HTMLs and then save them as JS functions in a javascript file.<br />
-		Once you have this .js file you can add it to your page using the &lt;script&gt; tag<br />
-		By doing this you:<br />
-		<ol><li><strong>Remove all the js commands</strong> related to the directives. And save the time spent on compiling.</li>
-		<li><strong>Save some Kb:</strong> The js file will be cached and you can remove the pure.js file from your page if you do not have to compile any template on the fly.</li></ol>
-		Click the button below to get the examples 4, 5 and 6 compiled and get the JS source code in the text area.<br />
-		<input onclick="renderAll();$p.getRuntime(this);return false" value="get the PURE runtime file" type="button"></input></p>
-		<textarea id="pureMsg"></textarea>
-		<p>Copy paste the content of the text area above to a JS file. Save it. You can even minify and/or gzip it.<br />
-		Then include this JS file in your pages. Your compiled HTML's will be available and cached by the browser as any other JS file.</p>
-		Here is an example of <a href="allExamplesCompiled.html">a page that uses compiled templates</a>
-	</body>
-</html>

docs/js/allExamples-for-DOMAssistant.js

-/* * * * * * * * * * * * * * * * * * * * * *
- *     E X A M P L E      1 
- * * * * * * * * * * * * * * * * * * * * * */			
-function render1(){
-	$('#hello').autoRender({ "who": "Mary" });}
-
-	/* Note: 
-	  All the notation below are possible with different results:				
-
-		a) as above. replacing the html by itself transformed with the data
-			$('#hello').autoRender({ "who": "Mary" })
-
-		b) replacing the target by the html transformed
-			$('#hello').autoRender({ "who": "Mary" }, $('#target1'));
-		
-		
-		c) Replacing the content of a target
-			$('#target1').html( $p.autoRender($('#hello')[0], { "who": "Mary" }));
-
-
-		d) same as c) but without js framework (jQuery)
-			var target = document.getElementById('target1'); 
-			var html = document.getElementById('hello');
-			var data = { "who": "Mary" };
-			target.innerHTML = $p.autoRender( html, data );
-	*/
-
-
-/* * * * * * * * * * * * * * * * * * * * * *
- *     E X A M P L E      2 
- * * * * * * * * * * * * * * * * * * * * * */			
-function render2(){
-	var context = ["Alice Keasler", "Charles LeGrand", "Gary Bitemning", "Helen Moren"];
-	$('table.players.1').autoRender(context);}
-
-/* * * * * * * * * * * * * * * * * * * * * *
- *     E X A M P L E      3 
- * * * * * * * * * * * * * * * * * * * * * */			
-function render3(){
-	var context = {
-		"id": "3456",
-		sites: [{ 
-			"name": "Beebole","url": "http://beebole.com"}, {
-			"name": "BeeBuzz", "url": "http://beebole.com/blog"}, {
-			"name": "PURE",	  "url": "http://beebole.com/pure"}]};
-	
-	$('ol.teamList').autoRender( context);}
-
-	/* Note: 
-	 	to access the attributes of the root of the html use a directive as above for the id.
-		Only the name of the attribute is provided between brackets
-		For auto-rendering use the @ symbol as: property@attribute
-		i.e: url@href
-	*/
-
-/* * * * * * * * * * * * * * * * * * * * * *
- *     E X A M P L E      4 
- * * * * * * * * * * * * * * * * * * * * * */			
-function swapStyle(obj, inOut){
-	obj.className = (inOut) ? 'player hover' : 'player';};
-
-function clickLine(obj){ 
-	alert(obj.innerHTML)};
-
-function render4(button){
-	// simulate a ajax-jsonp call, that will load here a static js, and call the example4CallBack function
-	button.value = 'loading data...';
-    timer.begin('loading data');
-				var jsonSmall = ["Adrian Meador","Bryan O'Connor","Michèle Noïjû","تصبح عالميا مع يونيكود","Γέφυρα γρύλων","Chloé Ellemême","глобальных масштабах","יוצא לשוק העולמי","La \"volante\"","Todd Swift","Valerie Paige","Walter Hagelstein","Wendy Leatherbury"];
-	var script = (button.id == 'b4_2') ? 'js/jsonBig.js':'js/jsonSmall.js';
-	$(button).get(script, function(context) {
-		timer.log('Rendering');
-		context = eval(context);
-		var directive = {
-		'tbody tr td[onclick]':'"clickLine(this)"',
-		'tbody tr td[onmouseover]': '"swapStyle(this, true);"', 
-		'tbody tr td[onmouseout]' : '"swapStyle(this, false);"',
-		'tbody tr td[style]':'\'cursor:pointer\'',
-		
-		'tbody tr[class]': 
-			function(arg){
-				var oddEven =  (arg.pos % 2 == 0) ? 'even' : 'odd';
-				var firstLast = (arg.pos == 0) ? 'first': (arg.pos == arg.items.length -1) ? 'last':'';
-				return oddEven + ' ' + firstLast; }
-		};
-		var p = $('table.players.2').first().parentNode;
-		$('table.players.2').autoRender(context, directive);
-		p.insertBefore(p.create('div', null, false, timer.end()), p.firstChild);
-		button.value = 'Refresh the page to render again';
-	});
-}
-
-	/*Note: 
-		by default a directive replace the content of the selected node or attribute
-		If an append or prepend is necessary we use +
-		+<selector> means prepend the directive to the existing selected content
-		<selector>+ means append the directive to the existing selected content
-
-		Here as well is an example of attaching events to the HTML.
-		Not sure if there is another way of passing such objects to the transformation.
-		It has de advantage of not having to parse again the html to attach events after the transformation.
-	 */
-
-/* * * * * * * * * * * * * * * * * * * * * *
- *     E X A M P L E      5 
- * * * * * * * * * * * * * * * * * * * * * */			
-var row = {
-	odd: 'odd',
-	even:'even',
-	decorator: function(arg){
-		return (arg.pos % 2 == 1) ? this.even : this.odd;}}
-		
-function lineNb(arg){
-	return arg.pos+1;}
-
-function render5(){
-	var context = {
-		'teams': [{
-			'name':'Cats',
-			'players':[	
-				{"name":"Alice Keasler", "score":14}, 
-				{"name":"Mary Cain", "score":15}, 
-				{"name":"Vicky Benoit", "score":15}, 
-				{"name":"Wayne Dartt", "score":11}]},{
-			
-			'name':'Dogs',
-			'players': [
-				{"name":"Ray Braun", "score":14}, 
-				{"name":"Aaron Ben", "score":24}, 
-				{"name":"Steven Smith", "score":1}, 
-				{"name":"Kim Caffey", "score":19}]},{
-			
-			'name':'Mices',
-			'players': [
-				{"name":"Natalie Kinney", "score":16}, 
-				{"name":"Caren Cohen", "score":3}]}]}
-
-	var scoreBoard = $('table.scoreBoard').mapDirective({
-		'tbody tr': 'team <- teams',
-		'td.teamName': 'team.name'
-	});
-	
-	var teamList = scoreBoard.cssSelect('table.teamList').first()
-		.mapDirective({
-			'tbody tr': 'player <- team.players',
-			'td.player': 'player.name',
-			'td.score': 'player.score',
-			'td.position': lineNb, //passing the pointer of a function that does not use "this"
-			'tbody tr[class]': function(arg){ return row.decorator(arg) } }); //show how to wrap a method and not breack the use of "this"
-	
-	scoreBoard.cssSelect('td.teamPlace').replaceContent(teamList); //place sub-template teamList in scoreBoard
-	$p.compile(scoreBoard, 'f5'); //compile to a function
-    $('div#render5').replaceContent($p.render('f5', context));} //place the result of the transformation to the innerHTML of div#render5
-
-/* Note: 
-	Here we compile the HTML to a function called f5.
-	This function can then be saved in a js file(using the $p.getRuntime method)
-	and called by the function render as above
-*/
-
-/* * * * * * * * * * * * * * * * * * * * * *
- *     E X A M P L E      6 
- * * * * * * * * * * * * * * * * * * * * * */			
-function render6(){
-
-	var context = {
-		children: [{
-			name:'Europe',
-			children:[{
-				name:'Belgium', 
-				children:[{
-					name:'Brussels'},{
-					name:'Namur'},{
-					name:'Antwerpen'}]},{
-				name:'Germany'},{
-				name:'UK'}
-			]},{
-			name:'America',
-			children:[{
-				name:'US',
-				children:[{
-					name:'Alabama'},{
-					name:'Georgia'}
-				]},{
-					name:'Canada'},{
-					name:'Argentina'}]},{
-			name:'Asia'},{
-			name:'Africa'},{
-			name:'Antartica'}]};
-	var directive = {
-		'li+':function(arg){
-			if(arg.item.children){
-				return $p.compiledFunctions.tree.compiled(arg.item);}}};
-
-	$('ul.treeItem').compile('tree', directive, context);
-	$('ul.treeItem').render(context, 'tree');}
-		
-/*Note: 
-	the last directive is an array instead of a string. This is useful
-	when we want to set various directives on the same node.
-*/
-
-
-//nothing with PURE here, just some utility for this page
-function clickButton(obj, render){
-	obj.disabled = true;
-	obj.value = 'Refresh the page to render again';
-	if (arguments[2]) 
-		$(arguments[2]).remove();
-	if (/Firefox/i.test(navigator.userAgent)) 
-		obj.type = 'submit';//to have buttons back when refreshing the page in FF
-	render(obj);
-}
-var timer = {
-	trace: [],
-	begin:function(msg){
-		this.start = 0;
-		this.log(msg);},
-
-	end: function(msg){
-		this.log(msg||'end');
-		if(!$p.compiledFunctions.timerTraceTable);
-			$p.autoCompile($('table.timerTraceTable')[0], 'timerTraceTable', this.trace);
-		return $p.render('timerTraceTable', this.trace);},
-
-	log: function(msg){
-		var now = function(){
-			var now = new Date();
-			return now.getTime();}
-		
-		if (this.start) 
-			this.diff = now() - this.start;
-		else {
-			this.diff = 0;
-			this.acc = 0;}
-		this.acc += this.diff;
-		this.start = now();
-		if(this.trace[this.trace.length-1]) this.trace[this.trace.length-1].timerDuration = this.diff;
-		this.trace.push({timerMsg:msg, timerDuration: 0, timerTime: this.acc});}}

docs/js/allExamples-for-Sizzle.js

-/* * * * * * * * * * * * * * * * * * * * * *
- *     E X A M P L E      1 
- * * * * * * * * * * * * * * * * * * * * * */			
-function render1(){
-	$p.sizzle('div#hello').autoRender({ "who": "Mary" });}
-
-
-/* * * * * * * * * * * * * * * * * * * * * *
- *     E X A M P L E      2 
- * * * * * * * * * * * * * * * * * * * * * */			
-function render2(){
-	var context = ["Alice Keasler", "Charles LeGrand", "Gary Bitemning", "Helen Moren"];
-	$p.sizzle('#players1').autoRender(context);}
-
-/* * * * * * * * * * * * * * * * * * * * * *
- *     E X A M P L E      3 
- * * * * * * * * * * * * * * * * * * * * * */			
-function render3(){
-	var context = {
-		"id": "3456",
-		sites: [{ 
-			"name": "Beebole","url": "http://beebole.com"}, {
-			"name": "BeeBuzz", "url": "http://beebole.com/blog"}, {
-			"name": "PURE",	  "url": "http://beebole.com/pure"}]};
-	
-	$p.sizzle('#siteList').autoRender(context);}
-
-	/* Note: 
-	 	to access the attributes of the root of the html use a directive as above for the id.
-		Only the name of the attribute is provided between brackets
-		For auto-rendering use the @ symbol as: property@attribute
-		i.e: url@href
-	*/
-
-/* * * * * * * * * * * * * * * * * * * * * *
- *     E X A M P L E      4 
- * * * * * * * * * * * * * * * * * * * * * */			
-function swapStyle(obj, inOut){
-	obj.className = (inOut) ? 'player hover' : 'player';};
-
-function clickLine(obj){ 
-	alert(obj.innerHTML)};
-
-function render4(button){
-	// simulate a ajax-jsonp call, that will load here a static js, and call the example4CallBack function
-	button.value = 'loading data...';
-    timer.begin('loading data');
-	var context = ["Adrian Meador","Bryan O'Connor","Michèle Noïjû","تصبح عالميا مع يونيكود","Γέφυρα γρύλων","Chloé Ellemême","глобальных масштабах","יוצא לשוק העולמי","La \"volante\"","Todd Swift","Valerie Paige","Walter Hagelstein","Wendy Leatherbury"];
-	    timer.log('Rendering');
-		var directive = {
-			'tbody tr[class]': function(arg){
-				//arg => {context:context, items:items, pos:pos, item:items[pos]};
-				var oddEven = (arg.pos % 2 == 0) ? 'even' : 'odd';
-				var firstLast = (arg.pos == 0) ? 'first' : (arg.pos == arg.items.length - 1) ? 'last' : '';
-				return oddEven + ' ' + firstLast;},
-			'tbody tr td[onclick]': "'clickLine(this)'", //show all differences of strings notationi "' '" '\'
-			'tbody tr td[onmouseover]': '"swapStyle(this, true);"',
-			'tbody tr td[onmouseout]': '\'swapStyle(this, false);\'',
-			'tbody tr td[style]': "\'cursor:pointer\'"}
-
-		$p.sizzle('table.players.2').autoRender(context, directive);
-		
-		$p.sizzle('div.timer')[0].innerHTML = timer.end();
-		button.value = 'Refresh the page to render again';}
-
-	/*Note: 
-		by default a directive replace the content of the selected node or attribute
-		If an append or prepend is necessary we use +
-		+<selector> means prepend the directive to the existing selected content
-		<selector>+ means append the directive to the existing selected content
-
-		Here as well is an example of attaching events to the HTML.
-		Not sure if there is another way of passing such objects to the transformation.
-		It has de advantage of not having to parse again the html to attach events after the transformation.
-	 */
-
-/* * * * * * * * * * * * * * * * * * * * * *
- *     E X A M P L E      5 
- * * * * * * * * * * * * * * * * * * * * * */			
-var row = {
-	odd: 'odd',
-	even:'even',
-	decorator: function(arg){
-		return (arg.pos % 2 == 1) ? this.even : this.odd;}}
-		
-function lineNb(arg){
-	return arg.pos+1;}
-
-function render5(){
-	var context = {
-		'teams': [{
-			'name':'Cats',
-			'players':[	
-				{"first":"Alice","last":"Keasler", "score":14}, 
-				{"first":"","name":"", "score":0},  //show an example of space and zero
-				{"first":"Vicky","last":"Benoit", "score":15}, 
-				{"first":"Wayne", "last":"Dartt", "score":11}]},{
-
-			'name':'Dogs',
-			'players': [
-				{"first":"Ray","last":"Braun", "score":14}, 
-				{"first":"Aaron","last":"Ben", "score":24}, 
-				{"first":"Steven","last":"Smith", "score":1}, 
-				{"first":"Kim", "last":"Caffey", "score":19}]},{
-
-			'name':'Mices',
-			'players': [
-				{"first":"Natalie","last":"Kinney", "score":16}, 
-				{"first":"Caren","last":"Cohen", "score":3}]}]}
-
-	var scoreBoard = $p.sizzle('table.scoreBoard').mapDirective({
-		'tbody tr': 'team <- teams',
-		'td.teamName': 'team.name'});
-
-	var teamList = $p.sizzle('table.teamList', scoreBoard[0])
-		.mapDirective({
-			'tbody tr': 'player <- team.players',
-			'td.player': '#{player.first} (#{player.last})',
-			'td.score': 'player.score',
-			'td.position+': lineNb, //passing the pointer of a function that does not use "this"
-			'tbody tr[class]+': function(arg){ return row.decorator(arg) } }); //show how to wrap a method and not breack the use of "this"
-
-	$p.sizzle('td.teamPlace', scoreBoard[0])[0].innerHTML = $p.utils.outerHTML(teamList[0]); //place sub-template teamList in scoreBoard
-	$p.compile(scoreBoard[0], 'f5'); //compile to a function
-   $p.sizzle('div#render5')[0].innerHTML = $p.render('f5', context);} //place the result of the transformation to the innerHTML of div#render5
-
-/* Note: 
-	Here we compile the HTML to a function called f5.
-	This function can then be saved in a js file(using the $p.getRuntime method)
-	and called by the function render as above
-*/
-
-/* * * * * * * * * * * * * * * * * * * * * *
- *     E X A M P L E      6 
- * * * * * * * * * * * * * * * * * * * * * */			
-function render6(){
-
-	var context = {
-		children: [{
-			name:'Europe',
-			children:[{
-				name:'Belgium', 
-				children:[{
-					name:'Brussels'},{
-					name:'Namur'},{
-					name:'Antwerpen'}]},{
-				name:'Germany'},{
-				name:'UK'}
-			]},{
-			name:'America',
-			children:[{
-				name:'US',
-				children:[{
-					name:'Alabama'},{
-					name:'Georgia'}
-				]},{
-					name:'Canada'},{
-					name:'Argentina'}]},{
-			name:'Asia'},{
-			name:'Africa'},{
-			name:'Antartica'}]};
-	var directive = {
-		'li+':function(arg){
-			if(arg.item.children){
-				return $p.compiledFunctions.tree.compiled(arg.item);}}};
-
-	$p.sizzle('ul.treeItem').compile('tree', directive, context);
-	$p.sizzle('ul.treeItem').render(context, 'tree');}
-		
-/*Note: 
-	the last directive is an array instead of a string. This is useful
-	when we want to set various directives on the same node.
-*/
-
-//nothing with PURE here, just some utility for this page
-function clickButton(obj, render){
-	obj.disabled = true;
-	obj.value = 'Refresh the page to render again';
-	if (arguments[2]) {
-		var elm = $p.sizzle(arguments[2])[0];
-		elm.parentNode.removeChild(elm);}
-	if (/Firefox/i.test(navigator.userAgent)) 
-		obj.type = 'submit';//to have buttons back when refreshing the page in FF
-	render(obj);
-}
-var timer = {
-	trace: [],
-	begin:function(msg){
-		this.start = 0;
-		this.log(msg);},
-
-	end: function(msg){
-		this.log(msg||'end');
-		if(!$p.compiledFunctions.timerTraceTable);
-			$p.autoCompile($p.sizzle('table.timerTraceTable')[0], 'timerTraceTable', this.trace);
-		return $p.render('timerTraceTable', this.trace);},
-
-	log: function(msg){
-		var now = function(){
-			var now = new Date();
-			return now.getTime();}
-		
-		if (this.start) 
-			this.diff = now() - this.start;
-		else {
-			this.diff = 0;
-			this.acc = 0;}
-		this.acc += this.diff;
-		this.start = now();
-		if(this.trace[this.trace.length-1]) this.trace[this.trace.length-1].timerDuration = this.diff;
-		this.trace.push({timerMsg:msg, timerDuration: 0, timerTime: this.acc});}}

docs/js/allExamples-for-mootools.js

-/* * * * * * * * * * * * * * * * * * * * * *
- *     E X A M P L E      1 
- * * * * * * * * * * * * * * * * * * * * * */			
-function render1(){
-	$('hello').autoRender({ "who": "Mary" });}
-
-	/* Note: 
-	  All the notation below are possible with different results:				
-
-		a) as above. replacing the html by itself transformed with the data
-			$('#hello').autoRender({ "who": "Mary" })
-
-		b) replacing the target by the html transformed
-			$('#hello').autoRender({ "who": "Mary" }, $('#target1'));
-		
-		
-		c) Replacing the content of a target
-			$('#target1').html( $p.autoRender($('#hello')[0], { "who": "Mary" }));
-
-
-		d) same as c) but without js framework (jQuery)
-			var target = document.getElementById('target1'); 
-			var html = document.getElementById('hello');
-			var data = { "who": "Mary" };
-			target.innerHTML = $p.autoRender( html, data );
-	*/
-
-
-/* * * * * * * * * * * * * * * * * * * * * *
- *     E X A M P L E      2 
- * * * * * * * * * * * * * * * * * * * * * */			
-function render2(){
-	var context = ["Alice Keasler", "Charles LeGrand", "Gary Bitemning", "Helen Moren"];
-	$('players1').autoRender(context);}
-
-/* * * * * * * * * * * * * * * * * * * * * *
- *     E X A M P L E      3 
- * * * * * * * * * * * * * * * * * * * * * */			
-function render3(){
-	var context = {
-		"id": "3456",
-		sites: [{ 
-			"name": "Beebole","url": "http://beebole.com"}, {
-			"name": "BeeBuzz", "url": "http://beebole.com/blog"}, {
-			"name": "PURE",	  "url": "http://beebole.com/pure"}]};
-	
-	$('siteList').autoRender(context);}
-
-	/* Note: 
-	 	to access the attributes of the root of the html use a directive as above for the id.
-		Only the name of the attribute is provided between brackets
-		For auto-rendering use the @ symbol as: property@attribute
-		i.e: url@href
-	*/
-
-/* * * * * * * * * * * * * * * * * * * * * *
- *     E X A M P L E      4 
- * * * * * * * * * * * * * * * * * * * * * */			
-function swapStyle(obj, inOut){
-	obj.className = (inOut) ? 'player hover' : 'player';};
-
-function clickLine(obj){ 
-	alert(obj.innerHTML)};
-
-function render4(button){
-
-	// simulate a ajax-jsonp call, that will load here a static js, and call the example4CallBack function
-	button.value = 'loading data...';
-	timer.begin('loading data');
-	var script = (button.id == 'b4_2') ? 'js/jsonBig.js':'js/jsonSmall.js';
-	var request = new Request({
-        method: 'get',
-        url: script,
-        isSuccess: function() {
-            // TODO: revisar porque se necesita forzar el isSuccess
-            return true;
-        },
-        onSuccess: function(responseText) { 
-			var context = JSON.decode(responseText);
-			timer.log('Rendering');
-			var directive = {
-				'tbody tr td[onclick]': "'clickLine(this)'", //show all differences of strings notationi "' '" '\'
-				'tbody tr td[onmouseover]': '"swapStyle(this, true);"',
-				'tbody tr td[onmouseout]': '\'swapStyle(this, false);\'',
-				'tbody tr td[style]': "\'cursor:pointer\'",
-				'tbody tr[class]': function(arg){
-					//arg => {context:context, items:items, pos:pos, item:items[pos]};
-					var oddEven = (arg.pos % 2 == 0) ? 'even' : 'odd';
-					var firstLast = (arg.pos == 0) ? 'first' : (arg.pos == arg.items.length - 1) ? 'last' : '';
-					return oddEven + ' ' + firstLast;
-				}
-			}
-
-			$('players2').autoRender(context, directive);
-		
-            var timerDiv = document.createElement('div');
-            timerDiv.innerHTML = timer.end();
-			$('players2').grab(timerDiv, 'before');
-
-			button.value = 'Refresh the page to render again';
-        }
-
-    });
-    
-    request.send();
-        
-}
-	
-	/*Note: 
-		by default a directive replace the content of the selected node or attribute
-		If an append or prepend is necessary we use +
-		+<selector> means prepend the directive to the existing selected content
-		<selector>+ means append the directive to the existing selected content
-
-		Here as well is an example of attaching events to the HTML.
-		Not sure if there is another way of passing such objects to the transformation.
-		It has de advantage of not having to parse again the html to attach events after the transformation.
-	 */
-
-/* * * * * * * * * * * * * * * * * * * * * *
- *     E X A M P L E      5 
- * * * * * * * * * * * * * * * * * * * * * */			
-var row = {
-	odd: 'odd',
-	even:'even',
-	decorator: function(arg){
-		return (arg.pos % 2 == 1) ? this.even : this.odd;}}
-		
-function lineNb(arg){
-	return arg.pos+1;}
-
-function render5(){
-	var context = {
-		'teams': [{
-			'name':'Cats',
-			'players':[	
-				{"name":"Alice Keasler", "score":14}, 
-				{"name":"", "score":0},  //show an example of space and zero
-				{"name":"Vicky Benoit", "score":15}, 
-				{"name":"Wayne Dartt", "score":11}]},{
-			
-			'name':'Dogs',
-			'players': [
-				{"name":"Ray Braun", "score":14}, 
-				{"name":"Aaron Ben", "score":24}, 
-				{"name":"Steven Smith", "score":1}, 
-				{"name":"Kim Caffey", "score":19}]},{
-			
-			'name':'Mices',
-			'players': [
-				{"name":"Natalie Kinney", "score":16}, 
-				{"name":"Caren Cohen", "score":3}]}]}
-	
-	var scoreBoard = $$('table.scoreBoard')[0].mapDirective({
-		'tbody tr': 'team <- teams',
-		'td.teamName': 'team.name'
-	});
-
-		
-	var teamList = scoreBoard.getElement('table.teamList')
-		.mapDirective({
-			'tbody tr': 'player <- team.players',
-			'td.player': 'player.name',
-			'td.score': 'player.score',
-			'td.position': lineNb, //passing the pointer of a function that does not use "this"
-			'tbody tr[class]': function(arg){ return row.decorator(arg) } }); //show how to wrap a method and not breack the use of "this"
-	scoreBoard.getElement('td.teamPlace').innerHTML = $p.utils.outerHTML(teamList); //place sub-template teamList in scoreBoard
-	$p.compile(scoreBoard, 'f5'); //compile to a function
-    $('render5').innerHTML = $p.render('f5', context);} //place the result of the transformation to the innerHTML of div#render5
-
-/* Note: 
-	Here we compile the HTML to a function called f5.
-	This function can then be saved in a js file(using the $p.getRuntime method)
-	and called by the function render as above
-*/
-
-/* * * * * * * * * * * * * * * * * * * * * *
- *     E X A M P L E      6 
- * * * * * * * * * * * * * * * * * * * * * */			
-function render6(){
-
-	var context = {
-		children: [{
-			name:'Europe',
-			children:[{
-				name:'Belgium', 
-				children:[{
-					name:'Brussels'},{
-					name:'Namur'},{
-					name:'Antwerpen'}]},{
-				name:'Germany'},{
-				name:'UK'}
-			]},{
-			name:'America',
-			children:[{
-				name:'US',
-				children:[{
-					name:'Alabama'},{
-					name:'Georgia'}
-				]},{
-					name:'Canada'},{
-					name:'Argentina'}]},{
-			name:'Asia'},{
-			name:'Africa'},{
-			name:'Antartica'}]};
-	var directive = {
-		'li+':function(arg){
-			if(arg.item.children){
-				return $p.compiledFunctions.tree.compiled(arg.item);}}};
-
-	$$('ul.treeItem')[0].compile('tree', directive, context);
-	$$('ul.treeItem')[0].render(context, 'tree');}
-		
-/*Note: 
-	the last directive is an array instead of a string. This is useful
-	when we want to set various directives on the same node.
-*/
-
-//nothing with PURE here, just some utility for this page
-function clickButton(obj, render){
-	obj.disabled = true;
-	obj.value = 'Refresh the page to render again';
-	if (arguments[2]) {
-		var idToRemove = arguments[2];
-		// Remove the '#' character from the id (used in JQuery)
-		// to support prototype in these samples
-		if (idToRemove.indexOf('#') == 0) {
-			idToRemove = idToRemove.substring(1);
-		}
-		$(idToRemove).destroy();
-	}
-	if (/Firefox/i.test(navigator.userAgent)) 
-		obj.type = 'submit';//to have buttons back when refreshing the page in FF
-	render(obj);
-}
-var timer = {
-	trace: [],
-	begin:function(msg){
-		this.start = 0;
-		this.log(msg);},
-
-	end: function(msg){
-		this.log(msg||'end');
-		if(!$p.compiledFunctions.timerTraceTable);
-			$p.autoCompile($$('table.timerTraceTable')[0], 'timerTraceTable', this.trace);
-		return $p.render('timerTraceTable', this.trace);},
-
-	log: function(msg){
-		var now = function(){
-			var now = new Date();
-			return now.getTime();}
-		
-		if (this.start) 
-			this.diff = now() - this.start;
-		else {
-			this.diff = 0;
-			this.acc = 0;}
-		this.acc += this.diff;
-		this.start = now();
-		if(this.trace[this.trace.length-1]) this.trace[this.trace.length-1].timerDuration = this.diff;
-		this.trace.push({timerMsg:msg, timerDuration: 0, timerTime: this.acc});}}

docs/js/allExamples-for-prototype.js

-/* * * * * * * * * * * * * * * * * * * * * *
- *     E X A M P L E      1 
- * * * * * * * * * * * * * * * * * * * * * */			
-function render1(){
-	$('hello').autoRender({ "who": "Mary" });}
-
-	/* Note: 
-	  All the notation below are possible with