var ProductsBox = new Class ({

    box:null,
    togglers:null,
    descriptions:null,

    initialize:function(id) {
        if(!$chk(id))
            return;

        this.box = $(id);

        this.descriptions = this.box.getElements('div.description');

        this.togglers = this.box.getElements('a.toggler');
        this.togglers.addEvent('mouseenter', function(event) {
            var e = new Event(event);
           
            var activeIndex = this.getActive();

            var activeToggler = this.togglers[activeIndex];
            var currentToggler = $(e.target);
            if(activeToggler.rel == currentToggler.rel)
                e.stop();

            var img = activeToggler.getElement('img');
            var tweenOut = new Fx.Tween(img, {
                duration:'short',
                link:'ignore'
            });
           
            if($chk(currentToggler.alt)) {
                currentToggler = currentToggler.getParent();
            }

            activeToggler.removeClass('active');
            currentToggler.addClass('active');
            
            var cImg = currentToggler.getElement('img');

            var tweenIn = new Fx.Tween(cImg, {
                duration:'short',
                link:'ignore'
            });

            tweenOut.start('opacity', img.style.opacity, 0);
            tweenIn.start('opacity', cImg.style.opacity, 1);
            this.descriptions.removeClass('active');
 
            this.descriptions[this.getActive()].addClass('active');

            e.stop();

        }.bind(this));
    },

    getActive: function() {
        var i = this.togglers.length - 1;
        for( ; i >= 0 ; i--) {
            if(this.togglers[i].hasClass('active')) {
                break;
            }
        }
        return i;
    }
});