var xHRObject = false;
if (window.ActiveXObject) {
	xHRObject = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest){
	xHRObject = new XMLHttpRequest();
}

var arrowLeft_image_url = '<img src="images/web_images/arrow_left.gif" />';
var arrowRight_image_url = '<img src="images/web_images/arrow_right.gif" />';
var num_small_images_displayed = 0; //number of small images displayed 

	var response = false;
	var products_id = 0;
	var opt_id_used= 0;
	var selected_id = 0;
	var selected_pos = 0;
	var max_right = false;
	var max_left = true;
	var total_image = 0;
	
	var absolute_pos = 0;
	var absolute_left = 0;
	var absolute_right = num_small_images_displayed - 1;

function initGlobals() {
	num_small_images_displayed = document.getElementById('ais_image_num').value;
	response = false;
	products_id = 0;
	opt_id_used= 0;
	selected_id = 0;
	selected_pos = 0;
	max_right = false;
	max_left = true;
	total_image = 0;
	
	absolute_pos = 0;
	absolute_left = 0;
	absolute_right = num_small_images_displayed - 1;
}	
	
function hidestatus(){
window.status=''
return true
}

if (document.layers)
document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT)

document.onmouseover=hidestatus
document.onmouseout=hidestatus

function getData() {
	if (xHRObject.readyState == 4 && xHRObject.status == 200) {
        var serverResponse = xHRObject.responseXML;
		response = xHRObject.responseXML;
		if (serverResponse != null) {
			var itemsNode = serverResponse.getElementsByTagName('items');
			if (itemsNode.length > 0) {
				var attribute = itemsNode[0].attributes[0].value;
				if (attribute == 'loadImages') {
					var image_nav_container = document.getElementById('image_nav_container');
					image_nav_container.innerHTML = '';
					//draw the (blank) left arrow
					set_previous_arrow('');
					
					//set the first displayed small images
					var item_node = serverResponse.getElementsByTagName('item');
					var images_array = new Array();
					total_image = item_node.length;
					if (total_image <= num_small_images_displayed) {
						num_small_images_displayed = total_image;
						max_right = true;
					}
					for (i=0; i< total_image && i < num_small_images_displayed; i++) {
						var image_array = get_image_array(item_node[i]);
						images_array[i] = image_array;
					}
					set_small_images(images_array);
					
					//if there are more images, get the next image's id and use it to call function set_next_arrow(next_image_id);
					if (item_node.length > num_small_images_displayed) {
						if (window.ActiveXObject) {
							set_next_arrow(arrowRight_image_url);
						}
						else {
							set_next_arrow(arrowRight_image_url);
						}
					}
					else {
						set_next_arrow('');
					}
					
					//set the displayed image
					set_medium_image(images_array[0]);
				}
			}
		}
	}
}

function set_previous_arrow(image_url){
	var image_nav_container = document.getElementById('image_nav_container');
	if (image_url == '') {
		image_nav_container.innerHTML = '<a id="arrow_left" class="back">&nbsp</a>';	
	}
	else {
		image_nav_container.innerHTML = '<a id="arrow_left" href="javascript:viewPrevious()" class="back">' + image_url + '</a>';	
	}
}

function set_next_arrow(image_url){
	var image_nav_container = document.getElementById('image_nav_container');
	if (image_url == '') {
		image_nav_container.innerHTML += '<a id="arrow_right" class="forward">&nbsp</a>';
	}
	else {
		image_nav_container.innerHTML += '<a id="arrow_right" href="javascript:viewNext()" class="forward">' + image_url + '</a>';	
	}
}

/* Function set_small_images(images_array)
images_array example:
Array
([0] => Array
        ( [image_id] => 20
          [image_path_small] => images/Hyperlite_Boards/BYERLY_52.jpg)
 [1] => Array
        ( [image_id] => 25
          [image_path_small] => images/Hyperlite_Boards/Cartel141S.jpg) 
)
*/
function set_small_images(images_array) {
	var image_nav_container = document.getElementById('image_nav_container');
	for (i=0; i<images_array.length; i++) {
		image_nav_container.innerHTML += '<a title="' + images_array[i]['image_title'] + '" id="image_small-' + i + '" href="' + location.href + '" onclick="showMedium(' + images_array[i]['image_id'] + ', ' + i + ');return false;" class="back image_small" style="width:75px;height:75px;">' + '<img id="' + images_array[i]['image_id'] + '" src="' + images_array[i]['image_path_small'] + '" title="' + images_array[i]['image_title'] + '" width="' + images_array[i]['image_width_small'] + '" height="' + images_array[i]['image_height_small'] + '"/>' + '</a>';		
	}
}

function set_medium_image(image_array) {
	var image_medium_container = document.getElementById('image_medium_container');
	image_medium_container.innerHTML = '<a title="' + image_array['image_title'] + '" href="javascript:showLargeImage(\'' + image_array['image_path_large'] + '\',' + (parseInt(image_array['image_width_large'])+10) +',' + (parseInt(image_array['image_height_large'])+10) + ')">' + '<img id="image_medium" src="' + image_array['image_path_medium'] + '" title="' + image_array['image_title'] + '" width="' + image_array['image_width_medium'] + '" height="' + image_array['image_height_medium'] + '"/>' + '</a>';
}

function viewPrevious() {
	max_right = false;
	absolute_left--;
	absolute_right--;
	var small_image = new Array();
	for (var i=0;i<num_small_images_displayed;i++) {
		small_image[i] = document.getElementById('image_small-' + i);
	}

	var new_nodes = new Array();
	for (var i=0;i<num_small_images_displayed;i++) {
		new_nodes[i] = getItemNode('image_id',small_image[i].firstChild.id).previousSibling;
	}

	if (new_nodes[0].previousSibling) {
		set_previous_arrow(arrowLeft_image_url);
	}
	else {
		set_previous_arrow('');
		max_left = true;
	}
	
	var new_small_images_array = new Array();
	for (var i=0;i<num_small_images_displayed;i++) {
		new_small_images_array[i] = get_image_array(new_nodes[i]);
	}
	
	set_small_images(new_small_images_array);
	
	set_next_arrow(arrowRight_image_url);
}

function viewNext() {
	max_left = false;
	absolute_left++;
	absolute_right++;
	var small_image = new Array();
	for (var i=0;i<num_small_images_displayed;i++) {
		small_image[i] = document.getElementById('image_small-' + i);
	}

	var new_nodes = new Array();
	for (var i=0;i<num_small_images_displayed;i++) {
		new_nodes[i] = getItemNode('image_id',small_image[i].firstChild.id).nextSibling;
	}

	set_previous_arrow(arrowLeft_image_url);
	
	var new_small_images_array = new Array();
	for (var i=0;i<num_small_images_displayed;i++) {
		new_small_images_array[i] = get_image_array(new_nodes[i]);
	}
	
	set_small_images(new_small_images_array);
		
	if (new_nodes[num_small_images_displayed-1].nextSibling) {
		set_next_arrow(arrowRight_image_url);
	}
	else {
		set_next_arrow('');
		max_right = true;
	}
	
}

function get_image_array(itemNode) {
	var image_ids_node = itemNode.getElementsByTagName('image_id');
	var image_paths_small_node = itemNode.getElementsByTagName('image_path_small');
	var image_width_small_node = itemNode.getElementsByTagName('image_width_small');
	var image_height_small_node = itemNode.getElementsByTagName('image_height_small');
	
	var image_paths_medium_node = itemNode.getElementsByTagName('image_path_medium');
	var image_width_medium_node = itemNode.getElementsByTagName('image_width_medium');
	var image_height_medium_node = itemNode.getElementsByTagName('image_height_medium');
	
	var image_paths_large_node = itemNode.getElementsByTagName('image_path_large');
	var image_width_large_node = itemNode.getElementsByTagName('image_width_large');
	var image_height_large_node = itemNode.getElementsByTagName('image_height_large');
	
	var image_titles_node = itemNode.getElementsByTagName('image_title');
	
	var image_array = new Array();
	var i = 0;
	if (window.ActiveXObject) {	
		image_array['image_id'] = image_ids_node[i].text;
		
		image_array['image_path_small'] = image_paths_small_node[i].text;
		image_array['image_width_small'] = image_width_small_node[i].text;
		image_array['image_height_small'] = image_height_small_node[i].text;
		
		image_array['image_path_medium'] = image_paths_medium_node[i].text;
		image_array['image_width_medium'] = image_width_medium_node[i].text;
		image_array['image_height_medium'] = image_height_medium_node[i].text;
		
		image_array['image_path_large'] = image_paths_large_node[i].text;
		image_array['image_width_large'] = image_width_large_node[i].text;
		image_array['image_height_large'] = image_height_large_node[i].text;
		
		image_array['image_title'] = image_titles_node[i].text;
	}
	else {
		image_array['image_id'] = image_ids_node[i].textContent;
		image_array['image_path_small'] = image_paths_small_node[i].textContent;
		image_array['image_width_small'] = image_width_small_node[i].textContent;
		image_array['image_height_small'] = image_height_small_node[i].textContent;
		
		image_array['image_path_medium'] = image_paths_medium_node[i].textContent;
		image_array['image_width_medium'] = image_width_medium_node[i].textContent;
		image_array['image_height_medium'] = image_height_medium_node[i].textContent;
		
		image_array['image_path_large'] = image_paths_large_node[i].textContent;
		image_array['image_width_large'] = image_width_large_node[i].textContent;
		image_array['image_height_large'] = image_height_large_node[i].textContent;
		
		image_array['image_title'] = image_titles_node[i].textContent;
	}
	
	return image_array;
}

function loadImages() {
	initGlobals();
	var image_medium_container = document.getElementById('image_medium_container');
	products_id = document.getElementById('products_id').value;
	opt_id_used = document.getElementById('opt_id_used').value;
	
	image_medium_container.innerHTML = '<img src="images/web_images/indicator.gif" style="margin-top:145px" />';	
//combo box
	if (document.getElementById('attrib-' + opt_id_used)) {
		var option_used = document.getElementById('attrib-' + opt_id_used);
		var options_values_id = option_used.value;
		//option_used.onchange = 'loadImages(' + products_id + ', ' + opt_id_used + ')';
		//option_used.setAttribute('onchange','loadImages(' + products_id + ', ' + opt_id_used + ')');
		if (option_used.attachEvent) {
			option_used.attachEvent('onchange',loadImages);
		}
		else {
			option_used.setAttribute('onchange','loadImages()');
		}
	}
//radio button
	else {
		var option_used = document.forms['cart_quantity'].elements['id[' + opt_id_used + ']'];
		var options_values_id = getCheckedValue(option_used);
		for (i=0;i<option_used.length;i++) {
			//option_used[i].onchange = 'loadImages(' + products_id + ', ' + opt_id_used + ')';
			//option_used[i].setAttribute('onchange','loadImages(' + products_id + ', ' + opt_id_used + ')');
			if (option_used.attachEvent) {
				option_used[i].attachEvent('onchange',loadImages);
			}
			else {
				option_used[i].setAttribute('onchange','loadImages()');
			}
		}
	}
	
	if (window.ActiveXObject) {
		xHRObject.open("GET","AJAX_servers/AJAX_image_swapper_server.php?action=loadImages&products_id=" + products_id + "&options_id=" + opt_id_used + "&options_values_id=" + options_values_id + "&id=" + Number(new Date), true);	
		xHRObject.onreadystatechange = getData;
	}
	else if (window.XMLHttpRequest){
		xHRObject.onreadystatechange = getData;
		xHRObject.open("GET","AJAX_servers/AJAX_image_swapper_server.php?action=loadImages&products_id=" + products_id + "&options_id=" + opt_id_used + "&options_values_id=" + options_values_id + "&id=" + Number(new Date), true);	
	}
	xHRObject.send(null);
}

function showMedium(image_id, pos) {
	var image_medium_container = document.getElementById('image_medium_container');
	image_medium_container.innerHTML = '<img src="images/web_images/indicator.gif" style="margin-top:145px" />';	
	
	selected_id = image_id;
	selected_pos = pos;
	
	absolute_pos = absolute_left + pos;
//	alert(absolute_pos);
	
	var image_array = new Array();

	var node = getItemNode('image_id', image_id);

	var image_ids_node = node.getElementsByTagName('image_id');
	
	var image_paths_medium_node = node.getElementsByTagName('image_path_medium');
	var image_width_medium_node = node.getElementsByTagName('image_width_medium');
	var image_height_medium_node = node.getElementsByTagName('image_height_medium');
	
	var image_paths_large_node = node.getElementsByTagName('image_path_large');
	var image_width_large_node = node.getElementsByTagName('image_width_large');
	var image_height_large_node = node.getElementsByTagName('image_height_large');
	
	var image_titles_node = node.getElementsByTagName('image_title');
					
	if (window.ActiveXObject) {	
		image_array['image_id'] = image_ids_node[0].text;
		
		image_array['image_path_medium'] = image_paths_medium_node[0].text;
		image_array['image_width_medium'] = image_width_medium_node[0].text;
		image_array['image_height_medium'] = image_height_medium_node[0].text;
		
		image_array['image_path_large'] = image_paths_large_node[0].text;
		image_array['image_width_large'] = image_width_large_node[0].text;
		image_array['image_height_large'] = image_height_large_node[0].text;
		
		image_array['image_title'] = image_titles_node[0].text;
	}
	else {
		image_array['image_id'] = image_ids_node[0].textContent;
		
		image_array['image_path_medium'] = image_paths_medium_node[0].textContent;
		image_array['image_width_medium'] = image_width_medium_node[0].textContent;
		image_array['image_height_medium'] = image_height_medium_node[0].textContent;
		
		image_array['image_path_large'] = image_paths_large_node[0].textContent;
		image_array['image_width_large'] = image_width_large_node[0].textContent;
		image_array['image_height_large'] = image_height_large_node[0].textContent;
		
		image_array['image_title'] = image_titles_node[0].textContent;
	}
	set_medium_image(image_array);
	return image_array;

}

function getItemNode(element, value) {
	if (xHRObject.readyState == 4 && xHRObject.status == 200) {
		var item_nodes = response.getElementsByTagName('item');
		var element_nodes = response.getElementsByTagName(element);
		for (i=0;i<element_nodes.length;i++) {
			var textValue = '';
			if (window.ActiveXObject) {	
				textValue = element_nodes[i].text;
			}
			else {
				textValue = element_nodes[i].textContent;
			}
			if (textValue == value) {
				return item_nodes[i];
			}
		}
	}
	else {
		return '';
	}
}

function largeNext() {
	//alert('max_left = ' + max_left + '\nmax_right = ' + max_right);
	if (max_right == false) {
		//max_left = false;
		if (selected_pos == num_small_images_displayed - 1) {
			viewNext();
			selected_pos = num_small_images_displayed - 2;
		}
	}
	//even if max_right = true, if the image selected is not the rightmost, can still view next image
	//alert('selected_pos = ' + selected_pos + '\nnum_small_images_displayed = ' + num_small_images_displayed + '\nmax_right = ' + max_right )
	if (selected_pos < num_small_images_displayed - 1 || max_right == false) {
		absolute_pos++;
		var next_image_id = document.getElementById('image_small-' + (selected_pos + 1)).firstChild.id;
		var image_array = showMedium(next_image_id,selected_pos + 1);

		set_medium_image(image_array)
		var image_medium_container = document.getElementById('image_medium_container');

		var url = image_array['image_path_large'];
		var width = parseInt(image_array['image_width_large'])+10; 
		var height = parseInt(image_array['image_height_large'])+10;
		
		var pos = document.getElementById('large_pos');
		pos.innerHTML = (absolute_pos + 1) + ' / ' + total_image;

		switch_large_image(url, width, height);
	}
}

function largePrev() {
	//alert('max_left = ' + max_left + '\nmax_right = ' + max_right);
	if (max_left == false) { 
		//max_right = false;
		if (selected_pos == 0) {
			viewPrevious();
			selected_pos = 1;
		}
	}
	//even if max_left = true, if the image selected is not the leftmost, can still view prev image
	if (selected_pos > 0 || max_left == false) {
		absolute_pos--;
		var prev_image_id = document.getElementById('image_small-' + (selected_pos - 1)).firstChild.id;
		var image_array = showMedium(prev_image_id,selected_pos - 1);

		set_medium_image(image_array)
		var image_medium_container = document.getElementById('image_medium_container');

		var url = image_array['image_path_large'];
		var width = parseInt(image_array['image_width_large'])+10; 
		var height = parseInt(image_array['image_height_large'])+10;
		
		var pos = document.getElementById('large_pos');
		pos.innerHTML = (absolute_pos + 1) + ' / ' + total_image;
		
		switch_large_image(url, width, height);
	}
}

function switch_large_image(url, width, height) {
	document.getElementById('productinfoBody').removeChild(document.getElementById('large_image_viewer')); 
	showLargeImage(url, width, height);
}

function showLargeImage(url, width, height) {
	var body = document.getElementById('productinfoBody');
	
	if(window.pageYOffset) {
		var screen_top = window.pageYOffset;
	}
	else {
		var screen_top = document.documentElement.scrollTop;
	}
	
	var nav_extra = 10;
	var nav_top = screen_top + nav_extra;
	var nav_height = 31;
	var availHeight = screen.availHeight - nav_height - nav_extra;
	
	if (availHeight > height) {
		var extraTop = (availHeight/2 - height/2) - 50;
	}
	else {
		var extraTop = nav_height + nav_extra + 40;
	}
	
	var top = screen_top + extraTop + 30;
	var left = screen.width/2 - width/2;
	var opacity = 70;
	
	var docWidth = document.body.clientWidth;
	var docHeight = document.body.clientHeight;

	if (document.getElementById('large_image_navigator') == null) {
		var table = Builder.node('table', {width:'100%',style:'border-collapse:collapse;'});
		var tr = Builder.node('tr');
		var td_title = Builder.node('td', {id:"td_title", width:'80%'});
		var td_next_prev = Builder.node('td', {width:'15%'});
		var td_close = Builder.node('td', {width:'5%'});
		var tbody = Builder.node('tbody');
		var title = Builder.node('span',{id:'image_title'},document.getElementById('image_medium').title);
		var prev = Builder.node('img',{id:'large_prev', onclick:'largePrev()', src:'images/web_images/prev.gif', title:'Previous Picture'});
		var next = Builder.node('img',{id:'large_next', onclick:'largeNext()', src:'images/web_images/next.gif', title:'Next Picture'});	
		var pos = Builder.node('span',{id:'large_pos'}, (absolute_pos + 1) + ' / ' + total_image);
		var next_prev_container = Builder.node('div',{id:'next_prev_container'});
		var close = Builder.node('img', {id:'large_close', onclick:'largeNext()', src:'images/web_images/close.gif', onclick:'hideLargeImage()', title:'Close'});	

		next_prev_container.appendChild(prev);
		next_prev_container.appendChild(pos);
		next_prev_container.appendChild(next);	

		td_title.appendChild(title);
		td_next_prev.appendChild(next_prev_container);
		td_close.appendChild(close);
		tr.appendChild(td_title);
		tr.appendChild(td_next_prev);
		tr.appendChild(td_close);
		tbody.appendChild(tr);
		table.appendChild(tbody);

		var navigator = Builder.node('div', {id:'large_image_navigator', style:'width: ' + docWidth + 'px; height: ' + nav_height + 'px; top:' + nav_top + 'px;'});
		navigator.appendChild(table);
		var eventBlocker = Builder.node('div',{id:'eventBlocker',style:'width:' + docWidth + 'px; height:' + docHeight + 'px; opacity:.' + opacity + '; filter: alpha(opacity=' + opacity + '); z-order:1000;'});
		body.appendChild(eventBlocker);
		var go_nav = 1;
	}
	else {
		var navigator = document.getElementById('large_image_navigator');
		var old_title =  document.getElementById('image_title');
		var old_title_parent =  old_title.parentNode;
		var new_title = Builder.node('span',{id:'image_title'},document.getElementById('image_medium').title);
		old_title_parent.replaceChild(new_title, old_title);
		body.removeChild(navigator);
	}
		
	var viewer = Builder.node('a',{style:'text-align:center; position:absolute; top:' + top + 'px; left:' + left + 'px; display:block; width:' + width + 'px; height:' + height +'px; z-order:1001;',id:'large_image_viewer',name:'large_image_viewer'}, '');
	var image_loader = Builder.node('img',{id:'image_loader',src:'images/web_images/indicator2.gif',onload:'changeImage("' + url + '")'});
	viewer.appendChild(image_loader);	
	body.appendChild(viewer);
	body.appendChild(navigator);	



	if (go_nav == 1) {
		if (window.attachEvent) {
			window.attachEvent('onscroll',scrollEvent);
		}
		else {
			window.addEventListener('scroll',scrollEvent,false);
		}
	}
//	window.setTimeout("document.getElementById('large_image_viewer').style.display = 'block'",1000);
	
}

function scrollEvent() {
	var navigator = document.getElementById('large_image_navigator');
	if(window.pageYOffset) {
		var top = window.pageYOffset;
	}
	else {
		var top = document.documentElement.scrollTop;
	}
	navigator.style.top = top + 10 + 'px';
}

function changeImage(image_url) {
	document.getElementById('large_image_viewer').style.display = 'none';
	var image = Builder.node('img',{id:'large_image',src:image_url});
	var viewer = document.getElementById('large_image_viewer');
	var image_loader = document.getElementById('image_loader');
	viewer.removeChild(image_loader);
	viewer.appendChild(image);
	
	window.setTimeout("document.getElementById('large_image_viewer').style.display = 'block'",500);
	Effect.BlindDown('large_image_viewer');
}

function hideLargeImage() {
	if (window.detachEvent) {
		window.detachEvent('onscroll', scrollEvent);
	}
	else {
		window.removeEventListener('scroll', scrollEvent, false);
	}
	var image_viewer = document.getElementById('large_image_viewer');
	Effect.Fade('large_image_viewer');
	Effect.Fade('large_image_navigator');
	
	window.setTimeout("document.getElementById('productinfoBody').removeChild(document.getElementById('large_image_navigator')); document.getElementById('productinfoBody').removeChild(document.getElementById('large_image_viewer')); document.getElementById('productinfoBody').removeChild(document.getElementById('eventBlocker'));",1300);
	//new Effect.Puff(this); window.setTimeout('Effect.Appear(\'demo-effect-puff\', {duration:.3})',2500);
	
	
}

function popupWindowTemp(url, width, height) {
  //window.open(url,'popupWindow','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=yes,copyhistory=no,width=' + width + ',height=' + height + ',screenX=150,screenY=150,top=150,left=150');
}

// return the value of the radio button that is checked
// return an empty string if none are checked, or
// there are no radio buttons
function getCheckedValue(radioObj) {
	if(!radioObj)
		return "";
	var radioLength = radioObj.length;
	if(radioLength == undefined)
		if(radioObj.checked)
			return radioObj.value;
		else
			return "";
	for(var i = 0; i < radioLength; i++) {
		if(radioObj[i].checked) {
			return radioObj[i].value;
		}
	}
	return "";
}

// set the radio button with the given value as being checked
// do nothing if there are no radio buttons
// if the given value does not exist, all the radio buttons
// are reset to unchecked
function setCheckedValue(radioObj, newValue) {
	if(!radioObj)
		return;
	var radioLength = radioObj.length;
	if(radioLength == undefined) {
		radioObj.checked = (radioObj.value == newValue.toString());
		return;
	}
	for(var i = 0; i < radioLength; i++) {
		radioObj[i].checked = false;
		if(radioObj[i].value == newValue.toString()) {
			radioObj[i].checked = true;
		}
	}
}