Tab = new Class({
    Implements: Options,

    options: {
        scroll: false,
        scroll_active: false
    },

    initialize: function(el, label, options){
        this.content = el.setStyle('display','none');
        this.id = el.get('id');
        this.label = label;
        this.setOptions(options);
    }
});

Tabs = new Class({
    Implements: [Options,Events],

    options: {
        _class: 'tabbed-content',
        _class_tabs_adjust: 'tabbed-content-tabs',
        left_handle: null,
        right_handle: null,
        tab_settings: {},
        use_PIE: true,
        left: 'previous',
        right: 'next',
        start: 0
    },

    templates: {
        label: '<li id="label_{id}"><div class="bg-left"></div><div class="label">{label}</div><div class="bg-right"></div></li>',
        container: '<div id="tab-labels"><ul></ul></div><div id="body"><div id="left"></div><div id="frame"></div><div id="right"></div></div>'
    },
    tabs: [],

    initialize: function(container, options){
        this.container = container;
        this.setOptions(options);
        this.renderTabsArea();
        this.activateScroll();

        if (Browser.ie) this.applyBrowserFixes();
    },

    applyBrowserFixes: function () {
        if (Browser.opera) {
            this.container.addClass(this.options._class_tabs_adjust);
        }
        if (Browser.ie) {
            if (Browser.version<=7)
                this.container.addClass(this.options._class_tabs_adjust);
            var self = this;
            if (this.options.use_PIE && Browser.version<=8) {
                Asset.javascript('/new/media/js/lib/PIE.js',{
                    onLoad:function(){
                        PIE.attach(self.container.getElement('#frame'))
                    }
                });
            }
        }
    },

    renderTabsArea: function () {
        this.content = this.container.innerHTML;
		this.container.innerHTML = this.templates.container;
        this.frame = this.container.getElement('#frame');
        this.body = this.container.getElement('#body');
        this.frame.innerHTML = this.content;
        this.tab_labels = this.container.getElement('#tab-labels').getFirst('ul');

        this.frame.getChildren().each(function(el,i){
            var id = el.get('id');
            this.addTab(el, id, this.options.tab_settings[id])
        }.bind(this));

        this.container.addClass(this.options._class);

        this.left_handle = this.container.getElement('#body').getElement('#left');
        this.right_handle = this.container.getElement('#body').getElement('#right');

        this.showTab(this.tabs[this.options.start]);
    },

    activateScroll: function () {
        var self = this;
        [this.left_handle,this.right_handle].each(function(el,i){
            el.set('tween',{
                link: 'cancel', duration: 200, transition: 'quart:in:out'
            }).setStyles({opacity:1,cursor:'pointer'});
        });
        this.left_handle.addEvents({
            mouseenter: function(){this.tween('background-position',['0 '+(this.getSize().y-117)+'px','-12px '+(this.getSize().y-117)+'px'])},
            mouseleave: function(){this.tween('background-position',['-12px '+(this.getSize().y-117)+'px','0 '+(this.getSize().y-117)+'px'])},
            click: function (e) {
                if (self.active && self.active.options.controller)
                    self.active.options.controller[self.options.left].bind(self.active.options.controller)();
            }
        });
        this.right_handle.addEvents({
            mouseenter: function(){this.tween('background-position',['-12px '+(this.getSize().y-117)+'px','0 '+(this.getSize().y-117)+'px'])},
            mouseleave: function(){this.tween('background-position',['0 '+(this.getSize().y-117)+'px','-12px '+(this.getSize().y-117)+'px'])},
            click: function (e) {
                if (self.active && self.active.options.controller)
                    self.active.options.controller[self.options.right].bind(self.active.options.controller)();
            }
        });
    },

    deactivateScroll: function () {
        [this.left_handle,this.right_handle].each(function(el,i){
            el.setStyles({opacity:0,cursor:'default'});
        });
    },

    addTab: function (el, id, options, show) {
        var label = new Element('li#label_'+id,{
                html: '<div class="bg-left"></div><div class="label">'+options.label+'</div><div class="bg-right"></div>'
            });
        label.inject(this.tab_labels);

        var tab = new Tab(el, label, options);
        this.tabs.append([tab]);

        label.addEvent('click', function(e) {
			this.showTab(tab);
		}.bind(this));

        if (show) this.showTab(tab);
    },

    removeTab: function (tab) {
        // todo
    },

    showTab: function (tab) {
        if (this.tabs.length==1) {
            tab.label.getParent().addClass('tabs-single');
        } else {
            this.tabs.each(function(tab,i){
                tab.label.getProperty('class').split(' ').each(function(cls){tab.label.removeClass(cls)});
                if (i==0) { tab.label.addClass('first') } else if (i==(this.tabs.length-1)) { tab.label.addClass('last') } else { tab.label.addClass('middle') }
                tab.label.addClass('inactive')
                tab.content.setStyle('display','none');
            }.bind(this));

            tab.label.removeClass('inactive');
            tab.label.addClass('active');

            if (tab.label.getNext()!=null) tab.label.getNext().addClass('inactive-left');
            if (tab.label.getPrevious()!=null) tab.label.getPrevious().addClass('inactive-right');
        }

    	tab.content.setStyle('display','block');
        this.active = tab;

        if (!tab.options.scroll)
            this.deactivateScroll();

    	this.resizeToTab(tab);

        if (tab.options.onActive)
            tab.options.onActive()
	},

    resizeToTab: function (tab) {
        if (typeOf(tab)=="number")
            tab = this.tabs[tab];
        var size = tab.content.getSize();
        this.body.setStyles({width:size.x+90,height:size.y+20});
        this.frame.setStyles({width:size.x,height:size.y});

        this.left_handle.setStyle('background-position','0 bottom');
        this.right_handle.setStyle('background-position','right bottom');
    },

    addTabController: function(id, controller) {
        this.tabs.each(function(tab,i){
            if (tab.id==id) {
                tab.options.controller = controller;
            }
        })
    }
});

Carrousel = new Class({
    Implements: Options,

    options: {
        show: 4,
        preload: 1,
        preload_match: 'a img',
        preload_base_uri: '/new/prev_pic_pm/',
        slide: 1,
        _class: 'slide',
        cls: '',
        use_width: false,
        fx: { duration: 500, link: 'ignore', transition:'cubic:out' },
        prop: {}
    },

    left: 0,
    slides: [],
    showing: [],
    scrolling: false,

    initialize: function (container, options) {
        this.container = container;
        this.setOptions(options);

        this.showing = [0,this.options.show-1];

        var screen_size;
        this.container.setStyles({overflow:'hidden',position:'relative'}).measure(function(){
            screen_size = this.getSize();
        });
        this.screen_size = screen_size;

        this.scroll_amount = Math.floor((this.screen_size.x/this.options.show)*this.options.slide);

        this.prepareContainer();
    },

    prepareContainer: function () {
        var self = this;

        this.frame_wrapper = new Element('div',{tween:Object.merge(this.options.fx,{
                    onComplete: function () { self.scrolling = false; },
                    onStart: function () { self.scrolling = true; }
                }),
                style: 'position: relative',
                id: 'frame-wrapper-'+this.container.get('id')
        });
        this.frame_wrapper.setStyle('opacity',0).fade('in').tween('left',0);
        var _w = 0;
        this.container.getElements("div.slide").each(function(el,i){
            el = el.inject(this.frame_wrapper)
            el.setStyle('display','block').addClass(this.options.cls);
            this.slides.append([i]);
            if (this.options.size.width)
                _w += this.options.size.width+5;
            else
                _w += el.getSize().x+5;
            //console.log(el.getSize().x+5)
            //_w += 148+5;
        }.bind(this));

        this.frame_wrapper.inject(this.container.empty());
        this.frame_wrapper.setStyles({'height':this.screen_size.y,width:_w});
    },

    next: function () {
        if (!this.scrolling) {
            this.preload('next');
            if (this.countNext()>=this.options.slide) {
                this.showing = [this.showing[0]+this.options.slide,this.showing[1]+this.options.slide];
                this.frame_wrapper.tween('left',this.left,this.left-this.scroll_amount);
                this.left -= this.scroll_amount;
            } else {
                for (var i=0;i<this.options.slide-this.countNext();i++)
                    this.frame_wrapper.getFirst('div').inject(this.frame_wrapper);
                this.left = this.left+(this.scroll_amount*(this.options.slide-this.countNext()));
                this.frame_wrapper.setStyle('left',this.left)
                this.left = this.left-(this.scroll_amount*this.options.slide);
                this.frame_wrapper.tween('left',this.left);
                this.showing = [this.slides.length-1-this.options.show,this.slides.length-1];
            }
        }
    },

    previous: function () {
        if (!this.scrolling) {
            this.preload('previous');
            if (this.countPrevious()>=this.options.slide) {
                this.showing = [this.showing[0]-this.options.slide,this.showing[1]-this.options.slide];
                this.frame_wrapper.tween('left',this.left,this.left+this.scroll_amount);
                this.left += this.scroll_amount;
            } else {
                for (var i=0;i<this.options.slide-this.countPrevious();i++)
                    this.frame_wrapper.getLast('div').inject(this.frame_wrapper,'top');
                this.left = this.left-(this.scroll_amount*(this.options.slide-this.countPrevious()));
                this.frame_wrapper.setStyle('left',this.left)
                this.left = this.left+(this.scroll_amount*this.options.slide);
                this.frame_wrapper.tween('left',this.left);
                this.showing = [0,this.options.show];
            }
        }
    },

    countNext: function () {return this.slides.length-(this.showing[1]+1)},
	countPrevious: function () {return this.showing[0]},

    preload: function(direction) {
        if (this.options.preload) {
            var slides = this.frame_wrapper.getChildren('div.slide');
            if (direction=='previous') slides.reverse();
            var preloaded = 0;
            slides.each(function(el,i){
                if (preloaded<this.options.preload && !el.getElement(this.options.preload_match)) {
                    var anchor = el.getFirst('a');
                    var ppic = Asset.image(this.options.preload_base_uri+anchor.get('id')+'.jpg',{
                        onLoad: function () {
                            if (el.getElement('a div'))
                                el.getElement('a div').destroy();
                            ppic.set(this.options.prop).inject(anchor,'top');
                        }.bind(this)
                    });
                    preloaded++;
                }
            }.bind(this))
        }
    }
});