// JavaScript Document
//This js will read the xml, generate the random color, create the interval,timeline and grid view.



//coding for back-ground color code settings
boxBackGroundColor=new Array(); 
boxBackGroundColor[0]="#f7f0b5";
boxBackGroundColor[1]="#dadc56";
boxBackGroundColor[2]="#572600";
boxBackGroundColor[3]="#ffc220";
boxBackGroundColor[4]="#72afb6";
//end for back-ground color code settings

//coding for font color code settings
boxFontColor=new Array(); 
boxFontColor[0]="#572600";
boxFontColor[1]="#572600";
boxFontColor[2]="#ffffff";
boxFontColor[3]="#ffffff";
boxFontColor[4]="#ffffff";
//end of font color code settings

//For every Zone the related hard coded text.
zoneInfoArray= new Array();
zoneInfoArray[0]="Please visit section 1 of MOCA's Core Exhibition: <i>Go East! Go West!</i>";
zoneInfoArray[1]="Please visit section 2 of MOCA's Core Exhibition: <i>Down with Monopolies! The Chinese Must Go!</i>";
zoneInfoArray[2]="Please visit section 3 of MOCA's Core Exhibition: <i>Imagined and Intimate</i>";
zoneInfoArray[3]="Please visit section 4 of MOCA's Core Exhibition: <i>Welcome to Chinatown!</i>";
zoneInfoArray[4]="Please visit section 5 of MOCA's Core Exhibition: <i>Building Community</i>";
zoneInfoArray[5]="Please visit section 6 of MOCA's Core Exhibition: <i>The Rising Spirit</i>";
zoneInfoArray[6]="Please visit section 7 of MOCA's Core Exhibition: <i>Allies and Enemies</i>";
zoneInfoArray[7]="Please visit section 8 of MOCA's Core Exhibition: <i>Towards a More Perfect Union</i>";
//Ended zone hard-code

var TimelineXmlHttpObj; //HTTP XML object for featch timeline event data from xml file.
var maxBoxColor=parseInt(boxBackGroundColor.length);

var titleYear1; //Timeline title year (first)
var titleYear2; //Timeline title year (last)
var currentInterval; //Current interval 

var titleArray = new Array();
var teaserArray = new Array();
var pathArray = new Array();
var monthArray = new Array();
var dayArray = new Array();
var smallImageArray = new Array();
var mediumImageArray = new Array();
var subjectsArray = new Array();
var zonesArray = new Array();
var intervalYearArray = new Array();
var siteUrl = "http://www.mocanyc.org/";
var tagUrl="http://www.mocanyc.org/learn/timeline/list?filter0=&filter1=";
var xmlFileUrl = "http://www.mocanyc.org/learn/timeline/flash2/node_feed";

function statusIndicator(year)
{		
	if(statusInd!=""){		
		document.getElementById(statusInd).style.height ="0px";
		document.getElementById(statusInd).style.visibility="hidden";		
	}
	statusInd=year;
	var hght = document.getElementById(year);
	hght.style.height ="6px";
	hght.style.visibility="visible";
	
}

function getRandomNumber(maxLimit)
{
	return Math.floor(Math.random()*maxLimit);
}
function readMocaTimelineXML()
{	
	TimelineXmlHttpObj=createXmlHttpObj();	
	TimelineXmlHttpObj.open("GET", xmlFileUrl, true);
	TimelineXmlHttpObj.onreadystatechange = getMocaTimelineEventList;
	TimelineXmlHttpObj.send(null);
}
function getMocaTimelineEventList()
{
	if (TimelineXmlHttpObj.readyState == 4)
	{
		if (TimelineXmlHttpObj.status == 200) 
		{
			populateMocaTimelineEventList(TimelineXmlHttpObj.responseXML.documentElement);
			return 1;              
		}
		else 
		{
			//alert ( "Not able to get BoxBackGroundList" );
		}
	}	
}
function populateMocaTimelineEventList(rootElement)
{	
	var eventNodes = rootElement.getElementsByTagName('event');
	maxEvent= parseInt(eventNodes.length);	
	if(maxEvent>0)
	{
		titleYear2 = parseInt(GetInnerText(eventNodes[0].getElementsByTagName("year")[0]));
		endYear = titleYear2+parseInt(10-(titleYear2%10));
		titleYear1 = parseInt(GetInnerText(eventNodes[maxEvent-1].getElementsByTagName("year")[0]));		
		startYear = titleYear1-parseInt(titleYear1%10);		
		var i=0;		
		for(i=(maxEvent-1);i>=0;i--)
		{
			yearArray.push(GetInnerText(eventNodes[i].getElementsByTagName("year")[0]));
			titleArray.push(GetInnerText(eventNodes[i].getElementsByTagName("title")[0]));
			if(GetInnerText(eventNodes[i].getElementsByTagName("teaser")[0])==undefined)
				teaserArray.push("");
			else
				teaserArray.push(GetInnerText(eventNodes[i].getElementsByTagName("teaser")[0]));
			pathArray.push(GetInnerText(eventNodes[i].getElementsByTagName("path")[0]));
			if(GetInnerText(eventNodes[i].getElementsByTagName("month")[0])==undefined)
			{
				monthArray.push(100);
			}
			else
			{
				monthArray.push(GetInnerText(eventNodes[i].getElementsByTagName("month")[0]));
			}
			if(GetInnerText(eventNodes[i].getElementsByTagName("day")[0])==undefined)
			{
				dayArray.push(100);
			}
			else
			{
				dayArray.push(GetInnerText(eventNodes[i].getElementsByTagName("day")[0]));
			}
			var imageNodes = eventNodes[i].getElementsByTagName("image");
			
			if(GetInnerText(imageNodes[0].getElementsByTagName("imagecache-1")[0])==undefined)
				smallImageArray.push("");
			else				
				smallImageArray.push(GetInnerText(imageNodes[0].getElementsByTagName("imagecache-1")[0]));
			if(GetInnerText(imageNodes[0].getElementsByTagName("imagecache-2")[0])==undefined)
				mediumImageArray.push("");
			else				
				mediumImageArray.push(GetInnerText(imageNodes[0].getElementsByTagName("imagecache-2")[0]));			
			var subjectNodes = eventNodes[i].getElementsByTagName("subjects")[0].getElementsByTagName("subject");
			var subject = new Array();			
			if(parseInt(subjectNodes.length)>0)
			{				
				var j=0;
				for(j=0;j<parseInt(subjectNodes.length);j++)
				{
					var term = new Array();								
					term.push(GetInnerText(subjectNodes[j].getElementsByTagName("term")[0]));
					term.push(GetInnerText(subjectNodes[j].getElementsByTagName("term_id")[0]));
					subject[j]=term;
				}				
			}			
			subjectsArray.push(subject);	
			
			var zoneNodes = eventNodes[i].getElementsByTagName("zones")[0].getElementsByTagName("zone");
			var zone = new Array();			
			if(parseInt(zoneNodes.length)>0)
			{					
				zonesArray.push(GetInnerText(zoneNodes[0].getElementsByTagName("term")[0]));	
			}			
			else
				zonesArray.push("");				
		}			
		createInterval(startYear,endYear);		
	}	
}
function createInterval(startYear,endYear)
{
	var index=0;
	var i=parseInt(startYear);	
	var matchFlag=false;
	var nextInterval = (parseInt(startYear)+10);
	var currentInterval =parseInt(startYear);
	for(i=parseInt(startYear);i<=(parseInt(endYear)+10);i++)
	{		
		if(i==nextInterval)
		{
			if(matchFlag)
			{				
				intervalYearArray[index] = currentInterval; 
				index++;				
			}
			currentInterval = nextInterval;
			nextInterval = nextInterval+10;
			matchFlag = false;
		}		
		if(findElement(yearArray,i)!=-1)
			matchFlag = true;
	}	
	loadGridData();			
	createTimeline();		
	createGridView();			
}
function createTimeline()
{
	var tableName1 = document.getElementById("yearIntervalTbl");
		
	var newRow = tableName1.insertRow(tableName1.rows.length);
	var timelineTbl1 = document.getElementById("timelineTbl");
	if(navigator.appName!="Microsoft Internet Explorer")
	{				
		timelineRow = timelineTbl1.insertRow(timelineTbl1.rows.length);
	}
	else
	{
		timelineRow = timelineTbl1.insertRow(timelineTbl1.rows.length);
	}
	
	var j=0;							
	for(j=0;j<intervalYearArray.length;j++)
	{
		var cell = newRow.insertCell(j);
		cell.innerHTML = "<div class='years'>"
						+"<div class='yearsub'><span>"+intervalYearArray[j]+"</span></div></div>";

		var timeLineStartYear = parseInt(intervalYearArray[j]);				
		var timelineCell = timelineRow.insertCell(j);				
		if(j!=(intervalYearArray.length-1))
		{
			timelineCell.innerHTML = '<div class="timelinesub">'
									+'<div class="brownten" id="'+timeLineStartYear+'">&nbsp;</div>'
									+'<div class="brownnine" id="'+(timeLineStartYear+1)+'">&nbsp;</div>'
									+'<div class="brownnine" id="'+(timeLineStartYear+2)+'">&nbsp;</div>'
									+'<div class="brownnine" id="'+(timeLineStartYear+3)+'">&nbsp;</div>'
									+'<div class="brownnine"id="'+(timeLineStartYear+4)+'">&nbsp;</div>'
									+'<div class="brownnine"id="'+(timeLineStartYear+5)+'">&nbsp;</div>'
									+'<div class="brownnine"id="'+(timeLineStartYear+6)+'">&nbsp;</div>'
									+'<div class="brownnine"id="'+(timeLineStartYear+7)+'">&nbsp;</div>'
									+'<div class="brownnine"id="'+(timeLineStartYear+8)+'">&nbsp;</div>'
									+'<div class="brownnine"id="'+(timeLineStartYear+9)+'">&nbsp;</div>'
									+'</div>';
		}
		else
		{
			timelineCell.innerHTML = '<div class="timelinesubend" >'
									+'<div class="brownten" id="'+timeLineStartYear+'">&nbsp;</div>'
									+'<div class="brownnine" id="'+(timeLineStartYear+1)+'">&nbsp;</div>'
									+'<div class="brownnine" id="'+(timeLineStartYear+2)+'">&nbsp;</div>'
									+'<div class="brownnine" id="'+(timeLineStartYear+3)+'">&nbsp;</div>'
									+'<div class="brownnine"id="'+(timeLineStartYear+4)+'">&nbsp;</div>'
									+'<div class="brownnine"id="'+(timeLineStartYear+5)+'">&nbsp;</div>'
									+'<div class="brownnine"id="'+(timeLineStartYear+6)+'">&nbsp;</div>'
									+'<div class="brownnine"id="'+(timeLineStartYear+7)+'">&nbsp;</div>'
									+'<div class="brownnine"id="'+(timeLineStartYear+8)+'">&nbsp;</div>'
									+'<div class="brownnine"id="'+(timeLineStartYear+9)+'">&nbsp;</div>'
									+'</div>';
		}
						
	}
	var cell = newRow.insertCell(j);
	cell.innerHTML = "<div class='years'>"
						+"<div class='yearsub'><span>"+(parseInt(intervalYearArray[j-1])+10)+"</span></div></div>";	
	
}
function loadGridData()
{
	var i=0;							
	for(i=0;i<intervalYearArray.length;i++)
	{
		var str="";
		var popupStr="";
		var year =intervalYearArray[i];
		var counter =0;
		var registerLinks = new Array();
		for(j=year;j<(year+10);j++)
		{
			var resultArray=findElements(yearArray,monthArray,dayArray,j);
			if(resultArray!=-1)
			{
				for(k=0;k<resultArray.length;k++)
				{
					result=resultArray[k];
					var popupId="popup_box_"+j+"_"+k;
					var linkId="popup_box_link_"+j+"_"+k;
					var mapId="map_"+j+"_"+k;
					var imageId=mapId+"_image";

					registerLinks[counter]="#"+linkId;
					str=str+'<a href="#'+popupId+'" id="'+linkId+'" style="text-decoration:none">';		
					var zoneImg = zonesArray[result];
					var mapData='<div id="'+mapId+'"><div class="popupcontent"><div style="width:316px">';
					
					if(zoneImg!="")
					{
						mapData = mapData+'<div style="opacity:1;"><img src="./images/'+zoneImg+'.jpg" id="'+imageId+'"></img></div>';
					}													
					mapData=mapData+'<div><a href="javascript:viewPopup();">Back to Details</a>&nbsp;&nbsp;</div></div></div></div>';
					teaser=teaserArray[result];
					if(teaser!="")
					{
						teaser =teaser.replace("<p>","<div>");
						teaser =teaser.replace("</p>","</div>");
					}
					
					if(smallImageArray[result]=="")
					{						
						var randomNum = getRandomNumber(5);	
						if(randomNum<0 || randomNum>4)
							randomNum=0;						
						str=str+'<div onClick="statusIndicator(\''+j+'\')" class="innerBox" style="background-color:'+boxBackGroundColor[randomNum]+'; color:'+boxFontColor[randomNum]+'"><h5><span>'+j+'</span></h5></div>';	
					}
					else
					{						
						if(navigator.userAgent.indexOf("MSIE 6.0")!=-1)
						{
							str=str+'<div onClick="statusIndicator(\''+j+'\')" class="innerBox" style="margin-bottom:3px;"><img src="'+siteUrl+smallImageArray[result]+'" border="0" height="77px" width="77px" style="width:77px;height:77px;margin-bottom:0px; line-height:0px; " ></img></div>';
						}
						else
						{
							str=str+'<div onClick="statusIndicator(\''+j+'\')" class="innerBox"><img src="'+siteUrl+smallImageArray[result]+'" border="0" height="77px" width="77px" style="width:77px;height:77px;margin-bottom:0px; line-height:0px; " ></img></div>';
						}
					}
					str=str+'</a>';
					popupStr=popupStr+'<div id="'+popupId+'" class="popupmain">';
					popupStr=popupStr+'<table width="100%" width="100%" border="0" cellpadding="0" cellspacing="0" class="zoomPopupContent" style="background-color:#F3F4CD"><tr width="100%" style="background-color:#F3F4CD">';
					if(mediumImageArray[result]!="")
					{
						popupStr=popupStr+'<td valign="top" style="background-color:#F3F4CD"><div class="popupimg" ><img src="'+siteUrl+mediumImageArray[result]+'" height="102px" width="102px"></img></div></td>'
						popupStr=popupStr+'<td style="background-color:#F3F4CD" style="width:202px"><div class="popupcontentimg">'
					}
					else
					{
						popupStr=popupStr+'<td style="background-color:#F3F4CD"><div class="popupcontent">'
					}
					if(monthArray[result]!=100 && dayArray[result]!=100)
					{
						var month =parseInt(monthArray[result]);
						if(month<10)
							month = "0"+month;
						var day =parseInt(dayArray[result]);
						if(day<10)
							day = "0"+day;
						popupStr=popupStr+'<div class="popyear">'+month+'-'+day+'-'+j+'</div>';
					}
					else
					{
						popupStr=popupStr+'<div class="popyear">'+j+'</div>';
					}						
					popupStr=popupStr+'<div class="poptitle">'+titleArray[result]+'</div>'
					+'<div>'+teaser+' <a href="'+siteUrl+pathArray[result]+'" target="_self">read more...</a></div><br/>';
					if(mediumImageArray[result]!="")
					{
						popupStr=popupStr+'<div class="poptagimg">tags:&nbsp;';
					}
					else
					{
						popupStr=popupStr+'<div class="poptag">tags:&nbsp;';
					}
					
					var tags =subjectsArray[result];					
					var tagIndex=0;
					for(tagIndex=0;tagIndex<tags.length;tagIndex++)
					{
						var tag = tags[tagIndex];
						if(tagIndex==0)
							popupStr = popupStr+'<a href="'+tagUrl+tag[1]+'" target="_self">'+tag[0]+'</a>';
						else
							popupStr = popupStr+'&nbsp; | &nbsp;<a href="'+tagUrl+tag[1]+'" target="_self">'+tag[0]+'</a>';
					}
					popupStr=popupStr+'</div><br/>';
					if(zoneImg!="")
					{
						if(zoneImg=="Zone 1")
							popupStr=popupStr+'<div>'+zoneInfoArray[0]+'</div>';
						else if(zoneImg=="Zone 2")
							popupStr=popupStr+'<div>'+zoneInfoArray[1]+'</div>';
						else if(zoneImg=="Zone 3")
							popupStr=popupStr+'<div>'+zoneInfoArray[2]+'</div>';
						else if(zoneImg=="Zone 4")
							popupStr=popupStr+'<div>'+zoneInfoArray[3]+'</div>';
						else if(zoneImg=="Zone 5")
							popupStr=popupStr+'<div>'+zoneInfoArray[4]+'</div>';
						else if(zoneImg=="Zone 6")
							popupStr=popupStr+'<div>'+zoneInfoArray[5]+'</div>';
						else if(zoneImg=="Zone 7")
							popupStr=popupStr+'<div>'+zoneInfoArray[6]+'</div>';
						else if(zoneImg=="Zone 8")
							popupStr=popupStr+'<div>'+zoneInfoArray[7]+'</div>';						
					}
					popupStr=popupStr+'</div></td></tr></table></div>';	
					popupStr=popupStr+mapData;
					counter++;
				}					
			}	
		}
		gridDataArray[i]=str;
		popupArray[i]=popupStr;
		intervalEventCountArray[i]=counter;
		linksArray[i]=registerLinks;
	}	
}
function createGridView()
{
	end=parseInt(intervalYearArray.length);
	start=0;
	var i=1;		
	var colData="";
	var gridViewTblId = document.getElementById("gridViewTbl");
	var gridPopupTblId= document.getElementById("gridPopupTbl");
	var newRow = gridViewTblId.insertRow(gridViewTblId.rows.length);
	var popupRow =gridPopupTblId.insertRow(gridPopupTblId.rows.length);
	newRow.setAttribute("vAlign","top");
	for(;start<end;start++)
	{
		var cell = newRow.insertCell(start);
		cell.setAttribute("vAlign","top");
		cell.innerHTML='<div class="box" >'
					+'<div>'+gridDataArray[start]
					+'</div>'
					+'</div>';
		var popupCell = popupRow.insertCell(start);
		popupCell.innerHTML=popupArray[start];		
		var registerLinks = linksArray[start];
		var regIndex=0;
		for(regIndex=0;regIndex<registerLinks.length;regIndex++)
		{
			var linksName=registerLinks[regIndex];			
			$(linksName).fancyZoom({width:300, height:100, directory:'/files/timeline-js/images/' });
		}
		
		i++;
	} 	
	intervalInit=parseInt(intervalYearArray.length)-8;	
	document.getElementById("wait").style.display = "none";
	document.getElementById("mainDiv").style.display = "block";
	init_dw_Scroll();	
}
function setBoxBackGround()
{
	var randNo =  getRandomNumber(maxBoxColor);
	document.getElementById("divId").style.backgroundColor=boxBackGroundColor[randNo];
	document.getElementById("divId").style.color=boxFontColor[randNo];
}
function findElement(arrayObj,value)
{
	var i=0;
	for(i=0;i<arrayObj.length;i++)
	{
		if(arrayObj[i]==value)
		{
			return i;
		}
	}
	return -1;
}
function findElements(arrayObj,monthObj,dayObj,value)
{
	var i=0;
	var indexArray = new Array();
	var returnArray = new Array();
	var j=0;
	var flag=false;
	for(i=0;i<arrayObj.length;i++)
	{
		if(arrayObj[i]==value)
		{
			indexArray[j]=i;
			j++;
			flag=true;
		}
	}
	if(flag)
	{
		for(i=0;i<(indexArray.length-1);i++)
		{
			if(parseInt(monthObj[indexArray[i]])!=100)
			{
				for(j=i+1;j<indexArray.length;j++)
				{
					if(parseInt(monthObj[indexArray[j]])!=100)
					{
						if(parseInt(monthObj[indexArray[i]])==parseInt(monthObj[indexArray[j]]))
						{
							if(parseInt(dayObj[indexArray[i]])>parseInt(dayObj[indexArray[j]]))
							{
								temp=indexArray[i];
								indexArray[i]=indexArray[j];
								indexArray[j]=temp;
							}
						}
						else if(parseInt(monthObj[indexArray[i]])>parseInt(monthObj[indexArray[j]]))
						{
							temp=indexArray[i];
							indexArray[i]=indexArray[j];
							indexArray[j]=temp;
						}				
					}
				}
			}
		}
		return indexArray;
	}
	else	
		return -1;
}