SwitchMama.USE_FILTER  = 1;
SwitchMama.USE_OPACITY = 2;
SwitchMama.UNAVAILABLE = 3;
function SwitchMama(containerId)
{
	var me = this;
	var style = SwitchMama.UNAVAILABLE;
	var state = 0;

	this.animationRate = 50;
	this.increaseRate = 5;
	this.switchPause = 4000;

	this.items = null;
	this.curItem = 0;
	/** If someone requested an item change (back/forward) */
	this.requestedItem = false;
	// Pointers to images and links that switch positions on each crossFade
	this.curImage = this.otherImage = null;
	this.curLink = this.otherLink = null;
	this.pause = false;
	this.imageLoaded = false;

	this.container = document.getElementById(containerId);
	this.anchor = document.createElement('a');
	this.container.appendChild(this.anchor);
	this.image1 = document.createElement('img');
	this.anchor.appendChild(this.image1);
	this.image2 = document.createElement('img');
	this.anchor.appendChild(this.image2);	

	this.titleAnchor1 = document.createElement('a');
	this.titleAnchor1.className = 'linky user_name';
	this.container.appendChild(this.titleAnchor1);

	this.titleAnchor2 = document.createElement('a');
	this.titleAnchor2.className = 'linky user_name';
	this.container.appendChild(this.titleAnchor2);

	if (typeof(this.image2.style.opacity) != 'undefined') 
	{
		style = SwitchMama.USE_OPACITY;
		this.image2.style.opacity = 0.0;
		this.titleAnchor2.style.opacity = 0.0;
	}
	else if (typeof(this.image2.style.filter) != 'undefined')
	{
		style = SwitchMama.USE_FILTER;
		this.image2.style.filter = "Alpha(opacity=0)";		
		this.titleAnchor2.style.filter = "Alpha(opacity=0)";
	}
	
	this.image1.onmouseover = onImage;
	this.image1.onmouseout  = offImage;	
	this.image1.onload      = loadedImage;
	this.image2.onmouseover = onImage;
	this.image2.onmouseout  = offImage;
	this.image2.onload      = loadedImage;
	
	this.timer = null;
	
	this.start = function()
	{
		if (style == SwitchMama.UNAVAILABLE) return; // silent failure

		state = 0;
		me.image1.src = me.items[0][1];
		me.image2.src = me.items[1][1];
		me.curItem    = 1;
		// Notice that it will switch on the call to next item
		me.curImage   = me.image1;
		me.otherImage = me.image2;

		me.anchor.href = me.items[0][0];
		me.titleAnchor1.innerHTML = me.items[0][3];
		me.titleAnchor1.href = me.items[1][2];
		me.titleAnchor2.innerHTML = me.items[1][3];
		me.titleAnchor2.href = me.items[0][2];
		
		me.curLink = me.titleAnchor1;
		me.otherLink = me.titleAnchor2;

		me.timer = setTimeout(me.prepareAnimation,me.switchPause);
	}
	
	this._Animation = function()
	{
		if (style == SwitchMama.USE_OPACITY) 
		{
			me.otherImage.style.opacity = 1.0 - state/100;
			me.curImage.style.opacity = state/100;
			me.otherLink.style.opacity = 1.0 - state/100;
			me.curLink.style.opacity = state/100;
		}
		else if (style == SwitchMama.USE_FILTER) 
		{
			me.otherImage.style.filter = "Alpha(opacity=" + (100 - state) + ")";
			me.curImage.style.filter = "Alpha(opacity=" + state + ")";
			me.otherLink.style.filter = "Alpha(opacity=" + (100 - state) + ")";
			me.curLink.style.filter = "Alpha(opacity=" + state + ")";
		}

		if (state == 100) 
		{
			state = 0;
			me._setItem(me.curItem + 1, me.switchPause);
			me.requestedItem = false; // reset it
			return;
		}
		// else
		state += me.increaseRate;
	}
	
	this.prepareAnimation = function()
	{
		if (me.pause || !me.imageLoaded)
		{
			me.timer = setTimeout(me.prepareAnimation,500);
			return;
		}
		
		// Images and bottom link pointer switch
		if (me.curImage == me.image1)
		{
			me.curImage   = me.image2;
			me.otherImage = me.image1;
			
			me.curLink    = me.titleAnchor2;
			me.otherLink  = me.titleAnchor1;
		}
		else
		{
			me.curImage   = me.image1;
			me.otherImage = me.image2;			

			me.curLink    = me.titleAnchor1;
			me.otherLink  = me.titleAnchor2;
		}
		// Image link
		me.anchor.href = me.items[me.curItem][0];
		// Shins link - A bit agressive, but it gets the job done
		me.curLink.href = me.otherLink.href = me.items[me.curItem][2];
		// alert("Prepare animation " + me.curLink.href + ' other ' + me.otherLink.href);
		state = 10; // So setItem requests will already wait
		me.timer = setInterval(me._Animation,me.animationRate);
	}
	/** Do not call this function explicitly! It is internal */
	this._setItem = function(n,delay)
	{
		if (this.timer != null)
		{
			clearTimeout(this.timer);
			this.timer = null;
		}
		
		if (n >= this.items.length) this.curItem = 0;
		else if (n < 0)	this.curItem = this.items.length + n;
		else this.curItem = n;

		this.imageLoaded = false;
		this.otherImage.src = this.items[this.curItem][1];			
		this.otherLink.innerHTML = this.items[this.curItem][3];
		this.timer = setTimeout(this.prepareAnimation,delay);
	}
	
	this.requestPrevItem = function()
	{
		// If requested already or during animation - abort
		if (this.requestedItem || state != 0) return;
		this.requestedItem = true;
		// It is minus 2 because after animation curItem was already incremented
		this._setItem(this.curItem-2,50);
	}
		
	this.requestNextItem = function()
	{
		// If requested already or during animation - abort
		if (this.requestedItem || state != 0) return;

		if (this.timer != null)
		{
			clearTimeout(this.timer);
			this.timer = null;
		}
		this.requestedItem = true;
		this.prepareAnimation();
	}
	
	function onImage(evt)
	{
		if (window.event) evt = window.event;
		evt.cancelBubble = true;
		me.pause = true;
	}

	function offImage(evt)
	{
		if (window.event) evt = window.event;
		evt.cancelBubble = true;
		me.pause = false;
	}
	/** When switching the source of the hidden image, this function tells us it's done loading */
	function loadedImage(evt)
	{
		if (window.event) evt = window.event;
		evt.cancelBubble = true;
		me.imageLoaded = true;		
	}
}