var ImageBlender = {
	m_images: null,
	m_imageIdPrefix: null,
	m_cssClassName: null,
	m_stretchValues: null,
	m_width: null,
	m_height: null,

	m_opacityValues: new Array(),

	m_fadeSpeed: 2,
	m_blendTimeout: 5000,

	m_imageLoadCounter: 0,
	m_isLoaded: false,

	m_blendTimer: null,
	m_fadeTimer: null,

	m_currentImage: 0,
	m_firstImage: null,
	m_secondImage: null,

	m_direction: 1,
	m_isSkipTimeout: false,
	m_isFading: false,

	m_callback: null,

	create: function(containerId, imagesArray, stretchArray, width, height, imageIdPrefix, cssClassName) {
		this.m_images = imagesArray;
		this.m_imageIdPrefix = imageIdPrefix;
		this.m_cssClassName = cssClassName;
		this.m_stretchValues = stretchArray;
		this.m_width = width;
		this.m_height = height;

		if (!this.m_images || !this.m_images.length || !this.m_imageIdPrefix)
			return;

		this.m_currentImage = 0;

		this.m_imageLoadCounter = 0;
		this.m_isLoaded = false;

		var html = '';

		for (var i = 0; i < this.m_images.length; i++)
			html += this._createImageHTML(i);

		var container = document.getElementById(containerId);
		if (container)
			container.innerHTML = html;
	},

	setBlendTimeout: function(timeout) {
		this.m_blendTimeout = timeout;
	},

	setCallback: function(callback) {
		this.m_callback = callback;
	},

	setDirection: function(direction) {
		this.m_direction = direction;

		if (!this.m_isFading)
			this._blend();
		else
			this.m_isSkipTimeout = true;
	},

	_createImageHTML: function(imageIndex) {
		var src = this.m_images[imageIndex];
		var id = this.m_imageIdPrefix + imageIndex;
		var stretched = this.m_stretchValues[imageIndex];

		var size = '';
		if (stretched)
			size = 'width="' + this.m_width + '" height="' + this.m_height + '"';

		var html = '<img src="' + src + '" id="' + id + '" class="' + this.m_cssClassName + '" style="visibility: hidden" alt="" onload="javascript:ImageBlender._handleImageOnload();" ' + size + ' />';

		return html;
	},

	_handleImageOnload: function() {
		this.m_imageLoadCounter++;

		if ((this.m_imageLoadCounter > 1)
			&& (this.m_imageLoadCounter == this.m_images.length)) {
			this.m_isLoaded = true;

			this._initImagesOpacity();

			this.m_currentImage = 0;

			this.m_blendTimer = setTimeout('ImageBlender._blend()', this.m_blendTimeout);
		}
	},

	_blend: function() {
		this.m_firstImage  = this.m_currentImage;
		this.m_secondImage = this.m_currentImage + this.m_direction;

		if (this.m_secondImage >= this.m_images.length)
			this.m_secondImage = 0;
		if (this.m_secondImage < 0)
			this.m_secondImage = this.m_images.length - 1;

		if (this.m_blendTimer) {
			clearTimeout(this.m_blendTimer);
			this.m_blendTimer = null;
		}

		this.m_fadeTimer = setTimeout('ImageBlender._fade()', this.m_fadeSpeed);

		this.m_currentImage += this.m_direction;

		if (this.m_currentImage >= this.m_images.length)
			this.m_currentImage = 0;
		if (this.m_currentImage < 0)
			this.m_currentImage = this.m_images.length - 1;

		if (this.m_callback)
			this.m_callback(this.m_currentImage);
	},

	_fade: function() {
		this.m_isFading = true;

		this.m_opacityValues[this.m_firstImage]--;
		this.m_opacityValues[this.m_secondImage]++;

		if ((this.m_opacityValues[this.m_firstImage] <= 0)
			&& (this.m_opacityValues[this.m_secondImage] >= 100)) {
			if (this.m_fadeTimer) {
				clearTimeout(this.m_fadeTimer);
				this.m_fadeTimer = null;
			}

			var timeout;

			if (this.m_isSkipTimeout) {
				timeout = 0;
				this.m_isSkipTimeout = false;
			} else
				timeout = this.m_blendTimeout;

			this.m_isFading = false;

			this.m_blendTimer = setTimeout('ImageBlender._blend()', timeout);
		} else {
			this._setOpacityByImageIndex(this.m_firstImage);
			this._setOpacityByImageIndex(this.m_secondImage);

			this.m_fadeTimer = setTimeout('ImageBlender._fade()', this.m_fadeSpeed);
		}
	},

	_initImagesOpacity: function() {
		this.m_opacityValues[0] = 100;

		for (var i = 1; i < this.m_images.length; i++) {
			this.m_opacityValues[i] = 0;
		}

		for (var i = 0; i < this.m_images.length; i++) {
			this._setOpacityByImageIndex(i);
		}
	},

	_setOpacityByImageIndex: function(imageIndex) {
		var imageId = this.m_imageIdPrefix + imageIndex;
		var opacity = this.m_opacityValues[imageIndex];

		this._setOpacity(imageId, opacity);
		this._setVisible(imageId, true);
	},

	_setVisible: function(imageId, visible) {
		var image = document.getElementById(imageId);

		if (image) {
			var visibility = visible ? 'visible' : 'hidden';
			image.style.visibility = visibility;
		}
	},

	_setOpacity: function(imageId, opacity) {
		var image = document.getElementById(imageId);

		if (image) {
			opacity = (opacity >= 100) ? 99.999 : opacity;

			image.style.opacity = opacity / 100;
			image.style.MozOpacity = opacity / 100;
			image.style.KhtmlOpacity = opacity / 100;
			image.style.filter = 'alpha(opacity=' + opacity + ')';
		}
	},

	_setOpaque: function(imageId) {
		this._setOpacity(imageId, 100);
	},

	_setTransparent: function(imageId) {
		this._setOpacity(imageId, 0);
	}
}