var div;    
var left = 0;   /* left scroll position */
var idTimer;
var idTimer2;
var scrollWidth;
var scrollDir;
var scrollStep = 160;
var scrollTimeout = 10;   
var scrollJumpTime = 5000;   /* every 3 seconds autoscroll to next picture */
var scrollTinyTimeout = 50; /* time it takes to autoscroll */
var scrollTinyStep = scrollStep/(scrollTinyTimeout/scrollTimeout);
var time = 0;

function onLoad() {
	createDiv();
	loadPictures();

    // automatic scrolling
	div = document.getElementById('pics');
	scrollWidth = div.scrollWidth - div.offsetWidth;
	scrollDir = "right";
	startAutoScroll();
	div.onmousedown = killAutoScroll;
	div.onmouseover = removeAutoScroll;
	div.onmouseout = startAutoScroll;

	jwplayer("movieHolder").onTime(
		function(event) { 
		   //alert(event.duration + " " + event.position);
		   var obj = this.getPlaylistItem();
		   var del = obj.end;  if (del == undefined) del = 0.4;
		   if (obj.repeat == "true") {
		        if (event.position >= event.duration-del) { this.seek(0); } // repeat
			} else {
		        if (event.position >= event.duration-del) { this.pause(); } // freeze at last frame
			}
			});

}

/*
	<div id=pics>
		<table id=picsOuterTable>
		<tr>
		
			<td>
			<table class=picsTable>
				<tr><td id=pic0 class=picImg</td></tr>
				<tr><td class=caption id=caption0></td></tr>
			</table>
			</td>
			
			etc.
		</tr></table>
*/
function createDiv() {
        // get the reference for the body
        var div = document.getElementById("pics");
		var tblOuter = document.createElement("table");
		var tblOuterBody = document.createElement("tbody");
		tblOuter.id = "picsOuterTable";
		var rowOuter = document.createElement("tr");	
		
		for (var i=0, len=playlist.length; i<len; i++) {	
			var cell = document.createElement("td");
			var table = document.createElement("table");
			var tableBody = document.createElement("tbody");
			table.className = "picsTable";
			var row1 = document.createElement("tr");
			
			var cell1 = document.createElement("td");
			cell1.className="picImg";
			cell1.id = "pic"+i;
			//var cell1Text = document.createTextNode("&nbsp;&nbsp;" + (i+1));
			var cell1Text = document.createTextNode('\u00a0' + (i+1));
			cell1.appendChild(cell1Text);
			row1.appendChild(cell1);
			
			var row2 = document.createElement("tr");
			var cell2 = document.createElement("td");
			cell2.className="caption";
			cell2.id = "caption" + i;
			row2.appendChild(cell2);

			tableBody.appendChild(row1);
			tableBody.appendChild(row2);
			table.appendChild(tableBody);
			cell.appendChild(table);
			rowOuter.appendChild(cell);
		}
		
		tblOuterBody.appendChild(rowOuter);
		tblOuter.appendChild(tblOuterBody);

		div.appendChild(tblOuter);
		
}
			
// load pictures into the web page
function loadPictures() {

	var n = playlist.length;
	 for (var i=0, len=n; i<len; i++) {
		var obj = document.getElementById("pic"+i);
		obj.style.backgroundImage = "url(" + playlist[i].thumb + ")";
		obj.style.backgroundPosition = '50% 50%';
		obj.style.backgroundRepeat = 'no-repeat';
		obj.onclick = new Function("play('"+i+"')");	
		 
		var caption = document.getElementById("caption"+i);
		caption.innerHTML = playlist[i].caption;
	 }
 }


function play(n) { 
	jwplayer("movieHolder").playlistItem(n);
}

var reachedEnd=0;

function autoScroll() {
    time = time + scrollTimeout;
	if (time > scrollJumpTime) {time = 0; reachedEnd=0;}

	if (time >=0 && time <scrollJumpTime-scrollTinyTimeout) return;

    if (!reachedEnd) {

		if (scrollDir == "right") {
			left = left + scrollTinyStep;
			if (left > scrollWidth) {scrollDir = "left"; left = scrollWidth; reachedEnd=1;}
		} else {
			left = left - scrollTinyStep;
			if (left < 0) {scrollDir = "right"; left = 0; reachedEnd=1;}
		}
		div.scrollLeft = left;

	}
}

function startAutoScroll() {
	left = div.scrollLeft;
	idTimer = setInterval(autoScroll, scrollTimeout);
}

function removeAutoScroll() {
	clearInterval(idTimer);
}

function killAutoScroll() {
	removeAutoScroll();
	div.onmousedown = null;
	div.onmouseover = null;
	div.onmouseout = null;
}



addLoadEvent(onLoad);