var images_array = new Array();
var active_image = 0;

var xmlhttp;

function open_images(group)
{
images_array = new Array();
active_image = 0;
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
  {
  alert ("Browser does not support HTTP Request");
  return;
  }
var url="http://www.atlas-psi.nl/xml_images.php";
url = url + '?group=' + group;
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}

function stateChanged(){
	if (xmlhttp.readyState==4){
		if (xmlhttp.status == 200){
			var xmlDoc = xmlhttp.responseXML;
			var images = xmlDoc.getElementsByTagName('IMAGE');
			for (var x=0; x<images.length; x++) {
				images_array[x] = new Array();
				images_array[x][0] = images[x].getElementsByTagName("LOCATION")[0].childNodes[0].nodeValue;
				images_array[x][1] = images[x].getElementsByTagName("WIDTH")[0].childNodes[0].nodeValue;
				images_array[x][2] = images[x].getElementsByTagName("HEIGHT")[0].childNodes[0].nodeValue;
				images_array[x][3] = images[x].getElementsByTagName("ALT")[0].childNodes[0].nodeValue;
			}
			var image_width = images_array[active_image][1];
			var image_height = images_array[active_image][2];
			document.getElementById('image_overlay').style.display = 'block';
			document.getElementById('image_box').style.display = 'block';
			show_overlay()
			tween_width(image_width,image_height);
			document.getElementById('image_image').innerHTML = '<img id="active_image" src="' + images_array[active_image][0] + '" />';
			document.getElementById('image_caption').innerHTML = '<span id="image_caption_text" >' + images_array[active_image][3] + '<span/>';
		}
	}
}

function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  return new XMLHttpRequest();
  }
if (window.ActiveXObject)
  {
  // code for IE6, IE5
  return new ActiveXObject("Microsoft.XMLHTTP");
  }
return null;
}

function show_overlay(){
	var overlay = new OpacityTween(document.getElementById('image_overlay'),Tween.regularEaseOut, 0, 75, 1);
	overlay.start();
}

function tween_width(end_width,end_height){
	var current_width = parseInt(document.getElementById('image_container').style.width);
	var current_height = parseInt(document.getElementById('image_container').style.height);
	var my_seq = new Parallel();
	my_seq.addChild(new Tween(document.getElementById('image_container').style,'width',Tween.regularEaseOut,current_width,end_width,1,'px'));
	my_seq.addChild(new Tween(document.getElementById('image_container').style,'height',Tween.regularEaseOut,current_height,end_height,1,'px'));
	my_seq.onMotionFinished = function(){
		document.getElementById('active_image').style.display = 'block';
		document.getElementById('image_caption_text').style.display = 'block';
		document.getElementById('close_images_button').style.display = 'block';
		var image_opacity = new Parallel();
		image_opacity.addChild(new OpacityTween(document.getElementById('close_images_button'),Tween.regularEaseOut, 0, 100, 1));
		image_opacity.addChild(new OpacityTween(document.getElementById('active_image'),Tween.regularEaseOut, 0, 100, 1));
		image_opacity.addChild(new OpacityTween(document.getElementById('image_caption_text'),Tween.regularEaseOut, 0, 100, 1));
		image_opacity.start();
		check_nav();
		};
	my_seq.start();
}

function check_nav(){
	if(active_image <= 0){
		document.getElementById('previous_image_button').style.display = 'none';
	}
	else{
		document.getElementById('previous_image_button').style.display = 'block';
		var previous_opacity = new OpacityTween(document.getElementById('previous_image_button'),Tween.regularEaseOut, 0, 100, 1);
		previous_opacity.start();
	}
	
	if(active_image >= (images_array.length-1)){
		document.getElementById('next_image_button').style.display = 'none';
	}
	else{
		document.getElementById('next_image_button').style.display = 'block';
		var next_opacity = new OpacityTween(document.getElementById('next_image_button'),Tween.regularEaseOut, 0, 100, 1);
		next_opacity.start();
	}
}

function next_image(){
	document.getElementById('close_images_button').style.display = 'none';
	document.getElementById('next_image_button').style.display = 'none';
	document.getElementById('previous_image_button').style.display = 'none';
	document.getElementById('active_image').style.display = 'none';
	document.getElementById('image_caption_text').style.display = 'none';
	active_image++;
	var image_width = images_array[active_image][1];
	var image_height = images_array[active_image][2];
	tween_width(image_width,image_height);
	document.getElementById('image_image').innerHTML = '<img id="active_image" src="' + images_array[active_image][0] + '" />';
	document.getElementById('image_caption').innerHTML = '<span id="image_caption_text" >' + images_array[active_image][3] + '<span/>';
}

function previous_image(){
	document.getElementById('close_images_button').style.display = 'none';
	document.getElementById('next_image_button').style.display = 'none';
	document.getElementById('previous_image_button').style.display = 'none';
	document.getElementById('active_image').style.display = 'none';
	document.getElementById('image_caption_text').style.display = 'none';
	active_image--;
	var image_width = images_array[active_image][1];
	var image_height = images_array[active_image][2];
	tween_width(image_width,image_height);
	document.getElementById('image_image').innerHTML = '<img id="active_image" src="' + images_array[active_image][0] + '" />';
	document.getElementById('image_caption').innerHTML = '<span id="image_caption_text" >' + images_array[active_image][3] + '<span/>';
}

function open_gallery(id){
	images_array = new Array();
	
	active_image = id;
	
	all_images = document.getElementById('product_page_images').getElementsByTagName('img');
	
	for (var x=0; x<all_images.length; x++) {
		current_image = new Image();
		current_image.src = all_images[x].src;
		images_array[x] = new Array();
		images_array[x][0] = all_images[x].src;
		images_array[x][1] = current_image.width;
		images_array[x][2] = current_image.height;
		images_array[x][3] = all_images[x].alt;
	}
	var image_width = images_array[active_image][1];
	var image_height = images_array[active_image][2];
	document.getElementById('image_overlay').style.display = 'block';
	document.getElementById('image_box').style.display = 'block';
	show_overlay()
	tween_width(image_width,image_height);
	document.getElementById('image_image').innerHTML = '<img id="active_image" src="' + images_array[active_image][0] + '" />';
	document.getElementById('image_caption').innerHTML = '<span id="image_caption_text" >' + images_array[active_image][3] + '<span/>';
}

function close_images(){
	document.getElementById('image_box').style.display = 'none';
	document.getElementById('close_images_button').style.display = 'none';
	document.getElementById('next_image_button').style.display = 'none';
	document.getElementById('previous_image_button').style.display = 'none';
	document.getElementById('active_image').style.display = 'none';
	document.getElementById('image_caption_text').style.display = 'none';
	var image_opacity = new Parallel();
		image_opacity.addChild(new OpacityTween(document.getElementById('image_overlay'),Tween.regularEaseOut, 75, 0, 1));
		image_opacity.onMotionFinished = function(){
			document.getElementById('image_overlay').style.display = 'none';
		}
		image_opacity.start();
}