/*
START - Option selected checker on submission of form
*/

function check_opts() {	
	var colorvalue = $F("field_colour");
	var sizevalue = $F("field_size");
	
	if (!ValidateVariant())
	{
		if (colorvalue == "" ||
			sizevalue == "")
		{
			alert($("noSizeChosenNotice").innerHTML);
		}
		else
		{
			alert($("sizeUnavailableNotice").innerHTML);
		}
		
		return false;
	}
	
	$('item_form').submit();
}

/*
END - Options selected checker
*/

var ColorSelector = {
	show_label:	true,
	
	init:		function()
	{
		// correctly (centrally) position color icons
		var padding = Math.floor(($("imagepicker").getWidth()
			- $("colourselector").getWidth()) / 2);
		$("colourselector").style.paddingLeft = padding + "px";
		$("colourselector").style.paddingRight = padding + "px";
		
		// add links to each color icon
		var elements = $("colourselector").select("a");
		for (var i = 0; i < elements.length; i++)
		{
			Event.observe(elements[i], "click",
				ColorSelector.selectColor.bind(this));
			Event.observe(elements[i], "mouseover",
				ColorSelector.showColorName.bind(this));
			Event.observe(elements[i], "mouseout",
				ColorSelector.hideColorName.bind(this));
		}
		
		// ad event handler to color field
		Event.observe($("field_colour"), "change",
			ColorSelector.selectColor.bind(this))
		
		// variables
		this.variant;
		this.color_id; 
		this.colornamenotice_timeout;
		
		// select first color (default color will be selected later,
		// if available
		this.selectColor(elements[0].readAttribute("rel"));
		
		// initialize zoomer
		$("main_image").onmousemove = this.startZoomer.bind(this);
		$("main_image").onmouseout = this.endZoomer.bind(this);
		
		// re-set color label when DOM is loaded (scrollbars in non-IE
		// isn't shown sometimes when color label is first loaded) or
		// browser window is resized
		Event.observe(window, "resize", function(e)
			{
				ColorSelector.showColorName();
			});
		Event.onDOMReady(function(e)
			{
				ColorSelector.showColorName();
			});
		
		// IE has problems with menu open and color label open at the
		// same time (color label visible above menu)
		// therefore hide if menu is open
		if (document.all)
		{
			Event.observe(document, "menu:opened", this.hideColorNameTemporary.bind(this));
			Event.observe(document, "menu:closed", this.endHideColorNameTemporary.bind(this));
		}
	},
	
	hideColorNameTemporary:		function(e)
	{
		var element_menu = $(e.target.id);
		var element_label = $("colorNameNotice");
		
		var menu_pos = element_menu.cumulativeOffset();
		var menu_size = element_menu.getDimensions();
		var menu = new Array();
		menu["l"] = menu_pos.left;
		menu["r"] = menu_pos.left + menu_size.width;
		menu["t"] = menu_pos.top;
		menu["b"] = menu_pos.top + menu_size.height;
		
		var label_pos = element_label.cumulativeOffset();
		var label_size = element_label.getDimensions();
		var label = new Array();
		label["l"] = label_pos.left;
		label["r"] = label_pos.left + label_size.width;
		label["t"] = label_pos.top;
		label["b"] = label_pos.top + label_size.height;
		
		if (	!((menu.l > label.l && menu.r < label.l) ||
			(menu.r > label.l && menu.r < label.r)) &&
			!((label.l > menu.l && label.r < menu.l) ||
			(label.r > menu.l && label.r < menu.r))
			)
		{
			return false;
		}
		if (	!((menu.t > label.t && menu.t < label.b) ||
			(menu.b > label.t && menu.b < label.b)) &&
			!((label.t > menu.t && label.t < menu.b) ||
			(label.b > menu.t && label.b < menu.b))
			)
		{
			return false;
		}
		
		this.show_label = false;
		$("colorNameNotice").hide();
	},
	
	endHideColorNameTemporary:	function(e)
	{
		if (!this.show_label)
		{
			this.show_label = true;
			$("colorNameNotice").show();
		}
	},
	
	showColorName:		function(e)
	{
		// get element
		var element;
		if (typeof(e) == "object")
		{
			if (e.target.tagName == "IMG")
				element = $(e.target.parentNode);
			else if (e.target.tagName == "A")
				element = e.target;
		}
		else
		{
			var elements = $("colourselector").select("a");
			
			for (var i = 0; i < elements.length; i++)
			{
				var el = $(elements[i]);
				
				if (el.readAttribute("rel") == this.color_id)
				{
					element = el;
				}
			}
		}
		
		// save color name
		var color_name = element.readAttribute("name");
		
		// stop timeout
		if (this.colornamenotice_timeout)
			window.clearTimeout(this.colornamenotice_timeout);
		
		// set value
		$("colorNameNoticeText").innerHTML = color_name;
		
		// set position
		var element_pos = element.positionedOffset();
		element_pos.top -= 23;
		element_pos.left -= 36;
		$("colorNameNotice").setStyle({top:element_pos.top+'px',left:element_pos.left+'px'});
		
		// show, if allowed
		// will be shown automatically later, if not allowed now
		if (this.show_label)
			$("colorNameNotice").show();
	},
	
	hideColorName:		function(e)
	{
		var element;
		if (typeof(e) == "object")
		{
			if (e.target.tagName == "IMG")
				element = $(e.target.parentNode);
			else if (e.target.tagName == "A")
				element = e.target;
		}
		
		// change back to currently selected color after half a second
		// colorNameNotice doesn't "flicker" back and forth while moving
		// between colors
		if (element.readAttribute("rel") != this.color_id)
		{
			$("colorNameNotice").hide();
			
			this.colornamenotice_timeout =
				window.setTimeout("if (!$('colorNameNotice').visible()) ColorSelector.showColorName('');", 100);
		}
	},
	
	selectColor:		function(e)
	{
		// get selected color
		var color_id;
		if (typeof(e) == "object")
		{
			if (e.target.tagName == "IMG")
				color_id = $(e.target.parentNode).readAttribute("rel");
			else if (e.target.tagName == "A")
				color_id = e.target.readAttribute("rel");
			else if (e.target.tagName == "SELECT")
				color_id = $F("field_colour");
		}
		else
			color_id = e;
		
		// don't reload everything if it's already loaded anyway
		if (color_id == this.color_id)
			return false;
		
		// save active color
		this.color_id = color_id;
		
		// save to field, if set from image
		if ($F("field_colour") != color_id)
		{
			var elements = $("field_colour").select("option");
			
			for (var i = 0; i < elements.length; i++)
			{
				var e = $(elements[i]);
				
				if (e.value == color_id)
					e.selected = true;
				else
					e.selected = false;
			}
		}
		
		// get variant
		// {sku}_{size}_{color}
		this.variant = false;
		for (var i = 0; i < image_data.length; i++)
		{
			var variant = image_data[i];
			var d = variant.code.split(/-/g);
			
			// sometimes, variants have less or more thumbs
			// load the variant that has most thumbs
			if (d[2] == color_id)
			{
				if (this.variant)
				{
					var th1 = 0;
					if (this.variant.thumb1)
						th1++;
					if (this.variant.thumb2)
						th1++;
					if (this.variant.thumb3)
						th1++;
					
					var th2 = 0;
					if (variant.thumb1)
						th1++;
					if (variant.thumb2)
						th1++;
					if (variant.thumb3)
						th1++;
					
					if (th2 > th1)
						this.variant = variant;
				}
				else
					this.variant = variant;
			}
		}
		// if variant isn't found (shouldn't happen anyway), stop
		if (!this.variant)
			return;
		
		// create thumbnail selection
		// remove thumbnails
		$("image_thumbs").update();
		// fill in new thumbnails
		for (var i = 1; i <= 3; i++)
		{
			// if thumb is available, go ahead
			if (this.variant["thumb" + i] != null)
			{
				$("image_thumbs").insert(
					'<li><a href="JavaScript:void(0)" onclick="ColorSelector.selectThumb(\'' + i + '\')"><img id="thumb_image_'+i+'" src="" alt="" /></a></li>',
					{ position: "bottom" }
					);
				$("thumb_image_" + i).src =
					this.variant["thumb" + i];
			}
		}
		// select thumbnail (inserts main image)
		this.selectThumb(1);
		
		// update image-based color selector
		var elements = $("colourselector").select("a");
		for (var i = 0; i < elements.length; i++)
		{
			var e = $(elements[i]);
			
			if (e.readAttribute("rel") == color_id)
				e.addClassName("selected");
			else
				e.removeClassName("selected");
		}
		
		// show color name
		this.showColorName();
		
		// check variant
		ValidateVariant();
	},
	
	selectThumb:	function(id)
	{
		if (!$("thumb_image_" + id))
			return;
		
		// remove selection style
		for (var i = 1; i <= 3; i++)
		{
			if ($("thumb_image_" + i))
			{
				$($("thumb_image_" + i).parentNode).removeClassName("selected");
			}
		}
		
		// select correct thumb
		$($("thumb_image_" + id).parentNode).addClassName("selected");
		
		// insert main image
		var img = new Image();
		img.src = this.variant["main" + id];
		
		// need to do that for IE6, doesn't show image once its loaded
		if (img.complete)
			this.showMainImage(img);
		else
		{
			$("main_image").src = "/images/spacer.gif";
			
			img.onload = this.showMainImage.bind(img);
		}
		
		$("main_image_href").href = this.variant["preview" + id];
	},
	
	showMainImage:	function(img)
	{
		var image;
		if (typeof(img) != "undefined" &&
			typeof(img.src) != "undefined")
			image = img;
		else
			image = this;
		
		$("main_image").src = image.src;
		
		$("main_image").width = image.width;
		$("main_image").height = image.height;
	},
	
	startZoomer:	function(e)
	{
		var imgbox	= $("orderbox_zoomer").firstDescendant();
		var img		= $("main_image");
		
		var obj_img = new Image();
		obj_img.src = img.src.replace(/240x300/, "");
		
		if (!$("orderbox_zoomer").visible())
		{
			$("orderbox").style.height =
				($("orderbox").getHeight() - 2) + "px";
			$("orderbox").style.width =
				($("orderbox").getWidth() - 2) + "px";
			
			$("orderbox_zoomer").style.height =
				($("orderbox").getHeight() - 5) + "px";
			$("orderbox_zoomer").style.width =
				($("orderbox").getWidth() - 2) + "px";
			$("orderbox_zoomer").style.paddingTop = "3px";
			
			
			var subtract = 8;
			
			imgbox.style.height =
				($("orderbox").getHeight() - 8) + "px";
			imgbox.style.width =
				($("orderbox").getWidth() - 8) + "px";
			imgbox.style.margin = "0px 0px 3px 3px";
			
			if (obj_img.complete)
				this.showPreviewImage(obj_img);
			else
			{
				imgbox.style.background = "url('"
					+ "/images/flypage/loading_"
					+ language_code + ".gif"
					+ "') no-repeat center";
				
				obj_img.onload = this.showPreviewImage.bind(obj_img);
			}
			
			$("orderbox_description").hide();
			$("orderbox_zoomer").show();
		}
		
		if (obj_img.complete)
		{
			if (window.event)
				var ev = window.event;
			else
				var ev = e;
			
			// get viewport
			var offset = img.cumulativeOffset();
			
			var x = Event.pointerX(ev) - offset.left;
			var y = Event.pointerY(ev) - offset.top;
			
			imgbox.style.backgroundPosition =
				Math.round(100 / img.getWidth() * x) + "% " +
				Math.round(100 / img.getHeight() * y) + "%";
		}
	},
	
	showPreviewImage:	function(img)
	{
		var image;
		if (typeof(img) != "undefined" &&
			typeof(img.src) != "undefined")
			image = img;
		else
			image = this;
		
		var imgbox = $("orderbox_zoomer").firstDescendant();
		imgbox.style.background = "url('"
			+ image.src
			+ "') no-repeat";
		
		// change background position, not yet set
		imgbox.style.backgroundPosition = "50% 50%";
	},
	
	endZoomer: function(e)
	{
		$("orderbox_description").show();
		$("orderbox_zoomer").hide();
		
		$("orderbox").style.height = "";
		$("orderbox").style.width = "";
	}
};

var ValidateVariant = function()
{
	// get values
	var size = $F("field_size");
	var colour = $F("field_colour");
	
	if (size == "" || colour == "")
	{
		$("sizeUnavailableNotice").hide();
		return false;
	}
	
	// get inventory
	var inventory;
	// {sku}_{size}_{color}
	for (var i = 0; i < image_data.length; i++)
	{
		var d = image_data[i].code.split(/-/g);
		
		if (d[1] == size && d[2] == colour)
			inventory = image_data[i].inventory;
	}
	
	if (inventory == 0)
	{
		$("sizeUnavailableNotice").show();
		return false;
	}
	else
	{
		$("sizeUnavailableNotice").hide();
		return true;
	}
};

var RatingBox = {
	load:		function()
	{
		var elements = $("rating").select("a");
		
		for (var i = 0; i < elements.length; i++)
		{
			elements[i].href = "JavaScript:void(0);";
			elements[i].rel = (i + 1);
			Event.observe(elements[i], "click", function(e)
				{
					RatingBox.activate($(e.target).rel, true);
				});
			Event.observe(elements[i], "mouseover", function(e)
				{
					RatingBox.activate($(e.target).rel, false);
				});
			Event.observe(elements[i], "mouseout", function(e)
				{
					RatingBox.deactivate();
				});
		}
	},
	
	activate:	function(rating, save)
	{
		for (var i = 0; i <= 5; i++)
		{
			$("rating").removeClassName("rating_" + i + "0");
		}
		
		$("rating").addClassName("rating_" + rating + "0");
		
		if (save) {
			$("field_rating").value = rating;
		}
	},
	
	deactivate:	function()
	{
		for (var i = 0; i <= 5; i++)
		{
			$("rating").removeClassName("rating_" + i + "0");
		}
		
		$("rating").addClassName("rating_" + $F("field_rating") + "0");
	}
};

/*
START - Size Calculator
*/

var SizeCalculator = {
	init:	function(locale)
	{
		this.locale = locale;
		
		Event.observe($("size_bust"), "keypress", function(e)
			{
				if (e.keyCode == 13)
					SizeCalculator.calc();
			});
		
		Event.observe($("size_hip"), "keypress", function(e)
			{
				if (e.keyCode == 13)
					SizeCalculator.calc();
			});
		
		$("sizecalc_box").show();
		$("sizecalc_link").hide();
		$("size_bust").focus();
	},
	
	calc:	function()
	{
		var bust = $F("size_bust");
		var hip = $F("size_hip");
		
		if (bust == "")		bust = "x";
		if (hip == "")		hip = "x";
		
		var size_bust;
		var size_hip;
		
		switch (this.locale)
		{
		case "en_GB":
			
			if (!isNaN(bust))
			{
				size_bust = 1.27 * bust - 34;
			}
			
			if (!isNaN(hip))
			{
				size_hip = 1.27 * hip - 37;
			}
			
			break;
			
		default:
			
			if (!isNaN(bust))
			{
				size_bust = 0.5 * bust - 6;
			}
			
			if (!isNaN(hip))
			{
				size_hip = 0.5 * hip - 9;
			}
			
			break;
		}
		
		var size;
		
		if (size_bust == null && size_hip == null)
		{
			$("size_result").innerHTML = "?";
			
			if (!$("size_result").hasClassName("inactive"))
				$("size_result").addClassName("inactive");
			
			return;
		}
		else if (size_bust != null && size_hip == null)
		{
			size = size_bust;
		}
		else if (size_bust == null && size_hip != null)
		{
			size = size_hip;
		}
		else
		{
			size = size_bust + size_hip;
			size /= 2;
		}
		
		// finish number
		switch (this.locale)
		{
		case "en_GB":
			
			var min_size = 6;
			var max_size = 18;
			
			size = Math.round(size);
			if (size < min_size)		size = min_size;
			if (size > max_size)		size = max_size;
			
			break;
			
		default:
			
			var min_size = 34;
			var max_size = 46;
			
			size /= 2;
			
			size = Math.round(size);
			if (size < min_size / 2)	size = min_size / 2;
			if (size > max_size / 2)	size = max_size / 2;
			
			size *= 2;
			break;
		}
		
		// style result box
		if ($("size_result").hasClassName("inactive"))
			$("size_result").removeClassName("inactive");
		
		$("size_result").innerHTML = size;
	}
};

/*
END - Size Calculator
*/

function loadAfterOrderbox(has_videos, default_color)
{
	// stuff that should be ready ASAP
	ColorSelector.init();
	
	// show video link if videos are available
	if (has_videos)
	{
		Event.observe($('thumb_videos'), "mouseover", function(e)
			{
				obj = $("thumb_videos");
				objPos = obj.positionedOffset();
				objPos.top -= 23;
				objPos.left -= 32;
				$('watchVideosNotice').setStyle({top:objPos.top+'px',left:objPos.left+'px'});
				$('watchVideosNotice').show();
			}
		);
		Event.observe($('thumb_videos'), "mouseout", function(obj)
			{
				$('watchVideosNotice').hide();
			}
		);
	}
	
	// choose default color
	if (default_color != null)
		ColorSelector.selectColor(default_color);
};