var myImageFader = Class.create();

myImageFader.prototype = {

	_periodicalExecuter : null,
	_switchImages : null,
	_container : null,
	_onDocumentReady : null,
	_images : null,
	
	settings : {
		interval : 5,
		containerId: null,
		duration : 2
	},
	
	initialize : function(settings)
	{
		this.setSettings(settings);
		
		this._switchImages = this.switchImages.bind(this);
				
		this._container = $(this.settings.containerId);
		this._container.style.display = 'block';
		
		this._images = this._container.childElements('img');
		this._images.first().hide();
		
		this._container.observe("mouseover", this.stop.bindAsEventListener(this));
		this._container.observe("mouseout", this.start.bindAsEventListener(this));
		
		this._onDocumentReady = this.onDocumentReady.bindAsEventListener(this);
		Event.observe(window, 'load', this._onDocumentReady);
	},
	
	setSettings: function(settings)
	{
		for(var prop in settings)
		{
			this.settings[prop] = settings[prop];
		}
	},
	
	onDocumentReady : function()
	{
		Event.stopObserving(window, 'load', this._onDocumentReady);
			
		var maxheight = 0;
		
		this._images.each(function(elem){
			elem.style.position = 'absolute';
			elem.style.border = 'none';
			height = elem.getHeight();
			if(height > maxheight)
			{
				maxheight = height;
			}
		})
		this._images = null;
		this._container.style.height = maxheight + 'px';
		this._duration ={duration : this.settings.duration};
		this.start();
	},
	
	start : function()
	{
		this._periodicalExecuter = new PeriodicalExecuter(this._switchImages, this.settings.interval)
	},
	
	stop : function()
	{
		this._periodicalExecuter.stop();
	},
	
	switchImages : function()
	{
		var i = this._container.childElements('img');
		i.last().fade(this._duration);
		i.first().appear(this._duration);
		this._container.insert({top : i.last().remove()});
	}

};