var tabbedselector = new Class({ 

	Implements: [Options, Events],
	
	options: {
		containercClass: 'tabbed-container',
		tabClass: 'tab',
		opentabClass: 'tab-active',
		closedtabClass: false,
		contentsDivPart: '-contents',
		transisitonTime: 400,
		changeClassOnParent: true,
		contentswrapperclass: 'tab-contents-wrap', 
		ChangeFunction: false,
		setInitialTab: false
	},
	initialize: function(options) {
		this.setOptions(options);
		//object to hold the effect objects:
		this.transistions = {};
		if(window.trident4) {
			this.options.transisitonTime = this.options.transisitonTime/2;
		}
		//this.containerHeight = $(this.options.tabwrapper).getSize().size.y;
		//$(this.options.tabwrapper).setStyle('height', this.containerHeight+'px');
		this.wrapper = false;
		if($E('.'+this.options.containercClass+' .'+this.options.contentswrapperclass)) {
			this.wrapper = $E('.'+this.options.containercClass+' .'+this.options.contentswrapperclass);
		}
		// add onclick event
		$$('.'+this.options.containercClass+' .'+this.options.tabClass).each( function(tab) { 
			//get the currently selected tab:
			if(tab.hasClass(this.options.opentabClass)) {
				this.currentlyopen = tab;
				//make active contents absolute:
				this.currentcontentsHeight = $((tab.id+this.options.contentsDivPart)).getSize().y;
				$((tab.id+this.options.contentsDivPart)).getParent().setStyles({'height': this.currentcontentsHeight+'px', 'position': 'relative'});
				$((tab.id+this.options.contentsDivPart)).setStyle('position', 'absolute');
			} else {
				$((tab.id+this.options.contentsDivPart)).setStyle('position', 'absolute');
			}
			//add onclick events:
			tab.addEvent('click', function (event) {
				//event = new Event(event).stop();
				event.stop();
				this.changetabs(tab);
			}.bind(this));
		}, this);
	},
	changetabs: function(tab) {
		if(tab != this.currentlyopen)
		{
			//if its a differnt tab:
			var tabcontents = $(tab.id+this.options.contentsDivPart);
			
			//hide the old one
			if(!$defined(this.transistions[this.currentlyopen.id])) {
				//if the effect isnt defined, create it:
				this.transistions[(this.currentlyopen.id+this.options.contentsDivPart)] = new Fx.Morph((this.currentlyopen.id+this.options.contentsDivPart), {duration: this.options.transisitonTime, transition: Fx.Transitions.linear});
			}
			if(!$defined(this.transistions[tabcontents.id])) {
				this.transistions[tabcontents.id] = new Fx.Morph(tabcontents.id, {duration: this.options.transisitonTime, transition: Fx.Transitions.linear});
				this.transistions[tabcontents.id].set({opacity: 0}); //hide it.
				tabcontents.setStyle('display', '');
			}
			//see if we need to resize the container:
			var newheight = tabcontents.getSize().y; 
			var resized = false;
			if(newheight != this.currentcontentsHeight)
			{
				//it needs resizing:
				if(this.wrapper) {
					if(!this.wrapperfx) {
						this.wrapperfx = new Fx.Morph(this.wrapper, {duration: (this.options.transisitonTime-90), transition: Fx.Transitions.linear});
					}
					this.wrapperfx.start({'height': newheight});
					resized = true;
					this.currentcontentsHeight = newheight;
					//$(this.currentlyopen.id+this.options.contentsDivPart).getParent().setStyle('height', (newheight+this.offset)+'px');
				}
			}
			//this.offset
			//hide old one:
			if(resized) {
				//add some delay for the resizing (todo)
				this.transistions[(this.currentlyopen.id+this.options.contentsDivPart)].start({opacity: 0});
				//show new one:
				(function() {this.transistions[tabcontents.id].start({opacity: 1}); }.bind(this)).delay(400);
			} else {
				this.transistions[(this.currentlyopen.id+this.options.contentsDivPart)].start({opacity: 0});
				//show new one:
				(function() {this.transistions[tabcontents.id].start({opacity: 1}); }.bind(this)).delay(300);
			}
			//update the tabs:
			this.currentlyopen.removeClass(this.options.opentabClass);
			if(this.options.closedtabClass) { this.currentlyopen.addClass(this.options.closedtabClass); }
			if(this.options.changeClassOnParent) { this.currentlyopen.getParent().removeClass(this.options.opentabClass); }
			//add classes:
			tab.addClass(this.options.opentabClass);
			if(this.options.closedtabClass) { tab.removeClass(this.options.closedtabClass); }
			if(this.options.changeClassOnParent) { tab.getParent().addClass(this.options.opentabClass); }
			
			//update currently showing:
			this.currentlyopen = tab;
			if(this.options.ChangeFunction) {
				this.options.ChangeFunction(tab);
			}
			//fire event:
			tabcontents.fireEvent('tabOpened');
		}
	}
	
	
});