// base code from: http://att.dyndns.org/public/slidingTabs/
/*
	Requirerments:
	1. Some sort of buttonContainer - should be a list
	2. A content
*/
var SlidingTabs = new Class({
	current: null,
	buttons: null,
	contentFrame: null,
	slideContainer: null,
	innerSlidesBox: null,
  	panes: null,
  	positions: null,
	scrollingFx: null,
	start: 0,// this is a numeric value
	width_padding: 0, // left and right
	height_padding: 0, // top and bottom

	initialize: function(buttonContainer, contentFrame, start, width_padding, height_padding ) {
		this.buttons = $(buttonContainer).getChildren();
		this.contentFrame = $(contentFrame);
		this.slideContainer = this.contentFrame.getFirst();
		this.panes = this.slideContainer.getChildren();
		this.start = start*1;
		this.width_padding = width_padding*1;
		this.height_padding = height_padding*1;
		
		this.scrollingFx = new Fx.Scroll(this.contentFrame, { duration: 400});		
		var w = (this.contentFrame.offsetWidth.toInt() * this.panes.length + this.width_padding);
		//console.log(w);
    	this.slideContainer.setStyle('width',  w + 'px');
		// Add the button to the menus
		this.buttons.each( function(button) {
	      button.addEvent('click', this.buttonEventHandler.bindWithEvent(this, button));
		  button.set('class', 'inactive');
    	}.bind(this));
		
    	this.positions = new Array(this.panes.length);
    	
		//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){	
			// Set the style:
			pane.setStyle('display','block');
			this.positions[i] = pane.getPosition(this.slideContainer);
			i++;
		}.bind(this));
		
		// this.start is the numeric sequence of the elements
		if( this.start < 0 || this.panes.length >= i ){
			this.start = 0;
		}
		this.buttons[this.start].set('class', 'active');
		this.current = this.start;
		////////////////////////////
		// Move the panes 
		if( Browser.Engine.trident ){
			this.scrollingFx.cancel();
			this.scrollingFx.start(this.positions[this.start].x,this.positions[this.start].y); // works for IE!
		}
		else{
			this.contentFrame.scrollTo(this.positions[this.start].x, this.positions[this.start].y); // works for FF
		}
		// Set Auto overflow:
		this.contentFrame.setStyle('overflow', 'hidden');
		// Set the height:
		var h = this.panes[this.current].offsetHeight + this.height_padding;
		this.contentFrame.tween('height', h);

	},
	
	//Event-Handler
    buttonEventHandler: function(event, button) {
		// Same button as place, don't move
		if (this.current == this.buttons.indexOf($(button))){
			return;
		}
		
		else{
			// Set the current menu tab class to "inactive"
			this.buttons[this.current].set('class', 'inactive');
			this.current = this.buttons.indexOf($(button));	
			// Now set the class of the new one to "active"
			this.buttons[this.current].set('class', 'active');
			// Move the panes
			this.scrollingFx.cancel();
			this.scrollingFx.start(this.positions[this.buttons.indexOf($(button))].x,this.positions[this.buttons.indexOf($(button))].y);
			var h = this.panes[this.current].offsetHeight + this.height_padding;
			//alert( h );
			//console.log(h)
			//console.log(event);
			//console.log(button);
			this.contentFrame.tween('height', h);
		}
    }    
});