function show(sName)
{
	var oStyle = document.getElementById(sName).style;
	oStyle.visibility = "visible";
	oStyle.position = "static";	
}
function hide(sName)
{
	var oStyle = document.getElementById(sName).style;
	oStyle.visibility = "hidden";
	oStyle.position = "absolute";
}
var bShowing = false;
function showTheDemo(btn)
{
	if ( bShowing )
	{
		hide('blankDemo');
		hide('theDemo');
		hide('valueDiv');
		hide('btnAssign');
		hide("demoContainer");
		hide("theTree");
		btn.value = "Show Demo >>";
		bShowing = false;
	}
	else
	{
		show("demoContainer");
		show('blankDemo');
		btn.value = "Hide Demo <<";
		bShowing = true;
	}
}

function displayNode(node,disp,yellow,green)
{
	if ( !node || !node.bNode ) return "";
	var sStyle;
	switch ( node.bBlack )
	{
	case 0: // red
		sStyle = "border:solid red 3px;";
		break;
	case 1: // black
		sStyle = "border:solid black 3px;";
		break;
	case 2: // double black
		sStyle = "border:double black 3px;";
		break;
	}
	sStyle += " text-align:center;";
	if ( (yellow === green) && (node === yellow) ) sStyle += " background:cyan;";
	else if ( node === yellow ) sStyle += " background:yellow;";
	else if ( node === green ) sStyle += " background:lime;";
	var s = '<table border=0><tr><td colspan=2 style="' + sStyle + '">';
	if ( node.item ) s += disp.fn(node.item);
	else s += '&nbsp;';
	s += '</td></tr>';
	if ( node.left )
	{
		s += '<tr><td height="100%" width="50%" valign=top>';
		s += displayNode(node.left,disp,yellow,green);
		s += '</td><td height="100%" width="50%" valign=top>';
		s += displayNode(node.right,disp,yellow,green);
		s += '</td></tr>';
	}
	s += '</table>';
	return s;
}
function treeDisplay(tree, disp, it, key)
{
	show("theTree");
	var iNode = (it != null) ? it.node : null;
	var kNode = (key != null) ? tree.lower_bound(key) : null;
	if ( kNode && tree.less.fn(key,kNode.item) ) kNode = null;
	document.getElementById('theTree').innerHTML = displayNode(tree.root,disp,iNode,kNode);
}

function NumericLess(){}
NumericLess.prototype.fn = function(a,b) { return parseInt(a) < parseInt(b); }

function StrLenLess(){}
StrLenLess.prototype.fn = function(a,b) { return a.length < b.length; }
function GetLess()
{
	var nType = parseInt(document.getElementById('demoOrder').value);
	var less;
	switch ( nType )
	{
		case 0: return STD.prototype.less;
		case 1: return new NumericLess();
		case 2: return new StrLenLess();
	}
}
//=============================================================================
function MapAgent(bMulti)
{
	this.bMulti = bMulti;
	this.reset();
}
MapAgent.prototype.reset = function()
{
	this.less = GetLess();
	this.container = this.bMulti ? std.multimap(this.less) : std.map(this.less);
	this.it = null;
	this.itEnd = this.container.end();
	this.itREnd = this.container.rend();
	treeDisplay(this.container.tree, this.display);
}
MapAgent.prototype.display = {fn:function(item){return item.first + ':' + item.second;} }
MapAgent.prototype.insert = function()
{
	var key = document.getElementById('theKey').value;
	var value = document.getElementById('theValue').value;
	this.container.insert({first:key,second:value});
	treeDisplay(this.container.tree,this.display,this.it,{first:key});
}
MapAgent.prototype.erase = function()
{
	var key = document.getElementById('theKey').value;
	if ( key != '' ) this.container.erase(key);
	else if ( this.it && !this.it.equal_to(this.itEnd) ) this.container.erase(this.it);
	treeDisplay(this.container.tree,this.display,this.it,{first:key});
}
MapAgent.prototype.advance = function()
{
	var key = document.getElementById('theKey').value;
	if ( !this.it ) this.it = this.container.begin();
	else this.it.increment();
	treeDisplay(this.container.tree,this.display,this.it,{first:key});
}
MapAgent.prototype.retreat = function()
{
	var key = document.getElementById('theKey').value;
	if ( !this.it ) this.it = this.container.end();
	this.it.decrement();
	if ( this.it.equal_to(this.itREnd) ) this.it.increment();
	treeDisplay(this.container.tree,this.display,this.it,{first:key});
}
MapAgent.prototype.assign = function()
{
	var key = document.getElementById('theKey').value;
	var value = document.getElementById('theValue').value;

	var it = this.it;
	if ( key != '' ) it = this.container.find(key);
	
	if ( !it.equal_to(this.itEnd) ) it.item.second = value;
	treeDisplay(this.container.tree,this.display,this.it,{first:key});
}
MapAgent.prototype.clear = function()
{
	this.container.clear();
	this.it = this.container.end();
	treeDisplay(this.container.tree,this.display,this.it);
}

//=============================================================================
function SetAgent(bMulti)
{
	this.bMulti = bMulti;
	this.reset();
}
SetAgent.prototype.reset = function()
{
	this.less = GetLess();
	this.container = this.bMulti ? std.multiset(this.less) : std.set(this.less);
	this.it = null;
	this.itEnd = this.container.end();
	this.itREnd = this.container.rend();
	treeDisplay(this.container.tree, this.display);
}
SetAgent.prototype.display = {fn:function(item){return item;}}
SetAgent.prototype.insert = function()
{
	var key = document.getElementById('theKey').value;
	this.container.insert(key);
	treeDisplay(this.container.tree,this.display,this.it,key);
}
SetAgent.prototype.erase = function()
{
	var key = document.getElementById('theKey').value;
	if ( key != '' ) this.container.erase(key);
	else if ( this.it && !this.it.equal_to(this.itEnd) ) this.container.erase(this.it);
	treeDisplay(this.container.tree,this.display,this.it,key);
}
SetAgent.prototype.advance = function()
{
	var key = document.getElementById('theKey').value;
	if ( !this.it ) this.it = this.container.begin();
	else this.it.increment();
	treeDisplay(this.container.tree,this.display,this.it,key);
}
SetAgent.prototype.retreat = function()
{
	var key = document.getElementById('theKey').value;
	if ( !this.it ) this.it = this.container.end();
	this.it.decrement();
	if ( this.it.equal_to(this.itREnd) ) this.it.increment();
	treeDisplay(this.container.tree,this.display,this.it,key);
}
SetAgent.prototype.clear = function()
{
	this.container.clear();
	this.it = this.container.end();
	treeDisplay(this.container.tree,this.display,this.it);
}

var agent = null;

function showDemo(name, bMulti)
{
	hide('blankDemo');
	show('theDemo');
	
	var title = document.getElementById('theTitle');
	title.innerHTML = (bMulti ? 'Multi' : '') + name + ' Demo';
}
function showMap(bMulti)
{
	agent = new MapAgent(bMulti);

	show('valueDiv');
	show('btnAssign');

	showDemo('Map',bMulti);
}
function showSet(bMulti)
{
	agent = new SetAgent(bMulti);
	hide('valueDiv');
	hide('btnAssign');

	showDemo('Set', bMulti);
}
function changeOrder()
{
	if ( agent ) agent.reset();
}