var RokTabsOptions = {
    'duration': [],
    'transition': [],
    'auto': [],
    'delay': [],
    'type': [],
    'arrows': [],
    'tabsScroll': [],
    'numtabs': []
};
var RokTabs = new Class({
    version: '1.3.1',
    options: {
        'scroll': RokTabsOptions
    },
    initialize: function(options) {
        this.setOptions(options);
        this.containers = $$('.roktabs-container-inner');
        this.tabsWrapper = $$('.roktabs-place');
        this.panels = $$('.roktabs-container-wrapper');
        this.outer = $$(this.tabsWrapper.getParent());
        this.wrapper = $$(this.outer.getParent());
        this.fx = [];
        this.current = [];
        this.timer = [];
        this.tabsSize = [];
        this.tabScroll = [];
        this.panels.each(function(panel, i) {
            this.current[i] = 0;
            panel.setStyle('width', (window.opera) ? 30000 : 50000)
        },
        this);
        this.attachEvents()
    },
    attachEvents: function() {
        var lisSize, self = this;
        this.panels.each(function(tabs, i) {
            var containerBg = $$('.roktabs-container-bg')[i];
            if ($('main-showcase')) {
                $$('.showcase-bar')[0].setStyle('height', '410px');
                containerBg.setStyle('background', 'url(templates/rt_meridian_j15/images/foltz/roktabs-bg.png) 0 77px repeat-x');
            };
            this.outer[i].addEvents({
                'mouseenter': function() {
                    if (self.options['scroll'].auto[i]) self.stop(i)
                },
                'mouseleave': function() {
                    if (self.options['scroll'].auto[i]) self.start(i)
                }
            });
            this.fx[i] = new Fx.Scroll(this.panels[i].getParent(), {
                wait: false,
                duration: this.options['scroll'].duration[i],
                transition: this.options['scroll'].transition[i]
            }).set([0, false]);
            lisSize = 0;
            this.containers[i].setStyle('width', 
                this.wrapper[i].getStyle('width').toInt()
                - this.tabsWrapper[i].getParent().getStyle('border-left-width').toInt()
                - this.tabsWrapper[i].getParent().getStyle('border-right-width').toInt()
                - this.containers[i].getStyle('margin-left').toInt()
                - this.containers[i].getStyle('margin-right').toInt()
                - containerBg.getStyle('margin-left').toInt()
                - containerBg.getStyle('margin-right').toInt()
            );
            tabs.getChildren('div').each(function(tab, j) {
                var panel = this.panels[i].getChildren()[j];
                var tabWidth = Math.floor(
                    (((window.ie6) ? this.wrapper[i] : this.outer[i]).getStyle('width').toInt()
                        - panel.getStyle('padding-left').toInt()
                        - panel.getStyle('padding-left').toInt()
                        - panel.getStyle('margin-left').toInt()
                        - panel.getStyle('margin-left').toInt()
                        - this.containers[i].getStyle('margin-left').toInt()
                        - this.containers[i].getStyle('margin-right').toInt()
                        - containerBg.getStyle('margin-left').toInt()
                        - containerBg.getStyle('margin-right').toInt()
                    )/this.options['scroll'].numtabs[i].toInt()
                );
                panel.setStyle('width', tabWidth);
                tab.getChildren('wrapper').each(function(wrapper, k) {
                    wrapper.setStyle('width', tabWidth - wrapper.getStyle('padding-left').toInt() - wrapper.getStyle('padding-right').toInt());
                    wrapper.getChildren('feature-tab-block')[0].addClass('feature-margin-bottom');
                },
                this);
            },
            this);
            this.tabsSize[i] = [tabs.getSize().size.x, lisSize];
            var arrows = this.outer[i].getElement('.roktabs-arrows');
            if (this.options['scroll'].arrows[i]) {
                var previous = arrows.getElement('.previous');
                var next = arrows.getElement('.next')
            };
            if (this.options['scroll'].auto[i]) {
                this.start(i)
            };
            this.tabScroller(i);
        },
        this);
        return this
    },
    mouseenter: function(tab, panel, box_number, li_number) {
        this.fireEvent('mouseenter', [tab, panel, box_number, li_number])
    },
    mouseleave: function(tab, panel, box_number, li_number) {
        this.fireEvent('mouseleave', [tab, panel, box_number, li_number])
    },
    mousedown: function(tab, panel, box_number, li_number) {
        if (this.options['scroll'].type[box_number] == 'scrolling') {
            this.fx[box_number].options.duration = RokTabsOptions.duration[box_number];
            this.fx[box_number].options.wait = false;
            this.fx[box_number].toElement(tab)
        } else {
            var self = this;
            this.fx[box_number].element.effect('opacity').start(0).chain(function() {
                self.fx[box_number].options.duration = 0;
                self.fx[box_number].options.wait = true;
                self.fx[box_number].toElement(panel);
                self.fx[box_number].element.effect('opacity').start(1)
            })
        };
        this.fireEvent('mousedown', [tab, panel, box_number, li_number])
    },
    mouseup: function(tab, panel, box_number, li_number) {
        this.current[box_number] = li_number;
        this.fireEvent('mouseup', [tab, panel, box_number, li_number])
    },
    click: function(tab, panel, box_number, li_number) {
        this.mousedown(tab, panel, box_number, li_number);
        this.mouseup(tab, panel, box_number, li_number);
        this.mouseleave(tab, panel, box_number, li_number);
    },
    start: function(current) {
        $clear(this.timer[current]);
        var tmp = this.next.bind(this, current);
        this.timer[current] = tmp.periodical(this.options.scroll.delay[current])
    },
    stop: function(current) {
        $clear(this.timer[current])
    },
    next: function(where) {
        var tabs = this.panels.getChildren('div');
        var numtabs = this.options['scroll'].numtabs[where].toInt();
        var current = this.current[where] + numtabs,
        next = tabs[where][current],
        tab;
        if (!tabs[where][current+(numtabs-1)]) {
            if (current < tabs[where].length) {
                next = tabs[where][tabs[where].length - numtabs];
                current = tabs[where].length - numtabs;
            }
        };
        if (next) tab = next;
        else {
            tab = tabs[where][0];
            current = 0
        };
        return this.click(tab, this.panels[where], where, current)
    },
    previous: function(where) {
        var tabs = this.panels.getChildren('div');
        var numtabs = this.options['scroll'].numtabs[where].toInt();
        var current = this.current[where] - numtabs,
        prev = tabs[where][current],
        tab;
        if (!tabs[where][current]) {
            if (current + numtabs > 0) {
                prev = tabs[where][0];
                current = 0;
            }
        }
        if (prev) tab = prev;
        else {
            tab = tabs[where][tabs[where].length - numtabs];
            current = tabs[where].length - numtabs
        };
        return this.click(tab, this.panels[where], where, current)
    },
    tabScroller: function(tab) {
        var self = this,
        parent = this.tabsWrapper[tab];

        var ulWrapper = new Element('div', {
            'class': 'active-arrows'
        }).setStyles({
            'position': 'absolute'
        }).inject(parent, 'before').adopt(parent);
        var ulPrev = new Element('div', {
            'class': 'arrow-prev png'
        }).setHTML('<span>&lt;</span>').inject(ulWrapper, 'top');
        var ulNext = new Element('div', {
            'class': 'arrow-next png'
        }).setHTML('<span>&gt;</span>').inject(ulWrapper);
        new Element('div', {
            'class': 'clear'
        }).inject(ulWrapper);
        this.tabScroll[tab] = {
            'speed': 70,
            'amount': 30,
            'current': 0
        };
        var NextTab;
        ulWrapper.setStyles({
            'width': this.outer[tab].getStyle('width').toInt() - ulWrapper.getStyle('margin-left').toInt() - ulWrapper.getStyle('margin-right').toInt()
        });
        ulNext.addEvents({
            'mousedown': function() {
                $clear(NextTab);
                this.addClass('arrow-next-hover');
                NextTab = self.next(tab);
            },
            'mouseup': function() {
                this.removeClass('arrow-next-hover');
                $clear(NextTab)
            }
        });
        ulPrev.addEvents({
            'mousedown': function() {
                $clear(NextTab);
                this.addClass('arrow-prev-hover');
                NextTab = self.previous(tab);
            },
            'mouseup': function() {
                this.removeClass('arrow-prev-hover');
                $clear(NextTab)
            }
        })
    }
});
RokTabs.implement(new Options, new Events);
var roktabs;
window.addEvent('load',
function() {
    roktabs = new RokTabs()
});