//<script type="text/javascript">

function showTheDemo(btn)
{
	var oStyle = document.getElementById('demoContainer').style;
	
	if ( oStyle.visibility.toLowerCase() == 'hidden' )
	{
		oStyle.visibility = "visible";
		oStyle.position = "static";
		btn.innerHTML = "Hide Demo &lt;&lt;";
	}
	else
	{
		oStyle.visibility = "hidden";
		oStyle.position = "absolute";
		btn.innerHTML = "Show Demo &gt;&gt;";
	}
}
function modifyDemo(demo, position, visibility)
{
	var oDiv = document.getElementById(demo + 'Demo');
	oDiv.style.position = position;
	oDiv.style.visibility = visibility;
}
function showDemo(demo)
{
	modifyDemo('blank','absolute','hidden');
	modifyDemo('list','absolute','hidden');
	modifyDemo('deque','absolute','hidden');
	modifyDemo('vector','absolute','hidden');

	modifyDemo(demo,'static','visible');
}

var listAgent = null;
var oListInput = null;
function showList()
{
	if ( !listAgent )
	{
		listAgent = new ListAgent(document.getElementById('listBox'));
		oListInput = document.getElementById('listInput');
	}
	showDemo('list');
}

var dequeAgent = null;
var oDequeInput = null;
var oDequePos = null;
function showDeque()
{
	if ( !dequeAgent )
	{
		dequeAgent = new VectorAgent(document.getElementById('dequeBox'), std.deque());
		oDequeInput = document.getElementById('dequeInput');
		oDequePos = document.getElementById('dequePos');
	}
	showDemo('deque');
}

var vectorAgent = null;
var oVectorInput = null;
var oVectorPos = null;
function showVector()
{
	if ( !vectorAgent )
	{
		vectorAgent = new VectorAgent(document.getElementById('vectorBox'),std.vector());
		oVectorInput = document.getElementById('vectorInput');
		oVectorPos = document.getElementById('vectorPos');
	}
	showDemo('vector');
}

//=============================================================================
// ListAgent
//=========================================================
// list code
function ListAgent(theListBox)
{
	this.container = std.list();
	
	// cache a const version of end()
	this.container.oEnd = this.container.end();
	
	this.it = null;
	this.box = theListBox;
	this.boxBorder = "1px solid red";
	this.boxHighlight = "yellow";
}
ListAgent.prototype.selectDiv = function(bSelect)
{
	if ( !this.it ) this.it = this.container.begin();
	if ( !this.it.equal_to(this.container.oEnd) ) this.it.item.style.background = bSelect ? this.boxHighlight : "";
}
ListAgent.prototype.createDiv = function(value)
{
	var oDiv = document.createElement('span');
	oDiv.innerHTML = value;
	oDiv.style.border = this.boxBorder;
	return oDiv;
}
ListAgent.prototype.increment = function()
{
	if ( this.it )
	{
		this.selectDiv(false);
		this.it.increment();
	}
	this.selectDiv(true);
}
ListAgent.prototype.decrement = function()
{
	if ( this.it ) this.selectDiv(false);
	else this.it = theList.end();
	this.it.decrement();
	this.selectDiv(true);
}
ListAgent.prototype.snapshot = function()
{
	if ( !this.it ) this.it = this.container.begin();
	return this.it.clone();
}
ListAgent.prototype.insert = function(value)
{
	this.selectDiv(true);
	var oDiv = this.createDiv(value);

	if ( this.box.children.length == 0 ) this.box.appendChild(oDiv);
	else this.box.insertBefore(oDiv,this.it.item);
	this.container.insert(this.it,oDiv);
}
ListAgent.prototype.remove = function()
{
	if ( !this.it ) return;
	if ( this.container.size() == 0 ) return;
	this.selectDiv(false);
	var it = this.it.clone();
	if ( this.container.size() > 1 )
	{
		if ( this.it.item === this.container.back() ) this.it.decrement();
		else this.it.increment();
		this.selectDiv(true);
	}
	else this.it = null;
	this.box.removeChild(it.item);
	this.container.erase(it);
}
ListAgent.prototype.push_back = function(value)
{
	var oDiv = this.createDiv(value);
	this.box.appendChild(oDiv);
	this.container.push_back(oDiv);
}
ListAgent.prototype.push_front = function(value)
{
	var oDiv = this.createDiv(value);
	if ( this.box.children.length == 0 ) this.box.appendChild(oDiv);
	else this.box.insertBefore(oDiv,this.container.front());
	this.container.push_front(oDiv);
}
ListAgent.prototype.pop_back = function()
{
	if ( this.container.size() == 0 ) return;
	if ( this.it && (this.it.item === this.container.back()) )
	{
		if ( this.container.size() > 1 ) this.decrement();
		else this.it = null;
	}
	this.box.removeChild(this.container.back());
	this.container.pop_back();
}
ListAgent.prototype.pop_front = function()
{
	if ( this.container.size() == 0 ) return;
	if ( this.it && (this.it.item === this.container.front()) )
	{
		if ( this.container.size() > 1 ) this.increment(); 
		else this.it = null;
	}
	this.box.removeChild(this.container.front());
	this.container.pop_front();
}
ListAgent.prototype.assign = function(value)
{
	if ( this.it ) this.it.item.innerHTML = value;
}

//=============================================================================
// VectorAgent
function VectorAgent(theVectorBox, container)
{
	this.container = container;
	this.box = theVectorBox;
	this.boxBorder = "1px solid green";
	this.boxHighlight = "teal";
}
VectorAgent.prototype.createDiv = ListAgent.prototype.createDiv;
VectorAgent.prototype.push_back = ListAgent.prototype.push_back;
VectorAgent.prototype.pop_back = ListAgent.prototype.pop_back;
VectorAgent.prototype.push_front = ListAgent.prototype.push_front;
VectorAgent.prototype.pop_front = ListAgent.prototype.pop_front;
VectorAgent.prototype.insert = function(index,value)
{
	var oDiv = this.createDiv(value);

	var it = this.container.begin();
	it.increment(index);

	if ( it.item ) this.box.insertBefore(oDiv, it.item);
	else this.box.appendChild(oDiv);

	this.container.insert(it, oDiv);
}
VectorAgent.prototype.assign = function(index,value)
{
	this.container.at(index).innerHTML = value;
}


//</script>