//Entry point
function wp_navbar_concertina(menubarid, navtree, options, styleOptions)
{
	var me = this;
	
	me.buttons = [];
	me.curDividers = [];
	me.desDividers = [];
	me.sizeProperty = 'width';	//'width' or 'height'
	me.posProperty = 'left';	//'left' or 'top'
	me.totalsize = 0;
	me.defaultSel = -1;
	me.animating = false;
	me.nonimagesize = 200;	//default size
	
	//Default options
	me.options = {
		'images' : [],			//Images can be in options OR style
		'iAlignment' : 0,		//horizontal/vertical
		'bShowCurrent' : true,	//show current page by default
		'bShowChildren' : true,	//show child page links
		'bAnimate' : true,		//enable the sliding animation
		'iSpeed' : 100,			//0 to 100
		'bSmoothScroll' : true	//smooth animation
	};
	if( options )
	{	me.options = WpNavBar.mergeOptions( me.options, options ); }
	
	me.styleOptions = {
		'images': {
			'images' : []
			},
		'items': {
			'divider_width' : '1px',
			'divider_colour' : 'white'
			}	
	};
	if( styleOptions )
	{	me.styleOptions = WpNavBar.mergeOptions( me.styleOptions, styleOptions ); }

		
	me.addLinks = function( divText, navtree )
	{
		var ulLinks = document.createElement('UL');
		ulLinks.style.listStyle = 'none';
		divText.appendChild(ulLinks);
	
		for( var index = 0; index < navtree.length; index++ )
		{
			var navbaritem = navtree[index];
	
			var li = document.createElement('LI');
			var a = document.createElement('A');
			var text = document.createTextNode(navbaritem.sTitle);
			a.appendChild(text);
			a.href = navbaritem.sUrl;
			li.appendChild(a);
			ulLinks.appendChild(li);
		}
	};
	
	me.mousemove = function( e )
	{
		if( this.buttons.length === 0 )
		{	return; }
		if( !e )
		{	e = window.event; }//IE
	
		var mouseX = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
		var mouseY = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
				
		for( var obj = this.buttons[0].offsetParent; obj; obj=obj.offsetParent )
		{
			mouseX -= obj.offsetLeft;
			mouseY -= obj.offsetTop;
		}
		var selIndex = -1;
		for( var index = 0; index < this.buttons.length; index++ )
		{
			var button = this.buttons[index];
			if( mouseX >= parseInt(button.offsetLeft,10) && mouseX <= parseInt(button.offsetLeft,10) + parseInt(button.offsetWidth,10) &&
				mouseY >= parseInt(button.offsetTop,10) && mouseY <= parseInt(button.offsetTop,10) + parseInt(button.offsetHeight,10) )
			{
				selIndex = index;
				break;
			}
		}
		this.showItem( selIndex, this.options.bAnimate );
	};
	
	me.showItem = function( selIndex, bAnimate )
	{
		if( selIndex == -1 )
		{	selIndex = this.defaultSel; }
	
		var selsize = 0;
		if( selIndex != -1 )
		{
			var selbutton = this.buttons[selIndex];
			var imgs = selbutton.getElementsByTagName('IMG');
			if( imgs.length > 0 )
			{	selsize = parseInt(imgs[0][this.sizeProperty],10); }
			else
			{	selsize = this.nonimagesize; }
		}
		var unselsize = Math.floor( (selsize === 0) ? (this.totalsize / this.buttons.length ) : ( (this.totalsize - selsize) / (this.buttons.length-1) ) );
	
		var mustanimate = false;
		var des = 0;
		for( var index = 0; index < this.buttons.length; index++ )
		{
			des += ( index == selIndex ) ? selsize : unselsize;
			this.desDividers[index] = des;
			if( this.curDividers[index] != this.desDividers[index] )
			{	mustanimate = true; }
		}
		if( mustanimate && !this.animating )
		{	this.animate( bAnimate ); }
	};
	
	me.animate = function(bAnimate)
	{
		this.animating = false;
	
		var pos = 0;
		for( var index = 0; index < this.buttons.length; index++ )
		{
			var button = this.buttons[index];
			if( bAnimate )
			{
				if( this.curDividers[index] != this.desDividers[index] )
				{
					this.animating = true;
	
					var diff = Math.abs( this.curDividers[index] - this.desDividers[index] );
					var step = ( this.options.bSmoothScroll ) ? Math.floor( Math.min(4, Math.max( 1, diff / 16 ) ) ) : Math.min(4,diff);
					this.curDividers[index] += ( this.curDividers[index] < this.desDividers[index] ) ? step : -step;
				}
			}
			else
			{
				this.curDividers[index] = this.desDividers[index];
			}
			button.style[this.posProperty] = pos + 'px';
			button.style[this.sizeProperty] = (this.curDividers[index] - pos) + 'px';
			pos = this.curDividers[index];
		}
	
		//call back here again later
		if( this.animating )
		{	setTimeout( function( root, bAnimate ) { return function() { root.animate(bAnimate); }; }( this, bAnimate ), 50 / ( this.options.iSpeed + 1 ) ); }
	};
	
	me.getButtonSize = function(button)
	{
		var imgs = button.getElementsByTagName('IMG');
		if( imgs.length > 0 )
		{
			var myImage = new Image();
			myImage.src = imgs[0].src;
	
			if( myImage.width > 0 )
			{
				for( var i=0; i<button.childNodes.length; i++)
				{
					button.childNodes[i].style.width = myImage.width + 'px';
					button.childNodes[i].style.height = myImage.height + 'px';
				}
			}
		}
	};
	
	me.onimageload = function(button)
	{	//Loaded an image: reset positions
		this.getButtonSize(button);
		this.showItem( this.defaultSel, false );
	};


	me.sizeProperty = (me.options.iAlignment===0) ? 'width' : 'height';
	me.posProperty = (me.options.iAlignment===0) ? 'left' : 'top';

	var divMain = document.getElementById( menubarid );	//Parent DIV object
	if( !divMain || !navtree || !navtree.childArray || navtree.childArray.length === 0 )
	{	//DIV not found / NavTree could not be loaded
		document.write( '&nbsp;' );
		return;
	}
	var iWidthAdjust =  parseInt(divMain.offsetWidth,10) - parseInt(divMain.style.width,10);
	divMain.style.width = (parseInt(divMain.style.width,10) - iWidthAdjust) + 'px';
	
	me.totalsize = parseInt( (me.options.iAlignment===0) ? divMain.style.width : divMain.style.height, 10 );
	me.defaultSel = -1;

	var navtreemenu = navtree.childArray;
	for( var index = 0; index < navtreemenu.length; index++ )
	{
		var navbaritem = navtreemenu[index];

		var divItem = document.createElement('DIV');
		divMain.appendChild(divItem);
		divItem.style.overflow = 'hidden';
		divItem.style.display = 'block';
		divItem.style.position = 'absolute';
		divItem.style.textAlign = 'left';
		divItem.style.left = "0px";
		divItem.style.width = (me.options.iAlignment===0) ? me.nonimagesize + "px" : divMain.offsetWidth;
		divItem.style.top = "0px";
		divItem.style.height = (me.options.iAlignment===0) ? divMain.offsetHeight : me.nonimagesize + "px";
		divItem.className = "item";
		if( navbaritem.bIsCurrentPage )
		{
			divItem.className += " currentpage";
			if( me.options.bShowCurrent )
			{	me.defaultSel = index; }//show current page by default
		}
		var images = me.options.images.concat( me.styleOptions.images.images );
		if( images.length > 0 )
		{
			var image = ( index < images.length ) ? images[index] : images[images.length-1]; 
			var img = document.createElement('IMG');
			img.src = image;
			img.style.left = '0px';
			img.style.width = '20px';
			img.style.top = '0px';
			img.style.height = '20px';
			img.style.position = 'absolute';
			img.onload = function(root, divItem) { return function() {root.onimageload(divItem); return true;  } }(this, divItem);
			divItem.appendChild(img);

			if( index > 0 )
			{
				var sDivider = 'solid ' + me.styleOptions.items.divider_colour + ' ' + me.styleOptions.items.divider_width;
				if(me.options.iAlignment===0)
				{	img.style.borderLeft = sDivider; }
				else
				{	img.style.borderTop = sDivider; }
			}
		}
		var divText = document.createElement('DIV');
		divItem.appendChild(divText);
		divText.style.background = 'transparent';
		divText.style.display = 'block';
		divText.style.left = '0px';
		divText.style.width = me.nonimagesize + "px";
		divText.style.top = '0px';
		divText.style.height = me.nonimagesize + "px";
		divText.style.position = 'absolute';

		var h = document.createElement('H2');
		divText.appendChild(h);
		if( index > 0 )
		{
			if(me.options.iAlignment===0)
			{	h.style.marginLeft = me.styleOptions.items.divider_width; }
			else 	    
			{	h.style.marginTop = me.styleOptions.items.divider_width; }
		}

		var a = document.createElement('A');
		h.appendChild(a);
		a.href = navbaritem.sUrl;

		var text = document.createTextNode(navbaritem.sTitle);
		a.appendChild(text);
		a.style.width = '100%';
		a.style.height = '100%';

		if (me.options.bShowChildren) 
		{   if (navbaritem.childArray)
		    {   me.addLinks(divText, navbaritem.childArray); }
		}
		else
		{
		    h.style.width = '100%';
		    h.style.height = '100%';
		    a.style.display = 'block';
		}
		me.buttons[index] = divItem;
		me.curDividers[index] = 0;
		me.desDividers[index] = 0;
		me.getButtonSize(divItem);
	}
	//Set initial size without animating:
	me.showItem( me.defaultSel, false );

	divMain.onmouseout = divMain.onmousemove = function(root) { return function(event) {root.mousemove( event ); return true;  } }(this);
}