var ThumbnailSlideshow = new Class({
    Implements: [Options, Events, Chain],
    options: {},
    initialize: function(artworks, options) {
        this.setOptions(options)
        this.artworks = artworks;
        this.stage = $('artwork');
        this.image = $$('div#artwork img')[0]
        this.build()
    },
    build: function() {
        this.artworks.each(function(artwork, index) {
            // If the artwork isn't licensed correctly on Flickr, the large
            // artwork isn't available. Fall back to the medium artwork.
            var src = artwork.sources.large ? artwork.sources.large : artwork.sources.medium;

            // Preload large image.
            artwork.full = new Asset.image(src, {
                'class': 'large artwork',
                'title': artwork.title
            });

            $("thumb_" + artwork.id).addEvent('click', function(e) {
                artwork.full.erase('width')
                artwork.full.erase('height')

                var stage = this.stage;
                var current = stage.getChildren('img')[0]
                var chainer = new Chain();
                chainer.chain(function() {
                    // if artwork is new, fade old, hide new in preparation for
                    // fading it in
                    if (current != artwork.full) {
                        current.fade()
                        artwork.full.fade('hide')
                    }
                }).chain(function() {
                    stage.grab(artwork.full, 'top')
                }).chain(function() {
                    // won't fade if artwork is already current
                    artwork.full.fade('in')
                });
                chainer.callChain()
                chainer.callChain()
                chainer.callChain()

            }.bind(this));

        }, this);
    }
});

window.addEvent('domready', function () {

    var slideshow = new ThumbnailSlideshow(artworks);

});