var BECOME=typeof BECOME=='undefined'?{}:BECOME;
BECOME.widgets=typeof BECOME.widgets=='undefined'?{}:BECOME.widgets;

BECOME.widgets.Panel = function(id, banners)
{
	var s = [], i, c, node, _this = this;
	this.id = id;
	this.banners = banners;
	this.currentIndex = 0;
	this.intervalTime = 8000;
	this.fadeTime = 500;

	if(!(this.node = document.getElementById(this.id))) return;
	this.container = Shine.createHTMLElement('div');
	this.container.className = 'panel-container banners-' + this.banners.length;
	this.node.parentNode.insertBefore(this.container, this.node);
	this.node.parentNode.removeChild(this.node);
	this.container.appendChild(this.node);
	Shine.setAttribute(this.node, 'style', '');
	// this.container.id = 'panel-container';
	this.node.style.position = 'relative';
	while(this.node.firstChild)
	{
		this.node.removeChild(this.node.firstChild);
	}
	this.list = Shine.createHTMLElement('ul');
	Shine.addElementClass(this.list, 'CMSPanelList');

	c = 0;
	this.images = [];
	this.imgLoaded = [];
	for(i in banners)
	{
		banners[i].index = c;
		s.push('<li id="' + this.id + '--' + c + '" data-idx="' + c + '"></li>');

		// Create panel
		var div = Shine.createHTMLElement('div');
		div.id = this.id + '-banner--' + banners[i].index;
		Shine.addElementClass(div, 'CMSPanelWidget');
		Shine.setAttribute(div, 'style', this.banners[i].style);
		div.style.width = '100%';
		div.style.height = '100%';
		div.style.position = 'absolute';
		div.style.left = '0';
		div.style.top = '0';
		div.innerHTML = this.banners[i].body;

		// IE6/7 don't support background image cross fading very well, so we'll use an image for that
		if(Shine.browser.isIE && Shine.browser.ieVersion < 8)
		{
			var path = this.banners[i].style;
			var img = new Image();
			img.src = path.substring(23, path.length - 3);
			img.style.position = 'absolute';
			img.style.left = '0';
			img.style.top = '0';
			if(banners[i].link)
			{
				var a = Shine.createHTMLElement('a');
				a.href = banners[i].link;
				a.title = banners[i].title;
				a.appendChild(img);
				div.appendChild(a);
			}
			else
			{
				div.appendChild(img);
			}
			div.style.backgroundImage = 'none';
		}

		if(c == 0)
		{
			// No need to preload the 1st banner image which is already loaded by the HTML (not necessary but it doesn't work in IE7 otherwise)
			div.style.zIndex = 2;
			this.banners[i].loaded = true;
		}
		else
		{
			div.style.zIndex = 1;
			div.style.display = 'none';
			div.style.opacity = '0';
			div.style.filter = 'alpha(opacity=0)';
			// Preload banners images
			var path = this.banners[i].style;
			this.images[i] = new Image();
			this.images[i].src = path.substring(23, path.length - 3);
			this.banners[i].loaded = false;
			Shine.addEventHandler(this.images[i], 'load', {host: this, handler: this.imageLoaded, data: i });
		}

		this.node.appendChild(div);
		c++;
	}
	
	this.list.innerHTML = s.join('');
	this.container.appendChild(this.list);
	for(i in banners)
	{
		if((c = document.getElementById(this.id + '--' + banners[i].index)))
		{
			var n = document.createTextNode(banners[i].title);
/*			if(banners[i].link)
			{
				var s = Shine.createHTMLElement('a');
				s.href = banners[i].link;
				s.appendChild(n);
				c.appendChild(s);
				Shine.addElementClass(c, 'linked');
			}
			else
			{
*/				c.appendChild(n);
				c.style.cursor = 'pointer';
				Shine.addEventHandler(c, 'click', {host: this, handler: this.click, data: banners[i] });
//			}
		}
	}
	c = document.getElementById(this.id + '--' + this.currentIndex);
	if(c) Shine.addElementClass(c, 'active');
	this.startCycleInterval();
}
BECOME.widgets.Panel.prototype.imageLoaded = function(Shine, sender, ev, data)
{
	// alert(this.banners[data].title);
	this.banners[data].loaded = true;
	// If the waiting flag is set, restart the cycle interval
	if(typeof this.banners[data].waiting != 'undefined' && this.banners[data].waiting == true)
	{
		this.startCycleInterval();
		this.cycle();
	}
}
BECOME.widgets.Panel.prototype.click = function(Shine, sender, ev, data)
{
	var _this = this, c = document.getElementById(this.id + '--' + this.currentIndex);
	if(c) Shine.removeElementClass(c, 'active');
	if(data && typeof data.body != 'undefined')
	{
		this.node.innerHTML = data.body;
		Shine.setAttribute(this.node, 'style', data.style);
		this.currentIndex = data.index;
		c = document.getElementById(this.id + '--' + this.currentIndex);		
		if(c) Shine.addElementClass(c, 'active');
	}
	this.restartCycleInterval();
}
BECOME.widgets.Panel.prototype.cycle = function()
{
	// Check if next banner image is loaded
	var nextIndex = this.currentIndex + 1;
	if(typeof this.banners[nextIndex] == 'undefined')
	{
		nextIndex = 0;
	}
	// If the next banner image isn't loaded yet, set a waiting flag and clear the interval
	if(!this.banners[nextIndex].loaded)
	{
		this.banners[nextIndex].waiting = true;
		this.clearCycleInterval();
		return;
	}
	// cycle the banners
	var currentList = document.getElementById(this.id + '--' + this.currentIndex);
	var currentBanner = document.getElementById(this.id + '-banner--' + this.currentIndex);
	if(currentList) Shine.removeElementClass(currentList, 'active');

	var newIndex = this.currentIndex + 1;
	if(typeof this.banners[newIndex] == 'undefined')
	{
		newIndex = 0;
	}
	var newList = document.getElementById(this.id + '--' + newIndex);
	var newBanner = document.getElementById(this.id + '-banner--' + newIndex);
	if(newList) Shine.addElementClass(newList, 'active');
	
	if(currentBanner && newBanner)
	{
		var start, _this = this;
	
		start = (new Date).getTime();
		newBanner.style.display = 'block';
	
		this.fadeInterval = setInterval(function()
		{
			var time = (new Date).getTime();
			var Tpos = (time - start) / _this.fadeTime;
			var pos;
			if (time >= _this.fadeTime + start)
			{
				clearInterval(_this.fadeInterval);
				_this.fadeInterval = null;
			
				currentBanner.style.opacity = '0';
				currentBanner.style.filter = 'alpha(opacity=0)';
				currentBanner.style.display = 'none';
				currentBanner.style.zIndex = '1';
				newBanner.style.opacity = '1';
				newBanner.style.filter = 'alpha(opacity=100)';
				newBanner.style.zIndex = '2';
			}
			else
			{
				//this time-position, sinoidal transition thing is from script.aculo.us
				opacity = ((-Math.cos(Tpos*Math.PI)/2) + 0.5);

				currentBanner.style.opacity = 1 - opacity;
				currentBanner.style.filter = 'alpha(opacity=' + (1 - opacity) * 100 + ')';
				newBanner.style.opacity = opacity;
				newBanner.style.filter = 'alpha(opacity=' + opacity * 100 + ')';
			}
		}, 15);
	}
	
	this.currentIndex = newIndex;
}
BECOME.widgets.Panel.prototype.startCycleInterval = function()
{
	var _this = this;
	this.interval = setInterval(function() { _this.cycle(); }, this.intervalTime);
}
BECOME.widgets.Panel.prototype.clearCycleInterval = function()
{
	if(this.interval) clearInterval(this.interval);
}
BECOME.widgets.Panel.prototype.restartCycleInterval = function()
{
	this.clearCycleInterval();
	this.startCycleInterval();
}