Updated GU Campaign

timeline.js

// JavaScript Document
//console fix for IE or other browsers that don't have a console
if(typeof(console)!='undefined'){
	//console exists, do nothing
} else {
	//console doesn't exist, create it and create console.log
	var console=new Object();
	console.log=function(o){
		//window.status=o.toString();
	}
}

//get user agent
var userAgent = window.navigator.userAgent;
var isIOS=/iP(hone|od|ad)/.test(userAgent);

var data={
	"config":{
		"imgDir":"timeline/images/",
		"loadingScreen":"#loading"
	},
	"isExpanded":false,
	"events":[],
	"filters":["cat_a","cat_b","cat_c","cat_d"]
	
};
//This function should slide down the detail view
function showTimelineEvent(o){
	data.isExpanded = true;
	
	window.setTimeout(function(){
		$(".square").removeClass("hilite");
		var sq = $(o).find(".square");
		sq.addClass("hilite");
		
		$("#timelineFilters").css("display","none");
		
		//$(".event .thumb").fadeTo('slow',.2);
		//$(".event .thumbline").fadeTo('slow',.2);
	},50);
	
	var oid=parseInt($(o).attr("id").replace('event', ''));
	var eventObj = data.events[oid];
	//TODO: load data into view
	
		var detailString = '<div id="detailsImageMobile">'
			detailString += '<div style="display:table;height:375px;position:relative;overflow:hidden;float:right;">';
			detailString += '<div style="position:absolute;top:50%;display:table-cell;vertical-align:middle;">'
			detailString += '<div style="position:relative;top:-50%;">'
			detailString += '<img src="'+data.config.imgDir+eventObj.imagesmall+'"/>'
			detailString += '</div></div></div></div>';
			detailString += '<div id="detailsInfo">';
			detailString += '<div style="display:table;height:375px;width:300px;position:relative;overflow:hidden">';
			detailString += '<div style="position:absolute;top:50%;display:table-cell;vertical-align:middle;">'
			detailString += '<div style="position:relative;top:-50%;">'
			detailString += '<div id="detailClose" class="ui-corner-all"><div id="detailCloseContainer" class="ui-corner-all"></div>Close</div>'
			detailString += '<div class="hr"></div>';
			detailString += '<p>'+eventObj.text+'</p>';
			detailString += '<div class="hr"></div>';
			detailString += '</div></div></div></div>';
	
		if($('html').hasClass('no-touch')){
			$("#detailsContainer").html(detailString);
			window.setTimeout(function(){
				$(".event .thumb").css('opacity','.2');
				$(".event .thumbline").css('opacity','.2');
				$("#timelineIntro").css('opacity','0');
				$("#timelineOutro").css('opacity','0');
				$("#detailsContainer").slideDown("slow", function(){});
			},100);
		} else {
			$("#detailsContainerMobile").html(detailString);
			window.setTimeout(function(){
				$(".event .thumb").css('opacity','.2');
				$(".event .thumbline").css('opacity','.2');
				$("#timelineIntro").css('opacity','0');
				$("#timelineOutro").css('opacity','0');
				$("#detailsContainerMobile").slideDown("slow", function(){});
			},100);
		}
	
	$("#detailClose").live("click", function(){
		data.isExpanded = false;
		$(".square").removeClass("hilite");
		$("#timelineFilters").css("display","block");
		hideTimelineEvent();
	});
}
function hideTimelineEvent(){
	window.setTimeout(function(){
		if($('html').hasClass('no-touch')){
			$("#detailsContainer").slideUp("slow", function(){
				$(".event .thumb").css('opacity','1');
				$(".event .thumbline").css('opacity','1');
				$("#timelineIntro").css('opacity','1');
				$("#timelineOutro").css('opacity','1');
			});
		} else {
			$("#detailsContainerMobile").slideUp("slow", function(){
				$(".event .thumb").css('opacity','1');
				$(".event .thumbline").css('opacity','1');
				$("#timelineIntro").css('opacity','1');
				$("#timelineOutro").css('opacity','1');
			});
		}
		
	},50);
}

function setTimelineYear(yearString){
	$("#timelineYear").text(yearString);
}



function activateFilters(){
	$('input[type=checkbox]').live('click', function () {
		adjustFilters();
	});
	$('.checkbox').live('click', function () {
		adjustFilters();
	});
};
function adjustFilters() {
	data.filters = [];
	$('input:checkbox').each(function(index,element){
		if ($(this).attr('checked') == "checked") data.filters.push($(this).attr("value"));
	});
		
	$('.event').each(function(index, element) {
       var isactive = false;
	   var categories = String($(this).attr("categories"));
	   
	   
	   $.each(data.filters, function(index,element) {
			if (categories.search(element) != -1) isactive = true;
		});
			   
	   if (!isactive) $(this).css("display","none");
	   else $(this).css("display","block");
	  
	   
    });
};
function getEventPosition(pos, ct) {
	return (pos)/(ct+1);
}


function loadTimelineData(){
	//load TimelineData
	var currLeft=450;
	var currEventHeight=EVENT_HEIGHT_MEDIUM;
	var timelineString="";
	var eventsString="";
	var currEvent;
	var currYear;
	var currYearCt = 0;
	
	$("#detailsContainer").slideUp("slow");
	$("#detailsContainerMobile").slideUp("slow");
	
	
	for(var i=0; i<data.events.length; i++){
		var item=data.events[i];
		// if new year, add year hash
		if((i==0)||(parseInt(data.events[i-1].year)<parseInt(data.events[i].year))){
			currYearCt = 0;
			if (i != 0) currLeft+=EVENT_WIDTH;
			else setTimelineYear(item.year);
			timelineString+='<li class="hashmark"><div class="hashdate">'+item.year+'</div><div class="hashline"></div></li>';
		} else {
			currYearCt ++;
		}
		
		//calculate whether timeline item should be tall, short or medium
		if(currEventHeight==EVENT_HEIGHT_MEDIUM){
			if(Math.random()>.5){
				currEventHeight=EVENT_HEIGHT_TALL;
			} else {
				currEventHeight=EVENT_HEIGHT_SHORT;
			}
		} else if((currEventHeight==EVENT_HEIGHT_SHORT)||(currEventHeight==EVENT_HEIGHT_TALL)){
			currEventHeight=EVENT_HEIGHT_MEDIUM;
		}
		
		//insert timeline item
		var offsetLeft = currLeft + (item.position*EVENT_WIDTH) - 20;
		
		var categories = String(item.categories).split(",");
			categories = categories.join(" ");
		
		eventsString+='<div id="event'+i+'" class="event '+currEventHeight+'" categories="'+ categories + '" style="left:'+offsetLeft+'px;">';
		eventsString+='<div class="thumb" style="background-image:url('+data.config.imgDir+item.doorsmall+');"></div><div class="thumbline"></div>';
		eventsString+='<div class="square"></div>'
		eventsString+='</div>';
		
		if(i<data.events.length-1){
			//if we're not on the first item check to see whether we need a break
			if(parseInt(data.events[i].year)+1<parseInt(data.events[i+1].year)){
				currLeft+=(EVENT_WIDTH + 10);
				// alert("ADD BREAK:" + (item.year+1) + ":" + currLeft);
				timelineString+='<li class="hashmark"><div class="hashdate">'+(parseInt(item.year)+1)+'</div><div class="hashline"></div></li>';
				//TODO: Insert Break Icon then hashmark	
				timelineString+='<li class="hashbreak"></li>';
			}
		}
	}
	currLeft+=(EVENT_WIDTH);
	$('#timelineContent .eventContainer').append(eventsString);
	$('#timelineContent .timelineItems').append(timelineString);
	$('#timelineScrollable').css('width',currLeft+450);
	$('#timelineScrollable .timelineItems').css('width',currLeft+450);
	
	
	
	//if(!isIOS){
	if($('html').hasClass('no-touch')){
		$('.timelineOverlay').live('click',function(e,o){
			
			$("#detailsContainer2").slideUp("slow");
			$("#detailsContainer").slideUp("slow");
			
			var clickX=parseInt(e.clientX - $('#timelineContent').offset().left);
			console.log(parseInt(e.clientY));
			console.log(parseInt($(".eventContainer").offset().top));
			
			if((clickX>430)&&(clickX<470)){
				//must be a click on the center item
				console.log(currEvent.offset().top);
				if(currEvent!=null){
					showTimelineEvent(currEvent);
				}
			} else {
				var currLeftEvents = parseInt($('#timelineScrollable .eventContainer').css("left"))+450;
				var currLeftTimeline = parseInt($('#timelineScrollable .timelineItems').css("left"))+450;
				$('#timelineScrollable .eventContainer').animate({'left':currLeftEvents-clickX},500,function(e){
					var matchX = 450 - parseInt($('#timelineScrollable .eventContainer').css("left"));
					$('#timelineScrollable .eventContainer .event').each(function(index, element) {
                        var x1 = parseInt($(this).css("left"));
						if (x1<matchX && x1+40>matchX) {
							$(".event .thumb").removeClass("hilite");
							currEvent = $(this);
							currEvent.children(".thumb").addClass("hilite");
						}
                    });
				});
				$('#timelineScrollable .timelineItems').animate({'left':currLeftTimeline-clickX},500,function(e){
					var matchX = parseInt($('#timelineScrollable .timelineItems').css("left"));
					$('#timelineScrollable .timelineItems .hashmark').each(function(index, element) {
                        var x1 = parseInt($(this).position().left);
						if (x1+matchX+(EVENT_WIDTH*.5)<450 && matchX+x1+(1.5*EVENT_WIDTH)>450) {
							currYear = $(this);
							setTimelineYear(currYear.children('.hashdate').text());
						}
                    });
				});
			}
			
		});
		
		$('#arrowLeft').live('click',function(e,o){
			if (data.isExpanded) {
				var oid = parseInt(String(currEvent.attr("id")).replace("event", "")) - 1;
				
				if (oid >= 0) {
					currEvent = $("#event"+oid);
					while (currEvent.css("display") == "none") {
						oid --;
						if (oid < 0) break;
						currEvent = $("#event"+oid);
					}
					if (oid < 0) return;

					showTimelineEvent(currEvent);
					
					var offsetLeft = parseInt(currEvent.css("left")) + parseInt($('#timelineScrollable .eventContainer').css("left")) - 450;
					var currEventLeft = parseInt($('#timelineScrollable .eventContainer').css("left"));
					$('#timelineScrollable .eventContainer').animate({'left':currEventLeft-offsetLeft-20},500,function(e){});
					var currLeftTimeline = parseInt($('#timelineScrollable .timelineItems').css("left"));
					$('#timelineScrollable .timelineItems').animate({'left':currLeftTimeline-offsetLeft-20},500,function(e){
						var matchX = parseInt($('#timelineScrollable .timelineItems').css("left"));
						$('#timelineScrollable .timelineItems .hashmark').each(function(index, element) {
							var x1 = parseInt($(this).position().left);
							if (x1+matchX+(EVENT_WIDTH*.5)<450 && matchX+x1+(1.5*EVENT_WIDTH)>450) {
								currYear = $(this);
								setTimelineYear(currYear.children('.hashdate').text());
							}
						});
					});
					
				}
			} else {
				var currLeftEvents = parseInt($('#timelineScrollable .eventContainer').css("left")) + 900;
				if (currLeftEvents > 0) currLeftEvents = 0;
				var currLeftTimeline = parseInt($('#timelineScrollable .timelineItems').css("left")) + 900;
				if (currLeftTimeline > 450) currLeftTimeline = 450;
				
				window.setTimeout(function(){
				$('#timelineScrollable .eventContainer').animate({'left':currLeftEvents},500,function(e){});
				
				$('#timelineScrollable .timelineItems').animate({'left':currLeftTimeline},500,function(e){
					window.setTimeout(function(){
					currYear = null;
					var matchX = parseInt($('#timelineScrollable .timelineItems').css("left"));
					var isdone = false;
					$('#timelineScrollable .timelineItems .hashmark').each(function(index, element) {
						if (!isdone) {
							var x1 = parseInt($(this).position().left);
							currYear = $(this);
							if (matchX+x1+(1.5*EVENT_WIDTH)>450) {
								setTimelineYear(currYear.children('.hashdate').text());
								isdone = true;
							}
						}
					});
					},100);
				});
				},100);
			}
		});
		$('#arrowRight').live('click',function(e,o){
			if (data.isExpanded) {
				var oid = parseInt(String(currEvent.attr("id")).replace("event", "")) + 1;
				if (oid < data.events.length) {
					
					currEvent = $("#event"+oid);
					while (currEvent.css("display") == "none") {
						oid ++;
						if (oid >= 0) data.events.length;
						currEvent = $("#event"+oid);
					}
					if (oid >= data.events.length) return;
					
					showTimelineEvent(currEvent);
					
					var offsetLeft = parseInt(currEvent.css("left")) + parseInt($('#timelineScrollable .eventContainer').css("left")) - 450;
					var currEventLeft = parseInt($('#timelineScrollable .eventContainer').css("left"));
					var currLeftTimeline = parseInt($('#timelineScrollable .timelineItems').css("left"));
					
					$('#timelineScrollable .eventContainer').animate({'left':currEventLeft-offsetLeft-20},1000,function(e){});
						
					$('#timelineScrollable .timelineItems').animate({'left':currLeftTimeline-offsetLeft-20},1000,function(e){
						var matchX = parseInt($('#timelineScrollable .timelineItems').css("left"));
						$('#timelineScrollable .timelineItems .hashmark').each(function(index, element) {
							var x1 = parseInt($(this).position().left);
							if (x1+matchX+(EVENT_WIDTH*.5)<450 && matchX+x1+(1.5*EVENT_WIDTH)>450) {
								currYear = $(this);
								setTimelineYear(currYear.children('.hashdate').text());
							}
						});
					});
				}
			} else {
				var currLeftEvents = parseInt($('#timelineScrollable .eventContainer').css("left")) - 900;
				if (currLeftEvents < -parseInt($('#timelineScrollable .eventContainer').css("width"))+900) currLeftEvents = -parseInt($('#timelineScrollable .eventContainer').css("width"))+900;
				
				var currLeftTimeline = parseInt($('#timelineScrollable .timelineItems').css("left")) - 900;
				if (currLeftTimeline < -parseInt($('#timelineScrollable .timelineItems').css("width"))+1350) currLeftTimeline = -parseInt($('#timelineScrollable .timelineItems').css("width"))+1350;
				
				window.setTimeout(function(){
				$('#timelineScrollable .eventContainer').animate({'left':currLeftEvents},500,function(e){});
				
				$('#timelineScrollable .timelineItems').animate({'left':currLeftTimeline},500,function(e){
					window.setTimeout(function(){
					currYear = null;
					var matchX = parseInt($('#timelineScrollable .timelineItems').css("left"));
					var isdone = false;
					$('#timelineScrollable .timelineItems .hashmark').each(function(index, element) {
						if (!isdone) {
							var x1 = parseInt($(this).position().left);
							currYear = $(this);
							if (matchX+x1+(1.5*EVENT_WIDTH)>450) {
								setTimelineYear(currYear.children('.hashdate').text());
								isdone = true;
							}
						}
					});
					},100);
				});
				},100);
			}
		});
	
	} else {
	
		$('#detailsContainer').css("display","none");
		$('.timelineOverlay').css('display','none');
		// document.addEventListener('touchmove', function(e){ e.preventDefault(); });
		timelineScroll=new iScroll('timelineScrollWrapper',{hScrollbar:false,vScrollbar:false,vScroll:false,hScroll:true,onScrollEnd:handleScrollEnd,onTouchEnd:handleScrollEnd });
		
		$('#timelineScrollable .eventContainer .event').live('click',function(e,o){
			if (timelineScroll.animating) return;
			
			currEvent = $(this);
			$(".event .thumb").removeClass("hilite");
			currEvent.children(".thumb").addClass("hilite");
			if( parseInt($(this).position().left)+parseInt(timelineScroll.x)+25 > 430 && parseInt($(this).position().left)+parseInt(timelineScroll.x)+25 < 470 ) {
				showTimelineEvent(currEvent);
			} else {
				var leftPosition = parseInt($(this).css("left"))-425;
				window.setTimeout(function(){
					timelineScroll.scrollTo(-leftPosition,0,1000);
				},10);
			}
		});
		
		$('#arrowLeft').live('click',function(e,o){
			if (data.isExpanded) {
				var oid = parseInt(String(currEvent.attr("id")).replace("event", "")) - 1;
				if (oid < data.events.length) {
					currEvent = $("#event"+oid);
					showTimelineEvent(currEvent);
					
					var leftPosition = parseInt(currEvent.css("left"))-425;
					timelineScroll.scrollTo(-leftPosition,0,1000);
				}
			} else {
				var newScroll = timelineScroll.x+900;
				window.setTimeout(function(){
				timelineScroll.scrollTo(newScroll,0,1000);
				},100);
			}
		});
		$('#arrowRight').live('click',function(e,o){
			if (data.isExpanded) {
				var oid = parseInt(String(currEvent.attr("id")).replace("event", "")) + 1;
				if (oid < data.events.length) {
					currEvent = $("#event"+oid);
					showTimelineEvent(currEvent);
					
					var leftPosition = parseInt(currEvent.css("left"))-425;
					timelineScroll.scrollTo(-leftPosition,0,1000);
				}
			} else {
				var newScroll = timelineScroll.x-900;
				window.setTimeout(function(){
					timelineScroll.scrollTo(newScroll,0,1000);
				},100);
			}
		});
		
	}
};
function handleScrollEnd(){
	if (timelineScroll.animating) return;
	
	var leftPosition = -parseInt(timelineScroll.x);
	var isdone = false;
	currYear=null;
	$('#timelineScrollable .timelineItems .hashmark').each(function(index, element) {
		if (currYear == null) currYear = $(this);
		var x1 = parseInt($(this).position().left);
		if (x1-leftPosition+(EVENT_WIDTH*.5)+430<450 && x1-leftPosition+(EVENT_WIDTH*1.5)+470>450) {
			isdone = true;
			currYear = $(this);
		}
		if (!isdone && leftPosition > 100 && index >= parseInt($('#timelineScrollable .timelineItems .hashmark').length)-1) {
			currYear = $(this);
		}
	});
	
	setTimelineYear(currYear.children('.hashdate').text());
}


var EVENT_HEIGHT_MEDIUM="medium";
var EVENT_HEIGHT_SHORT="short";
var EVENT_HEIGHT_TALL="tall";
var DATE_WIDTH=15;
var EVENT_WIDTH=100;
var timelineScroll;

$(document).ready(function(){
	$.ajax({
	  type: "GET",
	  url: "timeline/events.xml",
	  dataType: "xml",
	  success: function(xml){
		var eventPosition = 1;
		var eventCount = 1;
		var currEventYear;
		data.events = [];
		$(xml).find("event").each(function(index,el){
			
			var eventObj = new Object();
			eventObj.year = $(this).find("year").text();
			
			// figure out positioning
			eventCount = 0;
			$(xml).find("event").each(function(index,el){
				if ($(this).find("year").text() == eventObj.year) eventCount ++;
			});
			if (eventObj.year == currEventYear) eventPosition ++;
			else eventPosition = 1;
			
			currEventYear = eventObj.year;
			
			eventObj.doorsmall = $(this).find("doorsmall").text();
			eventObj.doorlarge = $(this).find("doorlarge").text();
			eventObj.imagesmall = $(this).find("imagesmall").text();
			eventObj.imagelarge = $(this).find("imagelarge").text();
			eventObj.text = $(this).find("text").text();
			eventObj.categories = $(this).find("categories").text();
			eventObj.position = getEventPosition(eventPosition, eventCount);
			
			data.events.push(eventObj);
		})
		loadTimelineData();
		activateFilters();
	  }
	});
});