/*------------------------ ACME JAVASCRIPT OBJECT -----------------------

	scroll_images will display one or more images in a single row or 
	column, depending on orientation of the DIV container.

	*)	In a typical thumbnail use, the images will be constrained
		to a uniform width or height.  But images don't have to be 
		the same size.

	*)	Currently, "scroll" just produces an abrupt change of images.
		Later, a true scroll may be appropriate.

	*)	The DIV which encloses the thumbnails must be specified with
		a "relative" position.  All thumbnails will be positioned
		absolutely, relative to that DIV.
------------------------------------------------------------------------*/

function scroll_images(
	container_id,			//	str; DOM ID of DIV containing the images
	images_ids,				//	array of DOM image id strings
	min_margin,				//	str; "10px"; minimum margin between images
	orientation 			//	"vertical" or "horizontal"
){
	var str = "";

	//	alert("container_id: " + container_id);

	//	Initialize object properties, based on input parameters

	this.container 			= document.getElementById(container_id);
	this.images_ids			= images_ids;
	this.images_count 		= this.images_ids.length;

	//	horizontal or vertical orientation?

	if (orientation.match(/hor/gi))
		this.horizontal		= true;
	else
		this.horizontal		= false;

	//	Strip "px" from "10px", etc

	var container_width		= this.container.style.width.replace(/px/gi,  "");
	this.container_width	= Number(container_width);

	var container_height	= this.container.style.height.replace(/px/gi,  "");
	this.container_height	= Number(container_height);

	str						= min_margin.replace(/px/gi,  "");
	this.min_margin			= Number(str);
	this.image_margin		= 0;

	this.images_width		= 0;
	this.images_height		= 0;

	this.start_index		= 0;
	this.stop_index			= 0;

	//	Specify methods for this object

	this.calculate	= calculate_scroll_images;
	this.show		= show_scroll_images;
	this.clear		= clear_scroll_images;
	this.next		= show_scroll_images_next;
	this.previous	= show_scroll_images_previous;

	//	Position all images at (0,0) in the container, and hide them

	this.clear();

	return(true);
}


/*------------------------------------------------------------------------
	Beginning with the "start index", determine how many images will 
	fit in the container.  Factor in the minimum margin between images.
------------------------------------------------------------------------*/

function calculate_scroll_images()
{
	var i				= 0;
	var str				= "";
	var images_counter	= 0;
	var image_margin	= 0;
	var image_width		= 0;
	var image_height	= 0;
	var total_width  	= 0;
	var total_height 	= 0;

	//	alert("calculate_scroll_images()");

	//	Determine how many images can fit in the scroll box,
	//	including the "this.min_margin"

	this.images_height	= 0;
	this.images_width	= 0;
	this.image_margin	= 0;

	for (i=this.start_index; i<this.images_count; i++)
	{
		//	alert("image ID:" + this.images_ids[i]);

		var image		= document.getElementById(this.images_ids[i]);

		str				= image.style.width.replace(/px/gi, "");	
		image_width		= Number(str);
		str				= image.style.height.replace(/px/gi, "");	
		image_height	= Number(str);
	
		if (this.horizontal) 
		{	
			this.images_width += image_width;
			total_width  += image_width + this.min_margin;
			if (total_width <= this.container_width) 
				++images_counter;
			else {
				this.images_width	-= image_width;
				total_width			-= image_width + this.min_margin;
				break;
			}
		}
		else 
		{
			this.images_height	+= image_height;
			total_height		+= image_height + this.min_margin;

			//	alert("total_height: " 	+ total_height);
			//	alert("container_height: " + this.container_height);

			if (total_height < this.container_height) 
				++images_counter;
			else {
				this.images_height	-= image_height;
				total_height  		-= image_height + this.min_margin;
				break;
			}
		}
	}

	if (images_counter == 0)
		this.stop_index = this.start_index;
	else
		this.stop_index = this.start_index + images_counter - 1;

	//	Since we have the requisite info, also set the margin
	//	between images.

	if (this.horizontal)
		image_margin = this.container_width - this.images_width;
	else
		image_margin = this.container_height - this.images_height;

	image_margin /= this.stop_index - this.start_index + 2;
	image_margin  = Math.round(image_margin);

	this.image_margin = image_margin;

	//	alert("start_index : " + this.start_index);
	//	alert("stop_index  : " + this.stop_index);
	//	alert("image_margin: " + this.image_margin);

	return(true);
}


/*------------------------------------------------------------------------
	Display the images between "start_index" and "stop_index".
------------------------------------------------------------------------*/

function show_scroll_images()
{
	var i				= 0;
	var str				= "";
	var image_height	= 0;
	var image_width		= 0;
	var x_pos			= 0;
	var y_pos			= 0;

	//	alert("show_scroll_images()");

	if (this.horizontal)
		x_pos = this.image_margin;
	else
		y_pos = this.image_margin;

	//	For each image between start_index and stop_index, 
	//	determine x/y positioning coordinates and change
	//	the image from no-display to display.

	for (i=this.start_index; i<=this.stop_index; i++)
	{
		var image = document.getElementById(this.images_ids[i]);

		//	Each image is positioned "absolute", which presumes
		//	the image container is positioned "relative".

		image.style.position = "absolute";

		//	Produce a horizontal row of images

		if (this.horizontal)
		{
			image.style.left = x_pos.toString() + "px";;

			str  		=  image.style.width.replace(/px/gi, "");	
			image_width	=  Number(s_width);
			x_pos 		+= image_width + this.image_margin;

			str 		= image.style.height.replace(/px/gi, "");
			image_height = Number(str);	

			y_pos  		= this.container_height - image_height;
			y_pos  		/= 2;
			y_pos		= Math.round(y_pos);	

			image.style.top = y_pos.toString() + "px";;
		}

		else	//	Produce a vertical column of images
		{
			image.style.top = y_pos.toString() + "px";

			//	Center the image horizontally in the column

			str 		= image.style.width.replace(/px/gi, "");	
			image_width = Number(str);
			x_pos  		= this.container_width - image_width;
			x_pos  		/= 2;
			x_pos		= Math.round(x_pos);	

			image.style.left = x_pos.toString() + "px";

			//	Place the image vertically in the column

			str 		 = image.style.height.replace(/px/gi, "");	
			image_height = Number(str);

			y_pos += image_height + this.image_margin;
		}

		image.style.display = "block";
	}

	return(true);
}


/*------------------------------------------------------------------------
	Clear the scroll box.
------------------------------------------------------------------------*/

function clear_scroll_images()
{
	//	alert("clear_scroll_images()");
	//	alert("images_count: " + this.images_count);

	for (var i=0; i<this.images_count; i++) 
	{
		var image_id 	= this.images_ids[i];
		var image 		= document.getElementById(image_id);

		image.style.left	= 0;
		image.style.top		= 0;
		image.style.display = "none";
	}

	return(true);
}


/*------------------------------------------------------------------------
	Display the previous group of images, determining how many will fit.
------------------------------------------------------------------------*/

function show_scroll_images_previous()
{
	var start_index = this.start_index;

	if (this.start_index == 0)
		return(true);

	while (this.start_index > 0)
	{
		this.start_index -= 1;
		this.calculate();
		if (this.stop_index == start_index-1)
			break;
	}

	this.clear();
	this.show();

	return(true);
}

/*------------------------------------------------------------------------
	Display the next group of images, determining how many will fit.
------------------------------------------------------------------------*/

function show_scroll_images_next()
{
	var stop_index = this.stop_index;

	if (this.stop_index == (this.images_count-1))
		return(true);

	this.clear();
	this.start_index = this.stop_index+1;
	this.calculate();
	this.show();

	return(true);
}