window.onload = tooltip;
	
	function tooltip(){
		var spans = document.getElementsByTagName("span");
		var title;
		var titleNode;
		var tooltip;
		var top;
		var middle;
		var bottom;
		
		for(i=0;i<spans.length;i++){
			if(spans[i].className=="tt"){
				var title=spans[i].getElementsByTagName("span");
				//build the tooltip
				//one span for top of bubble, one for the bottom curve and one of the middle
				//the tooltip text is placed into the middle span
				tooltip= document.createElement("span");
				tooltip.className="tooltip";
				
				top= document.createElement("span");
				top.className="top";
				
				middle= document.createElement("span");
				middle.className="middle";
				//titleNode= document.createTextNode(title[0].innerHTML);
				
				middle.appendChild(title[0]);
				
				bottom= document.createElement("span");
				bottom.className="bottom";
				
				//add the tooltip to the DOM
				tooltip.appendChild(top);
				tooltip.appendChild(middle);
				tooltip.appendChild(bottom);
				spans[i].appendChild(tooltip);
				
				//remove the contents of the title attribute so the browser doesn't display the default tooltip as well as the bubble
				//spans[i].title="";
				//title[0].innerHTML="";	
				
				spans[i].className="tt1";
				spans[i].onmouseover=function(){
					this.className="tton";
				};
				spans[i].onmouseout=function(){
					this.className="tt1";
				};
				spans[i].onfocus=function(){
					this.className="tton";
				};
				spans[i].onblur=function(){
					this.className="tt1";
				};
				
			}
			else if(spans[i].className=="bracket"){
				spans[i].className="accessible";
			}
		}
		
	}
	
	var showTip = function(t){
		t.className="tton";
	}
	
	var hideTip = function(t){
		t.className="tt1";
	}

function Scroll(id,ud,spd){
 var obj=document.getElementById(id);
 clearTimeout(obj.to);
 if (ud){
  obj.scrollTop=obj.scrollTop+ud;
  obj.to=setTimeout(function(){ Scroll(id,ud,spd); },spd||10)
 }
}