// jQuery Timeline
// By Carlos D. Correa (C) 2008
// correac@vis.cs.ucdavis.edu

var cats = new Array();
var ids = new Array();
var details = new Array();
var curId = 0;
var beginYr, endYr, initialYr;
var maxFreq = 0;
var thumbsOffset = 0;
var widthYear = 80;
var maxOffset;


	function drawYear(year) {
		var n = 0;
		for (var i in cats) {
			if(i.substring(0,4)==year) {
				maxFreq = Math.max(maxFreq,cats[i]);
			}
		}
		var str = "";
		var width = widthYear;
		str+="<td class='year' style='width:"+width+"px;margin:0px;padding:0px;border:0px solid #00FFFF;'>";
		str+="<div style='width:"+width+"px;margin:0px;padding:0px;'>";
		str+="<table style='height:"+maxFreq*10+"px;' class='year'><tr>";
		for (var i in cats) {
			if(i.substring(0,4)==year) {
				var freq = cats[i];
				var category = i.substring(4);
				var gg = 192;
				var bb = (n+1)*40;
				var id = Math.min(ids[category],7);
				var key = ""+i;
				var classId = "cat"+id;
				var classIdDisabled = "disabled"+id;

				str+="<td style='padding:0px;border:0px;'>";
				str+="<a href='#' onMouseOver='javascript:showDetail(\""+key+"\");' style='border:0px solid;'>";
				str+="<img id='"+category+ "' src='vis/plotC"+id+".jpg' style='width:8px;height:"+freq*10+"px' class="+classId+">";
				str+="<img id='"+category+ "' src='vis/plot0.jpg' style='width:8px;height:"+freq*10+"px' class="+classIdDisabled+">";
				str+="</a>";
				str+="</td>";

				n++;
			}
		}
		str+="</tr></table>";
		str+="</div>";
		str+="</td>";
		return str;
	}

	function labelYear(year) {
		var str="";
		str+="<td class='label' style='text-align:center'><a href='javascript:showYear("+year+");'>" + year + "</a></td>";
		return str;
	}

	function drawLegend() {
		var numyrs = endYr - beginYr +1;
		var str="";
		str+="</tr>";
		str+="<tr><td colspan="+(numyrs+2)+">"
		var n = 0;
		for (var i in ids) {
			var toggleId = "#toggle"+n;
			var id = Math.min(ids[i],7);
			str+="<a  href='#' id='toggle"+n+"' class='enabled'>";
			str+="<img  class='legend' src='vis/plotC"+id+".jpg' style='width:10px;height:10px'>";
			str+=" " + i + " " ;
			str+="</a>";

			n++;
		}
		str+="</td></tr>";
		return str;		
	}

function addInfo(cat, year, info, url) {
		var key = ""+year+cat;
		if(typeof(ids[cat]) == 'undefined') {
			ids[cat] = curId++;
		}
		if(typeof(cats[key])== 'undefined') {
			cats[key] = 0;
		}
		cats[key]++;
		if(typeof(details[key])== 'undefined') {
			details[key] = "";
		}
		//item= originalText.substring(idx+offset-20, idx+offset+20);
		details[key]+="<li style><a href='"+url+"'>PDF</a> | "+info + "</li>";
	}
	
	String.prototype.trim = function() {
		return this.replace(/^\s+|\s+$/g,"");
	}


	function draw() {
	    var w = (endYr - initialYr + 1)*widthYear;
		var numyrs = endYr-beginYr+1;
		maxOffset = widthYear*endYr - w;
		thumbsOffset = widthYear*(initialYr-beginYr);
		var str="";
		str+="<table style='width:100%'>";
		str+"<tr>";
		str+="<td class='leftBtn' style='vertical-align:bottom;width:20px;'><a class='btn-left' href='\#'>&nbsp;</a></td>";

		str+="<td style='width:90%;'><center>";
		str+="<div style='padding:0px;margin:0px;text-align:center;width:"+w+"px;overflow:hidden' id='timeline'>";
		{
		    //		str+="<div id='timeline'>";
		    //		str+="<table class='timeline'><tr>";
		    str+="<table style='width:100%;align:center'><tr>";
		    str+="<td></td>";
		    for(var yr = beginYr;yr<=endYr;yr++) {
			str+=drawYear(""+yr);
		    }
		    str+="<td></td>";
		    str+="</tr>";
		    
		    str+="<tr>";
		    str+="<td></td>";
		    for(var yr = beginYr;yr<=endYr;yr++) {
			str+=labelYear(""+yr);
		    }
		    str+="<td></td>";
		    str+="</tr>";

		    str+="</table>";

		}
		str+="</center></div>";
		str+="</td>";
		str+="<td class='rightBtn' style='vertical-align:bottom'><a class='btn-right' href='\#'>&nbsp;</a></td>";

		str+=drawLegend();
		str+="<tr><td colspan="+(numyrs+2)+">"
		//str+="<div id='details' class='details'></div>";

		str+="</td></tr>";

		str+="</tr></table>";
		str+="</div>";
		jQuery("#results").html(str);

		jQuery(".btn-left").click(function(){
			initialYr--;
			var speed = 100;
			if(initialYr<beginYr) {
			    initialYr=beginYr; 
			    speed = 0;
			}
			thumbsOffset = widthYear*(initialYr-beginYr);
			//$("#details").html(""+initialYr + " : " + thumbsOffset);
			$('#timeline').animate({
				scrollLeft: thumbsOffset
				    }, speed);
		    });
		jQuery(".btn-right").click(function(){
			initialYr++;
			var speed = 100;
			if(initialYr > endYr - w/widthYear + 1) {
			    initialYr = endYr-w/widthYear + 1; 
			    speed = 0;
			}
			thumbsOffset = widthYear*(initialYr-beginYr);
			//$("#details").html(""+initialYr + " : " + thumbsOffset);
			$('#timeline').animate({
				scrollLeft: thumbsOffset
				    }, speed);
		});
		
		var n=0;
		for (var i in ids) {
			var toggleId = "#toggle"+n;
			jQuery(toggleId).click(function() {
				var cat = jQuery(this).text();
				var id = ids[cat.trim()];
				jQuery(".cat"+id).toggle();
				jQuery(".disabled"+id).toggle();
			});
			jQuery(toggleId).toggle(function() {
				jQuery(this).addClass('disabled');
			}, function() {
				jQuery(this).removeClass('disabled');
			});
			n++;
		}

		for (var i in ids) {
		    var id = Math.min(ids[i],7);
		    jQuery(".disabled"+id).hide();
		}
	}

    jQuery(document).ready(function() {
	jQuery(".btn-slide").click(function(){
	  jQuery("#results").slideToggle("slow");
	  var hideText = "Hide";
	  var showText = "Show";
	  var txt = (jQuery(".btn-slide").text() == hideText) ? showText : hideText;
	  jQuery(".btn-slide").text(txt);
	});

	$(".btn-left").click(function() {
		thumbsOffset-=150;
		//if(thumbsOffset<0) { thumbsOffset=0; return; }
		$('#timeline').animate({
			scrollLeft: thumbsOffset
			    }, 500);
	    });
	$(".btn-right").click(function() {
		alert('scroll right');
		thumbsOffset+=150;
		//if(thumbsOffset>pics.length*150) { thumbsOffset=pics.length*150; return; }
		$('#timeline').animate({
			scrollLeft: thumbsOffset
			    }, 500);
	    });	
    });

function openTimeline(file, yr1, yr2, initial, yr0, yrInitial) {
       $.get(file, function(xmlData){
	       //jQuery("#results").append(xmlData);
	       //jQuery("#results").append("Hello");
	       
	       var numItems = jQuery("item",xmlData).length;
	       //jQuery("#results").append("Num items = " + numItems);
	       jQuery(xmlData).find('item').each(function(){
		       var year = jQuery(this).find("year").text();
		       var cat = jQuery(this).find("category").text();
		       var info = jQuery(this).find("info").text();
		       var url = jQuery(this).find("url").text();
		       //jQuery("#results").append("<b> " + cat + " - " + year + "</b><br>"+info+"<br>");
		       addInfo(cat, year, info, url);
		   });
	       beginYr = yr1;
	       endYr = yr2;
	       initialYr = yr0;
	       draw();
	       showYear(yrInitial);
	       //showDetail(initial);
	       $('#timeline').animate({
		       scrollLeft: thumbsOffset
			   }, 0);
	   });

   };
	function showDetail(key) {
		if(key.length<4) return;
		var year = key.substring(0,4);
		var cat = key.substring(4);
		var text = details[key];
		jQuery("#details").html("<span class='header'>"+cat+"</span><ul class='list' >"+text+"</ul>");
	}
	function showYear(year) {
	    jQuery("#details").html("<h5 class='year'>Publications "+year+"</h5>");
		for (var key in cats) {
			if(key.substring(0,4)==year) {
				var cat = key.substring(4);
				var text = details[key];
				jQuery("#details").append("<span class='header'>"+cat+"</span><ul class='list'>"+text+"</ul>");
			}
		}
	}