// <script type="text/javascript">
<!--  to hide script contents from old browsers

window.onload = init;

function init()
{
	display_urhere();
	setup_email();
}

/**************************************************************************************************
This function sets up a link with class "emailOharaArts" to send email. Email address cannot be read
by spambots.
**************************************************************************************************/

function setup_email()
{
	var anchors = document.getElementsByTagName("a");
	if (anchors == null)
		return;

	for (var i = 0; i < anchors.length; i++)
	{
		switch(anchors[i].className)
		{
			case "emailOharaArts":
			{
				anchors[i].onclick = function()
				{
					var name1 = "jo"
					var name2 = "ohara-arts"
					var name3 = "com"
					var addr = name1 + "@" + name2 + "." + name3
					var full = "mail" + "to:" + addr
					document.location.href = full;
					return(false);
				}
				break;
			}
		}
	}
}


/* This function alters the style of the navigation bar to indicate urhere.
I added code from the original to shorten the href string so that it does
not include any bookmarks (....#bookmark). Otherwise, the strings would not
match and the urhere formatting would not be applied.
******************************************************************************/

function display_urhere()
{	if (!document.getElementById)
	{	
		return;
	}

	var list = document.getElementById("navbar");
	if (!list)
		return;
		
	var page = list.getElementsByTagName("a");
	var currentHref = document.location.href;

	var anchorPosition = currentHref.indexOf("#");
	if (anchorPosition >= 0)
	{	currentHref = currentHref.substring(0, anchorPosition);
	}

	currentHref = getSimpleHref(currentHref);
	
	for (var i = 0; i < page.length; i++)
	{	var href = getSimpleHref(page[i].href)	

		if (href == 'index.html')
		{	var home_index = i;
		}

		// This is when url doesn't include the page. Highlight index.html
		if ((href == currentHref) || ((currentHref.length == 0) && (home_index >= 0)))
		{			
			if ((currentHref.length == 0) && (home_index >= 0))
			{	i = home_index;
			}
			
			page[i].style.backgroundColor = "#fff";
			page[i].style.color = "#564d52";	
/*			page[i].parentNode.style.backgroundColor = "#fff";	*/	// parentNode will be <li>

			break;
		}
	}
}

/******************************************************************************
This function was added because Mac Safari does not include the directory structure
before the href, so there was never a match. This function strips the beginning directory structure
away and just leaves the end part--such as about_us.htm
******************************************************************************/

function getSimpleHref(s)
{	var length;
	var anchorPosition = 0;	

	while (anchorPosition >= 0)
	{	anchorPosition = s.indexOf('/');
		length = s.length;

		if (anchorPosition >= 0)
		{	s = s.substring(anchorPosition + 1, length);
		}		
	}
	
	return(s);
}

/******************************************************************************
Here's the start of the picture slide show.
/*****************************************************************************/

var folder = 'artwork/';			// Folder where all images are kept
var NUMBER_OF_IMAGES;
var DIV_FACTOR = 2; 				// This is the number of elements per image
var current_image_number = 0;		// Global variable to indicate what image is currently displayed
var current_image_array_index = 0;		// Global variable indicating index of sub-array of current_image_array
var current_image_array = new Array;
var main_image = new Array();
var main_image_loaded = new Array();

/******************************************************************************
This array provides a means of indexing into the following multi-dimensional
array. They must be kept in synch.
/*****************************************************************************/

var key_array = new Array(
	new Array ('series_murals', 'Murals'),
	new Array ('series_specialties', 'Specialties'),
	new Array ('series_trompe', 'Trompe L\'oeil'),
	new Array ('series_kids', 'Kid\'s Rooms'),
	new Array ('series_walls', 'Walls'),
	new Array ('series_floors', 'Floors'),
	new Array ('series_furniture', 'Furniture'),
	new Array ('series_ceilings', 'Ceilings')
);

/******************************************************************************
This array is the database for all the images in the slideshow portfolio.
The 1st parameter of each sub-array is the file name without the jpg extension.
The 2nd paramter is what should be displayed on the page under the image.
/*****************************************************************************/

var image_array = new Array(
		
	new Array(
	'IMG_4339_2', 'Tropical mural, bathroom in Key West',
	'IMG_4346_2', 'Tropical mural with client\'s dogs and parrot',
	'golf_mural', 'Golf mural',
	'scenic_mural_2', 'Scenic mural',
	'scenic_mural_3', 'Other angle, scenic mural',
	'castle_br', 'Castle interior',
	'farm_mural', 'Farmyard mural',
	'farmyard_mural_1', 'Farmyard mural detail',
	'palmtree', 'Palms painted on sun porch walls',
	'fenway_park_mural', 'Fenway Park mural',
	'kif_2238', 'Fenway Park mural',
	'kif_2389', 'Fenway Park mural',
	'kif_2406', 'Fenway Park mural',
	'garden_window', 'Trompe l\'oeil window frame, objects, and garden mural', 
	'scenic_mural', 'Scenic mural',
	'pavillion', 'Murals painted on canvas, installed in billiard room',
	'pavillion2', 'Murals painted on canvas, installed in billiard room',
	'bakery', 'Trompe l\'oeil window with boy peeking in, painted on canvas, installed in bakery',
 	'skymural_3', 'Sky mural with clouds',
	'summer_mural', 'Summer mural',
	'img_0334', 'Historical home',
	'img_0336', 'Historical home'
	),
	
	// Specialties
	new Array(				
	'side_corbell', 'Woodgraining on unusually shaped corbells',
	'center_corbell', 'Woodgraining on unusually shaped corbells',
	'IMG_6348', 'Trompe l\'oeil Italian tiles',
	'IMG_6358', 'Trompe l\'oeil Italian tiles, detail',
	'IMG_6370', 'Trompe l\'oeil Italian tiles, detail',
	'img_0139', 'Canvas floorcloth',
	'img_0388', 'Plaster effect',
	'img_0405', 'Venetian plaster-pitted finish',
	'kif_1922', 'Venetian plaster-pitted finish detail',
	'img_0403', 'Venetian plaster wall with trompe l\'oeil cutout',
	'IMG_7750', 'Multi-colored polka dots',
	'IMG_0257', 'Wall glaze with decorative quotation',
	'abstract_waves', 'Wave design on entryway ceiling',
	'distressed_cabs', 'Distressed cabinets with comic newsprint',
	'linework_br', 'Line painting of beach scene',
	'pollock_counter', 'Painted counter top',
	'silver_ceiling', 'Silver leaf with distressing on foyer ceiling',
	'tulip_floor', 'Tulips painted on floor',
	'clouds', 'Fantasy cloud mural on wall',
	'decorative_wall_drawing', 'Line drawing on walls',
	'img_0420', 'Line drawn walls and lamps in living room',
	'glazed_stripes', 'Glazed stripes with stars on walls and night sky mural',
	'compass', 'Compass floor design',
	'braidedrug', 'Trompe l\'oeil painted rug on canvas floorcloth',
	'stars_stripes', 'Stars and stripes motif on walls',
	'clothesline_wooden_clothes', 'Clothesline with wooden clothes',
	'colorwash_with_script', 'Colorwash with script',
	'mural_painted_wood_cutouts', 'Mural with painted wood cutouts'
	),
	
	// Trompe
	new Array(				
	'towel_shirt_bird', 'Towel, shirt and bird',
	'window', 'Trompe l\'oeil window',
	'arches', 'Trompe l\'oeil arches painted on ceiling', 
	'castle_br', 'Castle interior', 
	'kif_2389', 'Fenway Park closet',
	'circus', 'Trompe l\'oeil tent with circus procession on ceiling', 
	'img_0408', 'Trompe l\'oeil construction site',
	'faux_crates', 'Trompe l\'oeil crates', 
	'floral_rug', 'Trompe l\'oeil painting of rug and faux wood inlay', 
	'garden_window', 'Trompe l\'oeil window frame, objects, and garden mural', 
	'palmtree', 'palms painted on sun porch walls', 
	'recycle_bins', 'Trompe l\'oeil corrugated wall/recycling center', 
	'bakery', 'Trompe l\'oeil window with boy peeking in, painted on canvas, installed in bakery',
	'rope_on_floor', 'Trompe l\'oeil rope on floor', 
	'braidedrug', 'Trompe l\'oeil painted rug on canvas floorcloth',
	'trompewinecheese', 'Trompe l\'oeil wine and cheese painted on table top',
	'trompe_license_plates', 'Trompe l\'oeil license plates'
	),
	
	// Kids
	new Array(				
	'little_people_village', 'Mural of "little people" village',
	'circus', 'Trompe l\'oeil tent with circus procession on ceiling', 
	'img_0376', 'Circus procession',
	'polka_dots', 'Spiral polka dots on walls, detail painting on doll house', 
	'img_0387', 'Scoreboard headboard, trompe l\'oeil crumbling walls', 
	'clouds', 'Cloud mural on wall', 
	'circus_detail', 'Circus procession on ceiling in circus room', 
	'farm_mural', 'Farmyard mural',
	'farmyard_mural_1', 'Farmyard mural detail',
	'farmyard_detail', 'Detail of farmyard mural', 
	'castle_and_clouds_cropped', 'Castle and clouds mural', 
	'glazed_stripes', 'Glazed stripes with stars on walls and night sky mural', 
	'fenway_park_mural', 'Fenway Park mural', 
	'kif_2238', 'Fenway Park mural',
	'kif_2247', 'Fenway Park mural',
	'kif_2389', 'Fenway Park mural',
	'dinosaur_mural', 'Dinosaur mural', 
	'scenic_mural', 'Scenic mural',
	'mural_painted_wood_cutouts', 'Mural with painted wood cutouts',
	'summer_scene_clothesline', 'Summer scene with clothes line'
	),
	
	// Walls
	new Array(				
	'KIF_2574', 'Venetian plaster',
	'IMG_0244', 'Wide crosshatch applied diagonally',
	'IMG_0238', 'Combing glaze',
	'harlequin', 'Wall glaze with harlequin design',
	'horz_strip_wall', 'Wall glaze with horizontal stripes',
	'plaster_stripes', 'Venetian plaster in foreground and horizontal stripes in background',
	'suede', 'Faux suede walls in guest suite',
	'vert_stripes', 'Two-toned glazed stripes',
	'vine_glaze', 'Parchment glaze with vine detail',
	'plaster_and_stripes', 'Venetian plaster in foreground, horizontal painted stripes in backgroud',
	'wall_rotunda_stars', 'Glazed strie striped wall with stars painted on rotunda',
	'harlequin2', 'Harlequin patterned glazed wall',
	'img_0405', 'Venetian plaster-pitted finish',
	'kif_1922', 'Venetian plaster-pitted finish detail',
	'stars_stripes', 'Stars and stripes motif on walls',
	'img_0164', 'Brushed technique on walls',
	'img_0158', 'Washed walls with decorative writing',
	'travertine_and_stencil', 'Layered colored faux travertine and stencil',
	'img_0157', 'Parchment glaze on walls with decorative flower border',
	'img_0137', 'Black and white sponged walls in bathroom',
	'img_0148', 'Layered patterns of color',
	'img_0327', 'Parchment glaze with decorative ballon and floral pattern',
	'layered_stencil', 'Layered stencil',
	'IMG_7750', 'Multi-colored polka dots',
	'stenciled_wall', 'Stenciled motif',
	'window_tiles_cloud_walls', 'Trompe l\'oeil window and tiles, cloud motif on walls',
	'IMG_2072', 'Argyle design on walls'
	),

	// Floors
	new Array(				
	'IMG_0216', 'Detail of checkerboard stained floor',
	'IMG_1388', 'Canvas floorcloth',
	'canvas_floorcloth', 'Canvas floorcloth',
	'faux_inlay_floor', 'Faux inlay floor',
	'intricate_inlay', 'Intricate design, stained faux inlay',
	'skymrl_checkflr', 'Checkerboard stained floor and sky mural',
	'small_check_floor', 'Checkerboard stained faux inlay',
	'tulip_floor', 'Tulips painted on floor',
	'floral_rug', 'Trompe l\'oeil painting of rug and faux wood inlay', 
	'compass', 'Compass floor design',
	'rope_on_floor', 'Trompe l\'oeil rope on floor'
	),

	// Furniture
	new Array(				
	'side_corbell', 'Detail corbell of organ woodgrained to match wood of cathedral organ',
	'img_0413', 'Lichtenstein style coffee table with drawn walls and lamps',
	'img_0153', 'Decorative frame and lampshade',
	'distressed_kitchen_cabs', 'Distressed kitchen cabinets', 
	'distressed_cabinets', 'Distressed cabinets', 
	'woodgrain_mantle', 'Wood graining on mantel', 
	'pollock_counter', 'Painted counter top', 
	'trompewinecheese', 'Trompe l\'oeil wine and cheese painted on table top',
	'detailed_frame', 'Detailed frame',
	'license_plates_on_cabinet_doors', 'License plates on cabinet doors'
	),

	// Ceilings
	new Array(				
	'img_0153', 'Decorative frame and lampshade',
	'skymural_3', 'Sky mural with clouds',
	'img_0371', 'Circus procession',
	'glazed_stripes', 'Glazed stripes with stars on walls and night sky mural', 
	'silver_ceiling', 'Silver leaf with distressing on foyer ceiling',
	'abstract_waves', 'Wave design on entryway ceiling',
	'arches', 'Trompe l\'oeil arches painted on ceiling', 
	'wall_rotunda_stars', 'Glazed strie striped wall with stars painted on rotunda'
	)
);

/******************************************************************************
/*****************************************************************************/

function set_current_image_array(index)
{
	current_image_array = image_array[index];
	current_image_array_index = index;
	NUMBER_OF_IMAGES = current_image_array.length / DIV_FACTOR;
}

/******************************************************************************
This function will return the name (as indicated by key_array) of the 
current sub-array of image_array.
/*****************************************************************************/

function get_current_image_array_name()
{
	return(key_array[current_image_array_index][0]);
}

/*********************************************************************************
This function selects the appropriate sub array of index_array and whether to 
look for a cookie that indicates which image number to display first.
1st parameter is the name of the image series as specified in key_array.
2nd parameter is 1 or 0 whether to look for a cookie.
*********************************************************************************/

function setup_images(array_name)
{
	for (var i = 0; i < key_array.length; i++)
	{
		if (key_array[i][0] == array_name)
		{
			setup_images_via_index(i);
			return;
		}
	}

	setup_images_via_index(0);
}

/*********************************************************************************
This function selects the appropriate sub array of index_array and whether to 
look for a cookie that indicates which image number to display first.
1st parameter is the numerical index of the image series.
*********************************************************************************/

function setup_images_via_index(array_index)
{
	if (array_index == null)
		array_index = 0;;
		
	set_current_image_array(array_index);

	display_new_title();
	
	//Initialize array for preloading next image to 0.
	for (var i = 0; i < NUMBER_OF_IMAGES; i++)
	{	main_image_loaded[i] = 0;
	}
}

/******************************************************************************
This function displays the number of images on the html page as well as previous
and next arrows. This is done by writing html code onto the page. A number and
ID is generated for each image. The IDs are in the form: "numberx" where "x"
are numerals from 0 to the number of images - 1.

It should be called after setup_images() from the html page.
/*****************************************************************************/

/***
Not used on O'Hara Arts website

function display_numbers()
{
	document.write('<a href="#" class="arrow" ' + 'onClick="get_previous_image(); ' + 'this.blur(); return false;" >');
	document.write('<< Back ');
	document.write('</a>');
	
	for (var i = 0; i < NUMBER_OF_IMAGES; i++)
	{
		document.write('<div id="number' + i + '"' + ' class="number">');
		document.write('<a href="#" ' + 'class="num-link" ' + 'onClick="select_image(' + i + '); ' + 'this.blur(); return false;" >');
		var j = i + 1;
		document.write(j);
		document.write('</a>');
		document.write('</div>');
	}		

	document.write('<a href="#" class="arrow" ' + 'onClick="get_next_image(); ' + 'this.blur(); return false;" >');
	document.write(' Next >>');
	document.write('</a>');
}

***/

/******************************************************************************
This function selects the next image. If on the last image for each section, 
then it will display the images of the next section.
/*****************************************************************************/

function get_next_image()
{	
	if (current_image_number < NUMBER_OF_IMAGES - 1)
	{	
		select_image(current_image_number + 1);
	}	
	else
	{
		if (current_image_array_index < image_array.length - 1)
		{
			set_current_image_array(current_image_array_index + 1);
		}
		else
		{
			set_current_image_array(0);
		}
		
		display_new_title();
		select_image(0);
	}
}

/******************************************************************************
This function selects the previous image. If on the 1st image for each section, 
then it will display the images of the previous section.
/*****************************************************************************/

function get_previous_image()
{	
	if (current_image_number > 0)
	{	select_image(current_image_number - 1);
	}
	else
	{
		if (current_image_array_index > 0)
		{
			set_current_image_array(current_image_array_index - 1);
		}
		else
		{
			set_current_image_array(image_array.length - 1);
		}
		
		display_new_title();
		select_image(0);
	}
}

/******************************************************************************
This function selects and displays the current image. Called from html file.
/*****************************************************************************/

/***
function get_current_image()
{	
	select_image(current_image_number);
}
***/

/******************************************************************************
This function selects the image number n. It first deselects the current image
and then selects the new imge.
/*****************************************************************************/

function select_image_old(n)
{
	var id_old;
	var id_new;
	var id_element;
	var href;
	var text, newElem, newText, child;
	
	//alert('select_image: current_image_number = ' + current_image_number + '  n = ' + n);
	
	id_old = 'number' + current_image_number;
	id_element = document.getElementById(id_old);
	/*****************************************************************
	The following code worked in all browsers except Safari for Mac.
	So, instead changed the class name of the <a> tag.
		href = id_element.getElementsByTagName("a");
		href[0].style.color = "rgb(164, 179, 200)";
		href[0].style.backgroundColor = "transparent";
	*****************************************************************/
	//id_element.firstChild.className = 'num-link';


	id_new = 'number' + n;
	id_element = document.getElementById(id_new);
	/*****************************************************************
	The following code worked in all browsers except Safari for Mac.
	So, instead changed the class name of the <a> tag (firstChild of
	<div id="numberx">
		href = id_element.getElementsByTagName("a");
		href[0].style.color = "rgb(164, 179, 200)";
		href[0].style.backgroundColor = "rgb(164, 179, 200)";
	*****************************************************************/
	//id_element.firstChild.className = 'num-selected';

	current_image_number = n;
	
	//alert('select_image: current_image_number = ' + current_image_number + '  n = ' + n);
	
	get_image(n);
	
	// This section of code is to change the previous and next arrows to indicate the next
	// section of images.
	if (n == 0)
	{	
		var next_series = ' << ';
	
		if (current_image_array_index > 0)
		{
			next_series += key_array[current_image_array_index - 1][1];
		}
		else
		{	
			next_series += key_array[image_array.length - 1][1];
		}
		id_element = document.getElementById('previousArrow');
		child = id_element.childNodes[0];
		newElem = document.createElement("p");
		newText = document.createTextNode(next_series);
		id_element.replaceChild(newText, child);
		
		id_element = document.getElementById('nextArrow');
		child = id_element.childNodes[0];
		newElem = document.createElement("p");
		newText = document.createTextNode('next image >>');
		id_element.replaceChild(newText, child);		
	}
	else if (n == NUMBER_OF_IMAGES - 1)
	{
		if (current_image_array_index < image_array.length - 1)
		{
			next_series = key_array[current_image_array_index + 1][1];
		}
		else
		{
			next_series = key_array[0][1];
		}
		next_series += ' >>';
		id_element = document.getElementById('nextArrow');
		child = id_element.childNodes[0];
		newElem = document.createElement("p");
		newText = document.createTextNode(next_series);
		id_element.replaceChild(newText, child);

		id_element = document.getElementById('previousArrow');
		child = id_element.childNodes[0];
		newElem = document.createElement("p");
		newText = document.createTextNode('<< previous image');
		id_element.replaceChild(newText, child);
	}
	else
	{
		id_element = document.getElementById('previousArrow');
		child = id_element.childNodes[0];
		newElem = document.createElement("p");
		newText = document.createTextNode('<< previous image');
		id_element.replaceChild(newText, child);

		id_element = document.getElementById('nextArrow');
		child = id_element.childNodes[0];
		newElem = document.createElement("p");
		newText = document.createTextNode('next image >>');
		id_element.replaceChild(newText, child);
	}	
}

/******************************************************************************
This function takes as input the number of the image to select.

It then manipulates the current array of images to pull out all the information.
In this case the information is:
array[0]: image file name without the jpg extension
array[1]: Text name of the image to be displayed
array[2]: Medium of artwork
array[3]: Size of artwork in string format
array[4]: Whether the artwork has been sold or not (1 = sold, 0 = not sold)
/*****************************************************************************/

function select_image(n_image)
{	
	var id_old, id_new, id_element, href;
	var text, newElem, newText, child;
	var offset, image_file, image_name;

	if (n_image == null)
	{
		n_image = 0;
	}

	/*****************************************************************
	The following code worked in all browsers except Safari for Mac.
	So, instead changed the class name of the <a> tag.
		href = id_element.getElementsByTagName("a");
		href[0].style.color = "rgb(164, 179, 200)";
		href[0].style.backgroundColor = "transparent";

	This is to update the image numbers displayed. The currently
	selected number is deselected and the new number is selected.
	*****************************************************************/
	//id_old = 'number' + current_image_number;
	//id_element = document.getElementById(id_old);
	//id_element.firstChild.className = 'num-link';

	//id_new = 'number' + n;
	//id_element = document.getElementById(id_new);
	//id_element.firstChild.className = 'num-selected';

	current_image_number = n_image;

	offset = n_image * DIV_FACTOR;
	
	image_file = current_image_array[offset];
	image_file += '.jpg';
	image_file = folder + image_file;

	image_name = current_image_array[offset + 1];
	
/***	
	var medium = current_image_array[offset + 2];
	if (medium == 'ooc')
		medium = 'Oil on canvas';
	else if (medium == 'owb')
		medium = 'Oil on wood block';
	else if (medium == 'oob')
		medium = 'Oil on board';
	else if (medium == 'oop')
		medium = 'Oil on panel';
	else if (medium == 'p')
		medium = 'Pastel';
	
	var size = current_image_array[offset + 3];
***/

/***
	var sold = current_image_array[offset + 4];
	if (sold)
	{	var sold_text = 'Sold';
	}
	else
	{	var sold_text = '\t\n';
	}
***/

	//display_main_image(image_file, image_name, medium, size, n_image);
	display_main_image(image_file, image_name);
	
	// Get ready to preload next image
	var i = n_image + 1;
	
	if ((i < NUMBER_OF_IMAGES) && (main_image_loaded[i] == 0))
	{
		offset = i * DIV_FACTOR;
		image_file = current_image_array[offset];
		image_file += '.jpg';
		image_file = folder + image_file;

		main_image[i] = new Image();
		main_image[i].src = image_file;
		main_image_loaded[i] = 1;
	}	
	
	// This section of code is to change the previous and next arrows to indicate the next
	// section of images.
	if (n_image == 0)
	{	
		var next_series = ' << ';
	
		if (current_image_array_index > 0)
		{
			next_series += key_array[current_image_array_index - 1][1];
		}
		else
		{	
			next_series += key_array[image_array.length - 1][1];
		}
		id_element = document.getElementById('previousArrow');
		child = id_element.childNodes[0];
		newElem = document.createElement("p");
		newText = document.createTextNode(next_series);
		id_element.replaceChild(newText, child);
		
		id_element = document.getElementById('nextArrow');
		child = id_element.childNodes[0];
		newElem = document.createElement("p");
		newText = document.createTextNode('next image >>');
		id_element.replaceChild(newText, child);		
	}
	else if (n_image == NUMBER_OF_IMAGES - 1)
	{
		if (current_image_array_index < image_array.length - 1)
		{
			next_series = key_array[current_image_array_index + 1][1];
		}
		else
		{
			next_series = key_array[0][1];
		}
		next_series += ' >>';
		id_element = document.getElementById('nextArrow');
		child = id_element.childNodes[0];
		newElem = document.createElement("p");
		newText = document.createTextNode(next_series);
		id_element.replaceChild(newText, child);

		id_element = document.getElementById('previousArrow');
		child = id_element.childNodes[0];
		newElem = document.createElement("p");
		newText = document.createTextNode('<< previous image');
		id_element.replaceChild(newText, child);
	}
	else
	{
		id_element = document.getElementById('previousArrow');
		child = id_element.childNodes[0];
		newElem = document.createElement("p");
		newText = document.createTextNode('<< previous image');
		id_element.replaceChild(newText, child);

		id_element = document.getElementById('nextArrow');
		child = id_element.childNodes[0];
		newElem = document.createElement("p");
		newText = document.createTextNode('next image >>');
		id_element.replaceChild(newText, child);
	}	
}	

/******************************************************************************
This function displays the main image in the portfolio viewer and then calls
display_image_info() to display the name, medium, size, and whether it's been
sold.
******************************************************************************/

function display_main_image(image_file, name, medium, size, n_image)
{	if (document.images)
	{
		/* If Safari loads another image and both height and with are not different, then Safari 
		stretches the image to the same width as the previous image. The following code checks if
		Safari browser, and if true, loads a 1px x 1px image before loading the new image.
		******************************************************************************************/
		var safari = (navigator.userAgent.indexOf('Safari') != -1);	
		if (safari)
		{	document.images.targetImage.src = 'images/MsSpacer.gif';
		}
		
		document.images.targetImage.src = image_file;
	
	/***************************************************************************************************
	The following 2 lines work fine in all browsers except Safari. In Safari, the new strings do not 
	align properly. For example, they should be centered horizontally, but instead, the 1st string 
	displayed is properly centered, but subsequent strings are left aligned with the left position of 
	the 1st string. To get around this, display_image_info() was added.

		document.getElementById("imageName").firstChild.nodeValue = image_name[n];
		document.getElementById("imageDescription").firstChild.nodeValue = medium_string;
	***************************************************************************************************/
	
		//display_image_info(name, medium, size, n_image + 1);
		display_image_info(name);
	}
}

/******************************************************************************
This function displays the information for each image: the name, medium, 
size, and whether it's been sold.
Spaces are added to newText because IE5.0 will not take padding or margin.
******************************************************************************/

//function display_image_info(image_name, image_description, image_size, n_image)
function display_image_info(image_name)
{	var newElem;
	var newText;
	var oldChild;
	var text;
	
	newElem = document.createElement("p");
	newText = document.createTextNode(image_name + '    ');
	oldChild = document.getElementById("imageName").childNodes[0];
	document.getElementById("imageName").replaceChild(newText, oldChild);

/**
	text = n_image + ' out of ' + NUMBER_OF_IMAGES;
	newElem = document.createElement("p");
	newText = document.createTextNode(text);
	oldChild = document.getElementById("imageNumber").childNodes[0];
	document.getElementById("imageNumber").replaceChild(newText, oldChild);
**/

/**
	for (var i = 0; i < NUMBER_OF_IMAGES; i++)
	{
		text = i + ' ';
		newElem = document.createElement("p");
		newText = document.createTextNode(text);
		oldChild = document.getElementById("imageList").childNodes[0];
		document.getElementById("imageList").appendChild(newText, oldChild);
	}	
**/
	
}

/******************************************************************************
Preload thumbnail images.
******************************************************************************/

/***
function preload_thumbnails(n_images)
{	for (x = 0; x < n_images; x++)
	{	tn_image[x] = new Image();
		tn_image[x].src = image_file_tn[x];
	}
}
***/

/******************************************************************************
This function displays thumbnail images of all the paintings in a series.
******************************************************************************/

function display_thumbnail_paintings()
{
	var offset;
	var image_file;

	var array_index = current_image_array_index;

	// For some reason, this extra div fixes bug in IE5Mac. Bug is that after 1st row, the
	//  2nd and subsequent images in each row are shifted down a bit.
	document.writeln("\n");
	document.writeln('<div id="thumbnail-div">');     

	for (var i = 0; i < NUMBER_OF_IMAGES; i++)
	{	offset = i * DIV_FACTOR;
	
		image_file = current_image_array[offset];
		image_file += '_tn.jpg';
		image_file = folder + image_file;

		document.write('<div class="thumbnail">');     
		document.write('<a href="slideshow.php?series=' + array_index + '&image=' + i + '" >');     
		document.write('<img id="tn' + i + '" ' + ' src="' + image_file + '"' + ' >');
		document.write('</a>');
		document.write("</div> \n");
	}

	document.writeln('</div>');
}

/******************************************************************************
This function displays the title of the current page as indicated by
current_image_array and key_array. The id that is updated is "pageTitle".
******************************************************************************/

function display_new_title()
{
	var array_index = current_image_array_index;
	var title = document.getElementById("pageTitle");
	var oldChild = title.childNodes[0];
	var new_title = key_array[array_index][1];
	var newText = document.createTextNode(new_title);
	title.replaceChild(newText, oldChild);
}


// end hiding contents from old browsers  -->
// </script>