var ImagePreview = Class.create({
	base_element_id:	null,
	language:		null,
	element_id_prefix:	null,
	
	product_data:	null,
	element_id:	null,
	image:		null,
	
	initialize:	function(base_element_id, element_id_prefix, language)
	{
		this.base_element_id	= base_element_id;
		this.language		= language;
		this.element_id_prefix	= element_id_prefix;
	},
	
	show:	function(product_data)
	{
		// if a preview is still open, close it!
		if (this.element_id != null)
			this.remove();
		
		// save data
		this.product_data	= product_data;
		this.element_id 	= this.element_id_prefix + this.product_data.id;
		
		// create base box
		var pos		= $(this.element_id).cumulativeOffset();
		var pos_top	= pos.top - 43;
		var pos_left	= pos.left - 2;
		var e = new Element("div",
			{
				id:		this.element_id + "_box",
				className:	"preview_box",
				style:		"top:" + pos_top + "px;" +
						"left:" + pos_left + "px;"
			}
		);
		
		// insert different colors
		var e_colors = new Element("div",
			{
				id: "colors"
			}
		);
		var i = 0;
		this.product_data.colors.each(function(s) {
			if (s == null)
				return false;
			if (i <= 5)
			{
				var a = new Element("a",
					{
						href:		"JavaScript:image_preview.switchThumb(" + s.color_id + ");"
					}
				);
				Event.observe(a, "mouseover", function(e)
					{
						image_preview.switchThumb(s.color_id);
					});
				a.appendChild(new Element("img",
					{
						src:	s.thumb,
						alt:	s.name,
						title:	s.name
					}
				));
				e_colors.appendChild(a);
			}
			i++;
		});
		e.appendChild(e_colors);
		
		// start first half
		var e_half = new Element("div", { className: "first_half" });
				
		// insert static image
		var e_image = new Element("a",
			{
				id:	"image_main",
				href:	this.product_data.link
			}
		);
		e_image.appendChild(new Element("img",
			{
				id:	this.element_id + "_image"
			}
		));
		// move over the image moves the box
		e_image.onmousemove = this.move;
		e_image.onmouseout = this.moveOut;
		e_half.appendChild(e_image);
		
		// insert color name
		var e_colorname = new Element("a",
			{
				href:		this.product_data.link,
				className:	"more_options",
				id:		this.element_id + "_more_options"
			}
		);
		e_half.appendChild(e_colorname);
		
		// insert price
		var e_pricing = new Element("div",
			{
				id:	"pricing"
			}
		);
		e_pricing.innerHTML = $("pricing_" + this.product_data.id).innerHTML;
		e_half.appendChild(e_pricing);
		
		e.appendChild(e_half);
		
		// start second half
		var e_half = new Element("div", { className: "second_half" });
		
		// insert layer for dynamic image
		var i = new Element("div",
			{
				id: this.element_id + "_preview",
				className: "image_preview"
			}
		);
		
		e_half.appendChild(i);
		
		e.appendChild(e_half);
		
		$(this.base_element_id).appendChild(e);
		
		// load thumbnail
		var initial_color_id;
		this.product_data.colors.each(function(s) {
			if (s == null)
				return false;
			//check if this colour is set as default
			if (s["default"])
				initial_color_id = s.color_id;
		});

		//if not set default to first option
		if (initial_color_id == null)
			initial_color_id = this.product_data.colors[this.product_data.colors.length-1].color_id;
		
		this.switchThumb(initial_color_id);
		
		// insert link for more info
		// fade in
		Effect.Appear(this.element_id + "_box",
			{
				duration: 0.2
			}
		);
		
		// event handler: close if clicking somewhere
		image_preview_closer = this.remove.bindAsEventListener(this);
		
		// delay, because it can be triggered after called (weird)
		//window.setTimeout("Event.observe(document, \"click\", image_preview_closer);", 10);
		Event.observe($(this.element_id + "_box"), "mouseout", image_preview_closer);
	},
	
	remove: function(e)
	{
		if (e != null)
		{
			if (window.event)
				var pointer = Event.pointer(window.event);
			else
				var pointer = Event.pointer(e);
			
			//console.log(e);
			if (this.isInside(
				pointer.x,
				pointer.y,
				$(this.element_id + "_box")))
				return false;
		}
		
		Event.stopObserving($(this.element_id + "_box"), "mouseout", image_preview_closer);
		image_preview_closer = null;
		
		var t = image_preview;
		
		// IE needs to re-set element_id - couldn't find out why
		var element_id = t.element_id_prefix + t.product_data.id;
		
		if ($(element_id + "_box"))
		{
			//$(t.element_id + "_box").remove();
			Effect.Fade(element_id + "_box",
				{
					duration: 0.2,
					afterFinish: function(e)
					{
						e.element.remove();
					}
				}
			);
		}
		
		t.element_id	= null;
		t.image		= null;
	},
	
	move:	function(e)
	{
		var t = image_preview;
		
		// IE needs to re-set element_id - couldn't find out why
		var element_id = t.element_id_prefix + t.product_data.id;
		
		if (t.image.complete)
		{
			if (window.event)
				var ev = window.event;
			else
				var ev = e;
			
			// image, over which the mouse moves
			var imgbox = $(element_id + "_image");
			
			// get viewport
			var offset = imgbox.cumulativeOffset();
			
			var x = Event.pointerX(ev) - offset.left;
			var y = Event.pointerY(ev) - offset.top;
			
			$(element_id + "_preview").style.backgroundPosition =
				Math.round(100 / imgbox.getWidth() * x) + "% " +
				Math.round(100 / imgbox.getHeight() * y) + "%";
		}
	},
	
	moveOut:	function(e)
	{
		var t = image_preview;
		
		// IE needs to re-set element_id - couldn't find out why
		var element_id = t.element_id_prefix + t.product_data.id;
		
		if (t.image.complete)
		{
			$(element_id + "_preview").style.backgroundPosition = "50% 0%";
		}
	},
	
	switchThumb: function(color_id)
	{
		var t = image_preview;
		
		// IE needs to re-set element_id - couldn't find out why
		var element_id = t.element_id_prefix + t.product_data.id;
		
		var img;
		t.product_data.colors.each(function(s) {
			if (s == null)
				return false;
			if (s.color_id == color_id)
				img = s;
		});
		
		// big image
		$(element_id + "_image").src = img.main;
		
		// preview image
		var preview = new Image();
		preview.src = img.preview;
		t.image = preview;
		if (preview.complete)
		{
			$(element_id + "_preview").style.backgroundImage =
				"url('" + img.preview + "')";
			$(element_id + "_preview").style.backgroundPosition =
				"50% 0%";
		}
		else
		{
			$(element_id + "_preview").style.backgroundImage =
				"";
			$(element_id + "_preview").style.backgroundPosition =
				"center";
			preview.onload = this.showThumb;
		}
		
		// name
		$(element_id + "_more_options").innerHTML = img.name;
	},
	
	showThumb: function()
	{
		var t = image_preview;
		
		// IE needs to re-set element_id - couldn't find out why
		var element_id = t.element_id_prefix + t.product_data.id;
		
		$(element_id + "_preview").style.backgroundImage =
			"url('" + t.image.src + "')";
		$(element_id + "_preview").style.backgroundPosition =
			"50% 0%";
	},
	
	isInside: function(pos_x, pos_y, element)
	{
		if (!element)
			return false;
		
		var pos		= element.cumulativeOffset();
		var pos_top	= pos.top;
		var pos_left	= pos.left;
		
		var pos_bottom	= pos_top + element.getHeight();
		var pos_right	= pos_left + element.getWidth();
		
		if (pos_x > pos_left && pos_x < pos_right &&
			pos_y > pos_top && pos_y < pos_bottom)
			return true;
		else
			return false;
		
	}
});

var image_preview_closer;