var LinkPreviewer = new Class({
    initialize: function(elements) {
        this.elements = elements;
		this.render();
	},
    
    render: function() {
        this.elements.each(function(item) {
            //'visibility': 'hidden'
            //'opacity': 0
            item.preview = new Element('div', {
                'class': 'linkPreviewer',
                'styles': {
                    'visibility': 'hidden'
                }
            });
            $(document.body).adopt(item.preview);
            item.preview.thumbnail = new Element('img', {
                'src': 'custom/products/'+item.rel+''
            });
            item.preview.adopt(item.preview.thumbnail);
            
            item.preview.show = function(parent, cursor) {
                var y = parent.getCoordinates().top;
                var x = (parent.getCoordinates().left + parent.getCoordinates().width) + 5;
                if (x > (window.getWidth() / 1.5)) x = (parent.getCoordinates().left - this.getCoordinates().width) - 5;
                
                //var y = cursor.y + 10;
                //var x = cursor.x + 10;
                
                this.setStyles({
                    'top': y,
                    'left': x
                });
                //this.effect('opacity').start(1);
                this.setStyle('visibility', 'visible');
            }
            
            item.preview.hide = function() {
                this.setStyle('visibility', 'hidden');
                //this.effect('opacity').start(0);
            }
            
            item.addEvent('mouseenter', function(e) {
                this.preview.show(this, e.client);
            });
            item.addEvent('mouseleave', function(e) {
                this.preview.hide();
            });
        });
	}
});