/**
 * @class: JVTab
 * @description: Display contents in tabs 
 * @version: 1.0 
 */
var JVTabs = new Class({
    Implements: [Events, Options],
    options: {
        tabstyle: 'tab',
        width: '100%',
        tabsHandler: 'jv-tabs-handler',
        tabsContainer: 'jv-tabs-container',
        currentTabsHandlerClass: 'jv-tabs-handler-selected',
        currentTabsContentClass: 'jv-tabs-content-selected',
        currentIndex: 0,
        autoRun: 0,
        ajax: 0,
        ajaxMethod: 'get',
        ajaxUrl: '',
        direction: 1,
        forceWaiting: 0,
        fx: 'showHide',
        transition: Fx.Transitions.Expo.easeInOut,
        duration: 1000,
        timer: null,
        tabTimer: 5000,
        container: null,
        handlers: null,
        contents: null
    },

    initialize: function (selector, options) {
        this.setOptions(options);
        if (this.options.tabstyle == 'tab') {
            this.initTabs(selector);
        }
        else if (this.options.tabstyle == 'accordion') {
            this.initAccordion(selector);
        }
    },

    initTabs: function (selector) {
        var that = this;
        var selector = $(selector);
        if (!selector) return;
        selector.setStyles({
            'width': that.options.width
        });
        that.options.handlers = selector.getElement('.' + that.options.tabsHandler).getChildren();
        if (!that.options.handlers.length) return;
        that.options.currentIndex = Math.min(that.options.currentIndex, that.options.handlers.length - 1);
        that.options.container = selector.getElement('.' + that.options.tabsContainer);
        that.fx = new Fx.Morph(that.options.container, {
            duration: that.options.duration,
            transition: that.options.transition,
            link: 'cancel'
        });

        that.options.contents = that.options.container.getChildren();
        if (that.options.fx == 'slideWidth') {
            that.options.contents.each(function (content, index) {
                content.setStyles({
                    'position': 'absolute',
                    'left': -2 * content.getSize().x,
                    'top': 0,
                    'width': content.getSize().y
                });
            });
        }
        else if (that.options.fx == 'slideHeight') {
            that.options.contents.each(function (content, index) {
                content.setStyle('position', 'absolute');
                content.setStyle('top', -1 * content.getSize().y);
            });
        }
        else if (that.options.fx == 'fade') {
            that.options.contents.each(function (content, index) {
                content.setStyles({
                    'position': 'absolute',
                    'top': 0,
                    'opacity': 0
                });
            });
        }
        else {
            that.options.fx = 'showHide';
            that.options.contents.each(function (content, index) {
                content.setStyles({
                    'position': 'absolute',
                    'top': 0,
                    'display': 'none'
                });
            });
        }
        var hash = window.location.hash;
        that.options.handlers.each(function (handler, index) {
            if (hash && hash == handler.getElement('a').getProperty('href')) {
                that.options.currentIndex = index;
            }
            if (handler.hasClass(that.options.currentTabsHandlerClass)) {
                that.options.currentIndex = index;
            }
            handler.removeEvents('click').addEvent('click', function (e) {
                if (!that.options.forceWaiting) {
                    if (that.options.ajax == 1 && !this.ajaxcalled) {
                        if (this.req) this.req.cancel();
                        this.req = new Request({
                            url: that.options.ajaxUrl + this.getElement('a').className,
                            method: that.options.ajaxMethod,
                            onRequest: function () {
                                if (!handler.getElement('.loader')) {
                                    new Element('span', { 'class': 'loader'}).inject(handler.getElement('a'));
                                }
                                handler.getElement('.loader').removeClass('hidden');
                            },
                            onComplete: function (response) {
                                handler.getElement('.loader').addClass('hidden');
                                that.options.contents[index].set('html',response);
                                handler.ajaxcalled = true;
                                handler.fireEvent('click');
                            }
                        }).send();
                        return;
                    }
                    if (that.options.autoRun == 1) {
                        $clear(that.options.timer);
                        that.options.timer = that[that.options.fx].periodical(that.options.tabTimer, that, null);
                    }
                    that[that.options.fx](index);
                }
            });
        });
        if (that.options.ajax == 1) {
            that.options.autoRun = 0;
        }
        that.options.handlers[that.options.currentIndex].fireEvent('click');
        if (that.options.autoRun == 1) {
            that.options.timer = that[that.options.fx].periodical(that.options.tabTimer, that, null);
        }
    },

    slideWidth: function (index) {
        var that = this;
        var currentContent = that.options.contents[that.options.currentIndex];
        var currentHandler = that.options.handlers[that.options.currentIndex];
        that.options.direction = -1;
        if ($defined(index)) {
            if (that.options.currentIndex != index) {
                if (that.options.currentIndex > index) {
                    that.options.direction = -1;
                } else {
                    that.options.direction = 1;
                }
                that.options.currentIndex = index;
            } 
        } else {
            that.findTab();
        }
        var newContent = that.options.contents[that.options.currentIndex];
        var currentX = (that.options.direction * that.options.container.getSize().x);


        if (!currentContent.h) currentContent.h = currentContent.getCoordinates().height;
        if (!newContent.h) newContent.h = newContent.getCoordinates().height;

        var newHandler = that.options.handlers[that.options.currentIndex];
        newHandler.addClass(that.options.currentTabsHandlerClass);

        var contentShow = new Fx.Morph(newContent, {
            duration: that.options.duration,
            transition: that.options.transition,
            link: 'cancel',
            onStart: function () {
                that.options.forceWaiting = true;
            },
            onComplete: function () {
                that.options.forceWaiting = false;
            }
        });
        contentShow.start({
            'left': [currentX, 0],
            'opacity': [0, 1]
        });
        that.fx.start({
            'height': [currentContent.h, newContent.h]
        });
        newContent.addClass(that.options.currentTabsContentClass);
        if (currentContent != newContent) {
            var contentHide = new Fx.Morph(currentContent, {
                duration: that.options.duration,
                transition: that.options.transition,
                link: 'cancel'
            });
            currentHandler.removeClass(that.options.currentTabsHandlerClass);
            contentHide.start({
                'left': [0, currentX * (-1)],
                'opacity': [1, 0]
            });
            currentContent.removeClass(that.options.currentTabsContentClass);
        }
    },

    slideHeight: function (index) {
        var that = this;
        var currentContent = that.options.contents[that.options.currentIndex];
        var currentHandler = that.options.handlers[that.options.currentIndex];
        if ($defined(index)) {
            if (that.options.currentIndex != index) {
                if (that.options.currentIndex > index) {
                    that.options.direction = 0;
                }
                else {
                    that.options.direction = 1;
                }
                that.options.currentIndex = index;
            }
        }
        else {
            that.findTab();
        }
        var newContent = that.options.contents[that.options.currentIndex];
        if (that.options.direction == 0) {
            var currentY = that.options.container.getSize().y;


        }
        else {
            var currentY = (-1 * that.options.container.getSize().y);
        }
        if (!currentContent.h) {
            currentContent.h = currentContent.getCoordinates().height;
        }
        if (!newContent.h) {
            newContent.h = newContent.getCoordinates().height;


        }
        var newHandler = that.options.handlers[that.options.currentIndex];
        newHandler.addClass(that.options.currentTabsHandlerClass);
        var contentShow = new Fx.Morph(newContent, {
            duration: that.options.duration,
            transition: that.options.transition,
            link: 'cancel',
            onStart: function () {
                that.options.forceWaiting = true;
            },
            onComplete: function () {
                that.options.forceWaiting = false;
            }
        });
        contentShow.start({
            'top': [0],
            'opacity': [0, 1]
        });
        that.fx.start({
            'height': [currentContent.h, newContent.h]
        });
        newContent.addClass(that.options.currentTabsContentClass);
        if (currentContent != newContent) {
            var contentHide = new Fx.Morph(currentContent, {
                duration: that.options.duration,
                transition: that.options.transition,
                link: 'cancel'
            });
            currentHandler.removeClass(that.options.currentTabsHandlerClass);
            contentHide.start({
                'top': [0, -currentY],
                'opacity': [1, 0]
            });
            currentContent.removeClass(that.options.currentTabsContentClass);
        }
    },

    fade: function (index) {
        var that = this;
        var currentContent = that.options.contents[that.options.currentIndex];
        var currentHandler = that.options.handlers[that.options.currentIndex];
        if ($defined(index)) {
            if (that.options.currentIndex != index) {
                that.options.currentIndex = index;
            }
        }
        else {
            that.findTab();
        }
        var newContent = that.options.contents[that.options.currentIndex];
        var newHandler = that.options.handlers[that.options.currentIndex];
        newHandler.addClass(that.options.currentTabsHandlerClass);
        var contentShow = new Fx.Morph(newContent, {
            duration: that.options.duration,
            transition: that.options.transition,
            link: 'cancel',
            onStart: function () {
                that.options.forceWaiting = true;
            },
            onComplete: function () {
                that.options.forceWaiting = false;
            }
        });
        contentShow.start({
            'opacity': [0, 1]
        });
        that.fx.start({
            'height': [currentContent.getCoordinates().height, newContent.getCoordinates().height]
        });
        newContent.addClass(that.options.currentTabsContentClass);
        if (currentContent != newContent) {
            var contentHide = new Fx.Morph(currentContent, {
                duration: that.options.duration,
                transition: that.options.transition,
                link: 'cancel'
            });
            currentHandler.removeClass(that.options.currentTabsHandlerClass);
            contentHide.start({
                'opacity': [1, 0]
            });
            currentContent.removeClass(that.options.currentTabsContentClass);
        }
    },

    showHide: function (index) {
        var that = this;
        var currentContent = that.options.contents[that.options.currentIndex];
        var currentHandler = that.options.handlers[that.options.currentIndex];
        if ($defined(index)) {
            if (that.options.currentIndex != index) {
                that.options.currentIndex = index;
            }
        }
        else {
            that.findTab();
        }
        var newContent = that.options.contents[that.options.currentIndex];
        var newHandler = that.options.handlers[that.options.currentIndex];
        newHandler.addClass(that.options.currentTabsHandlerClass);
        newContent.setStyle('display', '');
        that.fx.start({
            'height': [currentContent.getCoordinates().height, newContent.getCoordinates().height]
        });
        newContent.addClass(that.options.currentTabsContentClass);
        if (currentContent != newContent) {
            currentHandler.removeClass(that.options.currentTabsHandlerClass);
            currentContent.setStyle('display', 'none');
            currentContent.removeClass(that.options.currentTabsContentClass);
        }
    },

    findTab: function () {
        var that = this;
        var len = that.options.contents.length;
        if (that.options.direction == 1) {
            if (that.options.currentIndex < len - 1) {
                that.options.currentIndex++;
            }
            else {
                that.options.currentIndex = 0;
            }
        }
        else {
            if (that.options.currentIndex > 0) {
                that.options.currentIndex--;
            }
            else {
                that.options.currentIndex = len - 1;
            }
        }

    },

    initAccordion: function (selector) {
        var that = this;
        var selector = $(selector);
        if (!selector) return;
        selector.setStyles({
            'width': that.options.width
        });
        var accordion = new Accordion('.handler-tab', '.content-tab', {
            onActive: function (toggler, element) {
                toggler.addClass(that.options.currentTabsHandlerClass);
            },

            onBackground: function (toggler, element) {
                toggler.removeClass(that.options.currentTabsHandlerClass);
            }
        }, $(selector));

    }
});