var tabSlider = new Class({

	Implements: [Events, Options],

	options: {
		slideContainer:'slide-container',
		evalScripts:false,
		duration:500,
		transition:Fx.Transitions.Quad.easeOut,
		display:'none',
		show:'none',
		failure:'<strong class="error">Error while loading file.</strong>',
		active:'active'
	},

	initialize: function(element,options){
		this.setOptions(options);
		this.sliders = {};
		this.sliders[element] = 0;
		this.active = false;
		if(!$(this.options.slideContainer)) {
			this.log('container "' + this.options.slideContainer + '" doesn\'t exist.');
			return;
		} else {
			this.log('tabSlider instance loaded for "' + this.options.slideContainer + '".');
		}
		$$(element).each(this.tabSlide.bindWithEvent(this,element));
		this.fx = new Fx.Slide($(this.options.slideContainer),{
			duration:this.options.duration,
			transition:this.options.transition,
			onComplete:function(){ this.active=false; }.bind(this)
		}).hide();
		if(this.options.display!='none' && this.options.display>=0 && $$(element)[this.options.display])
			this.openSlide($$(element)[this.options.display],element,true);
		else if(this.options.show!='none' && this.options.show>=0 && $$(element)[this.options.show])
			this.openSlide($$(element)[this.options.show],element,false);
	},
	
	tabSlide: function(el,element){
		el.addEvents({
			'click': function(e){
				e.stop();
				if(!this.active) {
					this.active=true;
					$$(element).removeClass(this.options.active);
					if(this.fx.open && this.sliders[element]==el) {
						this.fx.slideOut();
					} else if(!this.fx.open && this.sliders[element]==el) {
						this.sliders[element].addClass(this.options.active);
						this.fx.slideIn();
					} else if(this.fx.open) {
						this.fx.slideOut().chain(function(){ this.openSlide(el,element,true) }.bind(this));
					} else {
						this.openSlide(el,element,true);
					}
				}
			}.bind(this)
		});
	},
	
	openSlide: function(el,element,transition){ 
		new Request.HTML({
			url:el,
			method:'get',
			update:$(this.options.slideContainer),
			link:'chain',
			evalScripts:this.options.evalScripts,
			onSuccess:function(){
				this.sliders[element] = el;
				this.sliders[element].addClass(this.options.active);
				if(transition)
					this.fx.slideIn();
				else
					this.fx.show();
			}.bind(this),
			onFailure:function(){
				$(this.options.slideContainer).set('html',this.options.failure);
				if(transition)
					this.fx.slideIn();
				else
					this.fx.show();
			}.bind(this)
		}).send();
	},
	
	log: function(text, args) {
		if (window.console) console.log(text.substitute(args || {}));
	}

});

window.addEvent('domready', function() {
	var casecom = new tabSlider('.casecom',{
		slideContainer:'slide-container',
		duration:400,
		show:0
	});
	var casemus = new tabSlider('.casemus',{
		slideContainer:'slide-container2',
		duration:400,
		show:0
	});
	var casearticle = new tabSlider('.casearticle',{
		slideContainer:'slide-container3',
		duration:400,
		show:0
	});
});



//Tabs 2

var myScroll;

function scrollToPort() {
	myScroll.toElement('webdesign');
	outerSlidesBox = $('panes');
	$('panes').tween('height', $('webdesign').getStyle('height'));
	return false;
}

var SlidingTabs = new Class({
	current: null,
	buttons: null,
	contentFrame: null,
	slideContainer: null,
	innerSlidesBox: null,
  	panes: null,
  	positions: null,
	scrollingFx: null,
	start: null,

	initialize: function(buttonContainer, contentFrame, start) {
		this.buttons = $(buttonContainer).getChildren();
		this.contentFrame = $(contentFrame);
		this.slideContainer = this.contentFrame.getFirst();
		this.panes = this.slideContainer.getChildren();
		this.start = $(start);
		
		this.scrollingFx = new Fx.Scroll(this.contentFrame, { duration: 400});		
		
    	
    	this.slideContainer.setStyle('width', (this.contentFrame.offsetWidth.toInt() * this.panes.length) + 'px');

		this.buttons.each( function(button) {
	      button.addEvent('click', this.buttonEventHandler.bindWithEvent(this, button));
    	}.bind(this));
    	    	
    	this.positions = new Array(this.panes.length);

		if(this.start!= null){
			this.start.setStyle('display', 'block');
			//this.contentFrame.setStyle('height', this.start.offsetHeight);
		}
		this.contentFrame.setStyle('height', this.contentFrame.offsetHeight);
    	
		//fuckin IE (7?) does not comes along with this position-stuff after one scroll - therefor i store the positions before first scroll!    	
    	var i = 0;
		this.panes.each(function(pane){			
			pane.setStyle('display','block');
			this.positions[i] = pane.getPosition(this.slideContainer);
			i++;
		}.bind(this));
		
		if(this.start!= null){
			this.contentFrame.scrollTo(this.start.getPosition(this.slideContainer).x, this.start.getPosition(this.slideContainer).y);
		}

	},
	
	//Event-Handler
    buttonEventHandler: function(event, button) {
		if (this.current == this.buttons.indexOf($(button))){
			return;
		}else{
			this.current = this.buttons.indexOf($(button));			
			this.scrollingFx.cancel();
			this.scrollingFx.start(this.positions[this.buttons.indexOf($(button))].x,this.positions[this.buttons.indexOf($(button))].y);
			this.contentFrame.tween('height',this.panes[this.current].offsetHeight);
		}
    }    
});