current_slide		= 1;
current_group_id	= 0;

groups		= new Array();
group_ids	= new Array();
group_types	= new Array();
group_count	= 0;
slide_groups	= new Array();

var group_id	= 0;
var mode	= "normal";
var centre	= false;

spacer = new Image();
spacer.src = "img/GalleryPage/loading.gif";

hideComparisonThumbs();

function rotateSlides(direction)
{
	resetThumbnails();
	killButtons();

	var next_group = 0;
	var backwards = false;
	var position = current_slide + direction;

	if(mode == "comparison" || (mode == "large" && group_types[current_group_id] == "comparison-gallery"))
	{
		if(position == 0 || position >= groups[current_group_id].length)
		{
			// we're going forwards and are at the end of the set,
			// or are going backwards and have reached the first
			// pic of the set, so rotate to the next group

			if(position == 0)
			{
				// find last group id
				current_group_id = group_ids[group_ids.length-1];
				position = groups[current_group_id].length-1;
			}
			setSlide(position, '', current_group_id);
		}
		else
		{
			// we're still in the comparison group, so we
			// should just rotate to the previous or next
			// image in the group.

			for(i = 0; i < groups[current_group_id][position].length; i++)
			{
				if(groups[current_group_id][position][i] != undefined)
				{
					newSlide = groups[current_group_id][position][i];
					slideGroup(position, newSlide[4], i, current_group_id);
					break;
				}
			}
		}
	}
	else
	{
		if(position == 0)
		{
			for(g = 0; g < group_ids.length; g++)
			{
				if(group_ids[g] == group_id)
				{
					if(g == 0)
					{
						next_group = group_ids[group_ids.length];
					}
					else if(g == group_ids.length)
					{
						next_group = group_ids[0];
					}
					else
					{
						next_group = group_ids[g-1];
						backwards = true;
					}
					break;
				}
			}
		}
		else if(position == groups[group_id].length)
		{
			for(g = 0; g < group_ids.length; g++)
			{
				if(group_ids[g] == group_id)
				{
					if(g == 0)
					{
						next_group = group_ids[g+1];
					}
					else if(g == group_ids.length-1)
					{
						next_group = group_ids[0];
					}
					else
					{
						next_group = group_ids[g];
					}
					break;
				}
			}
		}

		if(next_group > 0 && group_types[next_group] == "comparison-gallery")
		{
			var possie = 1;
			if(backwards)
			{
				var possie = groups[next_group].length-1;
			}

			for(i = 0; i < groups[next_group][possie].length; i++)
			{
				if(groups[next_group][possie][i] != undefined)
				{
					slideGroup(possie, groups[next_group][possie][i][4], i, next_group);
				}
			}

		}
		else
		{
			setSlide(position);
		}
	}
}

function slideGroup(group_id, platform, possie, real_group_id)
{
	mode = "comparison";
	current_slide = group_id;
	current_group_id = real_group_id;

	newImg = groups[real_group_id][group_id][possie];

	$("blanket").style.display = "block";
	$("frame").style.display = "block";



	width = calculateDimension("width", newImg[2], newImg[3]);
	height= calculateDimension("height", newImg[2], newImg[3]);

	createButtons(real_group_id, group_id);
	switchButton(platform, true);

	setViewer(newImg[1], width, height, false);
	resetFrame("image-"+real_group_id+"-"+possie);
}

function findImage(real_group_id, group_id, platform)
{
	for(i = 0; i < groups[real_group_id][group_id].length; i++)
	{
		if(groups[real_group_id][group_id][i] != undefined && groups[real_group_id][group_id][i][4] == platform)
		{
			newImg = groups[real_group_id][group_id][i];

			resetButtons(real_group_id, group_id);
			switchButton(platform, true);

			if(mode == "large")
			{
				width = newImg[2];
				height= newImg[3];
				setViewer(newImg[0], width, height, true);
			}
			else
			{
				width = calculateDimension("width", newImg[2], newImg[3]);
				height= calculateDimension("height", newImg[2], newImg[3]);
				setViewer(newImg[1], width, height, false);
			}
		}
	}
}

function resetFrame(currentImage)
{
	if($(currentImage))
	{
		var frameTop = 0;
		var frame = currentImage.replace(/image/gi, "frame");

		currentImage = $(frame);
		currentImage.style.zIndex = "1000000";
		currentImage.style.margin = "-4px -4px -4px -4px";
		currentImage.style.border = "4px solid white";

		frameTop = $(frame).offsetTop;

		$("frame").style.top = (frameTop + 84) + "px";
		$("anchor").style.top = (frameTop - 40) + "px";

		$("extra").setAttribute( "class", "monk" );
		$("extra").setAttribute( "className", "monk" );

		$("frame").style.display = "block";
		$("anchor").style.display = "block";

		var loc = document.location.toString().replace(/#anchor/g, "");
		document.location = loc+"#anchor";
	}
}

function setSlide(imnum, element, article_id)
{
	$("top-tabs").style.zIndex = -1;
	$("nav").style.zIndex = -1;
	$("banner").style.zIndex = -1;

	if(mode == "comparison") mode = "normal";

	var new_group_id = 0;
	if(article_id > 0)
	{
		group_id = article_id;
	}

	if(imnum == (groups[group_id].length) || imnum == 0)
	{
		// find position of current group in groups array
		for(g = 0; g < group_ids.length; g++)
		{
			if(group_ids[g] == group_id)
			{
				if(g == 0)
				{
					// first
					if(imnum == 0)
					{
						// go backwards
						new_group_id = group_ids[group_ids.length-1];
						imnum = groups[new_group_id].length-1;
					}
					else
					{
						// go forwards
						new_group_id = group_ids[g+1];
						imnum = 1;
					}
				}
				else if(g == group_ids.length-1)
				{
					// last
					if(imnum == 0)
					{
						// go backwards
						new_group_id = group_ids[g-1];
						imnum = groups[new_group_id].length-1;
					}
					else
					{
						// back to start
						imnum = 1;
						new_group_id = group_ids[0];
					}
				}
				else
				{
					// middle
					if(imnum == 0)
					{
						// go backwards
						new_group_id = group_ids[g-1];
						imnum = groups[new_group_id].length-1;
					}
					else
					{
						// go forwards
						imnum = 1;
						new_group_id = group_ids[g+1];
					}
				}
				break;
			}
		}
	}

	if(new_group_id > 0)
	{
		group_id = new_group_id;
	}

	if(group_types[group_id] == "comparison-gallery")
	{
		slideGroup(1, "pc", 1);
		resetFrame("image-"+group_id+"-1");
	}
	else
	{
		// check slides are set up
		if( groups != undefined && current_slide != undefined )
		{
			var num = groups[group_id].length - 1; // xslt starts the shots at 1
			if(num > 0)
			{
				if(imnum < 1)
				{
					current_slide = num + imnum;
				}
				else if(imnum > num)
				{
					current_slide = imnum - num;
				}
				else
				{
					current_slide = imnum;
				}

				// create blanket
				$("blanket").style.display = "block";

				// calculate frame offset
				if($(element))
				{
					resetFrame(element);
				}
				else
				{
					resetFrame("image-"+group_id+"-"+current_slide);
				}

				// switch the image out
				newImg = groups[group_id][current_slide];
				if(newImg != undefined)
				{
					var width;
					var height;
					var source;

					if(mode == "large")
					{
						// because we're in fullscreen mode, we
						// need to center the image
						centre = true;

						width = newImg[2];
						height= newImg[3];

						source = pathify(newImg[0] + "?slideshow=true");
					}
					else
					{
						centre = false;

						width = calculateDimension("width", newImg[2], newImg[3]);
						height= calculateDimension("height", newImg[2], newImg[3]);

						source = pathify(newImg[1] + "?slideshow=true");
					}

					setViewer(source, width, height, centre);
				}
			}
		}
	}
	return false;
}

function setSpinner(width)
{
	//$("spinner").style.left = ((width/2) - 24) + "px";
	$("spinner").style.display = "block";
}

function hideSpinner()
{
	$("spinner").style.display = "none";
}

function setViewer(source, width, height, centre)
{
	$("view-full").href = source;

	setSpinner(width);
	viewer = $("mrbigshot");
	viewer.onload = function()
	{
		hideSpinner();

		var gutter = 0;

		if(centre)
		{
			var browser = document.body.offsetWidth;
			if(width > browser)
			{
				// image is wider than the browser,
				// so align it to the left.
				gutter = "-" + ((document.body.offsetWidth - 980) / 2);
			}
			else
			{
				// lets centre the image.
				gutter = (690 - width) / 2;
			}
			$("frame").style.left = gutter + "px";
		}
		else
		{
			$("frame").style.left = "119px";
		}
		return true;
	}
	viewer.src = source;
}

function calculateDimension(direction, width, height)
{
	if(height > width)
	{
		width = Math.floor(width * 640 / height);
		height = 640;
	}
	else
	{
		height = Math.floor(height * 640 / width);
		width = 640;
	}
	if(direction == "width") return width;
	if(direction == "height") return height;
	return 0;
}

function pathify( im )
{
	if(im.match(/^http:/ ))
	{
		return im;
	}
	else
	{
		return "http://images.eurogamer.net/" + im
	}
}

function showOriginal()
{
	if(group_types[current_group_id] == "comparison-gallery" || mode == "comparison")
	{
		for(i = 0; i < groups[current_group_id][current_slide].length; i++)
		{
			if(groups[current_group_id][current_slide][i] != undefined)
			{
				newImg = groups[current_group_id][current_slide][i]
				break;
			}
		}
	}
	else
	{
		newImg = groups[group_id][ current_slide ];
	}

	centre = true;


	source	= pathify(newImg[0]);
	width	= newImg[2];
	height	= newImg[3];

	setViewer(source, width, height, centre);

	mode = "large";

	largeLink();
}

function showSmall()
{
	if(current_group_id > 0)
	{
		for(i = 0; i < groups[current_group_id][current_slide].length; i++)
		{
			if(groups[current_group_id][current_slide][i] != undefined)
			{
				newImg = groups[current_group_id][current_slide][i]
				break;
			}
		}
	}
	else
	{
		newImg = groups[group_id][ current_slide ];
	}

	centre = false;

	source	= pathify(newImg[1]);
	width	= calculateDimension("width", newImg[2], newImg[3]);
	height	= calculateDimension("height", newImg[2], newImg[3]);

	setViewer(source, width, height, centre);

	mode = "normal";

	smallLink();
}

function largeLink()
{
	$("view-switcher-large").style.display = "none";
	$("view-switcher-small").style.display = "block";
}

function smallLink()
{
	$("view-switcher-small").style.display = "none";
	$("view-switcher-large").style.display = "block";
}

function cancelSlides()
{
	$("top-tabs").style.zIndex = 1;
	$("nav").style.zIndex = 1;
	$("banner").style.zIndex = 1;

	resetThumbnails();
	killButtons();

	$("blanket").style.display	= "none";
	$("frame").style.display	= "none";
	$("anchor").style.display	= "none";

	$("extra").setAttribute("class", "");
	$("extra").setAttribute("className", "");

	mode	= "normal";
	centre	= false;

	smallLink();
}

/* ---- Thumbnail helpers --------------------------------- */

// used to hide the duplicate thumbnail images that are
// generated by comparison galleries
function hideComparisonThumbs()
{
	var positions = new Array();
	var images = getElementsByClass("comparison-frame");
	for(i = 0; i < images.length; i++)
	{
		var position = images[i].className.match(/\d+/);
		if(positions[position] == undefined)
		{
			// leave the first one visible
			positions[position] = "ok";
		}
		else
		{
			// hide the rest
			images[i].style.display = "none";
		}
	}
}

function resetThumbnails()
{
	var images = getElementsByClass("frame|comparison-frame");

	for(i = 0; i < images.length; i++)
	{
		images[i].style.zIndex = "0";
		images[i].style.border = "0";
		images[i].style.margin = "0px 4px 4px 0px";
	}
}

/* ---- Button functions ---------------------------------- */

function createButtons(real_group_id, group_id)
{
	for(i = 0; i < groups[real_group_id][group_id].length; i++)
	{
		if(groups[real_group_id][group_id][i] != undefined)
		{
			createButton(real_group_id, group_id, groups[real_group_id][group_id][i][4], false);
		}
	}
}

function createButton(real_group_id, group_id, platform, highlight)
{
	if(platform != undefined)
	{
		var linky = document.createElement("a");
		linky.setAttribute("id", "comp-button-"+platform);
		linky.setAttribute("href", "javascript:findImage('"+real_group_id+"','"+group_id+"','"+platform+"')");
		linky.setAttribute("class", "button");
		linky.setAttribute("className", "button");

		$("slider").appendChild(linky);

		var button = document.createElement("img");
		button.setAttribute("id", "button-"+platform);

		button.setAttribute("onClick", "findImage('"+real_group_id+"','"+group_id+"','"+platform+"')");
		button.setAttribute("alt", "View " + platform + " version");
		button.setAttribute("title", "View " + platform + " version");

		$("comp-button-"+platform).appendChild(button);
		//$("slider").appendChild(button);

		switchButton(platform, highlight);
	}
}

function resetButtons(real_group_id, group_id)
{
	for(i = 0; i < groups[real_group_id][group_id].length; i++)
	{
		if(groups[real_group_id][group_id][i] != undefined)
		{
			switchButton(groups[real_group_id][group_id][i][4], false);
		}
	}
}

function killButtons()
{
	while($("comp-button-"))	$("slider").removeChild($("comp-button-"));
	while($("comp-button-ps3"))	$("slider").removeChild($("comp-button-ps3"));
	while($("comp-button-pc"))	$("slider").removeChild($("comp-button-pc"));
	while($("comp-button-360"))	$("slider").removeChild($("comp-button-360"));

	while($("comp-button-PS3"))	$("slider").removeChild($("comp-button-PS3"));
	while($("comp-button-PC"))	$("slider").removeChild($("comp-button-PC"));
	while($("comp-button-360"))	$("slider").removeChild($("comp-button-360"));

}

function switchButton(platform, highlight)
{
	if(highlight)
	{
		$("button-"+platform).setAttribute("src", "img/GalleryPage/button-"+platform+"-on.gif");
	}
	else
	{
		$("button-"+platform).setAttribute("src", "img/GalleryPage/button-"+platform+".gif");
	}
}

/* ---- Helper functions ---------------------------------- */

function getElementsByClass(searchClass,node,tag)
{
	var classElements = new Array();
	if ( node == null )
		node = document;
	if ( tag == null )
		tag = '*';
	var els = node.getElementsByTagName(tag);
	var elsLen = els.length;
	var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");

	for (i = 0, j = 0; i < elsLen; i++)
	{
		if(pattern.test(els[i].className))
		{
			classElements[j] = els[i];
			j++;
		}
	}
	return classElements;
}

function isArray(obj)
{
	if(obj.constructor.toString().indexOf("Array") == -1)
      	{
      		return false;
   	}
   	else
	{
		return true;
	}
}

/* ---- Keypress capturing -------------------------------- */

if( document.captureEvents && Event.KEYUP )
{
	document.captureEvents( Event.KEYUP );
}

document.onkeyup = alertkey;

function alertkey(e)
{
 	if($("frame").style.display == "block")
 	{
		if(!e)
		{
			if( window.event )
			{
				e = window.event;
			}
			else
			{
				return;
			}
		}

		if(typeof(e.keyCode) == "number")
		{
			e = e.keyCode;
		}
		else if(typeof(e.which) == "number")
		{
			e = e.which;
		}
		else if(typeof(e.charCode) == "number")
		{
			e = e.charCode;
		}
		else
		{
			return;
		}

		switch(e)
		{
			// minus
			case 109:
				showSmall();
			break;

			// plus
			case 107:
				showOriginal();
			break;

			// x, c, or esc
			case 27:
			case 88:
			case 67:
				cancelSlides();
			break;

			// left arrow
			case 37:
				rotateSlides(-1);
			break;

			// right arrow, space bar
			case 32:
			case 39:
				rotateSlides(1);
			break;
		}
	}
}