//needs to go in a base framework ...
function addObserver(el, evname, func) {
	if (el.attachEvent) { // IE
		el.attachEvent("on" + evname, func);
	} else if (el.addEventListener) { // Gecko / W3C
		el.addEventListener(evname, func, true);
	} else {
		el["on" + evname] = func;
	}
};

var clipsGenerator = null ;

var Clips = {}

Clips.ListGenerator = Class.create();
Clips.ListGenerator.prototype = {
	initialize: function(clipList) {
		this.clipList = clipList ;
	},
	write: function(tagId) {
		this.element = document.getElementById(tagId) ;
		this.writeItems() ;
		//this.writeClips() ;
		//window.setTimeout('clipsGenerator.writeClips()', 1) ;
		this.writeOneClip(0) ;
		//this.writeOne(0) ;
	},
	writeItems: function() {
		for(var i = 0 ; i < this.clipList.length ; ++i) {
			this.writeOneItem(i) ;
		}
		//
	},
	writeClips: function() {
		for(var i = 0 ; i < this.clipList.length ; ++i) {
			this.writeOneClip(i) ;
		}
		//
	},	
	writeOneItem: function(ndx) {
		var clipId = this.clipList[ndx][0] ;
		var title = this.clipList[ndx][1] ;
		
		var videoName = "clips/" + clipId + ".flv" ;
		var stillName = "clips/" + clipId + ".jpg" ;
		var tagId = 'clip' + ndx ;
		var flashId = 'flowPlayer' + ndx ;
		
		var a = document.createElement("div") ;
		a.className = 'clip' ;
		this.element.appendChild(a) ;
		//
		var tbl = document.createElement("table") ;
		tbl.setAttribute("cellPadding", "10") ;
		//tOuter.setAttribute("width", "100%") ;
		//tOuter.setAttribute("height", "240px") ;
		a.appendChild(tbl) ;
				
		var row = tbl.insertRow(tbl.rows.length);
		var cell1 = row.insertCell(row.cells.length) ;
		var cell2 = row.insertCell(row.cells.length) ;
		cell2.setAttribute("vAlign", "top") ;
		//
		var b = document.createElement("div") ;
		b.id = tagId ;
		//b.innerHTML = 'This will be replaced by the player.' ;
		b.innerHTML = '<img src="images/loading320x240.jpg">' ;
		cell1.appendChild(b) ;				
		//
		var c = document.createElement("div") ;
		c.className = 'clip-description' ;
		//c.setAttribute("style", "font-size: 16px;") ;
		c.innerHTML = title ;
		cell2.appendChild(c) ;
	},
	writeOneClip: function(ndx) {
		var clipId = this.clipList[ndx][0] ;
		var title = this.clipList[ndx][1] ;
		
		var videoName = "clips/" + clipId + ".flv" ;
		var stillName = "clips/" + clipId + ".jpg" ;
		var tagId = 'clip' + ndx ;
		var flashId = 'flowPlayer' + ndx ;
						
		var fo = new SWFObject("FlowPlayer.swf", flashId, "320", "240", "7", "#ffffff", true);
		// need this next line for local testing, it's optional if your swf is on the same domain as your html page
		fo.addParam("allowScriptAccess", "always");
		fo.addParam("allowFullScreen", "true");
		//
		var config = "{ " ;
		config += "showPlayListButtons: true" ;
		config += ", autoPlay: false" ;
		config += ", autoBuffering: false" ;
		config += ", useNativeFullScreen: true" ;
		config += ", autoRewind: true" ;
		config += ", loop: false" ;
		config += ", baseURL: ''" ;
		config += ", playList: [ { url: '" + stillName + "' }, { url: '" + videoName + "' } ]"
		config += ", initialScale: 'scale'"
		config += " }" ;
		fo.addVariable("config", config);
		//
		fo.write(tagId);
		//
		if(ndx == this.clipList.length -1)
			return ;
		//else
		window.setTimeout('clipsGenerator.writeOneClip(' + ++ndx +')', 0) ;
	}
	/*,
	writeOne: function(ndx) {
		var clipId = this.clipList[ndx][0] ;
		var title = this.clipList[ndx][1] ;
		
		var videoName = "clips/" + clipId + ".flv" ;
		var stillName = "clips/" + clipId + ".jpg" ;
		var tagId = 'clip' + ndx ;
		var flashId = 'flowPlayer' + ndx ;
		
		var a = document.createElement("div") ;
		a.className = 'clip' ;
		this.element.appendChild(a) ;
		//
		var tbl = document.createElement("table") ;
		tbl.setAttribute("cellPadding", "10") ;
		//tOuter.setAttribute("width", "100%") ;
		//tOuter.setAttribute("height", "240px") ;
		a.appendChild(tbl) ;
				
		var row = tbl.insertRow(tbl.rows.length);
		var cell1 = row.insertCell(row.cells.length) ;
		var cell2 = row.insertCell(row.cells.length) ;
		cell2.setAttribute("vAlign", "top") ;
		//
		var b = document.createElement("div") ;
		b.id = tagId ;
		b.innerHTML = 'This will be replaced by the player.' ;
		cell1.appendChild(b) ;				
		//
		var c = document.createElement("div") ;
		c.className = 'clip-description' ;
		//c.setAttribute("style", "font-size: 16px;") ;
		c.innerHTML = title ;
		cell2.appendChild(c) ;		
				
		var fo = new SWFObject("FlowPlayer.swf", flashId, "320", "240", "7", "#ffffff", true);
		// need this next line for local testing, it's optional if your swf is on the same domain as your html page
		fo.addParam("allowScriptAccess", "always");
		fo.addParam("allowFullScreen", "true");
		//
		var config = "{ " ;
		config += "showPlayListButtons: true" ;
		config += ", autoPlay: false" ;
		config += ", autoBuffering: false" ;
		config += ", useNativeFullScreen: true" ;
		config += ", autoRewind: true" ;
		config += ", loop: false" ;
		config += ", baseURL: ''" ;
		config += ", playList: [ { url: '" + stillName + "' }, { url: '" + videoName + "' } ]"
		config += ", initialScale: 'scale'"
		config += " }" ;
		fo.addVariable("config", config);
		//
		fo.write(tagId);
		//
		if(ndx == this.clipList.length -1)
			return ;
		//else
		window.setTimeout('clipsGenerator.writeOneClip(' + ++ndx +')', 1) ;		
	}*/
}