/*
---
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',
        tabLiClass:'',
        tipClass: 'tip',
        fps: 120,
        duration: 700,
        transition: 'expo:in:out',
        autoPlay: true,
        autoPlayWait: 10000,
        vertical:false,
        resizeTab:false
    },

    initialize: function(tabs, contents, options) {
        this.setOptions(options);
        
        this.tabsElement = tabs[0];
        this.contentsElement = contents[0];
        if(this.options.tabLiClass==''){
        	this.tabsList = this.tabsElement.getChildren('li');
        }else{
        	this.tabsList = this.tabsElement.getChildren('li.'+this.options.tabLiClass);
        }
        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.currentIndex = this.options.startIndex;
        this.tabsCount = this.tabsList.length;
        
        if(this.options.vertical){
        	this.tabHeight = 100;
        }else{
        	this.tabWidth = ((this.contentsElement.getParent().getSize().x-(this.tabsCount-1))/this.tabsCount).toInt();
        }
        
        //this.windowWidth = this.contentsList[0].getSize().x;
        if(this.options.vertical){
        	this.windowWidth = this.contentsList[0].getSize().x;
        }else{
        	var computedSize = this.contentsElement.getParent().getComputedSize();
        	this.windowWidth = this.contentsElement.getParent().getSize().x-(computedSize['padding-left']+computedSize['padding-right']+computedSize['border-left-width']+computedSize['border-right-width']);
        }
        this.contentsList.each(function(content, i) {
        	if(this.options.vertical){
        		content.setStyles({'height':(this.tabHeight * this.tabsCount)+'px'});
        	}
        	content.setStyles({'width': this.windowWidth+'px'});
        }, this);
        this.currentPosition = -(this.options.startIndex * this.windowWidth);

        this.contentsElement.setStyle('left', this.currentPosition + 'px');
       
        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'
	        	})
        	}
        	*/
        	if(this.options.vertical){
        		if(i!=0) tab.setStyle('border-top', '1px dashed');
        		var height = this.tabHeight-(tab.getComputedSize()['padding-top']+tab.getComputedSize()['padding-bottom']+tab.getComputedSize()['border-top-width']+tab.getComputedSize()['border-bottom-width']);
        		tab.setStyles({'height': height+'px'});
        	}else{
        		if(this.options.resizeTab){
        			tab.setStyles({'padding':'0px', 'width': this.tabWidth+'px', 'height': this.tabHeight+'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
                if(this.options.vertical){
	                this.tipDivFx.start({
	                		'display':'block',
	                		'top': (this.currentIndex*tab.getSize().y)+((tab.getSize().y/2)-18).toInt()+'px'
	                })
                }else{
                	 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
                });
                if(!this.options.vertical){
                	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
    	if(this.options.vertical){
	    	this.tipDiv = new Element('div', {
	             'class': this.options.tipClass,
	             'style': 'display:block; left:'+(this.tabsList[0].getSize().x-3)+'px; top:'+((this.tabsList[0].getSize().y/2)-18).toInt()+'px'
	        });
    	}else{
    		var tabHeight = this.tabsList[0].getSize().y;
    		this.tipDiv = new Element('div', {
	             'class': this.options.tipClass,
	             'style': 'z-index:20 ;display:block; top:'+tabHeight+'px; 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;
    }

});