var images = new Array();
var originalImage = null;

function showDerivationThumb(elt, imageId, url) {
    derivationScroller.toElement(elt);
    var imageElt = $('image').getElement('.mainImage');
    if (originalImage == null) {
        originalImage = new Asset.image(imageElt.get('src'), {
            'title' : imageElt.get('title'),
            'alt' : imageElt.get('alt'),
            'class': imageElt.get('class')
        });
        
        $('imageContainer').setStyles({
            'height' : imageElt.getStyle('height')
        });
    }
    if (images[imageId] == null) {
        images[imageId] = new Asset.image(url, {
            'class': imageElt.get('class')
        });
    }
    images[imageId].replaces(imageElt);
    
    var meta = elt.getParent().getElement('.derivationMeta');
    meta.setStyle('display', 'block');
    meta.setStyle('left', $('imageContainer').getPosition().x);
    meta.setStyle('top', $('imageContainer').getPosition().y + $('imageContainer').getSize().y - meta.getSize().y - 2);

	meta.fade('in');
	
	setTimeout(function() { this.fade('out'); this.setStyle('display', 'none'); }.bind(meta), 3000);
}

function hideDerivationThumb(elt) {
    var imageElt = $('image').getElement('.mainImage');
    elt.getParent().getElement('.derivationMeta').fade('out');
    elt.getParent().getElement('.derivationMeta').setStyle('display', 'none');
    originalImage.replaces(imageElt);
}