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});		
		var i = 0;
    	
    	this.slideContainer.setStyle('width', ((this.contentFrame.offsetWidth.toInt() * this.panes.length)+ 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!    	
    	
		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);
			//$('shadow').setStyle('height',((this.contentFrame.offsetHeight) - 0));
			//$('corners').setStyle('margin-top',((this.contentFrame.offsetHeight) - 0));
		//$('shadow').setStyle('display','block');
			//$('corners').setStyle('display','block');
			var e = 3;
			this.buttons.each( function(button) {
			if (e != 3){
			button.setStyle('margin-left', "-22px");
			}
			button.setStyle('z-index', e);
			e = e-1;
			});
			$('active').setStyle('background-position', 'bottom left');
			$('active').setStyle('color', '#d05');
		}			


	},
	
	//Event-Handler
    buttonEventHandler: function(event, button) {
    		
var d = 3;
			this.buttons.each( function(button) {
			if (d != 3){
			//button.setStyle('margin-left', "-22px");
			}
			button.setStyle('z-index', d);
			d = d-1;
			});
			this.current = this.buttons.indexOf($(button));	
			this.buttons.setStyle('background-position', 'top left');
			//this.buttons.each
			$(button).setStyle('background-position', 'bottom left');
			$(button).setStyle('z-index', '400');
			this.buttons.setStyle('color', '#444');
			$(button).setStyle('color', '#d05');
			d = 3;
			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);
			//$('corners').tween('margin-top',((this.panes[this.current].offsetHeight) - 0));
			//$('shadow').tween('height',((this.panes[this.current].offsetHeight) - 0));
    }    
});