/***
 * CODING BY Sebastian Doell/ www.libasys.de 
 * 
 * VERSION: 1.0 stable
 * 
 * INSPIRED BY http://creativepony.com/ Sliding Tabs
 * 
 * BIG THANKS TO MOOTOOLS
 * 
 * License: MIT-License Do what you want
 * 
 * added: SlideShow, useMousewheel, KeyInput,useControl, useFlyingElement, Scrolling vertical/horizontal,PlayButton,buttonDirection,PlayDirection (left/Right/top/bottom)
 *  Function: initialize, changeTo,recalcWidths,next,previous
 * added Function: gotoElement, switchPlayButton,FlyingElement,animateControl,play,stop,autoFromLeftToRight,
 * 					autoFromRightToLeft,keyTo,wheelTo,recalcHeights
 * 
 * Do not remove this copyright! Thanks ;-)
 */

var SlidingTabs = new Class(
		{
			Extends : Fx,
			options : {
				activeButtonClass : 'active',
				activationEvent : 'click', 
				direction : 'horizontal',
				playDirection : 'toRight',
				addButtons : {
					'previous' : null,
					'next' : null,
					'play' : null
				},
				onAutoPlay : function(){},
				onAutoStop : function(){},
				onReadyLoad : function(){},
				useMouseWheel : true,
				useKeyInput : true,
				useControl : true,
				wrap : true, 
				stayAlive : 3000, 
				useFlyingElement : false,
				buttonDirection : 'left', 
				slideEffect : { 
					duration : 2000,
					transition : Fx.Transitions.Bounce.easeOut
				},
				rightOversized : 0
			},
			
			initialize : function(buttonContainer, slideContainer, options) {
				
				if (buttonContainer) {
					this.buttons = $(buttonContainer).getChildren();

				}
				if (buttonContainer == null) {
					this.options.useFlyingElement = false;
				}
				this.current=0;
				this.isAutoPlay = false;
				
				this.buttonContainer=$(buttonContainer);
				this.outerSlidesBox = $(slideContainer);
				this.innerSlidesBox = this.outerSlidesBox.getFirst();
				this.panes = this.innerSlidesBox.getChildren();
				
				this.parent(options);

				this.addButtons = this.options.addButtons;

				if (this.options.useMouseWheel)	this.outerSlidesBox.addEvent('mousewheel', this.wheelTo.bind(this));

				if (this.options.useKeyInput) document.addEvent('keydown', this.keyTo.bind(this));

				this.fx = new Fx.Scroll(this.outerSlidesBox, {scrollDir : this.options.direction,duration : 1000,transition : Fx.Transitions.Sine.easeOut,wheelStops:false});
				
				if (this.options.useFlyingElement) this.initFlyingElement();

				if (this.options.useControl) this.initControlElement();
				
				this.initStyleCorrection();
				
				
				if (this.buttons)
					this.buttons.each(function(button) {
						button.addEvent(this.options.activationEvent,function(event){this.buttonEventHandler(event,button);}.bind(this));
						
						
					}.bind(this));

				this.initButtons();
				
				this.recalcDimensions();
				
				this.onReadyLoad=this.fireEvent('onReadyLoad',this.options.onReadyLoad,1000);

			},
			
			
			changeTo : function(element, animate) {

				if (this.buttons) {
					this.buttons[this.current].removeClass(this.options.activeButtonClass);
				}

				this.current = this.panes.indexOf(element);

				if (this.buttons) {
					this.buttons[this.current].addClass(this.options.activeButtonClass);
				}
				this.fx.cancel();

				if (this.options.direction == 'horizontal') {
					this.fx.start(this.current * this.outerSlidesBox.offsetWidth.toInt(), 0);
				} else {
					this.fx.start(0, this.current * this.outerSlidesBox.offsetHeight.toInt());
				}

			},
			gotoElement : function(indexit) {

				if (this.options.useFlyingElement) this.flyingElement(this.buttons[0], this.buttons[indexit]);
				this.changeTo(this.panes[indexit]);

			},

			
			buttonEventHandler : function(event, button) {
				 event = new Event(event).stop();
				
				this.autoPlayCheck();
				if (event.target == this.buttons[this.current])	return;
				if (this.options.useFlyingElement)	this.flyingElement(this.buttons[this.current],event.target);
				this.changeTo(this.panes[this.buttons.indexOf($(button))]);
				
			},

			flyingElement : function(fromElement, toElement) {
					
				this.FlyingFx.cancel();
				
				if (this.options.buttonDirection == 'left') {
					this.FlyingFx.start( {
								'left' : [ fromElement.offsetLeft,
										toElement.offsetLeft ],
								'width' : toElement.getCoordinates().width
							});
				} else {

					this.FlyingFx.start( {
						'top' : [ fromElement.offsetTop, toElement.offsetTop ],
						'width' : toElement.offsetWidth
					});
				}
			},
			animateControl : function(TEXT) {

				this.ControlDiv.set('html', TEXT);
				this.ControlFx.start( {
					'opacity' : [ 0, 0.8 ]
				}).wait(1000).chain(function() {
					this.ControlFx.start( {
						'opacity' : [ 0.8, 0 ]
					});
				}.bind(this));
			},
			play : function() {
				if (this.options.playDirection == 'toRight') {
					this.autoPlay = this.autoFromLeftToRight.periodical(this.options.stayAlive, this);
				} else {
					this.autoPlay = this.autoFromRightToLeft.periodical(this.options.stayAlive, this);
				}
				this.isAutoPlay = true;
				if (this.options.useControl) this.animateControl('PLAY');
				this.fireEvent('autoPlay');

			},
			autoPlayCheck:function(){
				if (this.isAutoPlay) {
					this.stop();
					this.switchPlayButton();
				}
			},
			autoFromLeftToRight : function() {
				if (this.current < this.panes.length) this.next();
				else if (this.current == this.panes.length)	this.changeTo(0);
			},

			autoFromRightToLeft : function() {
				if (this.current < this.panes.length) this.previous();
				else if (this.current == this.panes.length)	this.changeTo(0);
			},

			stop : function() {
				clearInterval(this.autoPlay);
				this.isAutoPlay = false;
				if (this.options.useControl) this.animateControl('STOP');
				this.fireEvent('autoStop');
			},
			keyTo : function(e) {
				if (this.isAutoPlay) {
					this.stop();
					this.switchPlayButton();
				}

				if (this.options.direction == 'horizontal') {
					switch (e.code) {
					case 37:
						e.stop();
						this.previous();
						break;
					case 39:
						e.stop();
						this.next();
					}
				} else {

					switch (e.code) {
					case 38:
						e.stop();
						this.previous();
						break;
					case 40:
						e.stop();
						this.next();
					}
				}
			},
			wheelTo : function(e) {
				if (this.isAutoPlay) {
					this.stop();
					this.switchPlayButton();
				}

				if (e.wheel > 0) this.previous();
				if (e.wheel < 0) this.next();
				e.stop().preventDefault();
			},

			
			next : function() {
				var next = this.current + 1;
				if (next == this.panes.length) {
					if (this.options.wrap == true) {
						next = 0;
					} else {
						return;
					}
				}
				if (this.options.useFlyingElement) this.flyingElement(this.buttons[this.current],this.buttons[next]);

				this.changeTo(this.panes[next]);
			},

			
			previous : function() {

				var prev = this.current - 1;
				if (prev < 0) {
					if (this.options.wrap == true) {
						prev = this.panes.length - 1;
					} else {
						return;
					}
				}
				if (this.options.useFlyingElement)	this.flyingElement(this.buttons[this.current],this.buttons[prev]);

				this.changeTo(this.panes[prev]);
			},
			
			initStyleCorrection:function(){
				
				this.outerSlidesBox.setStyle('overflow', 'hidden');

				if (this.options.direction == 'horizontal') {
					this.panes.each(function(pane, index) {
						pane.setStyles( {
							'float' : 'left',
							'overflow' : 'hidden'
						});
					}.bind(this));
					this.innerSlidesBox.setStyle('float', 'left');
				} else {
					this.panes.each(function(pane, index) {
						pane.setStyles( {
							'float' : 'none',
							'overflow' : 'hidden'
						});
					}.bind(this));
				}

				
			},
			
			recalcDimensions:function(){
				
				if (this.options.direction == 'horizontal') {
					this.recalcWidths();
				} else {
					this.recalcHeights();
				}
				
			},
			
			initButtons:function(){
				
				if (this.addButtons['previous'] != null) {

					$(this.addButtons['previous']).addEvent(
							this.options.activationEvent, function() {
								this.autoPlayCheck();
								this.previous();
							}.bind(this));
				}
				if (this.addButtons['next'] != null) {
					$(this.addButtons['next']).addEvent(
							this.options.activationEvent, function() {
								this.autoPlayCheck();
								this.next();
							}.bind(this));
				}
				if (this.addButtons['play'] != null) {
					$(this.addButtons['play']).addEvent(
							this.options.activationEvent, function() {

								if (this.isAutoPlay) {
									this.stop();
								} else {
									this.play();
								}

								this.switchPlayButton();

							}.bind(this));
				}
			},
			
			initControlElement:function(){
				
				this.ControlDiv = new Element('div', {
					'html' : '&nbsp;',
					'class' : 'ControlDiv'
				}).setStyles( {
					'position' : 'absolute',
					'clear' : 'both',
					'opacity' : '0.6',
					'visibility' : 'hidden'
				}).inject(this.outerSlidesBox);
				this.ControlFx = new Fx.Morph(this.ControlDiv, {
					duration : 500,
					transition : Fx.Transitions.Linear
				});
			},
			
			initFlyingElement:function(){
				
				this.FlyingDiv = new Element('div', {
					'html' : '&nbsp;',
					'class' : 'flyingDiv'
				}).setStyles({
									'position' : 'absolute',
									'clear' : 'both',
									'top' : this.buttons[this.current].offsetTop + 'px',
									'width' : this.buttons[this.current].getCoordinates().width + 'px',
									'height' : this.buttons[this.current].getCoordinates().height + 'px',
									'opacity' : '0.6'
				}).inject(this.buttonContainer);
				
				this.FlyingFx = new Fx.Morph(this.FlyingDiv,this.options.slideEffect);
			},
			
			switchPlayButton : function() {
				
				if (this.addButtons['play'] != null) {
					if (this.isAutoPlay) {

						$(this.addButtons['play']).set('html', 'Stop');

					} else {

						$(this.addButtons['play']).set('html', 'Play');

					}
				}

			},

			recalcWidths : function() {

				this.panes.each(function(pane, index) {
					pane.setStyle('width', this.outerSlidesBox.offsetWidth.toInt()- this.options.rightOversized + 'px');
				}.bind(this));

				this.innerSlidesBox.setStyle('width', (this.outerSlidesBox.offsetWidth.toInt() * this.panes.length) + 'px');

				
				if (this.current > 0) {
					this.outerSlidesBox.scrollTo(this.current * this.outerSlidesBox.offsetWidth.toInt(), 0);
				}
			},
			
			recalcHeights : function() {
				
				this.panes.each(function(pane, index) {
					pane.setStyle('height', this.outerSlidesBox.offsetHeight.toInt()- this.options.rightOversized + 'px');
				}.bind(this));

				this.innerSlidesBox.setStyle('height', (this.outerSlidesBox.offsetHeight.toInt() * this.panes.length) + 'px');
				
				if (this.current > 0) {
					this.outerSlidesBox.scrollTo(0, this.current * this.outerSlidesBox.offsetHeight.toInt());
				}
			}
});