var SlidingTabs = new Class({
	current: null,
	buttons: null,
	contentFrame: null,
	slideContainer: null,
	innerSlidesBox: null,
	activeButtonClass: 'active', // class to add to selected button
  	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: 500});		
    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));
	//this.buttons[this.current].addClass(this.options.activeButtonClass);
    }.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);
	}
	}   
});

window.addEvent('load', function () {

myTabs = new SlidingTabs('menu','content', 'home');

     $$('#menu > li').each(function(li) {    
        li.addEvent('click', function() {
			$$('li.active').removeClass('active');
            li.addClass('active');
        });    
    }); 
});