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

	this.index = -1;

	// Slide effects
	this.slide = 0;
	this.slide_to = 0;
	this.slide_jump = 30;
	this.slide_direction = 'left';
	this.slide_delay = 100;
	this.slide_timer = false;

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

	this.width = 960;
	this.height = 150;
	this.z_index = 750;

	this.buttons_show = false;
	this.buttons_type = 'index';
	this.buttons_top = false;
	this.buttons_left = false;
	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)
	{
		f_index = this.rest(f_index, this.items.length);

		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;
		}
	}

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

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

	this.onclickButton = function(f_index)
	{
		if(this.index < f_index)
		{
			this.slide_direction = 'left';
		}
		else
		{
			this.slide_direction = 'right';
		}
	
		var i = this.rest(f_index, this.items.length);
		this.previewSlide(i, true);
	}

	this.previewSlide = function(f_index, f_autoplay)
	{
		f_index = this.rest(f_index, this.items.length);

		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-slider-button-active'
					if(oButton && oButton.className == 'image-slider-button')
					{
						oButton.className = 'image-slider-button image-slider-button-active';
					}

					// Add image to preview
					var oPreviewLeft = document.getElementById(this.wrapper_id + '-image-left');
					var oPreviewRight = document.getElementById(this.wrapper_id + '-image-right');

					if(oPreviewLeft.src != this.items[this.rest(i, this.items.length)].image)
					{
						oPreviewLeft.src = this.items[this.rest(i, this.items.length)].image;
					}

					if(oPreviewRight.src != this.items[this.rest(i, this.items.length)].image)
					{
						oPreviewRight.src = this.items[this.rest(i, this.items.length)].image;
					}
				}
				else
				{
					// Remove class 'image-slider-button-active'
					if(oButton && oButton.className == 'image-slider-button image-slider-button-active')
					{
						oButton.className = 'image-slider-button';
					}
				}
			}

			if(this.slide_direction == 'left')
			{
				this.index = f_index;
				this.slide_to = 0 - (this.width * 2);
			}
			else
			{
				this.index = f_index;
				this.slide_to = 0;
			}

			this.previewSlideIn();
		}
	}

	this.previewSlideIn = function()
	{
		var oPreview = document.getElementById(this.wrapper_id + '-image');

		if(this.slide > this.slide_to)
		{
			this.slide = (this.slide - this.slide_jump);

			if(this.slide < this.slide_to)
			{
				this.slide = this.slide_to;
			}

			oPreview.style.left = this.slide + 'px';

			clearTimeout(this.slider_timer);
			this.slider_timer = setTimeout(this.var_name + '.previewSlideIn()', this.slider_delay);
		}
		else if(this.slide < this.slide_to)
		{
			this.slide = (this.slide + this.slide_jump);

			if(this.slide > this.slide_to)
			{
				this.slide = this.slide_to;
			}

			oPreview.style.left = this.slide + 'px';

			clearTimeout(this.slider_timer);
			this.slider_timer = setTimeout(this.var_name + '.previewSlideIn()', this.slider_delay);
		}
		else
		{
			oPreview.innerHTML = '<img alt="" border="0" id="' + this.wrapper_id + '-image-left" src="' + this.items[this.rest(this.index - 1, this.items.length)].image + '" width="' + this.width + '" 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();"><img alt="" border="0" id="' + this.wrapper_id + '-image-center" src="' + this.items[this.rest(this.index, this.items.length)].image + '" width="' + this.width + '" height="' + this.height + '" onclick="javascript: ' + this.var_name + '.onclickItem(' + this.var_name + '.index + 1);" onmouseover="javascript: ' + this.var_name + '.onmouseoverPreview();" onmouseout="javascript: ' + this.var_name + '.onmouseoutPreview();"><img alt="" border="0" id="' + this.wrapper_id + '-image-right" src="' + this.items[this.rest(this.index + 1, this.items.length)].image + '" width="' + this.width + '" width="' + this.width + '" height="' + this.height + '" onclick="javascript: ' + this.var_name + '.onclickItem(' + this.var_name + '.index + 2);" onmouseover="javascript: ' + this.var_name + '.onmouseoverPreview();" onmouseout="javascript: ' + this.var_name + '.onmouseoutPreview();">';
			oPreview.style.left = '-' + this.width + 'px';
			this.slide = (0 - this.width);
		}
	}

	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-slider" style="position: relative; width: ' + this.width + 'px; height: ' + this.height + 'px; overflow: hidden; z-index: ' + (this.z_index + 1) + '">';
		html += '<div class="image-slider-image" id="' + this.wrapper_id + '-image" style="position: absolute; top: 0px; left: -' + this.width + 'px; width: ' + (this.width * 3) + 'px; height: ' + this.height + 'px; overflow: hidden; z-index: ' + (this.z_index + 2) + '"><img alt="" border="0" id="' + this.wrapper_id + '-image-left" src="' + this.items[this.rest(this.index - 1, this.items.length)].image + '" 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();"><img alt="" border="0" id="' + this.wrapper_id + '-image-center" src="http://www.audiostudio.nl/images/transparent.gif" width="' + this.width + '" height="' + this.height + '" onclick="javascript: ' + this.var_name + '.onclickItem(' + this.var_name + '.index + 1);" onmouseover="javascript: ' + this.var_name + '.onmouseoverPreview();" onmouseout="javascript: ' + this.var_name + '.onmouseoutPreview();"><img alt="" border="0" id="' + this.wrapper_id + '-image-right" src="' + this.items[this.rest(this.index + 1, this.items.length)].image + '" width="' + this.width + '" height="' + this.height + '" onclick="javascript: ' + this.var_name + '.onclickItem(' + this.var_name + '.index + 2);" onmouseover="javascript: ' + this.var_name + '.onmouseoverPreview();" onmouseout="javascript: ' + this.var_name + '.onmouseoutPreview();"></div>';

		if(this.buttons_show)
		{
			html += '<div class="image-slider-buttons" style="position: absolute; top: ' + this.buttons_top + 'px; ' + (this.buttons_left ? 'left: 0px; width: ' + this.buttons_width + 'px;' : 'right: 0px;') + ' height: ' + this.buttons_height + 'px; overflow: hidden; z-index: ' + (this.z_index + 3) + '">';
		
			if(this.buttons_type == 'index')
			{
				for(var i = 0; i < this.items.length; i++)
				{
					html += '<div class="image-slider-button" id="' + this.wrapper_id + '-button-' + i + '" style="cursor: pointer; display: block; float: left; clear: none; position: relative; z-index: ' + (this.z_index + 4) + '" onclick="javascript: ' + this.var_name + '.onclickButton(' + i + ');" onmouseover="javascript: ' + this.var_name + '.onmouseoverPreview();" onmouseout="javascript: ' + this.var_name + '.onmouseoutPreview();">' + (i + 1) + '</div>';
				}
			}
			else
			{
				html += '<div class="image-slider-button image-slider-button-prev" id="' + this.wrapper_id + '-button-prev" style="cursor: pointer; display: block; float: left; clear: none; position: relative; z-index: ' + (this.z_index + 4) + '" onclick="javascript: ' + this.var_name + '.prev();" onmouseover="javascript: ' + this.var_name + '.onmouseoverPreview();" onmouseout="javascript: ' + this.var_name + '.onmouseoutPreview();">&nbsp;</div>';
				html += '<div class="image-slider-button image-slider-button-next" id="' + this.wrapper_id + '-button-next" style="cursor: pointer; display: block; float: right; clear: none; position: relative; z-index: ' + (this.z_index + 4) + '" onclick="javascript: ' + this.var_name + '.next();" onmouseover="javascript: ' + this.var_name + '.onmouseoverPreview();" onmouseout="javascript: ' + this.var_name + '.onmouseoutPreview();">&nbsp;</div>';
			}

			html += '</div>';
		}

		html += '</div>';

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

		// Start autoplay
		this.play();
	}

	this.calculate = function()
	{
		this.index = this.rest(this.index, this.items.length);
		this.slide = (0 - this.width);

		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)
		{
			this.next();

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

	this.next = function()
	{
		var i = this.rest(this.index + 1, this.items.length);
		this.slide_direction = 'left';
		this.previewSlide(i, true);
	}

	this.prev = function()
	{
		var i = this.rest(this.index - 1, this.items.length);
		this.slide_direction = 'right';
		this.previewSlide(i, true);
	}

	this.rest = function(a, b)
	{
		while(a < 0)
		{
			a += b;
		}

		while(a >= b)
		{
			a -= b;
		}

		return a;
	}

	this.init(f_var_name, f_wrapper_id);
}

