var PrepareTabs = new Class({
	Implements: [Options, Events],
	options: {
		blockWidth:600
		/*onDone: $empty*/
	},
	tabbedPanels: null,
	
	initialize: function(tabbedPanels, blocks, tabs, options){
		this.setOptions(options);
		this.tabbedPanels = $(tabbedPanels);
		blocks = $$(blocks);
		tabs = $$(tabs);
		this.createTabsList(tabs);
		this.createSlider(blocks);
	},
	createTabsList:function(tabs){
		this.tabsUL = new Element('ul', {'class': 'TabItemsGroup'});
		var n = 0;
		$$(tabs).each(function(tab){
			var tabsLI = new Element('li', {'class': 'Tab', 'tabindex': ++n});
			tabsLI.set('html', tab.get('html'));
			tab.empty();
			tabsLI.inject(this.tabsUL);
		}, this);
		var br = new Element('br', {'class': 'clearfloat'});
		br.inject(this.tabsUL);
		this.tabsUL.inject(this.tabbedPanels, 'before');
	},
	createSlider:function(blocks){
		var n = 0;
		$$(blocks).each(function(block){
			n++;
			block.setStyles({'float': 'left', 'width': this.options.blockWidth});
			blockWrp = new Element('div', {'class': 'blockWrp'});
			blockWrp.set('html', block.get('html'));
			block.empty();
			blockWrp.inject(block);
		}, this);
		this.sliderWidth = (this.options.blockWidth)*n;
		sliderWrp = new Element('div', {'class': 'sliderWrp'});
		sliderWrp.set('html', blocks.getParent('div').get('html'));
		blocks.getParent('div').set('html', '');
		sliderWrp.inject(this.tabbedPanels.getElement('div.TabModulesGroup'));
		sliderWrp.setStyles({'width': this.sliderWidth, 'position': 'relative', 'left': 0});
		sliderWrp.getParent('div.TabModulesGroup').adopt(new Element('br', {'class': 'clearfloat'}));
		sliderWrp.getParent('div.TabModulesGroup').setStyles({'width': this.options.blockWidth, 
														  'overflow': 'hidden',
														  'position': 'relative'});/**/
		this.fireEvent('onDone');
	}
});

var Tabs = new Class({
	Implements: [Options, Events],
	Extends: PrepareTabs,
	options: {
		selectedTabCssClass: 'selected',
		selectedSectionCssClass: 'selected',
		firstShow: 0,
		fxTransition: Fx.Transitions.Cubic.easeIn,
		duration: 400
	},						
	tabs: [],
	initialize: function(containers, tabs, options){
		this.setOptions(options);
		containers = $$(containers);
		$$(tabs).each(function(tab, index){
			this.addSection(tab, containers[index]);
		}, this);
		this.show(this.options.firstShow); //Show the first tab on startup
	},
	
	addSection: function(tab, container) {	
		this.tabs.include(tab);
		tab.store('container', container);
		this.attach(tab);
	},
	attach: function(tab){
		tab.addEvent('click', function(event){
			event.preventDefault();
			this.show(this.tabs.indexOf(tab));
		}.bind(this));
		tab.addEvent('mouseenter', function(event){
			this.addClass('TabHover');
		});
		tab.addEvent('mouseleave', function(event){
			this.removeClass('TabHover');
		});
	},
	show: function(index){
		if (this.current === index) return;
		this.tabs.each(function(tab, i){
			var container = tab.retrieve('container');
			if (index === i) {
					tab.addClass(this.options.selectedTabCssClass);
					container.addClass(this.options.selectedSectionCssClass);
					container.getParent('div.sliderWrp').set('tween', {duration: this.options.duration, transition: this.options.fxTransition});
					container.getParent('div.sliderWrp').tween('left', -this.options.blockWidth*i);
					this.fireEvent('onShow', [i, tab, container]);
			} else {
					tab.removeClass(this.options.selectedTabCssClass);
					container.removeClass(this.options.selectedSectionCssClass);
					if (this.current === i || !$chk(this.current))
					this.fireEvent('onHide', [i, tab, container]);
			}
		}, this);
		this.current = index;
	}
});

var AjaxTabs = new Class({
	Extends: Tabs,
	options: {
		cache: true,
		//This empty array is the default for the URLs
		//If the array remains empty, we'll try and get
		//the URL from the tab element and assume it has
		//an href property
		urls: []
	},
	show: function(index, force){
		//Get the tab:
		var tab = this.tabs[index];
		//Get the URL from the options or, if that's not
		//set, see if the tab has an href property
		var url = this.options.urls[index] || tab.get('href');
		//If the URL isn't set OR we're caching and the
		//tab's data is already loaded, OR we’re forcing
		//this method then just show the new tab
		if (!url || force ||	(this.options.cache && tab.retrieve('loaded'))) {
			//this.parent(index) executes the show method
			//in the Tabs class
			this.parent(index);
		} else {
			//Otherwise, we're going to fetch the data from
			//the server
			this.fetchTabContent(index, url);
		}
	},
	fetchTabContent: function(index, url) {
		//Get the tab:
		var tab = this.tabs[index];
		//Get the container we’re going to update:
		var container = tab.retrieve('container');
		//See if we've already got an instance
		//of Request.HTML for this tab:
		var request = tab.retrieve('tabAjax');
		//If not, we’ll need to create one:
		if (!request) {
			request = new Request.HTML({
				//Tell it to insert the HTML into our container
				update: container,
				url: url, //Using the URL we got earlier
				onSuccess: function(){
					//Show the container, and force it not to
					//check for caching
					this.show(index, true);
					//On success the HTML is automatically
					//injected into our container, so all
					//that's left to do is set the loaded
					//flag:
					tab.store('loaded');
				}.bind(this) //Don't forget to bind the "this"
			});
			tab.store('tabAjax', request);
		}
		request.send();
	}
});
/* ------------------------ */


var Ie6HoverFix = new Class({
	ie6HoverFix: function(item){
		item.addEvents({
			'mouseenter':function(){
				this.toggleClass('hover');
			},
			'mouseleave':function(){
				this.toggleClass('hover');
			}
		});
	}
});