function
FilmStrip()
{
	this.top = 0;
	this.left = 0;
	this.width = 0;
	this.height = 0;
	this.leftInset = 0; 
	this.topInset = 0;
	this.interImageDistance = 32;
	this.images = [];
	this.caption = [];
	this.linkAction = [];	// point to specific external function 
							// each image can have its own handler
	this.imagePath = [];
	this.layer = null;
	this.innerLayer = null;
	this.imageLayer = [];
	this.captionLayer = [];
	this.imageHeight = 133;	// default for this instance
	this.imageWidth = 200;
	this.imageBorderColor = "white";
	this.imageBGColor = null;
	this.captionFont = "Verdana, sans-serif";
	this.captionSize = "9px";
	this.captionColor = "white";
	this.captionWeight = "normal";
	this.dataTemplate = null;
	this.dataLabels = [];
	
	this.addImage = function(url)
		{
			this.images[this.images.length] = url;
		}
	
	
	this.setImageWidth = function(w)
		{
			this.imageWidth = w;
		}
	this.setImageHeight = function(h)
		{
			this.imageHeight = h;
		}
	this.setImageSize = function(w, h)
		{
			this.setImageWidth(w);
			this.setImageHeight(h);
		}
		
		
	this.setLinkAction = function(proc,path)
		{
			var indx = this.linkAction.length;
			this.linkAction[indx] = proc;
			this.imagePath[indx] = path;
		}
	this.setLinkActionForImage = function(index, proc, path)	// remember this is 1-based indexing -- for user
		{
			this.linkAction[index -1] = proc;
			this.imagePath[index - 1] = path;
		}
		
	this.addLink = function(func, path)
		{
			this.setLinkAction(func, path);
		}
		
	this.addCaption = function(str)
		{
			this.caption[this.caption.length] = str;
			
				
		}
	this.setCaptionForImage = function(indx, str)		// index here is 1-based converted -- for user
		{
			this.caption[indx - 1] = str;
			//expect number base to be 1
		}
	this.setLocation = function(left, top)
		{
			this.top = top;
			this.left = left;
		}
	this.setDimension = function(w, h)
		{
			this.width = w;
			this.height = h;
		}
	this.setWidth = function(w)
		{
			this.width = w;
		}
	this.setLeftInset = function(i)
		{
			this.leftInset = i;
		}
	this.setTopInset = function(i)
		{
			this.topInset = i;
		}
	this.show = function()
		{
			this.layer.style.visibility = "visible";
		}
	this.hide = function()
		{
			this.layer.style.visibility = "hidden";
		}
		
	this.set_zIndex = function(v)
	    {
	        this.layer.style.zIndex = v;
	    }
	    	
	    
	this.setTop = function(t) { this.layer.style.top = t; }
	this.setLeft = function(l) { this.layer.style.left = l; }
			/*
				okay == the plan
				we have labels
				we need data
				each record is new keyvalue hashtable
				record[dataLabel[i] ] = fillstr;
				
			*/
		
	this.db = []; 		// this is the database object prototype
	
	this.dbLabelFont = "Verdana, sans-serif";
	this.dbLabelColor = "red";
	this.dbLabelSize = "10px";
	this.dbLabelWeight = "bold";
	this.dbTextFont = "Verdana, sans-serif";
	this.dbTextColor = "white";
	this.dbTextSize = "9px";
	this.dbTextWeight = "normal";
	
	this.addRecord = function()
			{
				var data = arguments;
				
				var record = [];
					for(var i = 0; i < this.dataLabels.length; i++)
						record[this.dataLabels[i]] = data[i] || "";
						
					this.db[this.db.length] = record;
				
			}
	this.addRecordForImage = function(index)
		{
			var data = arguments;
			
			var record = [];
			
				for(var i = 0; i < this.dataLabels.length; i++)
					record[this.dataLabels[i]] = data[i + 1] || "";
				
				this.db[index - 1] = record;
		}
			
			
	this.setDataDelimiter = function(str)
		{
			this.dataDelimiter = str;
		}
	this.setDataLabels = function()
		{
			for(var i = 0; i < arguments.length; i++)
				this.dataLabels[i] = arguments[i];
		}
	
	this.render = function()
		{
			var ref = this;
			var runningSpace = 0;
			
			this.layer = document.createElement("DIV");
			
			
			
			
			with(this.layer.style)
			{
				position = "absolute";
				top = ref.top;
				left = ref.left;
				width = ref.width;
				height = ref.height;
				visibility = "hidden";
				overflow = "auto";
				if(document.all) overflowX = "hidden";
				zIndex = 60;
				
				/*  Custom scrollbar   */
				scrollbarTrackColor = "black";
				scrollbarArrowColor = "white";
				scrollbarHighlightColor = "#C2762F";
				scrollbarFaceColor = "black";
				scrollbar3dLightColor = "black"
	
				scrollbarShadowColor  = "#C2762F";
				scrollbarDarkShadowColor = "#111111";
				
				scrollbarBaseColor = "#88844C";
				/*    End custom scrollbar    */
				
			}
			
			this.innerLayer = document.createElement("DIV");
			
			
			with(this.innerLayer.style)
			{
				position = "absolute";
				top = ref.topInset;
				left = ref.leftInset;
				width = ref.width - ref.leftInset - 16;
				height = 2* ref.topInset + ref.images.length * (ref.interImageDistance+ ref.imageHeight)
				visibility = "inherit";
				
			}
			
			this.layer.appendChild(this.innerLayer);
			/*
			if(this.linkAction[0])
			alert(this.linkAction[0] + "\n" + 
					this.imagePath[0]);
			*/
			for(var i = 0; i < this.images.length; i++)
			{
			
			
				this.imageLayer[i] = document.createElement("DIV");
				
				with (this.imageLayer[i].style)
				{
					position = "absolute";
					top = ref.topInset  + i * (ref.imageHeight + ref.interImageDistance) + runningSpace;
					left = 0;
					width = ref.imageWidth;
					height = ref.imageHeight+ (document.all ? 2 : 0);
					// borders?
					borderWidth = 1;
					borderColor = ref.imageBorderColor;
					if(ref.imageBGColor)
						backgroundColor = ref.imageBGColor;
					borderStyle = "solid";
					visibility = "inherit";
				}
				
				var content = "";
				
				if(this.linkAction[i])
					content += "<a href = # class=fs onclick = 'return " + this.linkAction[i] + "(\"" + this.imagePath[i] + "\");' onfocus = 'this.blur()'>"
					content += "<img src = " + this.images[i] + " border=0>";
				if(this.linkAction[i])
					content += "</a>";
				
				//if(i == 1) alert(content);
				
				this.imageLayer[i].innerHTML = content; //"<img src = " + this.images[i] + ">";
				
				this.innerLayer.appendChild(this.imageLayer[i]);
				
				
				
// -------------
				
				if(this.db[i])
				{
			
				var lstyl = "style='position: relative; font-family: " + ref.dbLabelFont + "; " + 
												"color: " + ref.dbLabelColor + "; " + 
												"font-weight: " + ref.dbLabelWeight + "; " + 
												"font-size: " + ref.dbLabelSize + ";'";
					
					var tstyl = "style='position: relative; font-family: " + ref.dbTextFont + "; " + 
												"color: " + ref.dbTextColor + "; " + 
												"font-weight: " + ref.dbTextWeight + "; " + 
												"font-size: " + ref.dbTextSize + ";'";
					
					
			
				
					this.captionLayer[i] = document.createElement("DIV");
					
					with(this.captionLayer[i].style)
					{
						
						position  = "absolute";
						top = ref.topInset + i * (ref.imageHeight + ref.interImageDistance) + ref.imageHeight + 2 + runningSpace;
						left = 0;
						width = ref.imageWidth;
						visibility = "inherit";
						color = ref.dbTextColor;
						fontWeight = ref.dbTextWeight;
						fontSize = ref.dbTextSize;
						fontFamily = ref.dbTextFont;
						
						zIndex = 50;
						
					}
					
					var content = "";
					var rec = this.db[i];
				
					for(var a in rec)
					{
						content += "<div id = " + a.split(" ").join("_") + " " + tstyl + "><span " + lstyl + ">" + a + ref.dataDelimiter + "</span>" +  rec[a] + "</div>"; //        + i
					}
					
					//alert(content);
					
					this.captionLayer[i].innerHTML = "<span>" + content + "</span>";
					
					
					
					this.innerLayer.appendChild(this.captionLayer[i]);
					
					
					
					var dummy = document.createElement("DIV");
						dummy.style.visibility = "hidden";
						dummy.style.width = ref.imageWidth;
					
					
					dummy.innerHTML = "<span>" + content + "</span>";
					
					document.body.appendChild(dummy);					
					
					runningSpace += dummy.offsetHeight + ref.interImageDistance;//118;//this.captionLayer[i].offsetHeight;
				
				
				}
				else
				if(this.caption[i])
				{
				var use_pinline = false;
				var pl_color = 0;
				var pl_width = 0;
				var pl_align = 0;
				var pl_leftoffset = 0;
				var pl_use_width = 0;
				
					if(this.caption[i].indexOf("pinLine") != -1)
						{
						var parts = this.caption[i].split(",");
							// 1: width 2: align 3: color
							
					
							
						pl_width = parts[1];
						pl_align = parts[2];
						pl_color = parts[3];
						use_pinline = true;
						
						if(pl_width.indexOf("%") != -1)
							{
								pl_use_width = Math.round(ref.width * parseInt(pl_width)/100); 
								
								
							}
							else
								pl_use_width = parseInt(pl_width);
								
						switch(pl_align)
						{
							case "center":
								// width will either be % or pixels
									pl_leftoffset = Math.round(ref.width/2 - pl_use_width/2);
								break;
							case "right":
									pl_leftoffset = ref.width - pl_use_width;
								break;
							// default and left has leftoffset at zero, which it already is
						}
						
						
						}
						
						
				
				
					this.captionLayer[i] = document.createElement("DIV");
					
					with(this.captionLayer[i].style)
					{
						position = "absolute";
						
						if(use_pinline)
						top = ref.topInset + i * (ref.imageHeight + ref.interImageDistance) + ref.imageHeight + Math.round( ref.interImageDistance/2);
						else
						top = ref.topInset + i * (ref.imageHeight + ref.interImageDistance) + ref.imageHeight + 5 + runningSpace; // changed from 2
						left = use_pinline ? (-ref.leftInset + pl_leftoffset) : 0;
						width = use_pinline ? pl_use_width : ref.imageWidth;
						height = use_pinline ? 1 : ref.interImageDistance;
						textAlign = "center";
						visibility = "inherit";
						color = ref.captionColor;
						if(use_pinline) backgroundColor = pl_color;
						fontWeight = ref.captionWeight;
						fontSize = ref.captionSize;
						//lineHeight = "14px";                /// -------------> special hardcode for this page
						fontFamily = ref.captionFont;
						overflow = use_pinline ? "hidden" : "visible";
						zIndex = 50;
					}
					
						if(this.caption[i].indexOf("pinLine") == -1)  // addCaption("pinLine,left,80%,red");
						this.captionLayer[i].innerHTML = "<span>" + this.caption[i] + "</span>";
						
						this.innerLayer.appendChild(this.captionLayer[i]);
				
				}
				//--------------------------------------------
				
			
			}
			
					var dummy = document.createElement("DIV");
			
						dummy.style.position = "absolute";
						dummy.style.top = ref.topInset + (this.images.length-1) * (ref.imageHeight + ref.interImageDistance) + ref.imageHeight + 2 + runningSpace;
						dummy.style.visibility = "hidden";
						dummy.style.width = ref.imageWidth;
						dummy.style.height = 30;
				this.innerLayer.appendChild(dummy);
				//this.layer.style.visibility = "hidden";
			document.body.appendChild(this.layer);
			
		
			
		}
	
}