var threadObjects = new Array();
var selectedLatest = null;
////////////////////////////////////////////////
function Thread (i, a){

//function Thread ( idNum, id, menuUse, pos ){	
// thread[i] = [short name, uri, id, rgb, rgbLight, type, index ]
 
//this.icon = new Thread(thread_icon,threadID,threadName,[1,0],["0px","4px"]);
// 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 /// seems to have gone missing!!!
	//this.pos = pos;
	this.top = 0;
	//this.left = pos[1];
	this.left = 68*i;//0;//
	
	this.parent = document.getElementById(this.id); // created by xsl
	this.rgbHex = a[3]; 
	//this.rgbLightHex = a[4]; /// THIS ISN'T USED!!!???
	
	this.rgb = hexToRGB(this.rgbHex); 
	
	//this.rgbString = rgbToString(this.rgb);
	//this.rgbDark = getRGBdark(this.rgb);
	
	this.targImg;
	this.imgs = new Array(); /// store references to image URIs
	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";
	this.imgs[3] = resPath+"/res/"+ this.id + "_title_color.gif";
	
	this.latestImg;
	this.latestImgs =  new Array();
	this.latestImgs[0] = resPath+"/res/latest/"+ this.id +"_latest_off.gif";
	this.latestImgs[1] = resPath+"/res/latest/"+ this.id +"_latest_roll.gif";

	this.base;
	this.elem; /// div for holding icons
	
	//<xsl:attribute name="id"><xsl:value-of select="@name"/>TXT
	this.latestTxt = document.getElementById(a[0]+"TXT");
	
	this.draw();
	this.addHandlers();
}
Thread.prototype.draw = function(){
	this.base =  makeElement("div",[ ["position","absolute"],["left","0px"],["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);
	// gathering images
	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);
	
	///// LATEST
	this.latest = document.getElementById(this.id+"Latest");
	//makeElement("div",[["position","absolute"],["left","0px"],["top","121px"],["width","67px"],["cursor","pointer"]],null);
	this.latestImg = makeElement("img",[["position","absolute"],["left","0px"],["top","0px"]],[ ["src",this.latestImgs[0]],["height","14"],["width","67"],["alt","latest"] ]);
	this.latest.appendChild(this.latestImg);
	//this.base.appendChild(this.latest);
}
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);};
	this.latest.obj = this;
	this.latest.onmouseover = function(){ this.obj.overLatest(); };
	this.latest.onmouseout = function(){ this.obj.outLatest(); };
	this.latest.onclick = function(){ this.obj.clickLatest(); };
}
Thread.prototype.overLatest = function(){
	if(selectedLatest != this){
		collapseLatest();
		stopLatestTime();
		this.showLatest();
		if(selectedLatest != null) selectedLatest.hideLatest();
	} 
}
Thread.prototype.outLatest = function(){
	if(selectedLatest != this){
		activeLatest = this;
		startLatestTime();
		/*
		this.hideLatest();
		if(selectedLatest != null) selectedLatest.showLatest();
		*/
	} 
}
Thread.prototype.clickLatest = function(){
	if(selectedLatest != this){
		selectedLatest = this;
	} else {
		selectedLatest = null;
		this.hideLatest();
	}
}
Thread.prototype.hideLatest = function(){
	this.latestImg.src = this.latestImg.n.src;
	this.latestTxt.style.display = "none";
}
Thread.prototype.showLatest = function(){
	this.latestImg.src = this.latestImg.ro.src;
	this.latestTxt.style.display = "block";
}
////// global timer for hiding "latest"
var latestID;
var activeLatest = null;

function startLatestTime(){
	stopLatestTime();
	latestID = setTimeout("collapseLatest()", 100);
}
function collapseLatest(){
	if(activeLatest != null) activeLatest.hideLatest();
	if(selectedLatest != null) selectedLatest.showLatest();
	activeLatest = null;	///!!!! need to have a global variable pointing to the active thread object
}
function stopLatestTime(){
	clearTimeout(latestID);
	latestID = null;
}



/////// 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];

	this.latestImg.n = new Image();
	this.latestImg.n.src = this.latestImgs[0];
	this.latestImg.ro = new Image();
	this.latestImg.ro.src = this.latestImgs[1];
}



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

function makeThreads(){
	for(var i=0; i<threads.length;i++) threadObjects[i] = new Thread(i,threads[i]);
}
function preloadThreads(){
	for(var i=0; i<threadObjects.length;i++) threadObjects[i].preload();
}


var icon;
//function makeThreads(){
	//this.icon = new Thread(base,threadID,threadName,[1,1],[0,0]);
	//this.icon.preload();
	
//}
var base; // this is the div containing all of the construction
var bark;
function scrollBark(){
	
	var top = parseInt(bark.style.top);

	bark.style.top = (top - 1) + "px";

	if (-top > bark.scrollHeight){
		//bark.style.top = "174px";
		bark.style.top = "74px";
	}
	setTimeout("scrollBark();", 100);
}

function init(){
	//alert("hello" + threads.toString())
	base = document.getElementById("base");
	makeThreads();	
	preloadThreads();
	
	bark = document.getElementById("bark");
	bark.style.top = "20px";
	scrollBark();
}



			



window.onload = function() { init();};