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

license: MIT-style

authors:
- Nayaab Akhtar

requires:
  core/1.2.1: '*'

provides: [MooTabs]

...
*/

var MooTabs = new Class({

    Implements: [Options, Events],

    options: {
        startIndex: 0,
        activeClass: 'active',
        windowClass: 'mootabs-menuWindow',
        tipClass: 'tip',
        fps: 120,
        duration: 700,
        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('li');
        this.contentsList = this.contentsElement.getChildren('li');

        this.contentsElement.setStyles({'position':'absolute','overflow':'visible'});
        
        this.slideFx = new Fx.Morph(this.contentsElement, {
            fps : this.options.fps,
            duration: this.options.duration,
            transition: this.options.transition
        });

        //this.windowWidth = this.contentsList[0].getSize().x;

        this.windowWidth = this.contentsElement.getParent().getSize().x-5;
        this.contentsList.each(function(content, i) {
        	content.setStyle('width', this.windowWidth+'px');
        }, this);
        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.tabWidth = ((this.contentsElement.getParent().getSize().x-(this.tabsCount-1))/this.tabsCount).toInt();
        this.tabsList.each(function(tab, i) {
        	/*
        	var tabFx = new Fx.Morph(tab, {
                fps : this.options.fps,
                duration: 1000,
                transition: this.options.transition
            });
        	if(i!=0){
	        	tabFx.start({
	                'width': this.tabWidth + 'px',
	                'padding': '0px',
	                'border-left': '1px solid'
	        	})
        	}else{
        		tabFx.start({
	                'width': this.tabWidth + 'px',
	                'padding': '0px'
	        	})
        	}
        	*/
        	tab.setStyles({'padding':'0px', 'width': this.tabWidth+'px'});
        	if(i!=0) tab.setStyle('border-left', '1px solid');
        }, this);
        
        this.activeTab = this.tabsList[this.currentIndex].addClass(this.options.activeClass);
        this.activeContents = this.contentsList[this.currentIndex];

        var contentsWindow = new Element('div', {
            'class': this.options.windowClass
        });

        contentsWindow.inject(this.tabsElement, 'after');
        contentsWindow.grab(this.contentsElement);

        // CORRECT BUG resize height container
        var size = this.activeContents.getSize();
        var contentsWindowFx = new Fx.Morph(contentsWindow, {
            fps : this.options.fps,
            duration: 800,
            transition: this.options.transition
        });
        contentsWindowFx.start({'height': size.y+ 'px'});
        
        this.addTip();
        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) {
            if (tab != this.activeTab) {
            	this.slideFx.stop();
        		this.tipDivFx.stop();
            	
                this.stop().play();
                
                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;
                this.slideFx.start({
                        left: this.currentPosition + 'px'
                });

                this.currentIndex = i;
                // move TIP
                this.tipDivFx.start({
                		'display':'block',
                		'left': (this.currentIndex*tab.getSize().x)+((tab.getSize().x/2)-15).toInt()+'px'
                })
                
                // CORRECT BUG resize height container
                var size = contents.getSize();
                var contentsWindowFx = new Fx.Morph(contents.getParent().getParent(), {
                    fps : this.options.fps,
                    duration: 1000,
                    transition: this.options.transition
                });
                contentsWindowFx.start({'height': size.y+ 'px'});
                //contents.getParent().getParent().setStyle('height', size.y+'px');
                
                this.fireEvent('change', [tab, contents]);
            	
            }
        }.bind(this));
    },

    addTip: function(){
    	// ADD TIP
    	this.tipDiv = new Element('div', {
             'class': this.options.tipClass,
             'style': 'display:block; left:'+((this.tabsList[0].getSize().x/2)-15).toInt()+'px'
        });
    	this.tipDiv.inject(this.tabsList[0]);
    	this.tipDivFx = new Fx.Morph(this.tipDiv, {
            fps : this.options.fps,
            duration: 400,
            transition: this.options.transition
        });
    },
    
    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.tabsList[0].fireEvent('mousedown');
        } else {
            this.tabsList[this.currentIndex+1].fireEvent('mousedown');
        }
        return this;
    },

    previousSlide: function() {
        if (this.currentIndex == 0) this.tabsList[this.tabsCount-1].fireEvent('mousedown');
        else this.tabsList[this.currentIndex-1].fireEvent('mousedown');
        return this;
    }

});