// var resPath is defined in essay.xsl
var rootURL = "../..";
var threadObjects = new Array();
var selectedLatest = null;


////////////////////////////////////////////////
/////////////////// ---- THREADS (header navigation)
function Thread (i, a){
/*
			threads[<xsl:value-of select="position() - 1"/>] = [
				"<xsl:value-of select="@name"/>",
				"<xsl:value-of select="@uri"/>",
				"<xsl:value-of select="@id"/>",
				"<xsl:value-of select="@rgb"/>",
				"<xsl:value-of select="@rgb2"/>",
				"<xsl:value-of select="@title"/>",	
				<xsl:value-of select="$affil"/>
			];
      <thread index="10" id="1122439102396" name="firstperson" title="First Person" type="thread" uri="http://www.electronicbookreview.com/thread/firstperson" rgb="#729FFF" rgb2="#A9C5FF" />
      <thread index="11" id="123456789" title="Recollection in Process" type="gathering" />			
			*/
// thread[i] = [short name, uri, id, rgb, rgbLight, title, type, affilliated ]
 
// parent div, number id, name id, which parts of threadMenu to show, positioning
	//this.parent = parent;
	this.index = i; /// SHOULD BE THE SAME AS "index" attribute
	this.id = a[0]; ///id;// short name
	this.uri = a[1];//
	this.idNum = a[2];//idNum;  //
	this.name = a[5]; /// full name of thread 
	
	this.owner = a[6]; // NULL if not gathering
	this.type = a[7];
	

	
	//this.pos = pos;
	this.top = 0;
	//this.left = pos[1];
	this.left = 68*i; //0;//
	if(this.index != 0) this.left += 20;
	
	this.parent = base; // created by xsl

	
	//this.rgbString = rgbToString(this.rgb);
	//this.rgbDark = getRGBdark(this.rgb);
	
	this.targImg;
	this.imgs = new Array(); /// store references to image URIs
	

	
	if(this.type == "thread") {
		this.weaveURL = rootURL + "/action/Weave?threadId="+this.idNum; //?????
		this.rgbHex = a[3]; 
		//this.rgbLightHex = a[4]; /// THIS ISN'T USED!!!???
		this.rgb = hexToRGB(this.rgbHex); 
		
		this.subImg;
		this.imgs[0] = resPath + "/res/"+ this.id + "_icon_off.gif";
		this.imgs[1] = resPath + "/res/"+ this.id + "_icon_over.gif";
		this.imgs[2] = resPath + "/res/"+ this.id + "_icon_post_roll.gif";
		if(this.index != 0){
			this.imgs[3] = resPath + "/res/"+ this.id + "_title_off.gif";
		} else {
			this.imgs[3] = resPath + "/res/"+ this.id + "_title_on.gif";
		}		
		
	} else if (this.type == "gathering"){
		
		this.weaveURL = rootURL + "/action/Weave?gatheringId="+this.idNum; //?????
		//Weave?gatheringId=123456789
		this.rgbString = "rgb(104,104,80)";
		this.rgbDark = [73,73,56];
		this.imgs[0] = resPath + "/res/wgather_icon_off.gif";
		this.imgs[1] = resPath + "/res/wgather_icon_over.gif";
		this.imgs[2] = resPath + "/res/wgather_icon_post_roll.gif";
	}
	
/*

	if(this.type == "thread"){
		
		this.weaveURL = rootURL + "/action/Weave?threadId="+this.idNum; //?????
		this.rgbString = rgbToString(this.rgb);
		this.rgbDark = getRGBdark(this.rgb);
		this.imgs[0] = "../res/"+ this.id + "_icon_off.gif";
		this.imgs[1] = "../res/"+ this.id + "_icon_over.gif";
		this.imgs[2] = "../res/"+ this.id + "_icon_post_roll.gif";
		this.imgs[3] = "../res/"+ this.id + "_title_color.gif";
		this.subImg;
	} else if(this.type == "gathering") {
		this.weaveURL = rootURL + "/action/Weave?gatheringId="+this.idNum; //?????
		//Weave?gatheringId=123456789
		this.rgbString = "rgb(104,104,80)";
		this.rgbDark = [73,73,56];
		this.imgs[0] = "../res/wgather_icon_off.gif";
		this.imgs[1] = "../res/wgather_icon_over.gif";
		this.imgs[2] = "../res/wgather_icon_post_roll.gif";
	}
*/	
	


	this.base;
	this.elem; /// div for holding icons
	
	this.draw();
	this.addHandlers();
}
Thread.prototype.draw = function(){
	this.base = makeElement("div",[ ["position","absolute"],["left",this.left + "px"],["top",this.top + "px"] ],null);
	this.elem = makeElement("div",[ ["position","absolute"],["left","0px"],["top","0px"],
                 ["width","67px"],["height","120px"],["cursor","pointer"] ],null);
	this.parent.appendChild(this.base);
	this.base.appendChild(this.elem);
	/// thread images -----------------------------------------------
	this.targImg = makeElement("img",[["position","absolute"],["left","0px"],["top","0px"]],[ ["src",this.imgs[0]],["height","59"],["width","67"],["alt",this.name] ]);
	//this.targImg = makeElement("img",null,[ ["src",this.imgs[0]],["height","59"],["width","67"],["alt",this.name] ]);
	this.elem.appendChild(this.targImg);
	

	
	if(this.type == "thread"){	
		this.subImg = makeElement("img",[ ["position","absolute"],["left","0px"],["top","60px"] ],
									[ ["src",this.imgs[3]],["height","60"],["width","67"],["alt",this.name] ]);
		//this.subImg = makeElement("img",null,[ ["src",this.imgs[3]],["height","60"],["width","67"],["alt",this.name] ]);
		this.elem.appendChild(this.subImg);
	
	} else if(this.type == "gathering"){
		this.subTxt = makeElement("div",[["position","absolute"],["left","0px"],["top","60px"],["clip","rect(0px 67px 60px 0px)"],
										["height","60px"],["width","67px"]]);
		//// text labels for gathering
		//alert("gathering: " + this.owner)
		var textString = this.owner+ ":<br /><b>"+ this.name+"</b>";
		var txt = document.createElement("div");
		this.elem.appendChild(this.subTxt);	
		this.subTxt.appendChild(txt);
		txt.className = "weavename";
		txt.innerHTML = textString;
	}
/*
	if(this.type == "thread"){
		this.subImg = makeElement("img",[["position","absolute"],["left","0px"],["top","60px"]],[ ["src",this.imgs[3] ],
										["height","60px"],["width","67px"],["alt",this.name] ]);
		//this.subImg = makeElement("img",null,[ ["src",this.imgs[3]],["height","60"],["width","67"],["alt",this.name] ]);
		this.elem.appendChild(this.subImg);
	} else if(this.type == "gathering"){
		
		this.subTxt = makeElement("div",[["position","absolute"],["left","0px"],["top","60px"],["clip","rect(0px 67px 60px 0px)"],
										["height","60px"],["width","67px"]]);
		//// text labels for gathering
		//alert("gathering: " + this.owner)
		var textString = this.owner+ ":<br /><b>"+ this.id+"</b>";
		var txt = document.createElement("div");
		this.elem.appendChild(this.subTxt);	
		this.subTxt.appendChild(txt);
		txt.className = "weavename";
		txt.innerHTML = textString;
	}
*/	
}
Thread.prototype.addHandlers = function(){
	this.elem.obj = this;
	this.elem.onmouseover = function(){this.obj.over(this);};
	this.elem.onmouseout = function(){this.obj.out(this);};
	this.elem.onclick = function(){this.obj.click(this);};

}

/////// normal rollovers
Thread.prototype.over = function(who){
	if(activeThread != null && activeThread != this) {
		collapseThread();
		stopThreadTime();
		activeThread = this;
		this.targImg.src = this.targImg.ro.src;
	} else if (activeThread == this){
		stopThreadTime();
	} else {
		activeThread = this;
		this.targImg.src = this.targImg.ro.src;
	}
}
Thread.prototype.out = function(who){ startThreadTime();};
Thread.prototype.off = function(who){ this.targImg.src = this.targImg.n.src;};
Thread.prototype.click = function(who){
	window.location.href = this.uri;
}
//////
var threadID;
var activeThread = null;

function startThreadTime(){
	stopThreadTime();
	threadID = setTimeout("collapseThread()", 100);
}
function collapseThread(){
	activeThread.off();
	activeThread = null;	///!!!! need to have a global variable pointing to the active thread object
}
function stopThreadTime(){
	clearTimeout(threadID);
	threadID = null;
}
//////
Thread.prototype.preload = function(who){
	this.targImg.n = new Image();
	this.targImg.n.src = this.imgs[0];
	this.targImg.ro = new Image();
	this.targImg.ro.src = this.imgs[1];
	this.targImg.clck = new Image();
	this.targImg.clck.src = this.imgs[2];

}



/////////////////////////////////////////
//////////////////////////////------------- INITS

function makeThreads(){
	//// i shouldn't have to do this!!!!
	/// i'm putting the current thread at the front of the list of threads!!!
	var tThread;
	var tIndex;
	for(var i=0; i<threads.length;i++){
		//temp.push(threads[i][6]);
		if(threads[i][2] == threadIdNum){
			tThread = threads[i];
			threads[i][8] = true;
			tIndex = i;
			break;
		}
	}
	threads.splice(tIndex,1);
	threads.unshift(tThread);
	
	//// the real thing:
	var indx = 0;
	for(var i=0; i<threads.length;i++){
		if(threads[i][8] == true){
			threadObjects[indx] = new Thread(indx,threads[i]);
			indx++;
			//threadObjects[i] = new Thread(i,threads[i]);
		}
	}
	//alert(threads.length + " affiliations: "+temp)
	//alert(threads);
	//document.getElementById("debug").innerHTML = temp + "\n" + threads;
}
function preloadThreads(){
	for(var i=0; i<threadObjects.length;i++) threadObjects[i].preload();
}



var base; // this is the div containing all of the construction


function initThreads(){
	//alert("hello" + threads.toString())
	base = document.getElementById("baseThreads");
	makeThreads();	
	preloadThreads();
}