<!--
	
	// global counters for image loading progress monitoring
	var count = 0;
	var loaded = 0;
	
	var http_request = false; // flag for request made
	
	
	var NULL_IMAGE_THUMBNAIL = "./images/1px.gif"; // location of table padding image
	
	// calls to the asp are redirected through the data jsp proxy
	var ASP_URL = "/colourtools/Data?" + IMAGE_URL_PARAMETERS +"&";
	var MOUSEPAINTER_URL = "visualizer.html?";
	
	// arguments passed with imagesource=<image_id> in the hyperlink on the images
        //There is a hook in the bodyLoad function that can further append any other parameters onto this if the function
        //addOtherParameters() is defined elsewhere.  This gives the ability to load further url parameters into mousepainter.        
	var MOUSEPAINTER_POST_ARGUMENTS = "&Gammas=2.2!2.2!2.2&ColourTemp=6500" + getPCCs() + getSchemeInfo();
	
	MOUSEPAINTER_POST_ARGUMENTS += (getSearch('configfile') != null) ? "&configfile=" + getSearch('configfile') : "";
	
	var USE_LOCAL_IMAGE_CACHE = 0;	// Image source switch: 1 = local, 0 = postout for images
	var DIR_NIRVANA_IMAGE_THUMBNAIL = "./images/"; // directory in which local images are expected as <image_id>.jpg
	var IS_OPERA = 0;				// Flag to mark that the Opera browser has been detected.  Necessary to supress the progress bar which doesn't update correctly.
	
	// action constants enum
	var POPULATE_SELECTION_BOX = 0;
	var GET_THUMBNAIL_INFO = 1;
    
    
	// function called on form load.  Calls ASP for drop-down list content
	function bodyLoad() {
        
                //hook to include other arguments into MOUSEPAINTER_POST_ARGUMENTS
                //checks if the function addOtherParameters exists and if it does catenates this onto the end of the post Arguments
                if (window.addOtherParameters != undefined) {
                        MOUSEPAINTER_POST_ARGUMENTS = MOUSEPAINTER_POST_ARGUMENTS + addOtherParameters();
                }

                // If imagecode is set, go straight to the mousepainter
                if (getSearch('imagecode') != null) {
                    window.location = MOUSEPAINTER_URL + MOUSEPAINTER_POST_ARGUMENTS.substring(1); // Ignore initial '&'
                }

		// Opera browser does not correctly manage the reveal of the thumbnail panel,
		// hence we hide the loading page completely.
		if (navigator.appName.indexOf("Opera") > -1) {
		   IS_OPERA = 1;
		   document.getElementById("thumbnail_panel").style.display="block";
		   document.getElementById("loading_panel").style.display="none";
		}
		
		document.getElementById("loading_panel").innerHTML = loading_panel_message + document.getElementById("loading_panel").innerHTML;
		document.getElementById("selection_div").innerHTML = selection_message + loading_picker_message + document.getElementById("selection_div").innerHTML;
		makeRequest(ASP_URL+"Action=GetImageTypes", POPULATE_SELECTION_BOX);
	}
	
	/**
	 *  Selected room changed : display loading panel and load associated thumbnails
	 */
	function roomChanged() {

		// display the 'loading' page whilst the images load
		document.getElementById("holding_panel").style.display="none";
		if (IS_OPERA==0) { // don't do this if it's opera is it prevents the images loading
		   	document.getElementById("loading_panel").style.display="block";
		    document.getElementById("thumbnail_panel").style.display="none";
		}
		var mylist=document.getElementById("room_picker");

		// the first time the room is changed, delete the dummy entry off the room picker
		if (mylist.options[0].value=="null_entry") {
			mylist.options[0] = null;
			document.getElementById("output_div").innerHTML = style_message + document.getElementById("output_div").innerHTML;
		}
		
		var selectedRoom = mylist.options[mylist.selectedIndex].value;

		
		makeRequest(ASP_URL+"Action=GetImages&ImageTypeCode="+selectedRoom , GET_THUMBNAIL_INFO);
	}	
	
	/**
	 *  Image load error event, display an alert then continue as if it had loaded to 
	 *  prevent hanging
	 */
	function thumbnailError() {
		 alert(ERROR_image_load);
		 thumbnailLoaded();
	}
	
	/**
	 *  Image loaded event, update progress or display loaded image div
	 */
	function thumbnailLoaded() {
	
		loaded++;
        // pull the focus away from the picker
        document.getElementById("room_picker").blur();
		if (IS_OPERA==0) { // no need as the loading panel has been permanantly hidden for Opera
		   if (count==loaded) {
		
		       // reveal the images
			   document.getElementById("thumbnail_panel").style.display="block";
			   document.getElementById("loading_panel").style.display="none";
			   document.getElementById("holding_panel").style.display="none";
		 	   // reset the progress bar
			   document.getElementById("progress_l").style.width = "0%";
			   document.getElementById("progress_r").style.width = "100%";
		   }
		   else {
			  // draw somekind of progress monitor
			 
			  var progress_pct = (100.0*loaded) / (count);
			  document.getElementById("progress_l").style.width = progress_pct+"%";
			  document.getElementById("progress_r").style.width = (100 - progress_pct)+"%";
			 
			 }		
		}
	}

	
	/**
	 * Post the url request firing an action specified by the action_type
	 * This uses the windows.ActiveXObject in IE and XMLHttpRequest object in other
	 * browsers.
	 */
	function makeRequest(url, action_type) {
	
		http_request = false;

		if (window.XMLHttpRequest) { // Mozilla, Safari,...
		    //netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
			http_request = new XMLHttpRequest();
			if (http_request.overrideMimeType) {
				http_request.overrideMimeType('text/xml');
			}
		} 
		else if (window.ActiveXObject) { // IE
			try {
				http_request = new ActiveXObject("Msxml2.XMLHTTP");
			} 
			catch (e) {
				try {
					http_request = new ActiveXObject("Microsoft.XMLHTTP");
				} 
				catch (e) {}
			}
		} 
		
		if (!http_request) {
			alert(ERROR_unable_to_connect);
			return false;
		}
		
		switch (action_type) {
			case POPULATE_SELECTION_BOX:
				http_request.onreadystatechange = populateSelectionBox;
				break;
			case GET_THUMBNAIL_INFO:
				http_request.onreadystatechange = displayThumbnailInfo;
				break;
		}
		try {
			http_request.open('GET', url, true);
			http_request.send(null);
		}
		catch (ex) {
		  alert(ERROR_problem_with_request);
		  return false;
		}
		
		return true;
	}

	/**
	 *  Action fired on completion of the GET_THUMBNAIL_INFO request, create
	 *  the thumbnail image table
	 */
    function displayThumbnailInfo() {

        if (http_request.readyState == 4) {
            if (http_request.status == 200) {
			
			// declare some useful constants
			var table_width_col = Math.ceil((1.0*table_width_px) / (thumb_width_px + thumb_padding_px));
			var two_width_col =  Math.ceil((2.0*table_width_px) / (thumb_width_px + thumb_padding_px));
			
			var tableHeader = '<table id="thumbnail_table" border="0" width="'+table_width_px+'" cellpadding="0" cellspacing="0">';
			var tableRow = '<tr>';
			var tableCell = '<td align="center">';
			var tablePadCell = '<td><img src="' + NULL_IMAGE_THUMBNAIL + '" width="' + thumb_padding_px + '" height="' + thumb_height_px + '" onError="thumbnailError()" onLoad="thumbnailLoaded()" ></td>';
			var tableCellEnd = '</td>';
			var tableRowEnd = '</tr>';
			var tableFooter = '</table>';
			var tablePadRow = '<tr><td colspan="' + two_width_col + '"><img src="' + NULL_IMAGE_THUMBNAIL + '" height="' +thumb_padding_px+ '" onError="thumbnailError()" onLoad="thumbnailLoaded()" ></td></tr>';
			
			  // we've sucessfully processed the request so populate the selection box
			  if (http_request.responseText.length > 0) {
			  
			  		var tableContent;
				   // separate the elements delimited by '::' chars
					var thumbs = http_request.responseText.split('::');
					count=0; // initialise the image counter

					if (thumbs.length>=1) {
					   loaded = 0;
					   var tableCells= new Array(thumbs.length);
					   for (var tb_i = 0; tb_i <thumbs.length; tb_i++) {
						   // in each element, extract the sub-elements, separated by '!'
						   // thumbParts[0] is file identifier
						   // thumbParts[1] is file display name
						   var thumbParts = thumbs[tb_i].split('!');
						   tableCells[tb_i] = "<a href='"+ MOUSEPAINTER_URL + "imagecode="+thumbParts[0] + MOUSEPAINTER_POST_ARGUMENTS +"'>";
						   if (USE_LOCAL_IMAGE_CACHE==1)	{
								 tableCells[tb_i] = tableCells[tb_i].concat("<img class='noHover' src='" + DIR_NIRVANA_IMAGE_THUMBNAIL + thumbParts[0] + ".jpg'");
							}
							else {
								 tableCells[tb_i] = tableCells[tb_i].concat("<img class='noHover' src='" + ASP_URL + "Action=GetNirvanaImage&Gammas=2.2!2.2!2.2&ColourTemp=6500&ImageCode="+thumbParts[0]+ "&ImageWidth=" + thumb_width_px + "&ImageHeight=" + thumb_height_px + "&SectionMats='"); 
							}			
							tableCells[tb_i] = tableCells[tb_i].concat(" title='" + thumbParts[1] + "' alt='" + thumbParts[1] + "' width='"+thumb_width_px + "' height='" + thumb_height_px + "' ");
							tableCells[tb_i] = tableCells[tb_i].concat(" onError='thumbnailError()' onLoad='thumbnailLoaded()' onMouseOver='this.className=\"onHover\";' onMouseOut='this.className=\"noHover\";'>");
							tableCells[tb_i] = tableCells[tb_i].concat("</a>");
						}//for

					
						tableContent = tableHeader;
						for (var k = 0; k < thumbs.length/table_width_col; k++) {
							tableContent = tableContent.concat(tableRow);
							for (var i = 0; i < table_width_col; i++) {
								if ((i+k*table_width_col) < thumbs.length) {
							   	   	tableContent = tableContent.concat(tableCell);
									tableContent = tableContent.concat(tableCells[i+k*table_width_col]);
									tableContent = tableContent.concat(tableCellEnd);
									
									tableContent = tableContent.concat(tablePadCell);
								}
								else {
									tableContent = tableContent.concat(tableCell);
									tableContent = tableContent.concat("<img src='", NULL_IMAGE_THUMBNAIL, "' height='" ,thumb_height_px ,"' width='" ,thumb_width_px ,"' onError='thumbnailError()' onLoad='thumbnailLoaded()' >");
									tableContent = tableContent.concat(tableCellEnd);
									
									tableContent = tableContent.concat(tablePadCell);
								}
								count+=2; // increment count here so it includes all padding cells as well
							}
					 		tableContent = tableContent.concat(tableRowEnd);
							
							tableContent = tableContent.concat(tablePadRow);
							count++; // and an extra count for the padding row
						} //for
						tableContent = tableContent.concat(tableFooter);
						document.getElementById("thumbnail_panel").innerHTML = tableContent;
					} // if thumbs.length = 1
					else {
						 // No images found so display an appropriate warning... in a dummy table
						 loaded=-1;
						 tableContent = tableHeader;
						 tableContent = tableContent.concat(tableRow);
						 tableContent = tableContent.concat(tableCell);
						 tableContent = tableContent.concat(no_images_message);
						 tableContent = tableContent.concat(tableCellEnd);
						 tableContent = tableContent.concat(tableRowEnd);
						 tableContent = tableContent.concat(tableFooter);
							
						document.getElementById("thumbnail_panel").innerHTML = tableContent;
						
						// fire the tumbnailLoaded event to display the correct DIVs
						thumbnailLoaded();
					}
				}
            } else {
                alert(ERROR_problem_with_request);
            }
        }
    }

	/**
	 *  Action fired on completion of the POPULATE_SELECTION_BOX requested made on bodyLoad event
	 *	Populate combo (room_picker) with content of return request string
	 */
    function populateSelectionBox() {

        if (http_request.readyState == 4) {
            if (http_request.status == 200) {
			

			   // add a null element
			   document.getElementById("room_picker").options[0]=new Option(select_room_string, "null_entry");
			   
			   // we've sucessfully processed the request so populate the selection box
			   if (http_request.responseText.length > 0) {
				   // separate the elements delimited by '::' chars
					var rooms = http_request.responseText.split('::');
					for (var rm_i = 0; rm_i < rooms.length; rm_i++) {
						// in each element, extract the sub-elements, separated by '!'
						// roomParts[0] = room identifier
						// roomParts[1] = display name
						var roomParts = rooms[rm_i].split('!');
						document.getElementById("room_picker").options[rm_i+1]=new Option(roomParts[1], roomParts[0]);
					}
				}
				// hide the masking text
				document.getElementById("load_picker_text").style.display="none";

				// reveal the picker
				document.getElementById("room_picker").style.display="block";
            } else {
                alert(ERROR_problem_with_request);
            }
        }
    }
//-->