// studio/common.js

	var currentMovieIndex;
	var movies = new Array();
	var moviesSequence = new Array();

	// ----------------------------------------------------	
	function addMovie (file, width, height, filesize) {
		var thisMovie = new MovieItem(file, width, height, filesize);
		movies        [thisMovie.filename]    = thisMovie; // indexed by filename (eg "P4130229.MOV")
		moviesSequence[moviesSequence.length] = thisMovie; // indexed by sequence number (0, 1, 2, ...)
	}
	
	// ----------------------------------------------------	
	function MovieItem (file, width, height, filesize) {
		this.file     = file;
		this.filename = file.split(".")[0]; 
		this.width    = width;
		this.height   = height;
		this.filesize = filesize + " KB";
		return this;
	}
	
	// ----------------------------------------------------	
	function loadMovieByFilename(filename) {
	
		// set window var to which index this one corresponds to
		currentMovieIndex = getSequenceByFilename(filename);

		// and highlight this image thumbnail
		setThumbImageBorderByFilename(filename);

		// set the "next/prev" buttons accordingly
		setNextPrevStyles();
		
		// load the desired movie by filename
		document.getElementById("movieTD").innerHTML = makeMovieEmbedHTML(movies[filename]);
		
	}
	// ----------------------------------------------------	
	function loadMovBySeqNo(i) {
		document.getElementById("movieTD").innerHTML = makeMovieEmbedHTML(moviesSequence[i]);
		currentMovieIndex = i;
		setThumbImageBorderBySeqNo(i);
		setNextPrevStyles();
	}

	// ----------------------------------------------------	
	function makeMovieEmbedHTML(movie) {
		var html;
		
		// object tag is for IE - doesn't support embed's pluginspace attribute anymore, so will only properly prompt for QT plugin if object tag is there.
		// it is ignored by all other browsers
		
		with (movie) {
			html = '<object on classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab"';
			html += ' width="' + width + '" height="' + height + '">';
			html += '<param name="SRC"        value="' + file + '">';
			html += '<param name="AUTOPLAY"   value="true">'; // start playing automatically
			html += '<param name="CONTROLLER" value="true">'; // show the movie controller bar
			html += '<embed pluginspage="http://www.apple.com/quicktime/download/" type="video/quicktime" autoplay="true" controller="true"';
			html += ' src="'    + file   + '"';
			html += ' width="'  + width  + '"';
			html += ' height="' + height + '"';
			html += ' ></embed>';
			html += '</object>';
		}
		return html;

		/*
		<embed src="P4130229.MOV" width="420" height="370" autoplay="true" controller="true" pluginspage="http://www.apple.com/quicktime/download/"></embed>
		
		<object on classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width="160" height="135" codebase="http://www.apple.com/qtactivex/qtplugin.cab">
		          <param name="SRC" value="P4130229.MOV">
		
		          <param name="AUTOPLAY" value="true">
		          <param name="CONTROLLER" value="true">
		          <embed src="P4130229.MOV" width="320" height="270" autoplay="true" controller="true" pluginspage="http://www.apple.com/quicktime/download/"></embed></object>
		*/
	}

	// ----------------------------------------------------	
	function getSequenceByFilename(filename) {
		var index;
		for (var i=0; i < moviesSequence.length; i++) {
			if (moviesSequence[i].filename == filename) {
				index = i;
				break;
			}
		}
		return index;
	}	

	/* unfortunately this doesn't exactly work either - the gen'd table things there's only one row, so the clear-border doesn't clear anything but the first one ;-(
	function drawThumbs() {
		var theThumbsDiv = document.getElementById("thumbsDiv");
		var html = "";
		
		for (var i=0; i < moviesSequence.length; i++) {
			var theMovie = moviesSequence[i];
			var prefix = theMovie.filename.split("-")[0];

			html += '<table border="0" cellspacing="10" cellpadding="2" id="thumbsTable">';
			html += '<tr class="body">';
			html += '<td id="' + theMovie.filename + '_thumbTD" style="cursor:pointer" onclick="movieButtonClick(this);">';
			html += '<img src="' + prefix + '-thumb.jpg" title="' + prefix + ' - ' + theMovie.filesize + '">';
			html += '</td></tr>';
		}
		html += '</table>';
		
		theThumbsDiv.innerHTML = html; // load the thumbs
	}
	*/
	
	/* doesn't work because can't just set the onclick this way... attachEvent or something? */
	function drawThumbsObj() {
		var theThumbTable = document.getElementById("thumbsTable");
		for (var i=0; i < moviesSequence.length; i++) {
			var theMovie = moviesSequence[i];
			var theRow = theThumbTable.insertRow(theThumbTable.rows.length);
			theRow.className = "body";
			var theCell = theRow.insertCell(theRow.cells.length);
			theCell.id = theMovie.filename + "_thumbTD";
			theCell.style.cursor = "pointer";
			//theCell.onClick = "movieButtonClick(this);";
			addListener(theCell, 'click', movieButtonClickE, false);
			var prefix = theMovie.filename.split("-")[0];
			theCell.innerHTML = '<img src="' + prefix + '-thumb.jpg" title="' + theMovie.file + '">';
		}
	}
	/* */

	// ----------------------------------------------------	
	// Cross-browser implementation of element.addEventListener()
	// Usage:
  // addListener(window, 'load', myFunction);

	function addListener(element, type, expression, bubbling)
	{
		bubbling = bubbling || false;
		
		if(window.addEventListener)	{ // Standard
			element.addEventListener(type, expression, bubbling);
			return true;
		} else if(window.attachEvent) { // IE
			element.attachEvent('on' + type, expression);
			return true;
		} else return false;
	}
	
	// ----------------------------------------------------	
	function loadMov(cmd) {

		// do nothing if disabled
		if      (cmd == "prev" && (!currentMovieIndex || currentMovieIndex == 0)) return;
		else if (cmd == "next" && (!currentMovieIndex || currentMovieIndex == moviesSequence.length - 1)) return;

		var theThumbTD, index;
		if      (cmd == "first") {index = 0;} 
		else if (cmd == "prev" ) {index = --currentMovieIndex;}
		else if (cmd == "next" ) {index = ++currentMovieIndex;}
		else if (cmd == "last" ) {index = moviesSequence.length - 1;}
		
		loadMovBySeqNo(index); // load the movie
		setNextPrevStyles();   // set next/prev button "enabled/disabled style" accordingly
		theThumbTD = document.getElementById(moviesSequence[index].filename + "_thumbTD"); // bring this thumbnail into view
		theThumbTD.scrollIntoView();
	}

	// ----------------------------------------------------	
	function setNextPrevStyles() { // "disable" the button if you reach its end
		var thePrev = document.getElementById("prevButton"); 
		var theNext = document.getElementById("nextButton");
		if (!currentMovieIndex || currentMovieIndex == 0                      ) {thePrev.style.color="aaaaaa";} else {thePrev.style.color="ffffff";}
		if (!currentMovieIndex || currentMovieIndex == moviesSequence.length-1) {theNext.style.color="aaaaaa";} else {theNext.style.color="ffffff";}
	}
	// ----------------------------------------------------	
	function movieButtonClickE(event) { // get filename from the TD's id prefix instead of passing, to minimize the repeats on each thumb
		var theImg;
		if (event.target) theImg = event.target;
		if (event.srcElement) theImg = event.srcElement;
		var theThumbTD = theImg.parentNode;
		var filename = theThumbTD.id.split("_")[0];
		setTimeout('loadMovieByFilename("' + filename + '")',1); // running in a separate thread allows the dhtml border changes around the thumb to happen before movie loads ??
	}
	// ----------------------------------------------------	
	function movieButtonClick(theThumbTD) { // get filename from the TD's id prefix instead of passing, to minimize the repeats on each thumb
		var filename = theThumbTD.id.split("_")[0];
		setTimeout('loadMovieByFilename("' + filename + '")',1); // running in a separate thread allows the dhtml border changes around the thumb to happen before movie loads ??
	}
	
	// ----------------------------------------------------	
	function setThumbImageBorderByFilename(filename) {
		var theThumbTD = document.getElementById(filename + "_thumbTD");
		clearAllThumbTDBorders();
		theThumbTD.style.backgroundColor = "ffffff"
	}
	// ----------------------------------------------------	
	function setThumbImageBorderBySeqNo(i) {
		var theThumbTD = document.getElementById(moviesSequence[i].filename + "_thumbTD");
		clearAllThumbTDBorders();
		theThumbTD.style.backgroundColor = "ffffff";
	}
	// ----------------------------------------------------	
	function clearAllThumbTDBorders() {
		theThumbTable = document.getElementById("thumbsTable");
		for (var i=0; i < theThumbTable.rows.length; i++) {
			var thisThumbTD = theThumbTable.rows[i].cells[0];
			thisThumbTD.style.backgroundColor="666666";
		}
	}