var FeaturedWidget = new Class({
    Implements: [Events, Options],
    initialize: function(featuredWidget) {
        this.el = featuredWidget;
        this.tabBodies = featuredWidget.getElements('.middle > div.tab-body');
        this.tabs = featuredWidget.getElements('.tabs a');
        var self = this;
        this.itemType = 'dresses';
        featuredWidget.getElements('.tabs a').addEvent('click', function(ev){self.tabChange(ev, this);});
        this.setupPaginator();
        this.req = new Request.JSON({'method':'get'});
        this.req.addEvent('success', this.complete.bind(this));
        this.tabBody = self.el.getElement('.body-'+this.itemType);
        this.flag = true;
    },
    tabChange: function(ev, tab) {
        var self = this;
        ev.stop();
        if(!this.flag || tab.hasClass('on')) return;
        var type = false;
        if(tab.hasClass('dresses')) type = 'dresses';
        else if(tab.hasClass('accessories')) type = 'accessories';
        else if(tab.hasClass('decorations')) type = 'decorations';
        this.itemType = type;
        this.tabBody = self.el.getElement('.body-'+type);
        self.tabBodies.setStyle('display', 'none');
        this.tabBody.setStyle('display', 'block');
        self.tabs.removeClass('on');
        tab.addClass('on');
    },
    setupPaginator: function() {
        var next = this.el.getElement('.next');
        var prev = this.el.getElement('.prev');
        next.addEvent('click', this.next.bind(this));
        prev.addEvent('click', this.prev.bind(this));
    },
    next: function(ev) {
        ev.stop();
        this.flag = false;
        var id = this.tabBody.getElement('.search-description').get('dynid');
        this.req.send({
            'url': '/shop/ajax/featured_widget/next/'+this.itemType+'/'+id+'/'
        });
    },
    prev: function(ev) {
        ev.stop();
        this.flag = false;
        var id = this.tabBody.getElement('.search-description').get('dynid');
        this.req.send({
            'url': '/shop/ajax/featured_widget/prev/'+this.itemType+'/'+id+'/'
        });
    },
    complete: function(json, value) {
        this.flag = true;
        this.tabBody.empty().set('html', json.html);
    }
});




window.addEvent('domready', function() {
    var featuredWidget = new FeaturedWidget($$('.featured-widget')[0]);
});