CarouselPanel = function() {
}

CarouselPanel.prototype = {
		
	setPanels: function(panels) {
		this.panelArray = panels;

		// set up the navimage panel, removing the current image
		var navimage = Ext.get("navimage");
		Ext.get("navimage").addClass("xfade");
		navimage.child("img").remove();
		var stateEl = Ext.DomHelper.append(navimage, {
			id: 'cp-state',
			tag: 'a',
			href: '#',
			cls: 'play'
		});
		Ext.get("cp-state").on("click", function() {
			this.toggleState();
			return false;
		}, this);
		
		for(var i = 0, len = this.panelArray.length; i < len; ++i) {
			var panel = this.panelArray[i];
			var el = Ext.get(panel.id + "_button");
			var child = el.child("a");
			(function(i, child) {
				child.on("mousedown", function() {
					this.onClickButton(i);
				}, this);
			}).createDelegate(this)(i, child);
			child.dom.href = "#";

			// setup ths navimage panel, adding all the images
			Ext.DomHelper.append(navimage,{
				tag: 'img',
				id: 'cp-image-' + i,
				src: '/images/navbox/' + panel.id + '.png',
				display: 'none'
			});
			
			Ext.get("navtext").setStyle("position", "relative");
		}
	},

	start: function() {
		this.currSelection = this.panelArray.length - 1;
		this.task = {
			run: function() {
				this.swap(this.currSelection, (++this.currSelection) % this.panelArray.length);
			},
			interval: 8000,
			scope: this
		};
		
		this.currentState = "play";
		Ext.TaskMgr.start(this.task);
	},
	
	onClickButton: function(i) {
		this.swap(this.currSelection, i);
	},
	
	swap: function(oldId, newId) {
		var oldPanel = this.panelArray[oldId];
		var newPanel = this.panelArray[newId];
		
		// update buttons
		var el = Ext.get(oldPanel.id + "_button").removeClass("selected");
		el = Ext.get(newPanel.id + "_button").addClass("selected");
		
		// xfade main images
		if(Ext.isIE)
		{
			Ext.get("cp-image-" + oldId).setStyle("visibility", "hidden");
			Ext.get("cp-image-" + newId).setStyle("visibility", "visible");
		}
		else
		{
			Ext.get("cp-image-" + oldId).fadeOut({
				stopFx: true,
				duration: 1.5
			});
			Ext.get("cp-image-" + newId).fadeIn({
				duration: 1.5
			});
		}
		
		// update text on text panel
		Ext.DomHelper.overwrite(Ext.get("navtext"), newPanel.text);

		this.currSelection = newId;
	},
	
	toggleState: function() {
		if(this.currentState == "play") {
			Ext.TaskMgr.stop(this.task);
			Ext.get("cp-state").removeClass("play");
			Ext.get("cp-state").addClass("pause");
			this.currentState = "pause";
		}
		else {
			Ext.TaskMgr.start(this.task);
			Ext.get("cp-state").removeClass("pause");
			Ext.get("cp-state").addClass("play");
			this.currentState = "play";
		}
	}

};