var segment_titles = null;
		var startdate = null;
		var startMill = null;
		var enddate = null;
		var endMill = null;
		var scrape_object = [];
		var timelineObjects = [];
		var centerpos = null;
		var point_width = null;
		var point_height = null;
		
		function timelineObjConstructor(date,name,title,copy,image,nudge){
			this.date = date;
			this.name = name;
			this.title = title;
			this.copy = copy;
			this.image = image;
			this.nudge = nudge;
		}
		
		function draw_timeline() {
			var increments = segment_titles.length-1;
			var linewidth = ge('tl_horizontal').offsetWidth-2;
			centerpos = linewidth/2;
			var spacing = linewidth/increments;
			var newdiv = [];
			var newlabel = [];
			var linedates = []
			var point_width = 23;
			var point_height = 23; // should get these programmically
			for(i=0; i<=increments; i++){
				var len = newdiv.length;
				newdiv[len] = document.createElement("div");
				var space = spacing*i;
				newdiv[len].style.left = space+'px';
				newdiv[len].className = 'segments';
				var incrementHTML = '<div class="segments" style="left:'+space+'px"></div>';
				ge('verticals').innerHTML += incrementHTML;
			}
			for(j=0; j<segment_titles.length;j++){
				newlabel[j] = document.createElement('div');
				
				newlabel[j].innerHTML = segment_titles[j];
				
				var labelClass = 'labelclass';
				if(j==0){
					labelClass = labelClass+'_first';
					newlabel[j].style.left = ((spacing*j)-24)+'px';
				}
				else if(j==segment_titles.length-1){
					labelClass = labelClass+'_last';
					newlabel[j].style.left = ((spacing*j)-24)+'px';
				}
				else{
					newlabel[j].style.left = ((spacing*j)-15)+'px';
				}
				newlabel[j].className = labelClass;
				ge('timeline').appendChild(newlabel[j]);
			}
			//timeline boxes with hover and click events
			for(k=0; k < timelineObjects.length; k++){
				//alert(timelineObjects[k]);
				linedates[k] = document.createElement('div');
				linedates[k].id = 'linedate_'+k;
				linedates[k].className = 'linedate';
				linedates[k].onmouseover = function(){
					if(this.className != 'linedate_active')
						this.className = 'linedate_hover';
					showtip(this);	
				}
				linedates[k].onmouseout = function(){
					if(this.className != 'linedate_active')
						this.className = 'linedate';
					hidetip(this);
				}
				linedates[k].onclick = function(){
					draw_content(this.id);
					report_click(this.id);
				}
				
				// whats the width of the line object
				//if(k > 0)
				//System.out.println('lineobject width='+linedates[(k-1)].style.width);
				
				var thisDate = new Date(timelineObjects[k].date);
				var thisDateMills = thisDate.getTime();
				var timespan = endMill - startMill; 
				var linedatepos = thisDateMills - startMill; 
				var spanMultiplyer = linewidth/timespan;
				var leftpx = (Math.ceil(linedatepos*spanMultiplyer-(point_width/2))+(parseInt(timelineObjects[k]['nudge'])));
				linedates[k].style.left = leftpx+'px';
				linedates[k].innerHTML = '<img src="/img/spc.gif" width="1" height="1" border="0"/>';
				ge('datecontainer').appendChild(linedates[k]);
			}
			
			draw_content('linedate_0');
		}
		
		// this function has hardcoded values that add or subtract to the left nav to center the timeline object upon a certain point.
		// these should be more dynamic a be half the width of whatever the css is set to instead of hard coded
		var current_index = -1;
		function draw_content(index){
			//System.out.println(index);
			var el = document.getElementById(index)
			var current_active = getElementsByClassName('linedate_active');
			for(var i = 0; i < current_active.length; i++)
				current_active[i].className = 'linedate';
			el.className = 'linedate_active';
			var xpos = parseInt(el.style.left);
			var index = index.split('_')[1];		
			current_index = index;
			//System.out.println(current_index);	
			ge('seg1').style.left = (xpos+11)+'px';
			ge('point_high').style.left = (xpos-7)+'px';
			ge('point_high').style.visibility = 'visible';
			if(xpos<centerpos){
				ge('seg2').style.left = (xpos+11)+'px';
				ge('seg2').style.width = ((centerpos-10)-xpos)+'px';
			}else{
				ge('seg2').style.left = (centerpos)+'px';
				ge('seg2').style.width = ((xpos+10)-(centerpos-2))+'px';
			}
			ge('seg3').style.left = centerpos+'px';
			ge('seg1').style.visibility = 'visible';
			ge('seg2').style.visibility = 'visible';
			ge('seg3').style.visibility = 'visible';
			ge('splashwin').style.visibility = 'hidden';
			for(var n in scrape_object)ge('linedetail_'+n).style.visibility = 'hidden';
			ge('linedetail_'+index).style.visibility = 'visible';
		}
		
		function scrape_data(){ // pulls the data from the page
			var detail = ge('timeline_details').attributes;
			var details = getElementsByClassName('timeline_detail');// an array of the html holders to be treated as XML
			var segment_titles_string = detail['segments'].nodeValue;
			segment_titles = eval('['+segment_titles_string+']');
			var startdate_string = detail['startdate'].nodeValue;
			startdate = new Date(startdate_string);
			startMill = startdate.getTime()/1;
			var enddate_string = detail['enddate'].nodeValue
			enddate = new Date(enddate_string);
		 	endMill = enddate.getTime()/1;
			for(var i = 0; i < details.length; i++)examineNode(details[i],i);// examine all the xml and extract the data into a js objec "scrape_object"
			for(var n in scrape_object)timelineObjects[timelineObjects.length] = new timelineObjConstructor(scrape_object[n]['timestamp'],scrape_object[n]['name'],scrape_object[n]['title'],scrape_object[n]['copy'],"http://www.vh1.com/img/spc.gif",scrape_object[n]['nudge']);
		}
		
		function examineNode(node,index){
			//alert('examineNode');
			if(!scrape_object[index])
				scrape_object[index] = new Object();
			var nodeName = node.nodeName;
			var nodeType = node.nodeType;
			var nodeValue = node.value;
			var children = node.childNodes.length;
			if(nodeType==3){
				try{
					if(node.parentNode.attributes){
						if(node.parentNode.attributes['class'].nodeValue!=''){
							var name = node.parentNode.attributes['class'].nodeValue;
							var value = stripWhitespace(node.nodeValue)
	
							scrape_object[index][name] = value;
							if(name=='date'){
								scrape_object[index]['name'] = value;
								scrape_object[index]['timestamp'] = node.parentNode.attributes['stamp'].nodeValue
								scrape_object[index]['nudge'] = node.parentNode.attributes['nudge'].nodeValue
							}
							else if(name=='title'){
								//System.out.println('title='+value);
								scrape_object[index]['title'] = value;
							}
						}
					}
				}catch(e){}
			}
			if(children)
				for(var i = 0; i < children; i++)
					examineNode(node.childNodes[i],index);
		}
		
		function showtip(obj){
			ge('timeline_tip').style.visibility = 'visible';
			ge('timeline_tip').style.left = obj.style.left;
			var index = obj.id.split('_')[1];
			ge('timeline_tip').innerHTML = scrape_object[index]['date'];
		}
		
		function hidetip(obj){
			ge('timeline_tip').style.visibility = 'hidden';
		}
		
		function getElementsByClassName (classname, node)  {    
			if(!node) node = document.getElementsByTagName("body")[0];    
			var a = [];    
			var re = new RegExp('\\b' + classname + '\\b');    
			var els = node.getElementsByTagName("*");    
			for(var i=0,j=els.length; i < j; i++)        
				if(re.test(els[i].className))a.push(els[i]);    
			return a;
		}
		
		function ge(id){
			return document.getElementById(id);
		}
		
		function stripWhitespace (str){
	   		var result = str;
	    	result = result.split("\t").join("");
	    	result = result.split("\r").join("");
	    	result = result.split("\n").join("");
	    	return result;
		}
	
		function inittimeline(){
			//System.out.println('initing');
			scrape_data();
			draw_timeline();
		}
		
		function nav(dir){
			var numofObjects = timelineObjects.length-1;
			var newval = parseInt(current_index)+dir;
			
			if(newval<0)
				newval = numofObjects;
			if(newval>numofObjects)
				newval = 0;
			var drawthis = 'linedate_'+newval;
			//System.out.println('drawthis='+drawthis);
			draw_content(drawthis);
			dispatcher.sendLinkEvent({linkType:'o',linkName:'music_milestones:navigate:'+timelineObjects[newval].name});
		
		}
		
		function report_click(index){
			
			var index = parseInt(index.split('_')[1]);	
			//System.out.println('report_click='+index);
			//System.out.println(timelineObjects.length);
			//System.out.println('date='+timelineObjects[index].date);
			//System.out.println('title='+escape(timelineObjects[index].name));
			
			dispatcher.sendLinkEvent({linkType:'o',linkName:'music_milestones:point:'+timelineObjects[index].name});

		}
		
		//System.out.println('inittimeline here');
		Page.onload('inittimeline');