//Cross Sectional Anatomy (XSA) Javascript Code
//The XSA Project was developed by Brett Scherer and Patricia Tew
//Javascript, CSS, and the Graphical Interface was developed by Brett Scherer

var region = "bony_head";						//stores the body region being viewed
var imagesfolder = "images/" + region + "/";	//location of the images folder
var prefix = region;							//first part of the image name being viewed
var suffix = ".jpg";							//last part of the image name being viewed
var high = 20;									//number of images in the region
var low = 1;									//lowest numbered image in the series
var num = 1;									//current image number being viewed
preloadedImage = new Image();					//placeholder for preloading images
var isIE = true;								//flag to determine if user is using IE
var isSafari = false;
var OS = "";									//flag to determine OS type
var menuflag = true;
var spacer = "";

function mainmenu()
{
	//hoverlabels("menu");	//hide hover labels
	//updatesideview("menu");	//hide side bar
	
	menuflag = true;
	
	if(isIE)
	{
		document.all.controlmask.style.visibility = "visible";
		document.all.regionbox.style.visibility = "visible";
		document.all.gobutton.style.visibility = "visible";
		document.all.views.style.visibility = "visible";
		document.all.region.style.visibility = "visible";
		document.all.skeleton.style.visibility = "visible";
		document.all.bar.style.visibility = "hidden";
	}
	else
	{
		document.getElementById('controlmask').style.visibility = "visible";
		document.getElementById('regionbox').style.visibility = "visible";
		document.getElementById('gobutton').style.visibility = "visible";
		document.getElementById('views').style.visibility = "visible";
		document.getElementById('views').style.top = "175px";
		
		document.getElementById('region').style.visibility = "visible";
		document.getElementById('skeleton').style.visibility = "visible";
		document.getElementById('bar').style.visibility = "hidden";
	}	
	
	changesection("menu");
	//managelist("head");

	document.images.skel.src="images/interface/skeleton_anim.gif";
}

function managelist(view)
{
	document.navform.menu.length = 0;
		
	if(view == "head")
	{
		var head = new Array("Demo Version:","CT Facial Bones Coronal","",spacer,"","Full Version:","CT Cranium Axial","CT Brain Axial","CT Facial Bones Axial","MR Brain Axial","MR Brain Coronal","MR Brain Sagittal");
		var head_data = new Array("#","ctsinus:29:rl","#","#","#","#","#","#","#","#","#","#");

		if(isIE)	//use this method of moving the region box
		{
			document.all.regionbox.style.top = 140 + "px";
		}
		else		//use this method of moving the region box for browsers other than IE
		{			
			document.getElementById('regionbox').style.top = 140 + "px";
		}

		for(var i=0; i<head.length; i++)
		{
			document.navform.menu[i] = new Option(head[i],head_data[i],false,false);
		}
		//document.navform.menu[i] = new Option(spacer,"#",false,false);
	}
	else if(view == "neck")
	{
		var neck = new Array("CT Neck Axial","CT Neck Coronal",spacer);
		var neck_data = new Array("ct_neck_axial:32:rl","ct_neck_cor:29:rl","#");

		if(isIE)	//use this method of moving the region box
		{
			document.all.regionbox.style.top = 170 + "px";
		}
		else		//use this method of moving the region box for browsers other than IE
		{			
			document.getElementById('regionbox').style.top = 170 + "px";
		}
		
		for(var i=0; i<neck.length; i++)
		{
			document.navform.menu[i] = new Option(neck[i],neck_data[i],false,false);
		}
		//document.navform.menu[i] = new Option(spacer,"#",false,false);
	}
	else if(view == "thorax")
	{
		var thorax = new Array("CT Thorax Lung Windows Ax","CT Thorax Soft Tissue Axial",spacer);
		var thorax_data = new Array("ct_thorax_lung_windows:14:rl","ct_thorax_st_ax:44:rl","#");

		if(isIE)	//use this method of moving the region box
		{
			document.all.regionbox.style.top = 200 + "px";
		}
		else		//use this method of moving the region box for browsers other than IE
		{			
			document.getElementById('regionbox').style.top = 200 + "px";
		}


		for(var i=0; i<thorax.length; i++)
		{
			document.navform.menu[i] = new Option(thorax[i],thorax_data[i],false,false);
		}
		//document.navform.menu[i] = new Option(spacer,"#",false,false);
	}
	else if(view == "abdomen")
	{
		var abdomen = new Array("CT Abdomen Axial","CT Abd/Pelv Coronal Female","CT Abd/Pelv Coronal Male",spacer,"MR Abdomen Coronal");
		var abdomen_data = new Array("ct_abpelv_celiac:49:rl","ct_abpelv_cor_female:36:rl","ct_abpelv_cor_male:34:rl","#","mri_abdomen_coronal:29:rl");
		
		if(isIE)	//use this method of moving the region box
		{
			document.all.regionbox.style.top = 230 + "px";
		}
		else		//use this method of moving the region box for browsers other than IE
		{			
			document.getElementById('regionbox').style.top = 230 + "px";
		}
		
		for(var i=0; i<abdomen.length; i++)
		{
			document.navform.menu[i] = new Option(abdomen[i],abdomen_data[i],false,false);
		}
		//document.navform.menu[i] = new Option(spacer,"#",false,false);
	}
	else if(view == "spine")
	{
		var spine = new Array("CT Cervical Spine Axial","CT Cervical Spine Coronal","CT Cervical Spine Sagittal","CT Lumbar Spine Axial","CT Thoracic Spine Axial","CT T / L Spine Sagittal",spacer,"MR C / T Spine Sagittal","MR Lumbar Spine Sagittal");
		var spine_data = new Array("ct_cspine_ax:24:rl","ct_cspine_cor:21:rl","ct_cspine_sag:21:pa","ct_lumbar:37:rl","ct_thorspine_ax:12:rl","ct_tlspine_sag:22:ap","#","mri_spine_c_t_sagittal:12:ap","mri_spine_l_sagittal:12:ap");
		if(isIE)	//use this method of moving the region box
		{
			document.all.regionbox.style.top = 290 + "px";
		}
		else		//use this method of moving the region box for browsers other than IE
		{			
			document.getElementById('regionbox').style.top = 290 + "px";
		}
				
		for(var i=0; i<spine.length; i++)
		{
			document.navform.menu[i] = new Option(spine[i],spine_data[i],false,false);
		}
		//document.navform.menu[i] = new Option(spacer,"#",false,false);
	}
	else if(view == "pelvis")
	{
		var pelvis = new Array("Demo Version:","CT Pelvis Axial Female","",spacer,"","Full Version:","CT Bony Pelvis Axial","CT Pelvis Axial Male");
		var pelvis_data = new Array("#","ct_pelvis_female:18:rl","#","#","#","#","#","#");
		
		if(isIE)	//use this method of moving the region box
		{
			document.all.regionbox.style.top = 260 + "px";
		}
		else		//use this method of moving the region box for browsers other than IE
		{			
			document.getElementById('regionbox').style.top = 260 + "px";
		}
		
		for(var i=0; i<pelvis.length; i++)
		{
			document.navform.menu[i] = new Option(pelvis[i],pelvis_data[i],false,false);
		}
		//document.navform.menu[i] = new Option(spacer,"#",false,false);
	}
	else if(view == "upperextremity")
	{
		var upperextremity = new Array("CT Shoulder Axial","CT Shoulder Coronal","CT Shoulder Sagittal","CT Wrist Axial","CT Wrist Coronal","CT Wrist Sagittal",spacer,"MR Elbow Axial","MR Elbow Coronal","MR Elbow Sagittal","MR Shoulder Axial","MR Shoulder Coronal","MR Wrist Axial","MR Wrist Coronal");
		var upperextremity_data = new Array("ct_shldr_ax:23:rl","ct_shldr_cor:24:rl","ct_shldr_sag:24:pa","ct_wrist_ax:16:rl","ct_wrist_cor:11:rl","ct_wrist_sag:21:ap","#","mri_elbow_axials:21:rl","mri_elbow_coronals:18:rl","mri_elbow_sagittals:15:ap","mri_shoulder_axial:15:rl","mri_shoulder_coronal:12:rl","mri_wrist_axial:16:rl","mri_wrist_coronal:15:rl");
		
		if(isIE)	//use this method of moving the region box
		{
			document.all.regionbox.style.top = 320 + "px";
		}
		else		//use this method of moving the region box for browsers other than IE
		{			
			document.getElementById('regionbox').style.top = 320 + "px";
		}
		
		for(var i=0; i<upperextremity.length; i++)
		{
			document.navform.menu[i] = new Option(upperextremity[i],upperextremity_data[i],false,false);
		}
		//document.navform.menu[i] = new Option(spacer,"#",false,false);
	}
	else if(view == "lowerextremity")
	{
		var lowerextremity = new Array("Demo Version:","MR Knee Sagittal","",spacer,"","Full Version:","CT Ankle Axial","CT Ankle Coronal","CT Ankle Sagittal","CT Knee Axial","CT Knee Coronal","CT Knee Sagittal","MR Ankle Axial","MR Ankle Coronal","MR Ankle Sagittal","MR Hip Axial","MR Hip Coronal","MR Knee Axial","MR Knee Coronal");
		var lowerextremity_data = new Array("#","mri_knee_sagittal:19:ap","#","#","#","#","#","#","#","#","#","#","#","#","#","#","#","#","#","#","#");
		
		if(isIE)	//use this method of moving the region box
		{
			document.all.regionbox.style.top = 350 + "px";
		}
		else		//use this method of moving the region box for browsers other than IE
		{			
			document.getElementById('regionbox').style.top = 350 + "px";
		}
		
		for(var i=0; i<lowerextremity.length; i++)
		{
			document.navform.menu[i] = new Option(lowerextremity[i],lowerextremity_data[i],false,false);
		}
		//document.navform.menu[i] = new Option(spacer,"#",false,false);
	}
	else
	{
		//for future use
	}
}

	//Changes the "left", "right", "anterior", "posterior" labels
function hoverlabels(type)
{
	if(isIE)	//use the following method of changing the labels if user is using IE
	{
		if(type == "rl")	//use "right" and "left" labels
		{
			//display right and left hover labels
			document.all.left.style.visibility = "visible";
			document.all.right.style.visibility = "visible";
			document.all.anterior.style.visibility = "hidden";
			document.all.posterior.style.visibility = "hidden";
		}
		else if(type == "ap")	//use "anterior" and "posterior" labels
		{
			//display anterior and posterior hover labels
			document.all.anterior.style.left = "-457px";
			document.all.posterior.style.left = "-35px";
			document.all.left.style.visibility = "hidden";
			document.all.right.style.visibility = "hidden";
			document.all.anterior.style.visibility = "visible";
			document.all.posterior.style.visibility = "visible";
		}
		else if(type == "menu")
		{
			//hide all labels
			document.all.left.style.visibility = "hidden";
			document.all.right.style.visibility = "hidden";
			document.all.anterior.style.visibility = "hidden";
			document.all.posterior.style.visibility = "hidden";
		}
		else if(type == "pa")	//use "posterior" and "anterior" labels
		{
			//display posterior and anterior hover labels
			document.all.anterior.style.left = "-34px";
			document.all.posterior.style.left = "-466px";
			document.all.left.style.visibility = "hidden";
			document.all.right.style.visibility = "hidden";
			document.all.anterior.style.visibility = "visible";
			document.all.posterior.style.visibility = "visible";
		}
		else
		{
			//do nothing (placeholder for additional labels in the future)
		}
	}
	else	//use the following method of changing the labels if user is using a browser other than IE
	{
		if(type == "rl")	//use "right" and "left" labels
		{
			//display right and left hover labels
			document.getElementById('left').style.visibility = "visible";
			document.getElementById('right').style.visibility = "visible";
			document.getElementById('anterior').style.visibility = "hidden";
			document.getElementById('posterior').style.visibility = "hidden";
		}
		else if(type == "ap")	//use "anterior" and "posterior" labels
		{
			//display anterior and posterior hover labels
			document.getElementById('anterior').style.left = "-457px";
			document.getElementById('posterior').style.left = "-35px";
			document.getElementById('left').style.visibility = "hidden";
			document.getElementById('right').style.visibility = "hidden";
			document.getElementById('anterior').style.visibility = "visible";
			document.getElementById('posterior').style.visibility = "visible";
		}
		else if(type == "menu")
		{
			//hide all labels
			document.getElementById('left').style.visibility = "hidden";
			document.getElementById('right').style.visibility = "hidden";
			document.getElementById('anterior').style.visibility = "hidden";
			document.getElementById('posterior').style.visibility = "hidden";
		}
		else if(type == "pa")	//use "posterior" and "anterior" labels
		{
			//display posterior and anterior hover labels
			document.getElementById('anterior').style.left = "-34px";
			document.getElementById('posterior').style.left = "-466px";
			document.getElementById('left').style.visibility = "hidden";
			document.getElementById('right').style.visibility = "hidden";
			document.getElementById('anterior').style.visibility = "visible";
			document.getElementById('posterior').style.visibility = "visible";
		}
		else
		{
			//do nothing (placeholder for additional labels in the future)
		}
	}
}

	//changes the section of the body being viewed
function changesection(cmd)
{
	var menudata = "#";
	
	if(cmd == "menu")
	{
		menudata = "interface:1:menu";
		//document.image.alt = "";
	}
	else
	{
		if(document.navform.menu.selectedIndex >= 0)
		{
			menudata = document.navform.menu.options[document.navform.menu.selectedIndex].value;
		}
		if(menudata != "#")
		{
			menuflag = false;
			if(isIE)
			{
				document.all.controlmask.style.visibility = "hidden";
				document.all.gobutton.style.visibility = "hidden";
				document.all.views.style.visibility = "hidden";
				document.all.region.style.visibility = "hidden";
				document.all.regionbox.style.visibility = "hidden";
				document.all.skeleton.style.visibility = "hidden";
				document.all.bar.style.visibility = "visible";
			}
			else
			{
				document.getElementById('controlmask').style.visibility = "hidden";
				document.getElementById('gobutton').style.visibility = "hidden";
				document.getElementById('views').style.visibility = "hidden";
				document.getElementById('views').style.top = "-500px";
				
				document.getElementById('region').style.visibility = "hidden";
				document.getElementById('regionbox').style.visibility = "hidden";
				document.getElementById('skeleton').style.visibility = "hidden";
				document.getElementById('bar').style.visibility = "visible";
			}
		}
	}
	
	if(menudata != "#")	//if value of the drop down menu is "#" then do nothing, otherwise do the following
	{
		var menudata_ary = menudata.split(":");		//tokenize the menu's value based on ":"
		region = menudata_ary[0];					//set the region name
		high = parseInt(menudata_ary[1]);			//set the number of images in the region
		prefix = region;							//set the beginning of the image names
		imagesfolder = "images/" + region + "/";	//set the image folder location
		num = 1;									//reset the current image number
		updatecount();								//update the counter on the interface
		if(menuflag == false){
			//document.image.alt = prefix + num + suffix;	//set the image alt tag
		}
		document.image.src = imagesfolder + prefix + num + suffix;	//set the image source
		document.sideviewimg.src = imagesfolder + "sideview.jpg";	//set the sideview image source
		document.label_off.src="images/interface/off_on.jpg";		//reset the label on/off buttons
		document.label_on.src="images/interface/on_off.jpg";		//reset the label on/off buttons
		updatesideview();											//reset the sideview
		hoverlabels(menudata_ary[2]);								//setup the correct hover labels
		loadnext();													//preload the next image
		//document.navform.menu.selectedIndex = 0;	//reset the drop menu's selection
	}
}

	//sets "isIE" variable to true if person is using IE, and false if person is using Netscape or a browser other than IE
function checkBrowser()
{
	isIE = (navigator.appName == "Microsoft Internet Explorer");
	
	if (navigator.appVersion.indexOf("Win") != -1) OS = "Windows";
	if (navigator.appVersion.indexOf("Mac") != -1) OS = "MacOS";
	//if (navigator.appVersion.indexOf("X11") != -1) OS = "UNIX";
	//if (navigator.appVersion.indexOf("Linux") != -1) OS = "Linux";
	
	isSafari = (navigator.userAgent.indexOf("Safari") != -1);
}

	//changes the position of the horizontal sideview bar
function updatesideview(cmd)
{
		//the bar has 54 pixels of movement, so calculate the step magnitude to take within 54 pixels based on the number of images in the region
		//use the number of images in the region ("high") to calculate the step magnitude 
	var multiplier = 54 / high;
	var pos = parseInt(multiplier * (num-1));	//calculate the bar's position based on the multiplier and the current image

	if(isIE)	//use this method of moving the bar for IE
	{
		document.all.bar.style.top = pos + "px";
	}
	else		//use this method of moving the bar for browsers other than IE
	{
		document.getElementById('bar').style.top = pos + "px";
	}
}

	//jumps to a specified image in the current body region
function jump()
{
		//get an image number from the user
	var jumpnum = prompt('Enter an image number from ' + low + ' to ' + high + '.', '');
	
		//error check the user's input
	if(jumpnum != null)		//be sure variable is not null (this happens if the user hits the "cancel" button)
	{
	    var i;
		for (i = 0; i < jumpnum.length; i++)	//check each character entered sequentially
		{
			var charcode = jumpnum.charAt(i);

			if((charcode == "0") && (jumpnum.length == 1))	//number cannot be "0"
			{
				alert('A number from ' + low + ' to ' + high + ' is required.');
				jump();
				return;
			}
			else if ((charcode == "0") && (i==0))			//number cannot have a leading zero
			{
				alert('Number cannot have a leading zero "0".');
				jump();
				return;
			}

			else if ((charcode < "0") || (charcode > "9"))	//entry must only be numbers 0-9
			{
				alert('Invalid entry. Only numbers are accepted.');
				jump();
				return;
			}
		}

		if((jumpnum < low) || (jumpnum > high))	//number must be in the range of the images available in the region
		{
			alert('A number from ' + low + ' to ' + high + ' is required.');
			jump();
			return;
		}
		else	//if the entry is valid, proceed to jump to the image
		{
			num = parseInt(jumpnum);	//update the current image number
			updatecount();				//update the counter in the interface
			//document.image.alt = prefix + num + suffix;					//update the alt tag
			document.image.src = imagesfolder + prefix + num + suffix;	//update the image source
			updatesideview();			//update the sideview bar
			loadnext();					//preload the next image
			return;
		}
	}
}

	//preloads the previous image
function loadprev()
{
	var tempnum;
	if(num <= low)
	{
		tempnum = high;
	}
	else
	{
		tempnum = num - 1;
	}
	preloadedImage.src = imagesfolder + prefix + tempnum + suffix;
}

	//preloads the next image
function loadnext()
{
	var tempnum;
	if(num >= high)
	{
		tempnum = low;
	}
	else
	{
		tempnum = num + 1;
	}
	preloadedImage.src = imagesfolder + prefix + tempnum + suffix;
}

	//hides the red lines and labels on the images
function hidelabels()
{
	if(menuflag == false)
	{
		document.label_off.src="images/interface/off_on.jpg";
		document.label_on.src="images/interface/on_off.jpg";
		prefix = region;
		document.image.src = imagesfolder + prefix + num + suffix;
		//document.image.alt = prefix + num + suffix;
	}
}

	//shows the red lines and labels on the images
function showlabels()
{
	if(menuflag == false)
	{
		document.label_off.src="images/interface/off_off.jpg";
		document.label_on.src="images/interface/on_on.jpg";
		prefix = "l_" + region;
		document.image.src = imagesfolder + prefix + num + suffix;
		//document.image.alt = prefix + num + suffix;
	}
}

	//displays the next image in the region
function next()
{
	if(menuflag == false)
	{
		if(num >= high)
		{
			num = low;
		}
		else
		{
			num = num + 1;
		}
		updatecount();
		//document.image.alt = prefix + num + suffix;
		document.image.src = imagesfolder + prefix + num + suffix;
		updatesideview();
		loadnext();
	}
}

	//displays the previous image in the region
function prev()
{
	if(menuflag == false)
	{
		if(num <= low)
		{
			num = high;
		}
		else
		{
			num = num - 1;
		}
		updatecount();
		if(menuflag == false)
		{
			//document.image.alt = prefix + num + suffix;
		}
		document.image.src = imagesfolder + prefix + num + suffix;
		updatesideview();
		loadprev();
	}
}

	//this function executes when the window loads
window.onload = function()
{
	document.onkeydown = register;	//register the keydown event
	document.onkeyup = register;	//register the keyup event
	//loadnext();					//load the next image
	checkBrowser();					//check the browser type
	//updatesideview();				//update the sideview bar


	mainmenu();

	if((OS == "Windows") || ((OS == "MacOS") && (isIE == true)))
	{
		spacer = "---------------------------------------------";
	}
	else if((OS == "MacOS") && (isSafari == true))
	{
		spacer = "----------------------------";
	}
	else
	{
		spacer = "-----------------------";
	}
	managelist("head");
}

	//this function handles the mouse scroll wheel event which only works with IE
function scrollhandler()
{
		//user scrolls the wheel in an upward direction
	if (event.wheelDelta >= 120)
	{
		prev();	//go to the previous image
	}
		//user scrolls the wheel in a downward direction
	else if (event.wheelDelta <= -120)
	{
		next();	//go to the next image
	}
}

	//this function is called when keydown/keyup events fire (when the user presses keys on the keyboard)
function register(e)
{
	if (!e) e = window.event;
	var keyInfo = e['keyCode'];	//get the keycode of the event

		//disable the left, right, z, x keydown events on IE (doesn't work with Netscape)
		//nothing is supposed to happen when the button is held down
		
	if((keyInfo == 37)&&(e.type == "keydown"))		//left arrow was pressed
	{
		return false;
	}
	else if((keyInfo == 39)&&(e.type == "keydown"))	//right arrow was pressed
	{
		return false;
	}
	else if((keyInfo == 88)&&(e.type == "keydown"))	//x was pressed
	{
		return false;
	}
	else if((keyInfo == 90)&&(e.type == "keydown"))	//z was pressed
	{
		return false;
	}

		//capture the keyup events from the left, right, z, x keys
		//when the keys are released, an action takes place
		
	if((keyInfo == 37)&&(e.type == "keyup")) 		//left arrow was released
	{
		prev();
		return false;
	}
	else if((keyInfo == 39)&&(e.type == "keyup"))	//right arrow was released
	{
		next();
		return false;
	}
	else if((keyInfo == 88)&&(e.type == "keyup"))	//x was released
	{
		hidelabels();
		return false;
	}
	else if((keyInfo == 90)&&(e.type == "keyup"))	//z was released
	{
		showlabels();
		return false;
	}
}