var myScroll;

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

var SlidingTabs = new Class({
	options: {activeButtonClass: 'active'},
	current: null,
	buttons: null,
	contentFrame: null,
	slideContainer: null,
	innerSlidesBox: null,
  	panes: null,
  	positions: null,
	scrollingFx: null,
	start: null,
	btnprevious: null,
	btnnext: null,

	initialize: function(buttonContainer, contentFrame, start, btnprevious, btnnext, currenttab, lengthtab) {
		this.buttons = $(buttonContainer).getChildren();
		this.contentFrame = $(contentFrame);
		this.slideContainer = this.contentFrame.getFirst();
		this.panes = this.slideContainer.getChildren();
		this.start = $(start);
		this.btnext = $(btnnext);
		this.btprevious = $(btnprevious);
		this.current = parseInt(currenttab);
		this.lengthtab = parseInt(lengthtab);
		
		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.btnext.addEvent('click', this.next.bindWithEvent(this));

		this.btprevious.addEvent('click', this.previous.bindWithEvent(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);
		}
		if( this.current == this.lengthtab){
			$('next').removeClass('btnopacityfull');
			$('next').addClass('btnopacity');
		}
		if( this.current == 0){
			$('previous').removeClass('btnopacityfull');
			$('previous').addClass('btnopacity');
		}
		

		
	},
	
	//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);
		}
		
    },
	
	next: function(event) {
		this.current = this.current + 1;
		if (this.current >= this.panes.length-1 ) {
			//this.current = 0;
			this.current = this.panes.length-1;
			$('next').removeClass('btnopacityfull');
			$('next').addClass('btnopacity');
			if(this.panes.length>1){
				$('previous').removeClass('btnopacity');			
				$('previous').addClass('btnopacityfull');
			}
		}else{
			$('next').removeClass('btnopacity');
			$('next').addClass('btnopacityfull');
			$('previous').removeClass('btnopacity');			
			$('previous').addClass('btnopacityfull');
		}
		this.scrollingFx.cancel();
		this.scrollingFx.start(this.positions[this.current].x,this.positions[this.current].y);
		this.contentFrame.tween('height',this.panes[this.current].offsetHeight);
		
	  },

	previous: function(event) {
		
		this.current = this.current - 1;
		if (this.current <= 0) {
			this.current = 0;
			$('previous').removeClass('btnopacityfull');
			$('previous').addClass('btnopacity');
			if(this.panes.length>1){
				$('next').removeClass('btnopacity');
				$('next').addClass('btnopacityfull');
			}
		}else{
			$('next').removeClass('btnopacity');
			$('next').addClass('btnopacityfull');
			$('previous').removeClass('btnopacity');			
			$('previous').addClass('btnopacityfull');
		}
		this.scrollingFx.cancel();
		this.scrollingFx.start(this.positions[this.current].x,this.positions[this.current].y);
		this.contentFrame.tween('height',this.panes[this.current].offsetHeight);

	  }
	
});