var ImageChanger = Class.create ({
	
	initialize: function(container)
	{
		this.container = container;
		this.numItems = this.container.select('div.image').size();
		this.currentPos = 0;
		this.nextPos = 1;
		
		this.images = new Array();
		
		if (!this.container)
		{
			return false;
		}
		
		this.container.select('div.image').each(function(container, index)
		{			
			this.images[index] = container;

		}.bind(this));
		
		$("changeBtn").removeClassName("none");
		
		$("changeBtn").observe("click", this.imageChanger.bind(this));
	},
	
	imageChanger: function(event)
	{
		event.stop();
		
		var newHeight = this.images[this.nextPos].getHeight();
		
		//fade out old
		new Effect.Fade(this.images[this.currentPos], { 
			duration: 0.8
		});
		
		//change height to next image
		new Effect.Morph('images', {
			style: "height: " + newHeight + "px;",
			duration: 0.8,
			afterFinish: this.fadeIn.bind(this)
		});
	},
	
	fadeIn: function()
	{
		//fade in new
		new Effect.Appear(this.images[this.nextPos], { duration: 0.8 });
		
		this.currentPos++;
		this.nextPos++;
		
		if(this.nextPos > this.numItems-1)
		{
			this.nextPos = 0;
		}
		
		if(this.currentPos > this.numItems-1)
		{
			this.currentPos = 0;
		}
	}
});


document.observe('dom:loaded', function()
{	
	if ($("images"))
	{
		new ImageChanger($('images'));
	}
});