// 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 details_word = new Array();

var thumbnails = new Array();
var thumbnails_word = 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+="<tr>";
        str+="<td style='text-align:right;border-bottom:0px solid #e0e0e0;vertical-align:middle;'>";
		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+="<a href='#' onMouseOver='javascript:showDetail(\""+key+"\");'>";
				str+="<img id='"+category+ "' src='vis/plotC"+id+".jpg' style='height:8px;width:"+freq*10+"px;' class="+classId+">";
				str+="<img id='"+category+ "' src='vis/plot0.jpg' style='height:8px;width:"+freq*10+"px;' class="+classIdDisabled+">";
				str+="</a>";

				n++;
			}
		}
		str+="</div>";
		str+="</td>";
		str+="<td style='width:40px;margin:10px;padding:0px;padding-left:5px;border:0px solid #e0e0e0;text-align:right;padding-top:1px;vertical-align:middle;'>";
        str+="<a href='javascript:showYear("+year+");' style='color:#404040;font-size:11px;font-weight:bold;padding:1px;' class='year'>" + year + "</a></td>";
        str+="</td>";
        str+="</tr>";
		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="";
		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' style='font-size:9px;font-weight:normal;color:#808080;'>";
			str+=" " + i + " " ;
			str+="<img  class='legend' src='vis/plotC"+id+".jpg' style='width:10px;height:8px'>";
			str+="</a><br>";

			n++;
		}
		return str;		
	}

function addInfo(cat, year, info, url, title, thumb, keywords) {
		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] = "";
		}
		if(typeof(thumbnails[key])== 'undefined') {
			thumbnails[key] = "";
		}
		//item= originalText.substring(idx+offset-20, idx+offset+20);
        var urlText = "";
        if(url.length>2 && url!='undefined') urlText="[ <a href='"+url+"'>PDF</a> ]";
        var text_info = "<li><span class='title'>"+title+"</span><p style='width:100%;display:block;text-align:right;margin:-1.5em;'>"+urlText+"</p>  <br><p class='info'>"+info + " </p></li>";
        var img_info = "<a href=\""+url+"\" title=\""+title+"\"><img src=\""+thumb+"\" alt=\""+title+"\"></a>";
        if(thumb.length==0) img_info="";
 		details[key]+=text_info;
        thumbnails[key]+=img_info;
        var words = keywords.trim().split(",");
        for(var i=0;i<words.length;i++) {
            var word = words[i].trim();
            if(typeof(details_word[word])== 'undefined') {
                details_word[word] = "";
            }
            details_word[word]+= text_info;
            if(typeof(thumbnails_word[word])== 'undefined') {
                thumbnails_word[word] = "";
            }
            thumbnails_word[word]+= img_info;
        }
	}
	
	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+="<div style='padding:0px;margin:0px;text-align:right;overflow:hidden' id='timeline'>";
        str+="<table style='width:100%;align:center'>";
        str+="<tr>";
        for(var yr = endYr;yr>=beginYr;yr--) {
			str+=drawYear(""+yr);
        }
        str+="</tr>";
        str+="<tr>";
        str+="<td colspan=2 style='padding-top:10px;'>";
        str+="<div style='text-align:right'>";
		str+=drawLegend();
        str+="</div>";
        str+="</td>";
        str+="</tr>";
        str+="</table>";

        str+="<br>";

		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(".year").click(function() {
                $(".year").css({"font-size":12});
                $(this).css({"font-size":18});
            });
			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){
        $.ajax({
            type: "GET",
            url: file,
            dataType: "xml",
            success: function(xmlData) {
	       
	       var numItems = jQuery("item",xmlData).length;
	       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();
		       var title = jQuery(this).find("itemtitle").text();
               var keywords = jQuery(this).find("keywords").text();
               var thumb = jQuery(this).find("thumbnail").text();
		       addInfo(cat, year, info, url, title, thumb,keywords);
		   });
	       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("");
        jQuery("#gallery").html("");
        //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>");
				jQuery("#gallery").append(thumbnails[key]);
			}
		}
	}
	function showKeyword(keyword) {        
	    jQuery("#details").html("");
        jQuery("#gallery").html("");
        //jQuery("#details").html("<h5 class='year'>Publications "+year+"</h5>");
		for (var key in details_word) {
        //alert("["+key+"]-["+keyword+"]");
			if(key==keyword) {
				var text = details_word[key];
				jQuery("#details").append("<span class='header'>"+key+"</span><ul class='list'>"+text+"</ul>");
				jQuery("#gallery").append(thumbnails_word[key]);
			}
		}
	}