////////////////////////////////////////////////////////////////
//
// Function loadingImgDivFunction
// This function will call the function given by the
// argument funcPointer after a delayed time period
// from the argument timeout. The default timeout
// period is 10. This way the loading animated GIF
// will be display correctly in IE while either
// elements on the page change or data is loading.
//
function loadingImgDivFunction(funcPointer, timeout)
{
if (loadingImgDiv != null)
{
loadingImgDiv.style.display = "";
mainDiv.style.cursor = "wait";
}
if ((timeout == null) ||
(timeout == "") ||
(timeout == "NaN"))
{
timeout = 10;
}
setTimeout(funcPointer, timeout);
}
////////////////////////////////////////////////////////////////
//
// Function showTimeLineButtonFunc
// This function is called when the Show Timeline
// button on the screen is pressed. It calls the
// function setSharepointListToUse to set up various
// variables and data to be used when the function
// buildTimeLineDiv is eventually called after a delay
//
function showTimeLineButtonFunc()
{
setSharepointListToUse();
setTimeout("buildTimeLine()");
}
////////////////////////////////////////////////////////////////
//
// Function buildTimeLine
// This function grabs the html element div tag on the
// screen to use for displaying the timeline widget.
// Then using the data pulled from the sharepoint list,
// this function builds the timeline.
//
function buildTimeLine()
{
timelineElem = document.getElementById(headings[2] + "-" + editType[2] + "_DataDisplayElement");
if (timelineElem == null)
{
return;
}
// Clear out the element incase there was old info located there.
if (timelineElem.firstChild != null)
{
Dom.remove(timelineElem.firstChild);
}
timelineElem.innerHTML = "";
timelineElem.className = "timeline-default";
timelineElem.style.height = "100%";
timelineElem.style.width = "100%";
timelineElem.style.margin = "0px";
timelineElem.style.padding = "0px";
timelineElem.style.overflow = "";
var eventSource = new Timeline.DefaultEventSource(0);
for (i = 0; i < currentList.length; i++)
{
if (currentList[i][listIndex.Type] == "Range")
{
var spDate = currentList[i][listIndex.Start].split(" ")[0];
var startDate = new Date();
startDate.setFullYear(spDate.split("-")[0]);
startDate.setMonth(spDate.split("-")[1]);
startDate.setDate(spDate.split("-")[2]);
var spDate = currentList[i][listIndex.End].split(" ")[0];
var endDate = new Date();
endDate.setFullYear(spDate.split("-")[0]);
endDate.setMonth(spDate.split("-")[1]);
endDate.setDate(spDate.split("-")[2]);
}
else if (currentList[i][listIndex.Type] == "Instance")
{
var spDate = currentList[i][listIndex.Due].split(" ")[0];
var startDate = new Date();
startDate.setFullYear(spDate.split("-")[0]);
startDate.setMonth(spDate.split("-")[1]);
startDate.setDate(spDate.split("-")[2]);
var endDate = startDate;
}
else
{
return;
}
var evt = new Timeline.DefaultEventSource.Event({
start: startDate,
end: endDate,
instant: (currentList[i][listIndex.Type] == "Instance" ? true : false),
text: currentList[i][listIndex.Index] + " " + currentList[i][listIndex.Title],
description: (currentList[i][listIndex.Description] == "" ? "No Description set for this milestone" : currentList[i][listIndex.Description]),
icon: "ScriptsLibrary/timeline_js/images/dark-blue-circle.png",
color: "red",
textColor : "black",
caption: "Click for pop up with description"
});
eventSource.add(evt);
}
var theme = Timeline.ClassicTheme.create();
theme.event.bubble.width = 350;
theme.event.bubble.height = 400;
var d = new Date();
var bandInfos = [
Timeline.createBandInfo({
width: "85%",
intervalUnit: Timeline.DateTime.MONTH,
intervalPixels: 200,
eventSource: eventSource,
date: d,
theme: theme,
layout: 'original' // original, overview, detailed
}),
Timeline.createBandInfo({
width: "15%",
intervalUnit: Timeline.DateTime.YEAR,
intervalPixels: 200,
eventSource: eventSource,
date: d,
theme: theme,
layout: 'overview' // original, overview, detailed
})
];
bandInfos[1].syncWith = 0;
bandInfos[1].highlight = true;
newTimeline = Timeline.create(timelineElem, bandInfos, Timeline.HORIZONTAL);
document.body.onresize = function() {onResize();};
loadingImgDiv.style.display = "none";
mainDiv.style.cursor = "auto";
}
function onResize()
{
if (resizeTimerID == null)
{
resizeTimerID = window.setTimeout(function()
{
resizeTimerID = null;
if (newTimeline != null)
{
newTimeline.layout();
}
}, 500);
}
}
