/*
---
description: A plugin for creating tab panes that provide great effect using Mootools

license: MIT-style

authors:
- Nayaab Akhtar

costumized by:
- Timo Terhaar

requires:
  core/1.2.1: '*'

...
*/

slideComplete = true;

var MooTabs = new Class({
	
	Implements: [Options, Events],
	
	options: {
		startIndex: 0,
		activeClass: 'active',
		windowClass: 'contentsWindow',
		fps: 120,
		duration: 400,
		transition: 'expo:in:out',
		autoPlay: true,
		autoPlayWait: 10000
	},
	
	initialize: function(tabs, contents, options) {
		this.setOptions(options);
		
		this.tabsElement = tabs[0];
		this.contentsElement = contents[0];
		
		this.tabsList = this.tabsElement.getChildren('div');
		this.contentsList = this.contentsElement.getChildren('div');
		
		this.slideFx = new Fx.Morph(this.contentsElement, {
			fps : this.options.fps,
			duration: this.options.duration,
			transition: this.options.transition
		});
		this.slideFx.addEvent('complete', function() {
			slideComplete = true;
		});
		
		this.windowWidth = this.contentsList[0].getSize().x;
		
		/* add margin to the windowWidth for the correct slide-effect */
		var marginLeft = this.contentsList[0].getStyle('margin-left');
		if(marginLeft.length > 0)
			marginLeft = parseInt(marginLeft.substring(0, marginLeft.length - 2));
		else
			marginLeft = parseInt(0);
		var marginRight = this.contentsList[0].getStyle('margin-right');
		if(marginRight.length > 0)
			marginRight = parseInt(marginRight.substring(0, marginRight.length - 2));
		else
			marginRight = parseInt(0);
		this.windowWidth = this.windowWidth + marginLeft + marginRight;
		
		this.currentPosition = -(this.options.startIndex * this.windowWidth);
		this.contentsElement.setStyle('left', this.currentPosition + 'px');
		this.currentIndex = this.options.startIndex;
		this.tabsCount = this.tabsList.length;
		
		this.activeTab = this.tabsList[this.currentIndex].addClass(this.options.activeClass);
		this.activeContents = this.contentsList[this.currentIndex];
		$('head-info-img-' + (this.currentIndex + 1)).setStyle('opacity', 1);
		
		this.tabsList.each(function(tab, i) {
			this.setupTabs(tab, this.contentsList[i], i);
		}, this);
		
		if (this.options.autoPlay)
			this.play();
	},
	
	setupTabs: function(tab, contents, i) {
		tab.addEvent('mousedown', function(e) {
			this.slide(tab, contents, i, false);
		}.bind(this));
	},
	
	slide: function(tab, contents, i, fromTimer) {
		if(!fromTimer)
			this.stop();
		if(slideComplete) {
			if (tab != this.activeTab) {
				this.activeTab.removeClass(this.options.activeClass);
				this.activeTab = tab;
				this.activeTab.addClass(this.options.activeClass);
				
				var d = (i - this.currentIndex) * this.windowWidth;
				this.currentPosition -= d;
				slideComplete = false;
				this.slideFx.start({
					left: this.currentPosition + 'px'
				});
				
				var newImage = $('head-info-img-' + (i + 1));
				var oldImage = $('head-info-img-' + (this.currentIndex + 1));
				var myFadeEffect = new Fx.Morph(newImage, {
					duration: this.options.duration,
					transition: this.options.transition
				});
				myFadeEffect.addEvent('complete', function() {
					oldImage.setStyle('opacity', 0);
					$('wrapper').setStyle('z-index', parseInt(oldImage.getStyle('z-index')) + 10);
					// newImage.setStyle('z-index', parseInt(oldImage.getStyle('z-index')));
				});
				newImage.setStyle('z-index', parseInt(oldImage.getStyle('z-index')) + 1);
				myFadeEffect.start({
					'opacity': [0, 1]
				});
				this.currentIndex = i;
				this.fireEvent('change', [tab, contents]);
			}
		}
	},
	
	play: function() {
		this.player = this.nextSlide.periodical(this.options.autoPlayWait, this);
		return this;
	},
	
	stop: function() {
		$clear(this.player);
		return this;
	},
	
	nextSlide: function() {
		if (this.currentIndex == this.tabsCount - 1)
			this.slide(this.tabsList[0], this.contentsList[0], 0, true);
		else
			this.slide(this.tabsList[this.currentIndex + 1], this.contentsList[this.currentIndex + 1], this.currentIndex + 1, true);
		return this;
	},
	
	previousSlide: function() {
		if (this.currentIndex == 0)
			this.slide(this.tabsList[this.tabsCount - 1], this.contentsList[this.tabsCount - 1], this.tabsCount - 1, true);
		else
			this.slide(this.tabsList[this.currentIndex - 1], this.contentsList[this.currentIndex - 1], this.currentIndex - 1, true);
		return this;
	}
});