/*

	R. J. Vereijken
	11-07-2010

	This code is free for non-commercial use only.


	parent	:	Typically a <div>, functioning as container.
	n		: 	How many items do you want to begin with?
	w		:	What is the full width of an item.

*/

function cHeader(parent, n, w)
{
	this.objContainer = parent;
	parent.style.overflow = "hidden";

	this.objects = new Array();
	this.itemWidth = w;
	this.itemMinimalWidth = 0; // Will be calculated
	this.itemSpacing = 0; // Will be calculated

	this.activeObject = null;
	
	// Control variables, to prevent JQuery from queueing animations
	this.alreadyMoving = false;
	this.requiresUpdate = false;
	this.requiresFallback = false;
	
	this.tTimer = null;
	this.fps = 14;
	
	var _p;
	
	///////////////////////////////////////////////////////////////////////////////////////
	
	this.addItem = function()
	{
		if(this.objContainer)
		{
			var obj = document.createElement('div');
			
			if(this.objects.length == 0)
				obj.setAttribute('class', 'firstItem');
			else
				obj.setAttribute('class', 'item');

			this.objects.push(obj);
			this.objContainer.appendChild(obj);
			
			obj.style.position = 'absolute';
			obj.style.overflow = 'hidden';
			obj.style.width = 'inherit';
			obj.style.height = 'inherit';

			obj.innerHTML = '<a href="#"><div class="panel"><h1></h1><p></p></div></a>';
			obj.childNodes[0].style.position = 'absolute';
			obj.childNodes[0].style.width = this.itemWidth + 'px';
			obj.childNodes[0].style.height = '100%';
			obj.childNodes[0].childNodes[0].style.width = '100%';
			obj.childNodes[0].childNodes[0].style.height = '100%';
			obj.childNodes[0].childNodes[0].style.overflow = 'hidden';

			this.alignItemPositions();

			// re-assign, just to be sure
			_p = this; 

			obj.onmouseover = function() {
				_p.activeObject = obj;
			}

			obj.onmouseout = function() {
				_p.activeObject = null;
			}
			
			obj.onmousemove = function() {
				_p.requiresUpdate = true;
			}
		}
	}
	
	this.alignItemPositions = function()
	{
		var i;
	
		if(this.objects.length > 0)
		{
			this.itemSpacing = this.objContainer.offsetWidth / this.objects.length;

			for(i = 0; i < this.objects.length; i++)
			{
				this.objects[i].style.left = (this.itemSpacing*i) + 'px';
				this.objects[i].style.width = this.itemSpacing + 'px';
			}

			// Remaining space when the active item is at its max?
			this.itemMinimalWidth = (this.objContainer.offsetWidth - this.itemWidth) / (this.objects.length - 1);
		}
	}
	
	///////////////////////////////////////////////////////////////////////////////////////
	
	this.setItemContent = function(i, title, text, image, href)
	{
		if(this.objects[i])
		{
			this.objects[i].childNodes[0].setAttribute('href', href);
			this.objects[i].childNodes[0].childNodes[0].childNodes[0].innerHTML = title;
			this.objects[i].childNodes[0].childNodes[0].childNodes[1].innerHTML = text;
			this.objects[i].childNodes[0].style.backgroundImage = 'url(' + image + ')';
		}
	}
	
	///////////////////////////////////////////////////////////////////////////////////////
	
	// This function is looped by a timer in order to prevent a buggy system due to browsers 
	// not noticing events.
	this.doAnimate = function()
	{
		var i, _o;
		var lastX = 0;
		var newWidth = 0;

		if(this.alreadyMoving)
			return;
			
		if(!this.requiresUpdate)
			return;
			
		this.requiresUpdate = false;

		if(this.activeObject != null)
		{
			for(i = 0; i < this.objects.length; i++)
			{
				_o = this.objects[i];

				if(_o == this.activeObject)
					newWidth = this.itemWidth;
				else
					newWidth = this.itemMinimalWidth;
				
				$(_o).stop();
				$(_o).animate({
						left: lastX,
						width: newWidth
					},
					200,
					"swing",
					function() {_p.alreadyMoving=false;}
				);

				lastX = Math.round(lastX + newWidth);

				this.alreadyMoving = true;
				this.requiresFallback = true;
			}
		}
		else
		{
			if(this.requiresFallback)
			{
				for(i = 0; i < this.objects.length; i++)
				{
					_o = this.objects[i];
					
					$(_o).stop();
					$(_o).animate({
							left: this.itemSpacing*i,
							width: this.itemSpacing
						},
						400,
						"swing",
						function() {_p.alreadyMoving=false;}
					);

					this.alreadyMoving = true;
					this.requiresFallback = false;
				}
			}
		}
	}
	
	///////////////////////////////////////////////////////////////////////////////////////
	
	while(n--)
		this.addItem();

	// setInterval must be handled as such in order
	// to preserve the doAnimate functions' scope.
	_p = this;
	this.tTimer = setInterval( function() { _p.doAnimate(); } , 1000 / this.fps);
}