var CategorySubmenu = Class.create();

CategorySubmenu.prototype = {

    initialize: function(container, items, url, please_wait_url) {
        this.container = $(container);
        this.items = $$('#' + container + ' ' + items);
        this.url = url;
        this.please_wait_url = please_wait_url;
        this.layer = new Element('div', {'id': 'submenu'});
        this.container.insert(this.layer);
        var total_width = 0;
        var self = this;
        var i = 1;
        this.items.each(function(item) {
            item.animation = null;
            var category_id = item.id.gsub('^category-', '');
            var submenu_category = new Element('div', {'id': 'submenu-' + category_id}).addClassName('submenu-box').setStyle({left: total_width + 'px'}).hide();
            new Ajax.Updater(
                submenu_category,
                self.url.gsub('category_id', category_id),
                {
                    method : 'get',
                    onComplete: self.limit
                }
            );
            submenu_category.insert('<img class="please-wait" src="' + self.please_wait_url + '" alt="Please wait" />');
            self.layer.insert(submenu_category);
            total_width = total_width + item.getWidth();
            if (i==1) total_width--; i++;
            item.observe('mouseover', function() {
                if (item.animation) item.animation.cancel();
                item.animation = new Effect.Appear(submenu_category, { duration: 0.5 });
            });
            item.observe('mouseout', function() {
                if (item.animation) item.animation.cancel();
                item.animation = new Effect.Fade(submenu_category, { duration: 0.5 });
            });
            submenu_category.observe('mouseover', function() {
                if (item.animation) item.animation.cancel();
                item.animation = new Effect.Appear(submenu_category, { duration: 0.5 });
            });
            submenu_category.observe('mouseout', function() {
                if (item.animation) item.animation.cancel();
                item.animation = new Effect.Fade(submenu_category, { duration: 0.5 });
            });
        });
    },

    limit: function() {
		$j('#submenu .menu > li > ul').limitMenu({ limit: 10 }); //jQuery
    }

}

var submenu;