var FlashStockSlide = new Class({
	version : '1.0',
	options: {
		active: '',
        dynamic: false,
        fx: {
            wait: false,
            duration: 350
        },
        scrollFX: {
            wait: false,
            transition: Fx.Transitions.Sine.easeInOut
        },
        dimensions: {
            width: 722,
            height: 240
        },
        tabsPosition: 'top',
        arrows: true,
        seed: 'slider'
	},
	initialize: function(slideContent, slideOptions) {
		this.setOptions(slideOptions);
		this.content = $(slideContent);
		this.sections = this.content.getElements('.tab-pane');
		if (!this.sections.length) return; // error during processing tab-panes
		this.filmstrip = new Element('div').injectAfter(this.content);
		this.buildToolbar();
		this.buildFrame();
		if (window.ie) this.fixIE();
        this.scroller = this.filmstrip.getElementById('scroller' + this.options.seed);
        this.startposition = $(this.sections[0].id.replace('-tab', '-pane')).getPosition().x;
        this.scroller.scrollFX = new Fx.Scroll(this.scroller, this.options.scrollFX);
        if (this.options.active) this.scrollSection(this.options.active.test(/-tab|-pane/) ? this.options.active: this.options.active + '-tab');
        else this.scrollSection(this.sectionptr[0]);
        if (this.options.tabsPosition == 'bottom') {        
			this.filmstrip.getElement('hr').inject(this.filmstrip);    
            var c = this.filmstrip.getElement('ul');
	        //c.inject(this.filmstrip);
			
            var d = c.getSize().size.y,
            frame = $('frame' + this.options.seed);
            frame.setStyle('height', frame.getStyle('height').toInt() - d);
			
        }
        
	},
	buildToolbar: function() {
        var b = [];
        var c = this;
        this.sectionptr = [];
        var d, title;
        if ( !! this.options.dynamic) {
            this.width = $(this.options.dynamic).getCoordinates().width; 
        } else {
            this.width = this.options.dimensions.width;
        }
        var e = this.width; 
        this.sections.each(function(a) {
        	 a.setStyles({
                width: e - (( !! this.options.dynamic) ? 0 : (!this.options.arrows) ? 0 : 142),
                height: this.options.dimensions.height
            });
            this.sectionptr.push(a.id.replace('-pane', '-tab'));
            d = a.getElement('.tab-title');
            title = d.innerHTML;
            d.empty().remove();
			var elem = new Element('li', {
                id: a.id.replace('-pane', '-tab'),
                events: {
                    'click': function() {
                        c.scrollSection(this)
                    }
                }
            });
			elem.innerHTML += title;
            b.push(elem);
        }, 
        this);
		this.filmstrip.adopt(new Element('ul', {
            id: 'slide-toolbar',
            styles: {
                width: e
            }
        }).adopt(b), new Element('hr'));
	},
	buildFrame: function() {
        var a = this.width;
        var b = this,
        events = {
            'click': function() {
                b.scrollArrow(this)
            },
            'mouseover': function() {
                this.addClass('hover')
            },
            'mouseout': function() {
                this.removeClass('hover')
            }
        };
        var c = {
            'left': (this.options.arrows) ? new Element('div', {
                'class': 'button',
                'id': 'left',
                'events': events
            }) : '',
            'right': (this.options.arrows) ? new Element('div', {
                'class': 'button',
                'id': 'right',
                'events': events
            }) : ''
        };
        this.filmstrip.adopt(new Element('div', {
            id: 'frame' + this.options.seed,
            'class': 'frameslider',
            styles: {
                width: a,
                height: this.options.dimensions.height
            }
        }).adopt(c.left, new Element('div', {
            id: 'scroller' + this.options.seed,
            'class': 'scrollerslider',
            styles: {
                width: a - (( !! this.options.dynamic) ? 0 : (!this.options.arrows) ? 0 : 102),
                height: this.options.dimensions.height
            }
        }).adopt(this.content.setStyle('width', this.sections.length * 1600)), c.right));
    },
    fixIE: function() {
        this.filmstrip.getElement('hr').setStyle('display', 'none')
    },
	scrollSection: function(tab) {
		tab = $($(tab || this.sections[0]).id.replace('-pane', '-tab'));
        this.startposition = $(this.sections[0].id.replace('-tab', '-pane')).getPosition().x;
        var b = tab.getParent().getElement('.current');
        if (b) b.removeClass('current');
        tab.addClass('current');
        var c = $(tab.id.replace('-tab', '-pane')).getPosition().x - this.startposition;
        this.scroller.scrollFX.scrollTo(c, false);
	},
	scrollArrow: function(a) {
        var b = Math.pow( - 1, ['left', 'right'].indexOf(a.id) + 1);
        var c = this.sectionptr.indexOf(this.filmstrip.getElement('.current').id);
        var d = c + b;
        this.scrollSection(this.sectionptr[d < 0 ? this.sectionptr.length - 1 : d % this.sectionptr.length])
    }
});
FlashStockSlide.implement(new Options);