var simpleImageGallery = Class.create(
{
    initialize: function(containerID, imageViewID)
    {
        var self = this;
        if ($(containerID) && $(imageViewID))
        {
		    this.images       = new Array();
		    this.imageView    = $(imageViewID);
		    this.imageViewImg = null;
	        this.links        = $$('#'+containerID+' a');
	            
		    var imgImageView = document.createElement('img');
		    imgImageView.src = $(this.links[0]).href;
		    $(this.imageView).insert({top: imgImageView});
		    this.imageViewImg = $(this.imageView).getElementsByTagName('img')[0];
		    
	        this.links.each(function(alink, index)
	        {
	            self.images[index] = $(alink).href;
				$(alink).href = '#';//'javascript:void(0);';
			
				Event.observe(alink, 'click', function()
		        {
		        	self.changeImageView(self.images[index]);
		        });
	    	});
	    
        }
    },
    
    changeImageView: function(newImageURL)
    {
        var self = this;
	
		if ($(self.imageView).getElementsByTagName('img').length == 1)
		{
		    var newImageViewImg = document.createElement('img');
		    newImageViewImg.src = newImageURL;
		    $(this.imageView).insert({top: newImageViewImg});
		    $($(this.imageView).getElementsByTagName('img')[0]).hide();
		    //alert($(newImageViewImg));
		    new Effect.Parallel(
			[
				new Effect.Fade(self.imageViewImg),
				new Effect.Appear(newImageViewImg)
		    ],
			{
				afterFinish: function()
				{
				    $(self.imageViewImg).remove();
				    self.imageViewImg = $(self.imageView).getElementsByTagName('img')[0];
				    newImageViewImg = null;
				},
				queue: 
				{
					position:'end', 
					scope: 'gallery'
				}
			});
		}
    },
    
    setImageView: function(url)
    {
		$(this.imageView).src = url;
    }

});

Event.observe(window, 'load', function()
{
    new simpleImageGallery('gallery', 'imageview');
});