
function ImageRotator(f_var_name, f_wrapper_id)
{
	this.var_name = null;
	this.wrapper_id = null;
	this.items = new Array();

	this.index = -1;
	this.opacity = 0;
	this.opacity_delay = 100;
	this.opacity_timer = false;

	this.autoplay = true;
	this.autoplay_delay = 5000;
	this.autoplay_timer = false;

	this.width = '960';
	this.height = '150';
	this.z_index = 900;

	this.buttons_show = false;
	this.buttons_top = false;
	this.buttons_left = 0;
	this.buttons_width = false;
	this.buttons_height = 32;

	this.MSIE = (navigator.appVersion.indexOf('MSIE') > -1);

	this.init = function(f_var_name, f_wrapper_id)
	{
		this.var_name = f_var_name;

		if(document.getElementById(f_wrapper_id))
		{
			this.wrapper_id = f_wrapper_id;
		}
		else
		{
			alert('Cannot detect div#' + f_wrapper_id);
		}
	}

	this.addItem = function(f_image, f_url, f_target)
	{
		var o = new Object();
		o.image = (f_image ? f_image : false);
		o.url = (f_url ? f_url : false);
		o.target = (f_target ? f_target : false);

		this.items[this.items.length] = o;
	}

	this.onclickItem = function(f_index)
	{
		if(this.items[f_index].url)
		{
			if((this.items[f_index].target == false) || (this.items[f_index].target == '_self'))
			{
				document.location.href = this.items[f_index].url;
			}
			else
			{
				window.open(this.items[f_index].url, this.items[f_index].target);
			}
		}
	}

	this.onmouseoverItem = function(f_index, f_autoplay)
	{
		if((f_autoplay == undefined) || (f_autoplay == false))
		{
			this.autoplay = false;
		}

		if(this.index != f_index)
		{
			for(var i = 0; i < this.items.length; i++)
			{
				var oButton = document.getElementById(this.wrapper_id + '-button-' + i);

				if(i == f_index)
				{
					// Add class 'image-rotator-button-active'
					if(oButton && oButton.className == 'image-rotator-button')
					{
						oButton.className = 'image-rotator-button image-rotator-button-active';
					}

					// Add image to preview
					var oPreviewBackground = document.getElementById(this.wrapper_id + '-image-background');
					var oPreviewForeground = document.getElementById(this.wrapper_id + '-image-foreground');

					oPreviewBackground.src = oPreviewForeground.src;
					oPreviewForeground.style.opacity = 0;
					oPreviewForeground.src = this.items[i].image;
				}
				else
				{
					// Remove class 'image-rotator-button-active'
					if(oButton && oButton.className == 'image-rotator-button image-rotator-button-active')
					{
						oButton.className = 'image-rotator-button';
					}
				}
			}

			this.index = f_index;
			this.opacity = 0;
			this.previewFadeIn();
		}
	}

	this.onmouseoutItem = function(f_index)
	{
		this.autoplay = true;

		clearTimeout(this.autoplay_timer);
		this.autoplay_timer = setTimeout(this.var_name + '.play()', this.autoplay_delay);
	}

	this.previewFadeIn = function()
	{
		if(this.opacity < 1)
		{
			var oPreviewForeground = document.getElementById(this.wrapper_id + '-image-foreground');

			this.opacity += 0.1;

			if(this.MSIE)
			{
				oPreviewForeground.style.filter = 'alpha(opacity=' + Math.round(this.opacity * 100) + ')';
			}
			else
			{
				oPreviewForeground.style.opacity = this.opacity;
			}

			clearTimeout(this.opacity_timer);
			this.opacity_timer = setTimeout(this.var_name + '.previewFadeIn()', this.opacity_delay);
		}
	}

	this.onmouseoverPreview = function()
	{
		this.autoplay = false;
	}

	this.onmouseoutPreview = function()
	{
		this.autoplay = true;

		clearTimeout(this.autoplay_timer);
		this.autoplay_timer = setTimeout(this.var_name + '.play()', this.autoplay_delay);
	}

	this.load = function()
	{
		this.calculate();

		var html = '';

		html += '<div class="image-rotator" style="position: relative; width: ' + this.width + 'px; height: ' + this.height + 'px; overflow: hidden;">';
		html += '<div class="image-rotator-image" id="' + this.wrapper_id + '-image" style="position: absolute; top: 0px; left: 0px; width: ' + this.width + 'px; height: ' + this.height + 'px; overflow: hidden;"><img alt="" border="0" id="' + this.wrapper_id + '-image-background" src="http://www.cafephilip.nl/images/transparent.gif" width="' + this.width + '" height="' + this.height + '" style="position: absolute; top: 0px; left: 0px; z-index: ' + (this.z_index + 1) + ';"><img alt="" border="0" id="' + this.wrapper_id + '-image-foreground" src="http://www.cafephilip.nl/images/transparent.gif" width="' + this.width + '" height="' + this.height + '" onclick="javascript: ' + this.var_name + '.onclickItem(' + this.var_name + '.index);" onmouseover="javascript: ' + this.var_name + '.onmouseoverPreview();" onmouseout="javascript: ' + this.var_name + '.onmouseoutPreview();" style="cursor: pointer; position: absolute; top: 0px; left: 0px; z-index: ' + (this.z_index + 2) + ';"></div>';

		if(this.buttons_show)
		{
			html += '<div class="image-rotator-buttons" style="position: absolute; top: ' + this.buttons_top + 'px; left: ' + this.buttons_left + 'px; width: ' + this.buttons_width + 'px; height: ' + this.buttons_height + 'px; overflow: hidden; z-index: ' + (this.z_index + 3) + '">';
		
			for(var i = 0; i < this.items.length; i++)
			{
				html += '<div class="image-rotator-button" id="' + this.wrapper_id + '-button-' + i + '" style="cursor: pointer; display: inline; position: relative; z-index: ' + (this.z_index + 4) + '" onclick="javascript: ' + this.var_name + '.onclickItem(' + i + ');" onmouseover="javascript: ' + this.var_name + '.onmouseoverItem(' + i + ');" onmouseout="javascript: ' + this.var_name + '.onmouseoutItem(' + i + ');">' + i + '</div>';
			}

			html += '</div>';
		}

		html += '</div>';

		document.getElementById(this.wrapper_id).innerHTML = html;

		this.play();
	}

	this.calculate = function()
	{
		if(this.buttons_width == false)
		{
			this.buttons_width = this.width;
		}

		if(this.buttons_top == false)
		{
			this.buttons_top = (this.height - this.buttons_height);
		}
	}

	this.play = function()
	{
		if(this.autoplay)
		{
			var next_index = this.index + 1;

			if(next_index >= this.items.length)
			{
				next_index = 0;
			}

			this.onmouseoverItem(next_index, true);

			clearTimeout(this.autoplay_timer);
			this.autoplay_timer = setTimeout(this.var_name + '.play()', this.autoplay_delay);
		}
	}

	this.init(f_var_name, f_wrapper_id);
}

