$ = document.id;

var ScreenshotsWidget = new Class({
    initialize: function(el) {
        this.el = el;
        this.caption = this.el.getElement('.caption');
        this.captionText = this.caption.getElement('.body');
        this.caption.set('tween', {duration: 80, 'link':'cancel'}); //.setStyle('display', 'none');
        this.caption.set('slide', {duration: 1200, transition: "expo:out"}).slide('out');
        this.thumbnails = el.getElements('.tn');
        this.thumbnails.each(this.process.bind(this));
//         this.fx = new Fx.Elements(this.thumbnails, {duration: 120, link: 'cancel'});
        this.el.addEvent('mouseleave', this.leaving.bind(this));
        this.thumbnails.addEvent('mouseover', this.hover.bind(this));
        this.thumbnails.addEvent('mouseleave', this.tnleave.bind(this));
        var self = this;
//         this.thumbnails.getElements('img').flatten().each(function(el) {
//             el.addEvent('mouseover', self.tnimghover.bind(self));
//         });
    },
    process: function(tn) {
        tn.store('title', tn.get('title'));
        tn.store('desc', tn.get('dyndesc'));
        tn.set('title', '');
    },
    leaving: function(ev) {
//         this.caption.setStyle('display', 'none');
        this.caption.slide('out');
        var el = $(ev.target);
        var eff = {};
        this.thumbnails.each(function(tn, idx) {
//             eff[idx] = {'opacity':1};
            tn.set('class', 'tn');
        });
//         this.fx.cancel();
//         this.fx.start(eff);
    },
    tnleave: function(ev) {
        var el = $(ev.target);
        if(el.tagName && el.get('tag') == 'img') el = el.getParent();
        el.set('class', 'tn off');
//         this.caption.setStyle('display', 'none');
        this.caption.slide('out');
    },
    hover: function(ev) {
        var el = $(ev.target);
        if(el.tagName && el.get('tag') == 'img') el = el.getParent();
        else return;
        var eff = {};
        for(idx=0; idx < this.thumbnails.length; idx++) {
            var tn = this.thumbnails[idx];
            if(tn != el) {
//                 eff[idx] = {'opacity' :0.3};
                tn.set('class', 'tn off');
            } else {
//                 eff[idx] = {'opacity':1};
                tn.set('class', 'tn on');
            }
        }
//         this.fx.cancel();
//         this.fx.start(eff);
        var t = { 
            'title': el.retrieve('title'), 
            'desc': el.retrieve('desc')
        };
        this.captionText.set('html', '<strong>{title}</strong> {desc}'.substitute(t));
//         this.caption.setStyle('display', 'block');
        this.caption.slide('in');
    }
});
window.addEvent('domready', function() {
    if($$('.screenshots').length) {
        var moozes = ReMooz.assign($$('a.tn'));
        var ssw = new ScreenshotsWidget($$('.screenshots')[0]);
    }

});