var Tabber = new Class({

	Implements: [Events, Options],
	options: {
		show: 0,
		selector: '.tab-tab',
		classWrapper: 'zano-tab-wrapper',
		classMenu: 'zano-tab-menu',
		classContainer: 'zano-tab-container',
		onSelect: function(toggle, container, index) {
			toggle.addClass('zano-tab-selected');
			container.setStyles({'display': '','visibility':'visible'});
			//if(index){
				
				//container.adopt(new Element('div', {'class': 'scrollbar'}));
				content = container.getElements('.makeScroll');
				if(content.length > 0){
					var steps = (content[0].getScrollSize().y - content[0].getSize().y);
					if(steps > 0){
						if(container.getElements('.scrollbar-vert').length > 0){
							container.getElements('.scrollbar-vert').destroy();
						}
						
						handle = new Element('div', {'class': 'handle-vert'});
						scrollbar = new Element('div', {'class': 'scrollbar-vert'});
						scrollbar.adopt(handle);
						container.adopt(scrollbar);
						content[0].setStyle('overflow','hidden');
						var slider = new Slider(scrollbar, handle, {	
							steps: steps,
							mode: 'vertical',
							onChange: function(step){
								content[0].scrollTo(0,step);
							}
						}).set(0);
						
						$$(content, scrollbar).addEvent('mousewheel', function(e){	
							e = new Event(e).stop();
							var step = slider.step - e.wheel * 30;	
							slider.set(step);
						});
						// Stops the handle dragging process when the mouse leaves the document body.
						$(document.body).addEvent('mouseleave',function(){slider.drag.stop()});
					}
				}
			//}
			
			
		},
		onDeselect: function(toggle, container, index) {
			toggle.removeClass('zano-tab-selected');
			container.setStyles({'display': 'none','visibility':'hidden'});
		},
		onRequest: function(toggle, container, index) {
			container.addClass('tab-ajax-loading');
		},
		onComplete: function(toggle, container, index) {
			container.removeClass('tab-ajax-loading');
		},
		onFailure: function(toggle, container, index) {
			container.removeClass('tab-ajax-loading');
		},
		/*onAdded: Class.empty,*/
		onAdded: function(toggle, container, index) {
			toggle.removeClass('zano-tab-selected');
			container.setStyles({'display': 'none','visibility':'hidden'});
		},
		getContent: null,
		ajaxOptions: {},
		cache: true
	},

	initialize: function(element, options) {
		this.element = $(element);
		this.setOptions(options);
		uri = String(window.location);
		if(uri.indexOf('#') > -1){
			parts = uri.split('#');
			this.options.show = (parts[1]*1)-1;
		}
		this.selected = null;
		this.build();
	},

	build: function() {
		this.tabs = [];
		this.menu = new Element('ul', {'class': this.options.classMenu});
		this.wrapper = new Element('div', {'class': this.options.classWrapper});

		this.element.getElements(this.options.selector).each(function(el) {
			var content = el.get('href') || (this.options.getContent ? this.options.getContent.call(this, el) : el.getNext());
			this.addTab(el.innerHTML, el.title || el.innerHTML, content);
		}, this);
		this.element.empty().adopt(this.menu, this.wrapper);

		if (this.tabs.length) this.select(this.options.show);
	},
	addTab: function(text, title, content) {
		var grab = $(content);
		var container = (grab || new Element('div'))
			//.setStyle('display', 'none')
			.setStyle('visibility', 'hidden')
			.addClass(this.options.classContainer)
			.inject(this.wrapper);
		var pos = this.tabs.length;
		var evt = (this.options.hover) ? 'mouseenter' : 'click';
		var tab = {
			container: container,
			toggle: new Element('li').grab(new Element('a', {
				href: '#',
				title: title
			}).grab(
				new Element('span', {html: text})
			)).addClass((this.tabs.length == 0 ? 'first' : '')).addEvent(evt, this.onClick.bindWithEvent(this, [pos])).inject(this.menu)
		};
		if (!grab && $type(content) == 'string') tab.url = content;
		this.tabs.push(tab);
		return this.fireEvent('onAdded', [tab.toggle, tab.container, pos]);
	},
	onClick: function(evt, index) {
		this.select(index);
		return false;
	},
	
	select: function(index) {
		if (this.selected === index || !this.tabs[index]) return this;
		if (this.ajax) this.ajax.cancel().removeEvents();
		var tab = this.tabs[index];
		var params = [tab.toggle, tab.container, index];
		if (this.selected !== null) {
			var current = this.tabs[this.selected];
			if (this.ajax && this.ajax.running) this.ajax.cancel();
			params.extend([current.toggle, current.container, this.selected]);
			this.fireEvent('onDeselect', [current.toggle, current.container, this.selected]);
		}
		this.fireEvent('onSelect', params);
		if (tab.url && (!tab.loaded || !this.options.cache)) {
			this.ajax = this.ajax || new Request.HTML();
			this.ajax.setOptions({
				url: tab.url,
				method: 'get',
				update: tab.container,
				onFailure: this.fireEvent.pass(['onFailure', params], this),
				onComplete: function(resp) {
					tab.loaded = true;
					this.fireEvent('onComplete', params);
				}.bind(this)
			}).setOptions(this.options.ajaxOptions);
			this.ajax.send();
			this.fireEvent('onRequest', params);
		}
		this.selected = index;
		return this;
	}

});

window.addEvent('load', function() {
  	var container = $('zano-tabs');
    if($type(container)){
		tabh = new Tabber(container, {
			show: 0, // voor extender
			selector: 'h1'
		});
	}
});