TabPanel = Base.extend({
	config: {},
	oPE: null,
	iCurrent: 0,
	constructor: function(oConfig) {
		this.config = oConfig;
		this.oPanel = $$(this.config.panel).first();
		this.oContents = $$(this.config.contents).first();
		this.oTabs = this.oPanel.select("li.lionglet");
		this.oPrepends = this.oPanel.select(".tab-prepend");
		this.oPrepends.each(function(oPrepObj) {
			this.oContents.appendChild(oPrepObj);
		}.bind(this));

		this.initPE();

		this.oTabs.each(function(oTab) {

			oTab.oPanel = this;
			oTab.oContent = oTab.select("div").first();
			
			if(!oTab.oContent) {
				oTab.oContent = new Element('div');
			}

			oTab.oContent.hide();
			oTab.oContent.oTab = oTab;

			this.oContents.appendChild(
				oTab.oContent
			);
			
			oTab.oHandle = oTab.select("a").first();
			oTab.oHandle.oTab = oTab;

			Event.observe(
				oTab.oHandle,
				this.config.event,
				function(event) {
					this.oPanel.setTab(this);
					this.oPanel.initPE();
				}.bindAsEventListener(oTab)
			);

			Event.observe(
				oTab.oHandle,
				"mouseenter",
				function(event) {
					if(this.oPanel.config.cycle) {
						this.oPanel.oPE.stop();
					}
				}.bindAsEventListener(oTab)
			);

			Event.observe(
				oTab.oHandle,
				"mouseleave",
				function(event) {
					if(this.oPanel.config.cycle) {
						this.oPanel.initPE();
					}
				}.bindAsEventListener(oTab)
			);

			Event.observe(
				oTab.oContent,
				"mouseenter",
				function(event) {
					if(this.oPanel.config.cycle) {
						this.oPanel.oPE.stop();
						//console.log("content:enter");
					}
				}.bindAsEventListener(oTab)
			);

			Event.observe(
				oTab.oContent,
				"mouseleave",
				function(event) {
					if(this.oPanel.config.cycle) {
						this.oPanel.initPE();
						//console.log("content:leave");
					}
				}.bindAsEventListener(oTab)
			);

		}.bind(this));

		if(this.config.start && this.oTabs[(parseInt(this.config.start) - 1)]) {
			iStart = parseInt(this.config.start) - 1;
		} else {
			iStart = 0;
		}

		if(this.oTabs[iStart]) {
			this.setTab(this.oTabs[iStart]);
		}
	},
	cycle: function() {
		this.iCurrent++;
		if(this.iCurrent >= this.oTabs.size()) {
			this.iCurrent = 0;
		}
		this.setTab(this.oTabs[this.iCurrent]);
	},
	setTab: function(oSetTab) {
		
		this.oTabs.each(function(oTab) {
			oTab.oContent.hide();// = "none";
			oTab.oContent.removeClassName(this.config.activeContentClass);
			oTab.removeClassName(this.config.activeHandleClass);
		}.bind(this));

		this.iCurrent = this.oTabs.indexOf(oSetTab);

		oSetTab.oContent.addClassName(this.config.activeContentClass);
		oSetTab.addClassName(this.config.activeHandleClass);
		if(this.oEffect) {
			this.oEffect.cancel();
		}
		this.oEffect = Effect.Appear(oSetTab.oContent, {duration: 0.5});//.style.display = "block";
	},
	initPE: function() {
		if(this.config.cycle) {
			if(this.oPE) {
				this.oPE.stop();
				this.oPE = null;
			}
			this.oPE = new PeriodicalExecuter(function(pe) {
				this.cycle();
			}.bind(this), this.config.cycle);
		}
	}
});
