<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>cnxLabs</title>
	<atom:link href="http://blog.conquex.com/?feed=rss2" rel="self" type="application/rss+xml" />
	<link>http://blog.conquex.com</link>
	<description>Conquex experiments</description>
	<lastBuildDate>Mon, 05 Jul 2010 11:50:09 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>B+ tree Javascript implementation</title>
		<link>http://blog.conquex.com/?p=84</link>
		<comments>http://blog.conquex.com/?p=84#comments</comments>
		<pubDate>Sat, 26 Sep 2009 15:27:26 +0000</pubDate>
		<dc:creator>nucleo</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[MooTools]]></category>
		<category><![CDATA[Vario]]></category>
		<category><![CDATA[Whirlwind/Furia]]></category>

		<guid isPermaLink="false">http://blog.conquex.com/?p=84</guid>
		<description><![CDATA[When all is just brought down to a brute force dataprocessing some issues come to mind:
sometimes plain hash tables are just not fast enough;
sometimes physical data storage is not fast enough either &#8211; too many seeks etc;
Well, there are some structures which allow us to bypass or relieve some of the bottlenecks, like trees for [...]]]></description>
			<content:encoded><![CDATA[<p>When all is just brought down to a brute force dataprocessing some issues come to mind:<br />
sometimes plain hash tables are just not fast enough;<br />
sometimes physical data storage is not fast enough either &#8211; too many seeks etc;</p>
<p>Well, there are some structures which allow us to bypass or relieve some of the bottlenecks, like trees for instance.<br />
Last week, while working on our dataset structure for <span style="color: #ffffff;">cnxWhirlwind</span>, I came to the idea of using a B+ tree implementation for indexing the storage structure.<br />
While, it is probably one of the most efficient solutions for storing and retrieving chunks based on a key lookup from large amounts of data, it surprisingly was not the fastest one while implemented in <a href="http://en.wikipedia.org/wiki/JavaScript">Javascript</a> AND used for a single node extraction search. Well, the range search is totally another beer <img src='http://blog.conquex.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /><br />
If you&#8217;re ok with the time penalty needed for building the B+ tree structure (ofc there&#8217;s a lot room for optimization), my bet is always on the B+ tree.</p>
<p>This is the current implementation and benchmark results :</p>
<p>Test box: <span style="color: #ffffff">Intel Core2Duo@2.67/4Gigs</span> of RAM<br />
Test browser: <span style="color: #ffffff">Google Chome v.3.0.195.21</span> and <span style="color: #ffffff">Mozilla Firefox v 3.5.3.</span> (IE was excluded for obvious reasons <img src='http://blog.conquex.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> )<br />
Test with <span style="color: #ffffff">500 000</span> rows of data (<span style="color: #ffffff">~5.5MB</span>) against:<br />
- plain hash ( <a href="http://en.wikipedia.org/wiki/JavaScript">Javascript</a> object)<br />
- array containing key/value object<br />
- B+tree implementation</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> LeafNode <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> <span style="color: #003366; font-weight: bold;">Class</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
&nbsp;
	initialize<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>order<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">order</span> <span style="color: #339933;">=</span> order<span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">isLeafNode</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">isInternalNode</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">parentNode</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">null</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">nextNode</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">null</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">prevNode</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">null</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">data</span> <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
	split<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		<span style="color: #003366; font-weight: bold;">var</span> tmp <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> LeafNode<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">order</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #003366; font-weight: bold;">var</span> m <span style="color: #339933;">=</span> Math.<span style="color: #660066;">ceil</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">data</span>.<span style="color: #660066;">length</span> <span style="color: #339933;">/</span> <span style="color: #CC0000;">2</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #003366; font-weight: bold;">var</span> k <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">data</span><span style="color: #009900;">&#91;</span>m<span style="color: #339933;">-</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">key</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">// Copy &amp; shift data</span>
		<span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> i<span style="color: #339933;">=</span><span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> i<span style="color: #339933;">&lt;</span>m<span style="color: #339933;">;</span> i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
			tmp.<span style="color: #660066;">data</span><span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">data</span>.<span style="color: #660066;">shift</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
		tmp.<span style="color: #660066;">parentNode</span> <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">parentNode</span><span style="color: #339933;">;</span>
		tmp.<span style="color: #660066;">nextNode</span> <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">;</span>
		tmp.<span style="color: #660066;">prevNode</span> <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">prevNode</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>tmp.<span style="color: #660066;">prevNode</span><span style="color: #009900;">&#41;</span> tmp.<span style="color: #660066;">prevNode</span>.<span style="color: #660066;">nextNode</span> <span style="color: #339933;">=</span> tmp<span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">prevNode</span> <span style="color: #339933;">=</span> tmp<span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">parentNode</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
			<span style="color: #003366; font-weight: bold;">var</span> p <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> InternalNode<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">order</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">parentNode</span> <span style="color: #339933;">=</span> tmp.<span style="color: #660066;">parentNode</span> <span style="color: #339933;">=</span> p<span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
&nbsp;
		<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">parentNode</span>.<span style="color: #660066;">insert</span><span style="color: #009900;">&#40;</span>k<span style="color: #339933;">,</span> tmp<span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
	insert<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>key<span style="color: #339933;">,</span> value<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		<span style="color: #003366; font-weight: bold;">var</span> pos <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span><span style="color: #339933;">;</span> pos<span style="color: #339933;">&lt;</span>this.<span style="color: #660066;">data</span>.<span style="color: #660066;">length</span><span style="color: #339933;">;</span> pos<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
			<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">data</span><span style="color: #009900;">&#91;</span>pos<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">key</span> <span style="color: #339933;">==</span> key<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">data</span><span style="color: #009900;">&#91;</span>pos<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">value</span> <span style="color: #339933;">=</span> value<span style="color: #339933;">;</span>
				<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">null</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>
			<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">data</span><span style="color: #009900;">&#91;</span>pos<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">key</span> <span style="color: #339933;">&gt;</span> key<span style="color: #009900;">&#41;</span> <span style="color: #000066; font-weight: bold;">break</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
&nbsp;
		<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">data</span><span style="color: #009900;">&#91;</span>pos<span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">data</span>.<span style="color: #660066;">splice</span><span style="color: #009900;">&#40;</span>pos<span style="color: #339933;">,</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">,</span> <span style="color: #009900;">&#123;</span><span style="color: #3366CC;">&quot;key&quot;</span><span style="color: #339933;">:</span> key<span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;value&quot;</span><span style="color: #339933;">:</span> value<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">else</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">data</span>.<span style="color: #660066;">push</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span><span style="color: #3366CC;">&quot;key&quot;</span><span style="color: #339933;">:</span> key<span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;value&quot;</span><span style="color: #339933;">:</span> value<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #006600; font-style: italic;">// Split</span>
		<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">data</span>.<span style="color: #660066;">length</span> <span style="color: #339933;">&gt;</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">order</span><span style="color: #009900;">&#41;</span> <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">split</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">null</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">var</span> InternalNode <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> <span style="color: #003366; font-weight: bold;">Class</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
&nbsp;
	initialize<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>order<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">order</span> <span style="color: #339933;">=</span> order<span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">isLeafNode</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">isInternalNode</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">parentNode</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">null</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">data</span> <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
	split<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		<span style="color: #003366; font-weight: bold;">var</span> m <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">null</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">order</span> <span style="color: #339933;">%</span> <span style="color: #CC0000;">2</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
			<span style="color: #003366; font-weight: bold;">var</span> m <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">data</span>.<span style="color: #660066;">length</span><span style="color: #339933;">-</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">/</span><span style="color: #CC0000;">2</span> <span style="color: #339933;">-</span> <span style="color: #CC0000;">1</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #000066; font-weight: bold;">else</span><span style="color: #009900;">&#123;</span>
			<span style="color: #003366; font-weight: bold;">var</span> m <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">data</span>.<span style="color: #660066;">length</span><span style="color: #339933;">-</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">/</span><span style="color: #CC0000;">2</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
&nbsp;
		<span style="color: #003366; font-weight: bold;">var</span> tmp <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> InternalNode<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">order</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		tmp.<span style="color: #660066;">parentNode</span> <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">parentNode</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> i<span style="color: #339933;">=</span><span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> i<span style="color: #339933;">&lt;</span>m<span style="color: #339933;">;</span> i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
			tmp.<span style="color: #660066;">data</span><span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">data</span>.<span style="color: #660066;">shift</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
		<span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> i<span style="color: #339933;">=</span><span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> i<span style="color: #339933;">&lt;</span>tmp.<span style="color: #660066;">data</span>.<span style="color: #660066;">length</span><span style="color: #339933;">;</span> i<span style="color: #339933;">+=</span><span style="color: #CC0000;">2</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
			tmp.<span style="color: #660066;">data</span><span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">parentNode</span> <span style="color: #339933;">=</span> tmp<span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
		<span style="color: #003366; font-weight: bold;">var</span> key <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">data</span>.<span style="color: #660066;">shift</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">parentNode</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
			<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">parentNode</span> <span style="color: #339933;">=</span> tmp.<span style="color: #660066;">parentNode</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> InternalNode<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">order</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
&nbsp;
		<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">parentNode</span>.<span style="color: #660066;">insert</span><span style="color: #009900;">&#40;</span>key<span style="color: #339933;">,</span> tmp<span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
	insert<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>key<span style="color: #339933;">,</span> node1<span style="color: #339933;">,</span> node2<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">data</span>.<span style="color: #660066;">length</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
			<span style="color: #003366; font-weight: bold;">var</span> pos <span style="color: #339933;">=</span> <span style="color: #CC0000;">1</span><span style="color: #339933;">;</span>
			<span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span><span style="color: #339933;">;</span> pos <span style="color: #339933;">&lt;</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">data</span>.<span style="color: #660066;">length</span><span style="color: #339933;">;</span> pos<span style="color: #339933;">+=</span><span style="color: #CC0000;">2</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
				<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">data</span><span style="color: #009900;">&#91;</span>pos<span style="color: #009900;">&#93;</span> <span style="color: #339933;">&gt;</span> key<span style="color: #009900;">&#41;</span> <span style="color: #000066; font-weight: bold;">break</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>
&nbsp;
			<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">data</span><span style="color: #009900;">&#91;</span>pos<span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				pos<span style="color: #339933;">--;</span>
				<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">data</span>.<span style="color: #660066;">splice</span><span style="color: #009900;">&#40;</span>pos<span style="color: #339933;">,</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">,</span> key<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">data</span>.<span style="color: #660066;">splice</span><span style="color: #009900;">&#40;</span>pos<span style="color: #339933;">,</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">,</span> node1<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span><span style="color: #000066; font-weight: bold;">else</span><span style="color: #009900;">&#123;</span>
				<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">data</span><span style="color: #009900;">&#91;</span>pos<span style="color: #339933;">-</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> node1<span style="color: #339933;">;</span>
				<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">data</span>.<span style="color: #660066;">push</span><span style="color: #009900;">&#40;</span>key<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">data</span>.<span style="color: #660066;">push</span><span style="color: #009900;">&#40;</span>node2<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>
&nbsp;
			<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">data</span>.<span style="color: #660066;">length</span> <span style="color: #339933;">&gt;</span> <span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">order</span><span style="color: #339933;">*</span><span style="color: #CC0000;">2</span><span style="color: #339933;">+</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
				<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">split</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>
			<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">null</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #000066; font-weight: bold;">else</span><span style="color: #009900;">&#123;</span>
			<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">data</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> node1<span style="color: #339933;">;</span>
			<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">data</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> key<span style="color: #339933;">;</span>
			<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">data</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">2</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> node2<span style="color: #339933;">;</span>
			<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
	<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
&nbsp;
<span style="color: #003366; font-weight: bold;">var</span> BPlusTree <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> <span style="color: #003366; font-weight: bold;">Class</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
&nbsp;
	Implements<span style="color: #339933;">:</span> <span style="color: #009900;">&#91;</span>Options<span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span>
&nbsp;
	options<span style="color: #339933;">:</span> <span style="color: #009900;">&#123;</span>
		order<span style="color: #339933;">:</span> <span style="color: #CC0000;">2</span> <span style="color: #006600; font-style: italic;">// Min 1</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
	initialize<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>options<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">setOptions</span><span style="color: #009900;">&#40;</span>options<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">root</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> LeafNode<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">options</span>.<span style="color: #660066;">order</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
	set<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>key<span style="color: #339933;">,</span> value<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		<span style="color: #003366; font-weight: bold;">var</span> node <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>._search<span style="color: #009900;">&#40;</span>key<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #003366; font-weight: bold;">var</span> ret <span style="color: #339933;">=</span> node.<span style="color: #660066;">insert</span><span style="color: #009900;">&#40;</span>key<span style="color: #339933;">,</span> value<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>ret<span style="color: #009900;">&#41;</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">root</span> <span style="color: #339933;">=</span> ret<span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
	get<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>key<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		<span style="color: #003366; font-weight: bold;">var</span> node <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>._search<span style="color: #009900;">&#40;</span>key<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> i<span style="color: #339933;">=</span><span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> i<span style="color: #339933;">&lt;</span>node.<span style="color: #660066;">data</span>.<span style="color: #660066;">length</span><span style="color: #339933;">;</span> i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
			<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>node.<span style="color: #660066;">data</span><span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">key</span> <span style="color: #339933;">==</span> key<span style="color: #009900;">&#41;</span> <span style="color: #000066; font-weight: bold;">return</span> node.<span style="color: #660066;">data</span><span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">value</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
		<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">null</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
	getNode<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>key<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span>._search<span style="color: #009900;">&#40;</span>key<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
	_search<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>key<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		<span style="color: #003366; font-weight: bold;">var</span> current <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">root</span><span style="color: #339933;">;</span>
		<span style="color: #003366; font-weight: bold;">var</span> found <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #000066; font-weight: bold;">while</span><span style="color: #009900;">&#40;</span>current.<span style="color: #660066;">isInternalNode</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
			found <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
			<span style="color: #003366; font-weight: bold;">var</span> len <span style="color: #339933;">=</span> current.<span style="color: #660066;">data</span>.<span style="color: #660066;">length</span><span style="color: #339933;">;</span>
			<span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> i<span style="color: #339933;">=</span><span style="color: #CC0000;">1</span><span style="color: #339933;">;</span> i<span style="color: #339933;">&lt;</span>len<span style="color: #339933;">;</span> i<span style="color: #339933;">+=</span><span style="color: #CC0000;">2</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
				<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span> key <span style="color: #339933;">&lt;=</span> current.<span style="color: #660066;">data</span><span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
					current <span style="color: #339933;">=</span> current.<span style="color: #660066;">data</span><span style="color: #009900;">&#91;</span>i<span style="color: #339933;">-</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
					found <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">;</span>
					<span style="color: #000066; font-weight: bold;">break</span><span style="color: #339933;">;</span>
				<span style="color: #009900;">&#125;</span>
			<span style="color: #009900;">&#125;</span>
&nbsp;
			<span style="color: #006600; font-style: italic;">// Follow infinity pointer</span>
			<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span>found<span style="color: #009900;">&#41;</span> current <span style="color: #339933;">=</span> current.<span style="color: #660066;">data</span><span style="color: #009900;">&#91;</span>len <span style="color: #339933;">-</span> <span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
&nbsp;
		<span style="color: #000066; font-weight: bold;">return</span> current<span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
	<span style="color: #006600; font-style: italic;">// B+ tree dump routines</span>
	walk<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>node<span style="color: #339933;">,</span> level<span style="color: #339933;">,</span> arr<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		<span style="color: #003366; font-weight: bold;">var</span> current <span style="color: #339933;">=</span> node<span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span>arr<span style="color: #009900;">&#91;</span>level<span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span> arr<span style="color: #009900;">&#91;</span>level<span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>current.<span style="color: #660066;">isLeafNode</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
			<span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> i<span style="color: #339933;">=</span><span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> i<span style="color: #339933;">&lt;</span>current.<span style="color: #660066;">data</span>.<span style="color: #660066;">length</span><span style="color: #339933;">;</span> i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
				arr<span style="color: #009900;">&#91;</span>level<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">push</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;&lt;&quot;</span><span style="color: #339933;">+</span>current.<span style="color: #660066;">data</span><span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">key</span><span style="color: #339933;">+</span><span style="color: #3366CC;">&quot;&gt;&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>
			arr<span style="color: #009900;">&#91;</span>level<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">push</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot; -&gt; &quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #000066; font-weight: bold;">else</span><span style="color: #009900;">&#123;</span>
&nbsp;
			<span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> i<span style="color: #339933;">=</span><span style="color: #CC0000;">1</span><span style="color: #339933;">;</span> i<span style="color: #339933;">&lt;</span>node.<span style="color: #660066;">data</span>.<span style="color: #660066;">length</span><span style="color: #339933;">;</span> i<span style="color: #339933;">+=</span><span style="color: #CC0000;">2</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
				arr<span style="color: #009900;">&#91;</span>level<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">push</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;&lt;&quot;</span><span style="color: #339933;">+</span>node.<span style="color: #660066;">data</span><span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span><span style="color: #339933;">+</span><span style="color: #3366CC;">&quot;&gt;&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>
			arr<span style="color: #009900;">&#91;</span>level<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">push</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot; -&gt; &quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> i<span style="color: #339933;">=</span><span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> i<span style="color: #339933;">&lt;</span>node.<span style="color: #660066;">data</span>.<span style="color: #660066;">length</span><span style="color: #339933;">;</span> i<span style="color: #339933;">+=</span><span style="color: #CC0000;">2</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">walk</span><span style="color: #009900;">&#40;</span>node.<span style="color: #660066;">data</span><span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span> level<span style="color: #339933;">+</span><span style="color: #CC0000;">1</span><span style="color: #339933;">,</span> arr<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>
&nbsp;
		<span style="color: #009900;">&#125;</span>
		<span style="color: #000066; font-weight: bold;">return</span> arr<span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
	dump<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		<span style="color: #003366; font-weight: bold;">var</span> arr <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">walk</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">root</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">,</span> arr<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> i<span style="color: #339933;">=</span><span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> i<span style="color: #339933;">&lt;</span>arr.<span style="color: #660066;">length</span><span style="color: #339933;">;</span> i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
			<span style="color: #003366; font-weight: bold;">var</span> s <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;&quot;</span><span style="color: #339933;">;</span>
			<span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> j<span style="color: #339933;">=</span><span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> j<span style="color: #339933;">&lt;</span>arr<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">length</span><span style="color: #339933;">;</span> j<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
				s <span style="color: #339933;">+=</span> arr<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span><span style="color: #009900;">&#91;</span>j<span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>
			console.<span style="color: #660066;">log</span><span style="color: #009900;">&#40;</span>s<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
	<span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>Results:</p>
<p><span style="color: #ffffff;">Mozilla Firefox</span>:<br />
Populate B+-tree elapsed time: <span style="color: #ffffff">41340</span><br />
Populate object elapsed time: <span style="color: #ffffff">750</span><br />
Populate array elapsed time: <span style="color: #ffffff">485</span><br />
Search B+-tree elapsed time: <span style="color: #ffffff">16</span><br />
Search object elapsed time: <span style="color: #ffffff">0</span><br />
Search array elapsed time: <span style="color: #ffffff">424539</span><br />
Range search B+-tree elapsed time: <span style="color: #ffffff">0</span><br />
Range search object elapsed time: <span style="color: #ffffff">122</span><br />
Range search array elapsed time: <span style="color: #ffffff">1420</span></p>
<p><span style="color: #ffffff;">Google Chrome</span>:<br />
Populate B+-tree elapsed time: <span style="color: #ffffff">19585</span><br />
Populate object elapsed time: <span style="color: #ffffff">841</span><br />
Populate array elapsed time: <span style="color: #ffffff">510</span><br />
Search B+-tree elapsed time: <span style="color: #ffffff">7</span><br />
Search object elapsed time: <span style="color: #ffffff">0</span><br />
Search array elapsed time: <span style="color: #ffffff">9775</span><br />
Range search B+-tree elapsed time:<span style="color: #ffffff"> 0</span><br />
Range search object elapsed time: <span style="color: #ffffff">296</span><br />
Range search array elapsed time: <span style="color: #ffffff">586</span></p>
<p><span style="color: #ffffff">Test routines:</span></p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> num <span style="color: #339933;">=</span> <span style="color: #CC0000;">500000</span><span style="color: #339933;">;</span>
	<span style="color: #003366; font-weight: bold;">var</span> key <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;key&quot;</span><span style="color: #339933;">+</span><span style="color: #CC0000;">250000</span><span style="color: #339933;">;</span>
	<span style="color: #003366; font-weight: bold;">var</span> key1 <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;key&quot;</span><span style="color: #339933;">+</span><span style="color: #CC0000;">200000</span><span style="color: #339933;">;</span>
	<span style="color: #003366; font-weight: bold;">var</span> key2 <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;key&quot;</span><span style="color: #339933;">+</span><span style="color: #CC0000;">300000</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #003366; font-weight: bold;">var</span> searchCount <span style="color: #339933;">=</span> <span style="color: #CC0000;">1000</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #006600; font-style: italic;">// Populate time</span>
	<span style="color: #003366; font-weight: bold;">var</span> start <span style="color: #339933;">=</span> $time<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #003366; font-weight: bold;">var</span> tree <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> BPlusTree<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>order<span style="color: #339933;">:</span> <span style="color: #CC0000;">100</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> i<span style="color: #339933;">=</span><span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> i<span style="color: #339933;">&amp;</span>lt<span style="color: #339933;">;</span>num<span style="color: #339933;">;</span> i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		tree.<span style="color: #660066;">set</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;key&quot;</span><span style="color: #339933;">+</span>i<span style="color: #339933;">,</span> i<span style="color: #339933;">+</span><span style="color: #3366CC;">&quot; - value&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
	<span style="color: #003366; font-weight: bold;">var</span> end <span style="color: #339933;">=</span> $time<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	console.<span style="color: #660066;">log</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Populate B+-tree elapsed time: &quot;</span> <span style="color: #339933;">+</span> <span style="color: #009900;">&#40;</span>end <span style="color: #339933;">-</span> start<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	start <span style="color: #339933;">=</span> $time<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #003366; font-weight: bold;">var</span> obj <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
	<span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> i<span style="color: #339933;">=</span><span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> i<span style="color: #339933;">&amp;</span>lt<span style="color: #339933;">;</span>num<span style="color: #339933;">;</span> i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		obj<span style="color: #009900;">&#91;</span><span style="color: #3366CC;">&quot;key&quot;</span><span style="color: #339933;">+</span>i<span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> i<span style="color: #339933;">+</span><span style="color: #3366CC;">&quot; - value&quot;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
	end <span style="color: #339933;">=</span> $time<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	console.<span style="color: #660066;">log</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Populate object elapsed time: &quot;</span> <span style="color: #339933;">+</span> <span style="color: #009900;">&#40;</span>end <span style="color: #339933;">-</span> start<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	start <span style="color: #339933;">=</span> $time<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #003366; font-weight: bold;">var</span> arr <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
	<span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> i<span style="color: #339933;">=</span><span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> i<span style="color: #339933;">&amp;</span>lt<span style="color: #339933;">;</span>num<span style="color: #339933;">;</span> i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		arr<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span><span style="color: #3366CC;">&quot;key&quot;</span><span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;key&quot;</span><span style="color: #339933;">+</span>i<span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;value&quot;</span><span style="color: #339933;">:</span><span style="color: #009900;">&#40;</span>i<span style="color: #339933;">+</span><span style="color: #3366CC;">&quot; - value&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
	end <span style="color: #339933;">=</span> $time<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	console.<span style="color: #660066;">log</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Populate array elapsed time: &quot;</span> <span style="color: #339933;">+</span> <span style="color: #009900;">&#40;</span>end <span style="color: #339933;">-</span> start<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #006600; font-style: italic;">// Search</span>
	start <span style="color: #339933;">=</span> $time<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> i<span style="color: #339933;">=</span><span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> i<span style="color: #339933;">&amp;</span>lt<span style="color: #339933;">;</span>searchCount<span style="color: #339933;">;</span>i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		<span style="color: #003366; font-weight: bold;">var</span> x <span style="color: #339933;">=</span> tree.<span style="color: #660066;">get</span><span style="color: #009900;">&#40;</span>key<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
	end <span style="color: #339933;">=</span> $time<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	console.<span style="color: #660066;">log</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Search B+-tree elapsed time: &quot;</span> <span style="color: #339933;">+</span> <span style="color: #009900;">&#40;</span>end <span style="color: #339933;">-</span> start<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	start <span style="color: #339933;">=</span> $time<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> i<span style="color: #339933;">=</span><span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> i<span style="color: #339933;">&amp;</span>lt<span style="color: #339933;">;</span>searchCount<span style="color: #339933;">;</span>i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		<span style="color: #003366; font-weight: bold;">var</span> x <span style="color: #339933;">=</span> obj<span style="color: #009900;">&#91;</span>key<span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
	end <span style="color: #339933;">=</span> $time<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	console.<span style="color: #660066;">log</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Search object elapsed time: &quot;</span> <span style="color: #339933;">+</span> <span style="color: #009900;">&#40;</span>end <span style="color: #339933;">-</span> start<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	start <span style="color: #339933;">=</span> $time<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> i<span style="color: #339933;">=</span><span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> i<span style="color: #339933;">&amp;</span>lt<span style="color: #339933;">;</span>searchCount<span style="color: #339933;">;</span>i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> j<span style="color: #339933;">=</span><span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> j<span style="color: #339933;">&amp;</span>lt<span style="color: #339933;">;</span>num<span style="color: #339933;">;</span> j<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
			<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>arr<span style="color: #009900;">&#91;</span>j<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">key</span> <span style="color: #339933;">==</span> key<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				<span style="color: #003366; font-weight: bold;">var</span> x <span style="color: #339933;">=</span> arr<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">value</span><span style="color: #339933;">;</span>
				<span style="color: #000066; font-weight: bold;">break</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>
		<span style="color: #009900;">&#125;</span>
	<span style="color: #009900;">&#125;</span>
&nbsp;
	end <span style="color: #339933;">=</span> $time<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	console.<span style="color: #660066;">log</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Search array elapsed time: &quot;</span> <span style="color: #339933;">+</span> <span style="color: #009900;">&#40;</span>end <span style="color: #339933;">-</span> start<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>	
&nbsp;
	<span style="color: #006600; font-style: italic;">// Range search</span>
	start <span style="color: #339933;">=</span> $time<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #003366; font-weight: bold;">var</span> node <span style="color: #339933;">=</span> tree.<span style="color: #660066;">getNode</span><span style="color: #009900;">&#40;</span>key1<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #003366; font-weight: bold;">var</span> flag <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">;</span>
	<span style="color: #000066; font-weight: bold;">while</span><span style="color: #009900;">&#40;</span>flag<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> i<span style="color: #339933;">=</span><span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> i<span style="color: #339933;">&amp;</span>lt<span style="color: #339933;">;</span>node.<span style="color: #660066;">data</span>.<span style="color: #660066;">length</span><span style="color: #339933;">;</span>i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
			<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>key1 <span style="color: #339933;">&amp;</span>lt<span style="color: #339933;">;=</span> node.<span style="color: #660066;">data</span><span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">key</span> <span style="color: #339933;">&amp;</span>amp<span style="color: #339933;">;&amp;</span>amp<span style="color: #339933;">;</span> node.<span style="color: #660066;">data</span><span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">key</span> <span style="color: #339933;">&amp;</span>lt<span style="color: #339933;">;=</span> key2<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
				<span style="color: #003366; font-weight: bold;">var</span> x <span style="color: #339933;">=</span> node.<span style="color: #660066;">data</span><span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">value</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span><span style="color: #000066; font-weight: bold;">else</span><span style="color: #009900;">&#123;</span>
				flag <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
				<span style="color: #000066; font-weight: bold;">break</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>
		<span style="color: #009900;">&#125;</span>
		node <span style="color: #339933;">=</span> node.<span style="color: #660066;">nextNode</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
	end <span style="color: #339933;">=</span> $time<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	console.<span style="color: #660066;">log</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Range search B+-tree elapsed time: &quot;</span> <span style="color: #339933;">+</span> <span style="color: #009900;">&#40;</span>end <span style="color: #339933;">-</span> start<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	start <span style="color: #339933;">=</span> $time<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> p <span style="color: #000066; font-weight: bold;">in</span> obj<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>key1 <span style="color: #339933;">&amp;</span>lt<span style="color: #339933;">;=</span> p <span style="color: #339933;">&amp;</span>amp<span style="color: #339933;">;&amp;</span>amp<span style="color: #339933;">;</span> p <span style="color: #339933;">&amp;</span>lt<span style="color: #339933;">;=</span> key2<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
			<span style="color: #003366; font-weight: bold;">var</span> x <span style="color: #339933;">=</span> obj<span style="color: #009900;">&#91;</span>p<span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
	<span style="color: #009900;">&#125;</span>
	end <span style="color: #339933;">=</span> $time<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	console.<span style="color: #660066;">log</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Range search object elapsed time: &quot;</span> <span style="color: #339933;">+</span> <span style="color: #009900;">&#40;</span>end <span style="color: #339933;">-</span> start<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	start <span style="color: #339933;">=</span> $time<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> i<span style="color: #339933;">=</span><span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> i<span style="color: #339933;">&amp;</span>lt<span style="color: #339933;">;</span>arr.<span style="color: #660066;">length</span><span style="color: #339933;">;</span> i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>key1 <span style="color: #339933;">&amp;</span>lt<span style="color: #339933;">;=</span> arr<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">key</span> <span style="color: #339933;">&amp;</span>amp<span style="color: #339933;">;&amp;</span>amp<span style="color: #339933;">;</span> arr<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">key</span> <span style="color: #339933;">&amp;</span>lt<span style="color: #339933;">;=</span> key2<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #003366; font-weight: bold;">var</span> x <span style="color: #339933;">=</span> arr<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">data</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
	<span style="color: #009900;">&#125;</span>
	end <span style="color: #339933;">=</span> $time<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	console.<span style="color: #660066;">log</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Range search array elapsed time: &quot;</span> <span style="color: #339933;">+</span> <span style="color: #009900;">&#40;</span>end <span style="color: #339933;">-</span> start<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>Resources:<br />
- <a href="http://en.wikipedia.org/wiki/B%2B_tree">http://en.wikipedia.org/wiki/B%2B_tree</a><br />
- <a href="http://www.mec.ac.in/resources/notes/notes/ds/bplus.htm">http://www.mec.ac.in/resources/notes/notes/ds/bplus.htm</a></p>
]]></content:encoded>
			<wfw:commentRss>http://blog.conquex.com/?feed=rss2&amp;p=84</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>SVG/VML Javascript Chart part 1</title>
		<link>http://blog.conquex.com/?p=64</link>
		<comments>http://blog.conquex.com/?p=64#comments</comments>
		<pubDate>Thu, 02 Jul 2009 14:10:22 +0000</pubDate>
		<dc:creator>ivan</dc:creator>
				<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://blog.conquex.com/?p=64</guid>
		<description><![CDATA[Some time ago we&#8217;ve been working on a project, which required some reports and charts. We used an embedded version of Firefox 3 beta to run a web ajax application on the desktop. They have included some cool new features like native SVG support, which after some initial testing turned out to be working pretty [...]]]></description>
			<content:encoded><![CDATA[<div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Some time ago we&#8217;ve been working on a project, which required some reports and charts. We used an embedded version of Firefox 3 beta to run a web ajax application on the desktop. They have included some cool new features like native SVG support, which after some initial testing turned out to be working pretty well. Canvas was way more tested at that time, there were tons of demos on the web including some quite complex animations and even minigames. I&#8217;ve been wondering for a while which technology to use and chose SVG.</div>
<div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">The main reasons for that were two:</div>
<div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;"><font color="#ffffff">1</font>  It&#8217;s vector based, which means you don&#8217;t have to worry about things like resizing, opacity and gradient calculations &#8211; the browser will do all that for you.</div>
<div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;"><font color="#ffffff">2</font> It uses the DOM &#8211; if you need to get the whole thing interactive it should be quite easy to attach events to DOM elements and manipulate their attributes in a very familiar manner (haven&#8217;t tried to do that yet)</div>
<div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">So we had a pseudo 3D SVG bar chart working well in Firefox 3, which was not even declared stable yet &#8230;</div>
<div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">When it came to printing it though things got a bit more complex. I wanted to reuse as much of the code as I could. The natural way to do it was to move the whole SVG specific part in a separate renderer class and access different renderers through some graphics abstraction layer interface. The chart wouldn&#8217;t know if it renders as SVG or communicates with the XPCOM GDI printing component as long as they maintain the same interface and I could add other graphics implementations at a later time (hopefully without touching the chart code).</div>
<div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">The time came when we needed to use the same component in a pure web application. Some browsers wouldn&#8217;t support SVG, others (like Opera back then) would support it very badly. Fighting the problem with minimal efforts, I decided to write a serverside renderer and generate images on the server which I could later fetch and display (I&#8217;ll post about that soon).</div>
<div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Few days ago around the whole blog mania, a colleague showed me something working with VML in MSIE. It was worth trying to write a VML renderer since it&#8217;s supported on MSIE 5 or later and I needed to post something anyway &#8230; The end result was not as good as I expected &#8211; MSIE seems to render VML way slower than other browsers do SVG, it&#8217;s usable though. Had to do some workarounds, but as a whole no major obstacles appeared.</div>
<div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Some of the tricky parts that worth mentioning:</div>
<div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">1) When you do a transformation on a shape in SVG it will rotate the gradient or whatever you fill it with also. VML doesn&#8217;t do it exactly the same way so I needed to add a parameter for it.</div>
<div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">2) While SVG rotation is based at (0, 0) VML rotates the shape around it&#8217;s center and some calculations are needed to adjust the coordinates.</div>
<div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">I added some VML/SVG browser capabilities detection code, few buttons that change the chart parameters and packed everything together. You can download the whole thing from here or see a demo here.</div>
<p>Some time ago we&#8217;ve been working on a project, which required some reports and charts. We used an embedded version of Firefox 3 beta to run a web ajax application on the desktop. They have included some cool new features like native SVG support, which after some initial testing turned out to be working pretty well. Canvas was way more tested at that time, there were tons of demos on the web including some quite complex animations and even minigames. I&#8217;ve been wondering for a while which technology to use and chose <a href="http://www.w3.org/Graphics/SVG/" target="_blank">SVG</a>.</p>
<div class="iframe-wrapper">
  <iframe src="http://demos.conquex.com/blog/chart/index.html" frameborder="0" style="height:450px;width:935px;" SCROLLING="AUTO">Please upgrade your browser</iframe>
</div>
<p>The main reasons for that were two:</p>
<p><font color="#ffffff">1</font> It&#8217;s vector based, which means you don&#8217;t have to worry about things like resizing, opacity and gradient calculations &#8211; the browser will do all that for you.</p>
<p><font color="#ffffff">2</font> It uses the DOM &#8211; if you need to get the whole thing interactive it should be quite easy to attach events to DOM elements and manipulate their attributes in a very familiar manner (haven&#8217;t tried to do that yet)</p>
<p>So we had a pseudo 3D SVG bar chart working well in Firefox 3, which was not even declared stable yet &#8230;</p>
<p>When it came to printing it though things got a bit more complex. I wanted to reuse as much of the code as I could. The natural way to do it was to move the whole SVG specific part in a separate renderer class and access different renderers through some graphics abstraction layer interface. The chart wouldn&#8217;t know if it renders as SVG or communicates with the <a href="http://www.mozilla.org/projects/xpcom/" target="_blank">XPCOM</a> GDI printing component as long as they maintain the same interface and I could add other graphics implementations at a later time (hopefully without touching the chart code).</p>
<p>The time came when we needed to use the same component in a pure web application. Some browsers wouldn&#8217;t support SVG, others (like Opera back then) would support it very badly. Fighting the problem with minimal efforts, I decided to write a serverside renderer and generate images on the server which I could later fetch and display (I&#8217;ll post about that soon).</p>
<p>Few days ago around the whole blog mania, a colleague showed me something working with <a href="http://msdn.microsoft.com/en-us/library/bb250524(VS.85).aspx" target="_blank">VML </a>in MSIE. It was worth trying to write a VML renderer since it&#8217;s supported on MSIE 5 or later and I needed to post something anyway&#8230; The end result was not as good as I expected &#8211; MSIE seems to render VML way slower than other browsers do SVG, it&#8217;s usable though. Had to do some workarounds, but as a whole no major obstacles appeared.</p>
<p><font color="#ffffff">Some of the tricky parts that worth mentioning:</font></p>
<p><font color="#ffffff">1</font> When you do a transformation on a shape in SVG it will rotate the gradient or whatever you fill it with also. VML doesn&#8217;t do it exactly the same way so I needed to add a parameter for it.</p>
<p><font color="#ffffff">2</font> While SVG rotation is based at (0, 0) VML rotates the shape around it&#8217;s center and some calculations are needed to adjust the coordinates.</p>
<p>I added some VML/SVG browser capabilities detection code, few buttons that change the chart parameters and packed everything together. You can download the whole thing from <a href="http://demos.conquex.com/chart/chart.zip" target="_blank">here</a>.</p>
<p>Some parameter explanations:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">graphics<span style="color: #339933;">=</span><span style="color: #003366; font-weight: bold;">new</span> Cnx.<span style="color: #660066;">Graphics</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
renderer<span style="color: #339933;">=</span>graphics.<span style="color: #660066;">createPreferredRendererInstance</span><span style="color: #009900;">&#40;</span>document.<span style="color: #660066;">getElementById</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;chartDemo&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">600</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">400</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>renderer<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	renderer.<span style="color: #660066;">init</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	chart<span style="color: #339933;">=</span><span style="color: #003366; font-weight: bold;">new</span> Cnx.<span style="color: #660066;">Chart</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
		values<span style="color: #339933;">:</span> <span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">3</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">2</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">5.5</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">7</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">4</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">9</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">10</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span>									<span style="color: #006600; font-style: italic;">// bar values</span>
		titles<span style="color: #339933;">:</span> <span style="color: #009900;">&#91;</span><span style="color: #3366CC;">&quot;entry 1&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;entry 2&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;entry 3&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;entry 4&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;entry 5&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;entry 6&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;entry 7&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;entry 8&quot;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span>	<span style="color: #006600; font-style: italic;">// bar titles</span>
		style<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;verticalBars&quot;</span><span style="color: #339933;">,</span>											<span style="color: #006600; font-style: italic;">// the only type of chart we have so far</span>
		width<span style="color: #339933;">:</span> <span style="color: #CC0000;">600</span><span style="color: #339933;">,</span>
		height<span style="color: #339933;">:</span> <span style="color: #CC0000;">400</span><span style="color: #339933;">,</span>
		spaceTop<span style="color: #339933;">:</span> <span style="color: #CC0000;">50</span><span style="color: #339933;">,</span>												<span style="color: #006600; font-style: italic;">// padding</span>
		spaceLeft<span style="color: #339933;">:</span> <span style="color: #CC0000;">80</span><span style="color: #339933;">,</span>
		spaceRight<span style="color: #339933;">:</span> <span style="color: #CC0000;">10</span><span style="color: #339933;">,</span>
		spaceBottom<span style="color: #339933;">:</span> <span style="color: #CC0000;">40</span><span style="color: #339933;">,</span>
		yCaption<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;Rating&quot;</span><span style="color: #339933;">,</span>											<span style="color: #006600; font-style: italic;">// the caption for the y axis</span>
		xCaption<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;Entry&quot;</span><span style="color: #339933;">,</span>											<span style="color: #006600; font-style: italic;">// the caption for the x axis</span>
		mainCaption<span style="color: #339933;">:</span> <span style="color: #009900;">&#91;</span><span style="color: #3366CC;">&quot;Entry ratings main caption&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;Entry ratings main caption second line&quot;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span>			<span style="color: #006600; font-style: italic;">// caption displayed over the chart (can be more than 1 line)</span>
		mainCaptionFont<span style="color: #339933;">:</span> <span style="color: #009900;">&#123;</span>fontFamily<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;Verdana&quot;</span><span style="color: #339933;">,</span> fontSize<span style="color: #339933;">:</span> <span style="color: #CC0000;">20</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
		axisVerticalMax<span style="color: #339933;">:</span> <span style="color: #CC0000;">11</span><span style="color: #339933;">,</span>											<span style="color: #006600; font-style: italic;">// max value for the y axis</span>
		axisVerticalMin<span style="color: #339933;">:</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">,</span>											<span style="color: #006600; font-style: italic;">// min value for the y axis</span>
		axisVerticalValuesDisplay<span style="color: #339933;">:</span> <span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">4</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">7</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">10</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span>								<span style="color: #006600; font-style: italic;">// control values for the y axis - displays the values next to the axis and a dashed line</span>
		valueFormat<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">null</span><span style="color: #339933;">,</span>											<span style="color: #006600; font-style: italic;">// override display value function</span>
		colors<span style="color: #339933;">:</span> <span style="color: #009900;">&#91;</span>												<span style="color: #006600; font-style: italic;">// bar color gradients, if more values than colors round-robin</span>
			<span style="color: #009900;">&#123;</span>start<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;#ff0000&quot;</span><span style="color: #339933;">,</span> end<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;#6f0000&quot;</span><span style="color: #339933;">,</span> light<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;#ffaaaa&quot;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
			<span style="color: #009900;">&#123;</span>start<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;#00ff00&quot;</span><span style="color: #339933;">,</span> end<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;#006f00&quot;</span><span style="color: #339933;">,</span> light<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;#aaffaa&quot;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
			<span style="color: #009900;">&#123;</span>start<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;#0000ff&quot;</span><span style="color: #339933;">,</span> end<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;#00006f&quot;</span><span style="color: #339933;">,</span> light<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;#aaaaff&quot;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
			<span style="color: #009900;">&#123;</span>start<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;#ffff00&quot;</span><span style="color: #339933;">,</span> end<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;#6f6f00&quot;</span><span style="color: #339933;">,</span> light<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;#ffffaa&quot;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
			<span style="color: #009900;">&#123;</span>start<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;#ff00ff&quot;</span><span style="color: #339933;">,</span> end<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;#6f006f&quot;</span><span style="color: #339933;">,</span> light<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;#ffaaff&quot;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
			<span style="color: #009900;">&#123;</span>start<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;#00ffff&quot;</span><span style="color: #339933;">,</span> end<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;#006f6f&quot;</span><span style="color: #339933;">,</span> light<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;#aaffff&quot;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
			<span style="color: #009900;">&#123;</span>start<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;#6f6f6f&quot;</span><span style="color: #339933;">,</span> end<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;#ffffff&quot;</span><span style="color: #339933;">,</span> light<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;#aaaaaa&quot;</span><span style="color: #009900;">&#125;</span>
		<span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span>
		legendFlag<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">,</span>											<span style="color: #006600; font-style: italic;">// display legend?</span>
		legendHeight<span style="color: #339933;">:</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">,</span>
		controlLineFlag<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">,</span>											<span style="color: #006600; font-style: italic;">// display control line?</span>
		controlLineValues<span style="color: #339933;">:</span> <span style="color: #009900;">&#91;</span><span style="color: #CC0000;">3</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">3</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">5</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">6</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">7</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">4</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">9</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">8</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span>
		controlLineColor<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;#ffffff&quot;</span><span style="color: #339933;">,</span>
		controlLineIncludeInLegend<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">,</span>
		controlLineLegendTitle<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;Control line&quot;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	chart.<span style="color: #660066;">setRenderer</span><span style="color: #009900;">&#40;</span>renderer<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	chart.<span style="color: #660066;">render</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Unsupported browser&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p><font color="#ffffff"> Things to do in future:</font></p>
<p><font color="#ffffff">1</font> Make the chart animated and interactive (attach events to the bars).</p>
<p><font color="#ffffff">2</font> Support other types of charts (piechart).</p>
<p><font color="#ffffff">3</font> Canvas support would be nice to have, but not really a priority. The chances are good if you have canvas you have SVG also.</p>
<p>Any comments, suggestions and improvements are appreciated.</p>
<p><font color="#ffffff">Credits:</font></p>
<p>While googling for VML related stuff I came across an interesting project, which aims at the same problems &#8211; <a href="http://prototype-graphic.xilinus.com/" target="_blank">http://prototype-graphic.xilinus.com/</a></p>
<p>It&#8217;s a framework based on prototype and adresses also cross browser graphics rendering. Doesn&#8217;t seem to be very advanced yet, supports canvas, SVG and VML for creating basic shapes. Digging into the source helped me solve some of the VML problems I had.</p>
<p>crescentfresh has a cool answer on how to detect SVG and VML support at <a href="http://stackoverflow.com/questions/654112/how-do-you-detect-support-for-vml-or-svg-in-a-browser" target="_blank">http://stackoverflow.com/questions/654112/how-do-you-detect-support-for-vml-or-svg-in-a-browser</a></p>
<div style="position: absolute; left: -10000px; top: 1276px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Things to do in future:</div>
<div style="position: absolute; left: -10000px; top: 1276px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">1) Make the chart animated and interactive (attach events to the bars).</div>
<div style="position: absolute; left: -10000px; top: 1276px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">2) Support other types of charts (piechart).</div>
<div style="position: absolute; left: -10000px; top: 1276px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">3) Canvas support would be nice to have, but not really a priority. The chances are good if you have canvas you have SVG also.</div>
<div style="position: absolute; left: -10000px; top: 1276px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Any comments, suggestions and improvements are appreciated.</div>
<div style="position: absolute; left: -10000px; top: 1276px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Credits:</div>
<div style="position: absolute; left: -10000px; top: 1276px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">While googling for VML related stuff I came across an interesting project, which aims at the same problems &#8211; http://prototype-graphic.xilinus.com/</div>
<div style="position: absolute; left: -10000px; top: 1276px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">It&#8217;s a framework based on prototype and adresses also cross browser graphics rendering. Doesn&#8217;t seem to be very advanced yet, supports canvas, SVG and VML for creating basic shapes. Digging into the source helped me solve some of the VML problems I had.</div>
<div style="position: absolute; left: -10000px; top: 1276px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">crescentfresh has a cool answer on how to detect SVG and VML support at http://stackoverflow.com/questions/654112/how-do-you-detect-support-for-vml-or-svg-in-a-browser</div>
]]></content:encoded>
			<wfw:commentRss>http://blog.conquex.com/?feed=rss2&amp;p=64</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>JavaScript 3D Cube Menu &#8211; POC</title>
		<link>http://blog.conquex.com/?p=28</link>
		<comments>http://blog.conquex.com/?p=28#comments</comments>
		<pubDate>Thu, 25 Jun 2009 16:26:17 +0000</pubDate>
		<dc:creator>CTORH</dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[MooTools]]></category>

		<guid isPermaLink="false">http://blog.conquex.com/?p=28</guid>
		<description><![CDATA[Interactive 3D cube menu.
Mouse drag to rotate.
Mouse wheel to expand and shrink the cube menu.
Download source files here

  Please upgrade your browser

From the designers&#8217; perspective screen&#8217;s real estate is always an issue. Surely we jumped from the &#8216;faint&#8217; 1024&#215;768,  to the more reasonable 1280&#215;1024 resolution, but still with the development of a far [...]]]></description>
			<content:encoded><![CDATA[<p>Interactive 3D cube menu.<br />
Mouse drag to rotate.<br />
Mouse wheel to expand and shrink the cube menu.</p>
<p>Download source files <a href="http://demos.conquex.com/cube/cube.zip" target="_blank">here</a></p>
<div class="iframe-wrapper">
  <iframe src="http://demos.conquex.com/blog/cube/index.html" frameborder="0" style="height:450px;width:935px;" SCROLLING="AUTO">Please upgrade your browser</iframe>
</div>
<p>From the designers&#8217; perspective screen&#8217;s real estate is always an issue. Surely we jumped from the &#8216;faint&#8217; 1024&#215;768,  to the more reasonable 1280&#215;1024 resolution, but still with the development of a far more complicated web based systems the problem remains.</p>
<p>Recently we had been contracted for a building a moderate scale web solution, based on our Whirlwind/Furia kit, with a total of 30-35 different &#8216;applications&#8217;.<br />
Surely, the first choice was to go with a more traditional approach &#8211; using an icons for representation of the different apps.</p>
<p><img src="http://blog.conquex.com/wp-content/uploads/2009/06/icons_showcase.jpg" alt="Icons showcase" /></p>
<p>Why do we need to &#8216;copy&#8217; functionality from desktop to web?</p>
<p><span style="color: #ffffff;">Pros:</span> User is already comfortable with the presented interface and there is no need to adapt to a new interface concepts.<br />
A possibility for a creating &#8216;a copy&#8217; applications &#8211; both desktop and web &#8211; with a slight touch there will be no visible differences.<br />
Eliminating the F-pattern reading.<br />
Comfortable and &#8216;intuitive&#8217; presentation.</p>
<p><span style="color: #ffffff;">Cons:</span> Why do we need to continue creating presentation layers based on the limitations of the present new Form(); design?<br />
With the develoment of the cloud computing my expectations are that more and more applications will be &#8216;moved&#8217; online &#8211; SAS (Software As a Service).<br />
pNew technologies like canvas, css3, html5 etc. are giving a far more greater ability to control and create a drastically new concepts for the presentation.</p>
<p>Then I found the <a href="http://maettig.com" target="_blank">Thiemo Mattig&#8217;s</a> rotating javascript cube, which made me think of the 3D representation of objects (menu for instance).<br />
Couple of beers later, an initial POC was ready &#8211; mouse drag controlls the rotation, wheel expands and shrinks the cube.<br />
Icon&#8217;s description was disabled at small cube sizes &#8211; which I expect to be the normal use size.<br />
Ctrl-F2 controls the visibility of the icons&#8217; description layer.</p>
<p>Then I thought how should I present that the menu is actually rotating when is dragged? An animation may be? <img src='http://blog.conquex.com/wp-includes/images/smilies/icon_smile.gif' alt=':-)' class='wp-smiley' /> </p>
<p>Build on <a href="http://www.mootools.net" target="_blank">MooTools</a></p>
<p>Syntax :</p>

<div class="wp_syntax"><table><tr><td class="line_numbers1"><pre>1
2
3
4
5
6
7
8
</pre></td><td class="code1"><pre class="javascript" style="font-family:monospace;">&nbsp;
	<span style="color: #003366; font-weight: bold;">var</span> menu <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> CubeMenu<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
		items<span style="color: #339933;">:</span> <span style="color: #009900;">&#91;</span>items<span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span>
		dimension<span style="color: #339933;">:</span> dimension<span style="color: #339933;">,</span>
		centerX<span style="color: #339933;">:</span> x<span style="color: #339933;">,</span>
		centerY<span style="color: #339933;">:</span> y<span style="color: #339933;">,</span>
		pauseMaxMs<span style="color: #339933;">:</span> pause
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>Options:<br />
	<span style="color: #ffffff;">items</span> &#8211; array containing icon text name, icon image url, onClick callback<br />
	<span style="color: #ffffff;">dimension</span> &#8211; initial size of the cube, default 0.3; please note, under 0.4 icon text is hidden;<br />
	<span style="color: #ffffff;">centerX</span> &#8211; X coordinate of cube center relative to parent in px<br />
	<span style="color: #ffffff;">centerY</span> &#8211; Y coordinate of cube center relative to parent in px<br />
	<span style="color: #ffffff;">pauseMaxMs</span> &#8211; auto rotation delay in ms</p>
<p>Example:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers1"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
</pre></td><td class="code1"><pre class="javascript" style="font-family:monospace;">	<span style="color: #003366; font-weight: bold;">var</span> myCubeMenu <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> CubeMenu<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
		items<span style="color: #339933;">:</span> <span style="color: #009900;">&#91;</span>
			<span style="color: #009900;">&#91;</span><span style="color: #3366CC;">'Charts'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'data/0.png'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span> <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'Chars clicked..'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span>
			<span style="color: #009900;">&#91;</span><span style="color: #3366CC;">'Games'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'data/1.png'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span> <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'Games clicked..'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span>
			<span style="color: #009900;">&#91;</span><span style="color: #3366CC;">'Sounds'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'data/2.png'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span> <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'Sounds clicked..'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span>
			<span style="color: #009900;">&#91;</span><span style="color: #3366CC;">'Internet'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'data/3.png'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span> <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'Internet clicked..'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span>
			<span style="color: #009900;">&#91;</span><span style="color: #3366CC;">'Calendar'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'data/4.png'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span> <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'Calendar clicked..'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span>
			<span style="color: #009900;">&#91;</span><span style="color: #3366CC;">'Users'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'data/5.png'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span> <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'Users clicked..'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span>
			<span style="color: #009900;">&#91;</span><span style="color: #3366CC;">'Palette'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'data/6.png'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span> <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'Palette clicked..'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span>
			<span style="color: #009900;">&#91;</span><span style="color: #3366CC;">'Monitor'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'data/7.png'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span> <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'Monitor clicked..'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span>
			<span style="color: #009900;">&#91;</span><span style="color: #3366CC;">'Mail'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'data/8.png'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span> <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'Mail clicked..'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span>
			<span style="color: #009900;">&#91;</span><span style="color: #3366CC;">'Acrobat'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'data/9.png'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span> <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'Acrobat clicked..'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span>
			<span style="color: #009900;">&#91;</span><span style="color: #3366CC;">'Flash'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'data/10.png'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span> <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'Flash clicked..'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span>
			<span style="color: #009900;">&#91;</span><span style="color: #3366CC;">'RecycleBin'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'data/11.png'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span> <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'RecycleBin clicked..'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span>
			<span style="color: #009900;">&#91;</span><span style="color: #3366CC;">'Connections'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'data/12.png'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span> <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'RecycleBin clicked..'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span>
			<span style="color: #009900;">&#91;</span><span style="color: #3366CC;">''</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'data/13.png'</span><span style="color: #339933;">,</span> $empty <span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span>
			<span style="color: #009900;">&#91;</span><span style="color: #3366CC;">'Blocks'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'data/14.png'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span> <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'Blocks clicked..'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span>
			<span style="color: #009900;">&#91;</span><span style="color: #3366CC;">'Chess'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'data/15.png'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span> <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'Chess clicked..'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span>
			<span style="color: #009900;">&#91;</span><span style="color: #3366CC;">'Languages'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'data/16.png'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span> <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'Languages clicked..'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span>
			<span style="color: #009900;">&#91;</span><span style="color: #3366CC;">'Board'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'data/17.png'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span> <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'Board clicked..'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span>
			<span style="color: #009900;">&#91;</span><span style="color: #3366CC;">'Battery'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'data/18.png'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span> <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'Battery clicked..'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span>
			<span style="color: #009900;">&#91;</span><span style="color: #3366CC;">'Newspaper'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'data/19.png'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span> <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'Newspaper clicked..'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span>
			<span style="color: #009900;">&#91;</span><span style="color: #3366CC;">'Clock'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'data/20.png'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span> <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'Clock clicked..'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span>
			<span style="color: #009900;">&#91;</span><span style="color: #3366CC;">'MSN'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'data/21.png'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span> <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'MSN clicked..'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span>
			<span style="color: #009900;">&#91;</span><span style="color: #3366CC;">'Printer'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'data/22.png'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span> <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'Printer clicked..'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span>
			<span style="color: #009900;">&#91;</span><span style="color: #3366CC;">'Database'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'data/23.png'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span> <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'Database clicked..'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span>
			<span style="color: #009900;">&#91;</span><span style="color: #3366CC;">'Shutdown'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'data/24.png'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span> <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'Shutdown clicked..'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span>
			<span style="color: #009900;">&#91;</span><span style="color: #3366CC;">'Reload'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'data/25.png'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span> <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'Reload clicked..'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span>
			<span style="color: #009900;">&#91;</span><span style="color: #3366CC;">'Camcorder'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'data/26.png'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span> <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'Camcorder clicked..'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#93;</span>
		<span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span>
		dimension<span style="color: #339933;">:</span> <span style="color: #CC0000;">0.4</span><span style="color: #339933;">,</span>
		centerX<span style="color: #339933;">:</span> <span style="color: #CC0000;">600</span><span style="color: #339933;">,</span>
		centerY<span style="color: #339933;">:</span> <span style="color: #CC0000;">400</span>
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

]]></content:encoded>
			<wfw:commentRss>http://blog.conquex.com/?feed=rss2&amp;p=28</wfw:commentRss>
		<slash:comments>9</slash:comments>
		</item>
	</channel>
</rss>
