var NUM_COLUMN_IMGTEXT = 1;
var imageData = ("[]").parseJSON();
var caneditslides = false;
var imgmargin = 0;
var nextresultnum = 0;		// the index of the next search result to show in the imageFinds array

// create a new image slide based on data in imageData array at index "num"
function SlideImage(num) {
	var width = imageData[num].w;
	var height = imageData[num].h;

	var imgslide = document.createElement("div");
	imgslide.className = "slidecontainer";
	imgslide.style.width = width + "px";
	//imgslide.style.marginLeft = imgmargin + "px";
	
	// add header div that contains time label and "full screen" 
	var headdiv = document.createElement("div");
	headdiv.className = "slidecontainer time";
	headdiv.style.width = width + "px";	
	headdiv.style.height = "20px";
	headdiv.style.lineHeight = headdiv.style.height;
	imgslide.appendChild(headdiv);
	
	
	// add time label
	var timelbl = document.createElement("span");
	timelbl.style.display = "none";
	if(typeof timelbl.style.cssFloat != "undefined") 
		timelbl.style.cssFloat = "left";
	else
		timelbl.style.styleFloat = "left";
	headdiv.appendChild(timelbl);
	var minstr = "";
	var secstr = "";
	if(typeof imageData[num].linksec != "undefined" && imageData[num].linksec != -1){
		timelbl.style.display = "inline";
		var timestr = getProperTime(imageData[num].linksec);
		minstr = timestr.split(":")[0];
		secstr = timestr.split(":")[1];
		timelbl.innerHTML = "  " + timestr;
	}

	// add delete status. linksec == -1 means that slide has been deleted
	var dellbl = document.createElement("span");
	dellbl.style.color = "red";
	dellbl.innerHTML = "  DELETED";
	if(typeof imageData[num].linksec != "undefined" && imageData[num].linksec == -1){
		dellbl.style.display = "inline";
	}	
	else{
		dellbl.style.display = "none";
	}
	headdiv.appendChild(dellbl);
	
	// add include link to enable re-inclusion of slide
	var inclnk = document.createElement("span");
	inclnk.innerHTML = "&nbsp;&nbsp;<span style='text-decoration:underline'>click to include</span>";
	inclnk.style.cursor = "pointer";
	inclnk.style.display = dellbl.style.display;
	inclnk.onclick = function(){
		inclnk.style.display = "none";
		dellbl.style.display = "none";
		imgslide.linksec = undefined;			// this removes linksec attribute from the image
		imageData[num].linksec = undefined;
	}
	headdiv.appendChild(inclnk);
	
	// add full size link
	var fslbl = document.createElement("span");
	if(typeof fslbl.style.cssFloat != "undefined") 
		fslbl.style.cssFloat = "right";
	else
		fslbl.style.styleFloat = "right";
	fslbl.style.cursor = "pointer";
	fslbl.innerHTML = "[full size]&nbsp;&nbsp;";
	fslbl.onclick = function(){
		var popupframe = $get("pnlSlidesFullScreenPopup");
		var popupimg = popupframe.getElementsByTagName("img")[0];
		if(imageData[num].isppt)
			popupimg.src = img.src.replace("_300_","_640_");
		else
			popupimg.src = img.src;
		popupimg.onload = function(){
			popupframe.style.display = "block";
		}
	}
	headdiv.appendChild(fslbl);
	
	// add image itself
	var img = document.createElement("img");
	img.style.width = width + "px";
	img.style.height = height + "px";
	// -- NOTE: MUST set onload event handler BEFORE setting source!!
	img.onload = function(){
		// only show slide once image is fully loaded
		//imgslide.style.display = "block";
	};
	img.src = imageData[num].src;

	if(typeof imageData[num].linksec != "undefined"){
		imgslide.linksec = imageData[num].linksec;		// store linksec directly in image itself
	}
	img.onclick = function(){
		// linksec will not be defined if image does not have a time link
		try{
			vnplayer.sendEvent('SEEK',imgslide.linksec);
		} catch(ex){}
	}
	imgslide.appendChild(img);

	// add search results box
	var searchdiv = document.createElement("div");
	searchdiv.style.display = "none";
	searchdiv.style.textAlign = "center";
	searchdiv.style.padding = "2px";
	imgslide.appendChild(searchdiv);
	
	// add editing control
	if(caneditslides){
		var menudiv = document.createElement("div");
		menudiv.className = "menu";
		menudiv.style.width = width + "px";
		menudiv.style.fontWeight = "bold";
		
		// text input for minutes
		var inpmin = document.createElement("input");
		inpmin.type = "text";
		inpmin.value = minstr;
		inpmin.defaultValue = minstr;
		inpmin.onkeyup = function(event){
			if( ( !event ? window.event.keyCode : event.keyCode ) == 13 )
				stopBubbleEvent(event);
				imgslide.linkImage();
		}
		menudiv.appendChild(inpmin);
		menudiv.appendChild(document.createTextNode(" : "));
		
		// text input for seconds
		var inpsec = document.createElement("input");
		inpsec.type = "text";
		inpsec.value = secstr;
		inpsec.defaultValue = secstr;
		inpsec.onkeyup = function(event){
			if( ( !event ? window.event.keyCode : event.keyCode ) == 13 )
				stopBubbleEvent(event);
				//linkImageToVideo(img);
				imgslide.linkImage();
		}
		menudiv.appendChild(inpsec);
		
		menudiv.appendChild(document.createTextNode(" "));
		
		// button to update time to current video time
		var nowlink = document.createElement("span");
		nowlink.style.textDecoration = "underline";
		nowlink.innerHTML = "now";
		nowlink.onclick = function(){
			inpmin.value = getProperTime(curTime).split(":")[0];
			inpsec.value = getProperTime(curTime).split(":")[1];
		}
		menudiv.appendChild(nowlink);
		
		menudiv.appendChild(document.createTextNode(" "));
		
		// LINK button
		var linkbtn = document.createElement("img");
		linkbtn.src = "images/video/images/link.png";
		linkbtn.style.cursor = "pointer";
		linkbtn.title = "link to time";
		linkbtn.onclick = function(event){
			stopBubbleEvent(event);
			imgslide.linkImage();
			this.src = "images/video/images/linkover.png";
		}
		linkbtn.onmouseover = function(){this.src = "images/video/images/linkover.png"};
		linkbtn.onmousedown = function(){this.src = "images/video/images/linkclick.png"};
		linkbtn.onmouseout = function(){this.src = "images/video/images/link.png"};
		menudiv.appendChild(linkbtn);

		menudiv.appendChild(document.createTextNode(" "));

		// COPY button
		var copybtn = document.createElement("img");
		copybtn.src = "images/video/images/copy.png";
		copybtn.style.cursor = "pointer";
		copybtn.title = "copy";
		copybtn.onclick = function(event){
			stopBubbleEvent(event);
			imgslide.container.copySlide(imgslide);
			this.src = "images/video/images/copyover.png";
		}
		copybtn.onmouseover = function(){this.src = "images/video/images/copyover.png"};
		copybtn.onmousedown = function(){this.src = "images/video/images/copyclick.png"};
		copybtn.onmouseout = function(){this.src = "images/video/images/copy.png"};
		menudiv.appendChild(copybtn);
		
		menudiv.appendChild(document.createTextNode(" "));
		
		// UP button
		var upbtn = document.createElement("img");
		upbtn.src = "images/video/images/up.png";
		upbtn.style.cursor = "pointer";
		upbtn.title = "move up";
		upbtn.onclick = function(event){
			stopBubbleEvent(event);
			imgslide.container.moveUp(imgslide);
			this.src = "images/video/images/upover.png";
		}
		upbtn.onmouseover = function(){this.src = "images/video/images/upover.png"};
		upbtn.onmousedown = function(){this.src = "images/video/images/upclick.png"};
		upbtn.onmouseout = function(){this.src = "images/video/images/up.png"};
		menudiv.appendChild(upbtn);
		
		menudiv.appendChild(document.createTextNode(" "));
		
		// DOWN button
		var downbtn = document.createElement("img");
		downbtn.src = "images/video/images/down.png";
		downbtn.style.cursor = "pointer";
		downbtn.title = "move down";
		downbtn.onclick = function(event){
			stopBubbleEvent(event);
			imgslide.container.moveDown(imgslide);
			this.src = "images/video/images/downover.png";
		}
		downbtn.onmouseover = function(){this.src = "images/video/images/downover.png"};
		downbtn.onmousedown = function(){this.src = "images/video/images/downclick.png"};
		downbtn.onmouseout = function(){this.src = "images/video/images/down.png"};
		menudiv.appendChild(downbtn);

		menudiv.appendChild(document.createTextNode(" "));
		
		// DELETE button
		var delbtn = document.createElement("img");
		delbtn.src = "images/video/images/delete.png";
		delbtn.title = "delete";
		delbtn.onclick = function(event){
			stopBubbleEvent(event);
			imgslide.container.deleteSlide(imgslide);
			this.src = "images/video/images/delete.png";
		}
		delbtn.onmouseover = function(){this.src = "images/video/images/deleteover.png"};
		delbtn.onmousedown = function(){this.src = "images/video/images/deleteclick.png"};
		delbtn.onmouseout = function(){this.src = "images/video/images/delete.png"};
		menudiv.appendChild(delbtn);
		
		menudiv.appendChild(document.createTextNode(" "));
		
		// EDIT text button
		var editbtn = document.createElement("img");
		editbtn.src = "images/video/images/text.png";
		editbtn.title = "edit text";
		editbtn.style.cursor = "pointer";
		editbtn.onclick = function(event){
			stopBubbleEvent(event);
			if(textdiv.style.display == "none"){
				imgslide.showText(imgslide);				
				this.src = "images/video/images/textclick.png";
			}
			else{
				imgslide.hideText(imgslide);							
				this.src = "images/video/images/text.png";
			}
		}
		//editbtn.onmouseover = function(){this.src = "images/video/images/textover.png"};
		editbtn.onmousedown = function(){this.src = "images/video/images/textclick.png"};
		menudiv.appendChild(editbtn);
		
		imgslide.appendChild(menudiv);
		
		// edit text area
		var textdiv = document.createElement("div");
		textdiv.style.color = "#606060";
		
		// crazy bug...must create <table> innerHTML as separate string and then set innerHTML = this string instead of building innerHTML directly
		var str = '<table cellpadding="0" cellspacing="0"><tbody>';
		str += '<tr><td style="text-align:right;width:25px;">title:</td><td><textarea cols="' + NUM_COLUMN_IMGTEXT + '">' + imageData[num].title + '</textarea></td></tr>';
		str += '<tr><td style="text-align:right;width:25px;">text:</td><td><textarea cols="' + NUM_COLUMN_IMGTEXT + '">' + imageData[num].text + '</textarea></td></tr>';
		str += '</tbody></table>';
		textdiv.innerHTML = str;
		textdiv.style.paddingBottom = "5px";
		textdiv.style.display = "none";
		imgslide.appendChild(textdiv);
		
		// set number of rows when initially rendered
		var titletxt = textdiv.getElementsByTagName("textarea")[0];
		var titlenewlinefinds = (new RegExp("\n","g")).exec(titletxt.value);
		titletxt.rows = Math.max(Math.ceil(titletxt.value.length / titletxt.cols), 1) + (titlenewlinefinds != null ? titlenewlinefinds.length : 0);
		var texttxt = textdiv.getElementsByTagName("textarea")[1];
		var textnewlinefinds = (new RegExp("\n","g")).exec(texttxt.value);
		texttxt.rows = Math.max(Math.ceil(texttxt.value.length / texttxt.cols), 1) + (textnewlinefinds != null ? textnewlinefinds.length : 0);
		
		// handle resizing of text-area when text is entered
		titletxt.onkeyup = function(event){
			var newlinefinds = (new RegExp("\n","g")).exec(this.value);
			this.rows = Math.max(Math.ceil(this.value.length / this.cols), 1) + (newlinefinds != null ? newlinefinds.length : 0);
			// var numrows = Math.max(Math.ceil(this.value.length / this.cols), 1);
			// var newheight = (IS_IE ? 15 : 16) + 15 * (numrows - 1);
			// newheight = (IS_IE ? 19 : 18) + 15 * (numrows - 1) + (numrows > 1 ? 2 : 0);
			// this.style.height = newheight + "px";
			// if (num > 1) this.style.paddingTop = "2px";
		}
		texttxt.onkeyup = function(event){
			var newlinefinds = (new RegExp("\n","g")).exec(this.value);
			this.rows = Math.max(Math.ceil(this.value.length / this.cols), 1) + (newlinefinds != null ? newlinefinds.length : 0);
			// var numrows = Math.max(Math.ceil(this.value.length / this.cols), 1);
			// var newheight = (IS_IE ? 15 : 16) + 15 * (numrows - 1);
			// newheight = (IS_IE ? 19 : 18) + 15 * (numrows - 1) + (numrows > 1 ? 2 : 0);
			// this.style.height = newheight + "px";
			// if (num > 1) this.style.paddingTop = "2px";
		}		
	}	
	
	imgslide.num = imageData[num].num;
	imgslide.container;
	
	imgslide.linkImage = function (){
		// parse time from input textboxes. use try/catch to catch any exceptions thrown while parsing
		var min = inpmin.value;
		var sec = inpsec.value;
		
		var re_min = RegExp('^[0-9][0-9]*$');
		var re_sec = RegExp('^([0-9]|[0-9][0-9])$');
		if(min.match(re_min) == null || sec.match(re_sec) == null) return;		// ensure that inputs are numbers
	
		// update imgslide and image Data array linksec time
		min = parseFloat(min);
		sec = parseFloat(sec);
		var sectime = min*60 + sec;
		imgslide.linksec = sectime;
		imageData[num].linksec = sectime;
		
		// display time
		timelbl.innerHTML = "&nbsp;&nbsp;" + getProperTime(sectime);
		timelbl.style.display = "inline";
		
		// set slide to jump on click
		img.onclick = function() { vnplayer.sendEvent('SEEK',sectime); };
	}	
	imgslide.play = function() { headdiv.style.backgroundColor = "#000000"; }
	imgslide.noplay = function() { headdiv.style.backgroundColor = "#E0E0E0"; }
	imgslide.showDeleteStatus = function(){
		dellbl.style.display = "inline";
		inclnk.style.display = "inline";
	}
	imgslide.showText = function() { textdiv.style.display = "block"; }
	imgslide.hideText = function(){
		textdiv.style.display = "none";
		imageData[num].title = textdiv.getElementsByTagName("textarea")[0].value;
		imageData[num].text = textdiv.getElementsByTagName("textarea")[1].value;
	}
	imgslide.getTitle = function() { return textdiv.getElementsByTagName("textarea")[0].value; }
	imgslide.getText = function() { return textdiv.getElementsByTagName("textarea")[1].value; }
	imgslide.showSearchResults = function(str){
		searchdiv.innerHTML = str;
		searchdiv.style.display = "block";
	}
	imgslide.hideSearchResults = function(){
		searchdiv.innerHTML = "";
		searchdiv.style.display = "none";
	}	
	imgslide.scrollIntoView = function() { imgslide.container.scrollTop = imgslide.offsetTop - 5; }
	
	return imgslide;
}
function makeImagesPanel() {
	var imagePanel = $get("pnlSlides");

	var imageCon = $get("pnlSlidesContainer");
	
	// search results
	var imageConSR = $get("pnlSlidesContainerSR");
	
	//Check if there is no tree
	if (imageCon != null && typeof imageData != "undefined") {

		var conwidth = parseFloat(imageCon.style.width.split("px")[0]) - 20;		// subtract 20px for scrollbar
		imgmargin = Math.max(Math.round((conwidth - imageData[0].w)/2),0);
	
			// Dynamically determine number of cols for textareas in edit notes panel. Exit gracefully if slides aren't loaded loaded.
		if (NUM_COLUMN_IMGTEXT == 1){
			//setColNumber($get("txtDiscoverCols"), parseFloat($get("pnlSlidesContainer").style.width.split("px")[0]) - 100);		// subtract 50 from width to account for padding and width of other elements
			setColNumber($get("txtDiscoverCols"), imageData[0].w - 45);		// subtract 45 from width to account for padding and width of other elements
			NUM_COLUMN_IMGTEXT = $get("txtDiscoverCols").cols;
			$get("txtDiscoverCols").cols = 1;		
		}
	
		for (var i = 0, il = imageData.length; i < il; i++) {
			var imgslide = new SlideImage(i);
			imgslide.container = imageCon;
			imageCon.appendChild(imgslide);
		}
		
		imageCon.images = imageCon.childNodes;
		imageConSR.images = imageConSR.childNodes;
		
		// hide all images and only show images with text containing the search string
		imagePanel.showSearchResults = function(){
			imageCon.style.display = "none";
			imageConSR.style.display = "block";
			var info = $get("pnlSlidesSearchInfo");
			info.getElementsByTagName("span")[0].innerHTML = imageConSR.childNodes.length;
			info.style.display = "block";
		}
		imagePanel.hideSearchResults = function(){
			imageCon.style.display = "block";
			imageConSR.style.display = "none";
			$get("pnlSlidesSearchInfo").style.display = "none";
		}

		imageCon.copySlide = function(slide){
			// first, clone and insert array item in itemData BEFORE slide that was copied
			var imgnum = slide.num;		// the number of the copy. NOTE: the corresonding data in the "imageData" array is located at the index of (imgnum - 1)
			var idx = imgnum-1;
			var newimgdata = new Object();
			newimgdata.id = imageData[idx].id;
			newimgdata.fid = imageData[idx].fid;
			newimgdata.num = imageData[idx].num;
			try{
				newimgdata.linksec = imageData[idx].linksec;
			} catch(ex){}
			newimgdata.src = imageData[idx].src;
			newimgdata.title = imageData[idx].title;
			newimgdata.text = imageData[idx].text;
			newimgdata.isppt = imageData[idx].isppt;
			newimgdata.w = imageData[idx].w;
			newimgdata.h = imageData[idx].h;
			newimgdata.iscopy = true;
			imageData.splice(idx,0,newimgdata);
			
			// insert a new slide at index of (imgnum-1) in imageCon.images array
			var newimgslide = new SlideImage(imgnum);
			newimgslide.container = imageCon;
			imageCon.insertBefore(newimgslide,slide);
			
			// correct img numbers in data and DOM images array
			for(var i = imgnum, il = imageData.length; i < il; i++){
				imageData[i].num++;
				imageCon.images[i].num++;
			}
		}
		
		imageCon.moveUp = function(slide){
			var idx = slide.num-1;
			if(idx <= 0) return;
			
			var idx = slide.num-1;		// index of element in imageData and DOM images arrays is always slidenumber - 1
			var slidecopy = new SlideImage(idx);
			slidecopy.container = imageCon;
			
			var imgdatacopy = new Object();
			imgdatacopy.id = imageData[idx].id;
			imgdatacopy.fid = imageData[idx].fid;
			imgdatacopy.num = imageData[idx].num;
			try{
				imgdatacopy.linksec = imageData[idx].linksec;
			} catch(ex){}
			imgdatacopy.src = imageData[idx].src;
			imgdatacopy.title = imageData[idx].title;
			imgdatacopy.text = imageData[idx].text;
			imgdatacopy.isppt = imageData[idx].isppt;
			imgdatacopy.w = imageData[idx].w;
			imgdatacopy.h = imageData[idx].h;
			
			imageData.splice(idx-1,2,imgdatacopy,imageData[idx-1]);
			imageCon.insertBefore(slidecopy,imageCon.images[idx-1]);
			imageData[idx].num++;
			imageData[idx-1].num--;
			imageCon.images[idx].num++;
			imageCon.images[idx-1].num--;			
			imageCon.removeChild(slide);

		}

		imageCon.moveDown = function(slide){
			var idx = slide.num-1;
			if(idx < imageCon.images.length-1){
				imageCon.moveUp(imageCon.images[idx+1]);
			}
		}
		
		imageCon.deleteSlide = function(slide){
			// If slide is a copy, then just delete it. otherwise, set linksec = -1 and show deleted status next to linktime.
			// With the slide linksec = -1, slide will only be loaded when in editing mode.
			var idx = slide.num - 1;
			if(imageData[idx].iscopy){
				imageCon.removeChild(slide);
				imageData.splice(idx,1);
			
				// correct img numbers in data and DOM images array
				for(var i = idx, il = imageData.length; i < il; i++){
					imageData[i].num--;
					imageCon.images[i].num--;
				}
			}
			else {
				slide.linksec = -1;
				slide.showDeleteStatus();
				imageData[idx].linksec = -1;
			}
		}
	}
}

function saveImages(){
	var images = $get('pnlSlidesContainer').images;
	
	var body = "<images>";
	for(var i = 0, il = imageData.length; i < il; i++){
		body += "<image>";
		body += "<copy>" + (imageData[i].iscopy ? "1" : "0") + "</copy>";
		body += "<iid>" + imageData[i].id + "</iid>";
		body += "<fid>" + imageData[i].fid + "</fid>";
		body += "<num>" + imageData[i].num + "</num>";
		// update imageData array so that most recently entered text gets saved
		imageData[i].title = images[i].getTitle();
		imageData[i].text = images[i].getText();
		body += "<title>" + encodeHTML(imageData[i].title) + "</title>";
		body += "<text>" + encodeHTML(imageData[i].text) + "</text>";		
		body += "<ppt>" + imageData[i].isppt + "</ppt>";
		if (typeof imageData[i].linksec != "undefined") body += "<time>" + imageData[i].linksec + "</time>";
		body += "</image>";
	}
	body += "</images>";
	body = encodeURIComponent(encodeHTML(body));
	vnajax.textset("video.aspx?save=images&vid=" + $get("inpVideoID").value + "&ek=" + $get("inpEditKey").value + "&sk=" + $get("inpSecretKey").value, body, null, null, null);
}
// stop propagation of bubble event
function stopBubbleEvent(e){
	if (!e) var e = window.event;
		e.cancelBubble = true;
	if (e.stopPropagation) e.stopPropagation();						
}

// pass link. get slide container containing link and then input time into text fields
function setLinkTime(obj){
	var img = getSlideContainerFromChildNode(obj);
	var inps = img.getElementsByTagName("input");
	var timearr = getProperTime(curTime).split(":");
	inps[0].value = timearr[0];
	inps[1].value = timearr[1];
}
function getSlideContainerFromChildNode(obj){
	while(obj.parentNode && obj.className != "slidecontainer") obj = obj.parentNode;
	return obj;
}
function jumpToVideoTime(time){
	vnplayer.sendEvent('SEEK',time);
}
function isNaN(val){
	return (val*0 != 0);
}
var imageFinds;
function searchImages(){
	var word = $get("inpSlidesSearchText").value;
	
	// clear imageFinds arrary
	imageFinds = new Array();

	// clear search results
	var  imageConSR = $get("pnlSlidesContainerSR");
	while(imageConSR.hasChildNodes()) imageConSR.removeChild(imageConSR.childNodes[0]);
	$get("pnlSlidesSearchInfo").style.display = "none";
	
	// reset index
	nextresultnum = 0;
	
	// Iterate through entire imageData array. First, search title. Then, search text.
	var idx = 0;		// the index of the image in the search results div. one image may contain the search word several times.
	for(var i = 0, len = imageData.length; i < len && word != ""; i++){
		// number of characters to the left and right of search result to display
		var CHAR_PADDING = 20;	
	
		// span tag to highlight search word
		var SPAN_OPEN = '<span class="searchNote">';
		var SPAN_CLOSE = '</span>';	
	
		// match word: 'g' = global match (find all) & 'i' = case insensitive
		var re = new RegExp(word,'gi');
		
		// indicates if slide contains search text
		var found = false;
		
		// search title
		var title1 = imageData[i].title;
		var f = re.exec(title1);
		while(f != null && f != ""){			// double check to make sure f is not the empty string
			// highlight search word
			var title = title1.substring(0,f.index) + SPAN_OPEN + word + SPAN_CLOSE + title1.substring(f.index + word.length,title1.length);
			var idx_lo = f.index - CHAR_PADDING;
			var str_left = "...";
			if(idx_lo < 0){
				idx_lo = 0;
				str_left = "";
			}
			var idx_hi = f.index + SPAN_OPEN.length + word.length + (CHAR_PADDING + SPAN_CLOSE.length);
			var str_right = "...";
			if(idx_hi > title.length - 1){
				idx_hi = title.length - 1;
				str_right = "";
			}
			var find = new Object();
			find.idx = idx;
			find.str = str_left + title.substring(idx_lo,idx_hi+1) + str_right;
			imageFinds.push(find);
			found = true;
			f = re.exec(title1);
		}
		
		// search text
		var text1 = imageData[i].text;
		var f = re.exec(text1);
		while(f != null && f != ""){			// double check to make sure f is not the empty string
			var text = text1.substring(0,f.index) + SPAN_OPEN + word + SPAN_CLOSE + text1.substring(f.index + word.length,text1.length);
			var idx_lo = f.index - CHAR_PADDING;
			var str_left = "...";
			if(idx_lo < 0){
				idx_lo = 0;
				str_left = "";
			}
			var idx_hi = f.index + SPAN_OPEN.length + word.length + (CHAR_PADDING + SPAN_CLOSE.length);
			var str_right = "...";
			if(idx_hi > text.length - 1){
				idx_hi = text.length - 1;
				str_right = "";
			}
			var find = new Object();
			find.idx = idx;
			find.str = str_left + text.substring(idx_lo,idx_hi+1) + str_right;
			imageFinds.push(find);
			found = true;
			f = re.exec(text1);
		}
		
		// if search word found in slide, create a new slide and add it to the slides container search results ("SR") div
		if(found){
			var newimgslide = new SlideImage(i);
			newimgslide.container = $get("pnlSlidesContainerSR");		
			imageConSR.appendChild(newimgslide);
			idx++;
		}
	}
	
	// if there are any search results, show first and change "search button" to "next button"
	$get("pnlSlides").showSearchResults();
	if(imageConSR.images.length > 0){
		showImageSearchResult();
		showNextImageResultButton();
	}
}
// show the text within a slide that contains the search string and scroll the slide to the top of the div
function showImageSearchResult(){
	// all images which have text containing search word
	var images = $get('pnlSlidesContainerSR').images;
	
	// number of next image to show. read this from imageFinds array because one slide may contain the search word multiple timestr
	var nextimgnum = imageFinds[nextresultnum].idx;
	
	// hide previous search result;
	images[(nextimgnum == 0 ? images.length - 1 : nextimgnum - 1)].hideSearchResults();
	
	// show next search result and scroll into view
	images[nextimgnum].showSearchResults(imageFinds[nextresultnum].str);
	images[nextimgnum].scrollIntoView();

	nextresultnum = (nextresultnum + 1) % imageFinds.length;
}
function showNextImageResultButton() {
	var btn = $get('btnSlidesSearch');
	btn.src = "images/video/search/next.png";
	btn.onmousedown = function() { btn.src = "images/video/search/nextclick.png"; }
	btn.onmouseout = function() { btn.src = "images/video/search/next.png"; }
	btn.onmouseover = function() { btn.src = "images/video/search/nextover.png"; }
	btn.onclick = function() {
		btn.src = "images/video/search/next.png";
		showImageSearchResult();
	}
}
function showImageSearchButton() {
	var btn = $get('btnSlidesSearch');
	btn.src = "images/video/search/search.png";
	btn.onmousedown = function() { btn.src = "images/video/search/searchclick.png"; }
	btn.onmouseout = function() { btn.src = "images/video/search/search.png"; }
	btn.onmouseover = function() { btn.src = "images/video/search/searchover.png"; }
	btn.onclick = function() {
		btn.src = "images/video/search/search.png";
		searchImages();
	}						
}