var RokTabsOptions = {
    'duration': [],
    'transition': [],
    'auto': [],
    'delay': [],
    'type': [],
    'arrows': [],
    'tabsScroll': [],
    'linksMargins': []
};
var RokTabs = new Class({
    version: '1.5',
    options: {
        'scroll': RokTabsOptions
    },
    initialize: function (options) {
        this.setOptions(options);
        this.containers = $$('.roktabs-container-inner');
        this.tabsWrapper = $$('.roktabs-links');
        this.tabs = $$('.roktabs-links ul');
        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.tabs.each(function (tabs, i) {
            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());
            tabs.getElements('li').each(function (tab, j) {
                var panel = this.panels[i].getChildren()[j];
                panel.setStyle('width', ((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());
                lisSize += tab.getSize().size.x;
                tab.setStyle('cursor', 'pointer').addEvents({
                    'mouseenter': this.mouseenter.bind(this, [tab, panel, i, j]),
                    'mouseleave': this.mouseleave.bind(this, [tab, panel, i, j]),
                    'mousedown': this.mousedown.bind(this, [tab, panel, i, j]),
                    'mouseup': this.mouseup.bind(this, [tab, panel, i, j])
                })
            },
            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)
            };
            if (this.tabsSize[i][1] > this.tabsSize[i][0]) this.tabScroller(i);
            else this.tabScroller(i)
        },
        this);
        return this
    },
    mouseenter: function (tab, panel, box_number, li_number) {
        tab.addClass('hover').addClass('over');
        this.fireEvent('mouseenter', [tab, panel, box_number, li_number])
    },
    mouseleave: function (tab, panel, box_number, li_number) {
        tab.removeClass('hover').removeClass('over').removeClass('down').removeClass('up');
        this.fireEvent('mouseleave', [tab, panel, box_number, li_number])
    },
    mousedown: function (tab, panel, box_number, li_number) {
        tab.removeClass('up').addClass('down');
        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(panel)
        } 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.tabs[box_number].getElements('li').removeClass('active');
        tab.removeClass('down').addClass('up').addClass('active');
        this.current[box_number] = li_number;
        this.fireEvent('mouseup', [tab, panel, box_number, li_number])
    },
    click: function (tab, panel, box_number, li_number) {
        return tab.fireEvent('mousedown', [tab, panel, box_number, li_number]).fireEvent('mouseup', [tab, panel, box_number, li_number]).fireEvent('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.tabs.getElements('li');
        var current = this.current[where] + 1,
        next = tabs[where][current],
        tab;
        if (next) tab = next;
        else {
            tab = tabs[where][0];
            current = 0
        };
        return this.click(tab, this.panels[where], where, current)
    },
    previous: function () {
        var tabs = this.tabs.getElements('li');
        var current = this.current[where] - 1,
        prev = tabs[where][current],
        tab;
        if (prev) tab = prev;
        else {
            tab = tabs[where][tabs.length - 1];
            current = tabs.length - 1
        };
        return this.click(tab, this.panels[where], where, current)
    },
    tabView: function (where, what) {
        if (what == 'hide') this.tabs[where].setStyle('display', 'none');
        else this.tabs[where].setStyle('display', '')
    },
    tabPosition: function (where, position) {
        var el = this.tabsWrapper[where];
        switch (position) {
        case 'top':
            el.inject(el.getParent(), 'top');
            el.getFirst().removeProperty('class').addClass('roktabs-top');
            break;
        case 'bottom':
        default:
            el.inject(el.getParent());
            el.getFirst().removeProperty('class').addClass('roktabs-bottom')
        }
    },
    tabScroller: function (tab) {
        var ul = this.tabs[tab],
        self = this,
        parent = ul.getParent();
        (2).times(function () {
            self.tabsSize[tab][1] = 0;
            ul.getChildren().each(function (li) {
                if (window.ie) li.getFirst().inject(li);
                self.tabsSize[tab][1] += li.getSize().size.x + li.getStyle('margin-left').toInt() + li.getStyle('margin-right').toInt() + li.getStyle('padding-left').toInt() + li.getStyle('padding-right').toInt() + li.getStyle('border-left-width').toInt() + li.getStyle('border-right-width').toInt()
            },
            this);
            //ul.setStyle('width', self.tabsSize[tab][1] + ((window.gecko) ? 5 : 0))
        }.bind(this));
        parent.setStyles({
            'overflow': 'hidden',
            'width': this.tabsSize[tab][0],
            'position': 'relative'
        });
        if (false||ul.getSize().size.x > parent.getSize().size.x) {
            var ulWrapper = new Element('div', {
                'class': 'active-arrows'
            }).setStyle('position', 'relative').inject(parent, 'before').adopt(parent);
            var ulPrev = new Element('div', {
                'class': 'arrow-prev png'
            }).setHTML('<span><</span>').inject(ulWrapper, 'top');
            var ulNext = new Element('div', {
                'class': 'arrow-next png'
            }).setHTML('<span>></span>').inject(ulWrapper);
            var arrowsSize = {
                'prev': ulPrev.getStyle('width').toInt() + ulPrev.getStyle('margin-left').toInt() + ulPrev.getStyle('margin-right').toInt() + ulPrev.getStyle('border-left').toInt() + ulPrev.getStyle('border-right').toInt() + ulPrev.getStyle('padding-left').toInt() + ulPrev.getStyle('padding-right').toInt(),
                'next': ulNext.getStyle('width').toInt() + ulNext.getStyle('margin-left').toInt() + ulNext.getStyle('margin-right').toInt() + ulNext.getStyle('border-left').toInt() + ulNext.getStyle('border-right').toInt() + ulNext.getStyle('padding-left').toInt() + ulNext.getStyle('padding-right').toInt()
            };
            var margins = 0;
            if (this.options.scroll.linksMargins[tab]) margins = parent.getStyle('margin-right').toInt();
            if (margins < 0) margins = Math.abs(margins);
            parent.setStyle('width', this.tabsSize[tab][0] - margins - arrowsSize.prev - arrowsSize.next);
            new Element('div', {
                'class': 'clear'
            }).inject(ulWrapper);
            this.tabScroll[tab] = {
                'speed': 70,
                'amount': 30,
                'current': 0
            };
            var TabTimer;
            ulNext.addEvents({
                'mouseenter': function () {
                    $clear(TabTimer);
                    this.addClass('arrow-next-hover');
                    TabTimer = self.tabScrollerAnim.periodical(self.tabScroll[tab]['speed'], self, [tab, parent, true])
                },
                'mouseleave': function () {
                    this.removeClass('arrow-next-hover');
                    $clear(TabTimer)
                }
            });
            ulPrev.addEvents({
                'mouseenter': function () {
                    $clear(TabTimer);
                    this.addClass('arrow-prev-hover');
                    TabTimer = self.tabScrollerAnim.periodical(self.tabScroll[tab]['speed'], self, [tab, parent, false])
                },
                'mouseleave': function () {
                    this.removeClass('arrow-prev-hover');
                    $clear(TabTimer)
                }
            })
        }
    },
    tabScrollerAnim: function (tab, ul, plus) {
        var scrollSize = ul.getSize().scrollSize.x,
        scrollAmount = ul.getSize().scroll.x;
        if (plus) var scroll = scrollAmount + this.tabScroll[tab]['amount'];
        else var scroll = scrollAmount - this.tabScroll[tab]['amount'];
        scroll = (scroll < 0) ? 0 : (scroll >= scrollSize) ? scrollSize : scroll;
        ul.scrollTo(scroll, 0)
    }
});
RokTabs.implement(new Options, new Events);
var roktabs;
window.addEvent('load', function () {
    roktabs = new RokTabs();
	/*document.getElementById('hyp-tab-links').style.width=(parseInt(document.getElementById('hyp-tab-links').style.width.replace('px',''))-10)+'px';
	document.getElementById('hyp-tab-links').style.marginLeft='10px';
	document.getElementById('hyp-tab-links').style.overflow='visible';
	document.getElementById('hyp-tab-links').getElementsByTagName('UL')[0].style.marginLeft='-10px';*/
	document.getElementById('hyp-tab-ul').style.width=(parseInt(document.getElementById('hyp-tab-links').style.width.replace('px','')))+'px';
});