var rootURL = ""
//alert("thisEssay.title= "+thisEssay.title);
/// colors for this thread
var baseRGB = hexToRGB( baseHEX );
var baseRGBdark = darkenRGB( baseRGB, 0.85 ); //getRGBdark(baseRGB);
var baseRGBstring = rgbToString( baseRGB );
var baseRGBdarkstring = rgbToString( baseRGBdark );

var baseRGBlight = screenFilterRAW( [255,255,255], 0.25, darkenRGB( baseRGB, 1.5 ) );//screenFilterRAW( [255,255,255], 0.7, baseRGB );
//var baseRGBlight = darkenRGB( baseRGB, 1.5 );//screenFilterRAW( [255,255,255], 0.7, baseRGB );
var baseRGBlightstring = rgbToString( baseRGBlight );


var baseRBGverydark = screenFilterRAW( [255,255,255], 0.15, darkenRGB( baseRGB, 0.2 ) )//darkenRGB( baseRGB, 0.1 );
//var baseRBGverydark = screenFilterRAW( baseRGB, 0.2, [0,0,0] )//darkenRGB( baseRGB, 0.1 );
var baseRBGverydarkstring = rgbToString( baseRBGverydark );

//alert("baseRGB= "+baseRGB + " baseRGBdark= " + baseRGBdark + " baseRGBlight= " + baseRGBlight)



/////////////////////////////////////////
//// ThreadMenu is also used in weave.js, not sure if i should generalize, yet
//////////// there is only one ThreadMenu
//////////// there is only one ThreadMenu
function ThreadMenu(parent){
	this.parent = parent;
	this.active = false;
	this.caller;
	this.threadURL;
	this.weaveURL;
	this.elem;
	this.topImgDiv; 
	this.topImg;
	this.btmImgDiv;
	this.btmImg;
	this.init();
}
ThreadMenu.prototype.init = function(){
	this.draw();
	this.addHandlers();
	
}
ThreadMenu.prototype.draw = function(){

	//////////////////////////
	this.elem = makeElement("div",[["position","absolute"],["left","0px"],["top","0px"],
     ["width","141px"],["backgroundColor","#686850"],["border","2px solid #000000"],["zIndex","5"],
     ["cursor","pointer"],["display","none"]],null);
	this.parent.appendChild(this.elem);
	///
	this.topImgDiv = makeElement("div",[ ["padding","0px"],["margin","0px"],
	  ["width","141px"],["height","23px"],["cursor","pointer"]],null);
	this.topImg = makeElement("img",null,[ ["src","../ebrassets/res/wv_thrd_rollover_top_off.gif"],
	  ["height","23"],["width","141"],["alt","weave"] ]);   //////// wrong name
	this.elem.appendChild(this.topImgDiv);	
	this.topImgDiv.appendChild(this.topImg);
	//

}
ThreadMenu.prototype.preload = function(who){
	this.topImg.n = new Image();
	this.topImg.n.src = "../ebrassets/res/wv_thrd_rollover_top_off.gif";
	this.topImg.ro = new Image();
	this.topImg.ro.src = "../ebrassets/res/wv_thrd_rollover_top_on.gif";
	//

}
ThreadMenu.prototype.addHandlers = function(){
	this.elem.obj = this;
	this.elem.onmouseover = function(){this.obj.over(this);};
	this.elem.onmouseout = function(){this.obj.out(this);};	
	//
	this.topImgDiv.obj = this;
	this.topImgDiv.onmouseover = function(){this.obj.overTop();};
	this.topImgDiv.onmouseout = function(){this.obj.outTop();};	
	this.topImgDiv.onclick = function(){this.obj.clickTop();};

}
ThreadMenu.prototype.over = function(){ stopThreadTime();};
ThreadMenu.prototype.out = function(){ startThreadTime();};
ThreadMenu.prototype.overTop = function(){ this.topImg.src = this.topImg.ro.src;};
ThreadMenu.prototype.outTop = function(){ this.topImg.src = this.topImg.n.src;};
ThreadMenu.prototype.clickTop = function(){	
	window.location = this.weaveURL;
}

ThreadMenu.prototype.show = function(who){
	this.threadURL = who.uri;
	this.weaveURL = rootURL + "/action/Weave?threadId="+who.idNum; //?????
	this.caller = who;
	this.elem.style.left = who.left +12 + "px";
	this.elem.style.top =  "4px";
	this.elem.style.display = "block";
	if(who.tMenuUse[0]){
		this.topImgDiv.style.display = "block";
	} else {
		this.topImgDiv.style.display = "none";
	}

}
ThreadMenu.prototype.hide = function(){ this.elem.style.display = "none";};

////////////////////////////////////////////////
//function Thread (i, a){

// OLD =>> "a" is an array: thread[i] = [short name, name, base rgb]
// thread[i] = [short name, uri, id, rgb, rgbLight, type, index ]
function Thread ( parent, idNum, id, menuUse, pos ){	
//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 = id;//a[0]; /// short name
	this.name = "";//a[1]; /// full name of thread /// seems to have gone missing!!!
	//this.uri = a[1]
	this.idNum = idNum;  //a[2];
	this.tMenuUse = menuUse;
	//this.pos = pos;
	this.top = pos[0];
	this.left = pos[1];
	//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] = "../ebrassets/res/"+ this.id + "_icon_off.gif";
	this.imgs[1] = "../ebrassets/res/"+ this.id + "_icon_over.gif";
	this.imgs[2] = "../ebrassets/res/"+ this.id + "_icon_post_roll.gif";
	this.imgs[3] = "../ebrassets/res/"+ this.id + "_title_on.gif";

	this.elem; /// div for holding icons
	
	this.draw();
	this.addHandlers();
}
Thread.prototype.draw = function(){
	this.elem = makeElement("div",[["position","absolute"],["left",this.left + "px"],["top",this.top + "px"],
                 ["width","67px"],["height","120px"],["cursor","pointer"]],null);
	this.parent.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);

}
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);};
}
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){
	tMenu.show(this);
	this.targImg.src = this.targImg.clck.src;
}
//////
var threadID;
var activeThread = null;

function startThreadTime(){
	stopThreadTime();
	threadID = setTimeout("collapseThread()", 100);
}
function collapseThread(){
	tMenu.hide();
	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 setWordColor(){
	/// since rgbDark is generated, I need to restyle elements that use it, after loading.
	var words = document.getElementsByTagName('div');
	//var txt ="";
	for(var i = 0; i < words.length; i++){
		var who = words[i];
		//txt += who.className +" | ";
		if(who.className == "entry_word"){
			who.style.backgroundColor = baseRGBdarkstring;
		}
	}
	//document.getElementById("thread_head").style.color = baseRGBdarkstring;
	//document.getElementById("thread_title").style.color = baseRGBdarkstring;
	//alert(baseRGBdark +" ... classNames: = " + txt)
}


var icon;
function makeThreadIcon(){
	this.icon = new Thread(thread_icon,threadIDnum,threadName,[1,0],[0,0]);
	this.icon.preload();
	
}
var base0, base1, thread_icon; // this is the div containing all of the construction
var tMenu;	
var baseTop = 172;	
function init(){

	base0 = document.getElementById("base0");
	base1 = document.getElementById("base1");
	setWordColor();
	//thread = document.getElementById("thread");
	thread_icon = document.getElementById("thread_icon");
	makeThreadIcon();	
	tMenu = new ThreadMenu(thread_icon); // only show link to Thread
	tMenu.preload();

	//base0.style.backgroundColor = baseHEX;//baseRBGverydarkstring;
	//base1.style.backgroundColor = baseRGBstring;
	
	//alert(getEStyle("essay","height","height"));


	

}
var glossBase, baseBottom;

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