var tl;

function onLoadTimeline() {
    // The following code allows IE 6 to display PNG's with transparency

    if (Timeline.Platform.browser.isIE && Timeline.Platform.browser.majorVersion < 7) {
	for (var i = 0; i < document.images.length; i++) {
	    var img = document.images[i];
	    var imgName = img.src;
	    if (imgName.substring(imgName.length-3, imgName.length).toLowerCase() == "png" &&
		!(/creativecommons.org/.test(imgName))) {

		var imgID = (img.id) ? "id='" + img.id + "' " : "";
		var imgClass = (img.className) ? "class='" + img.className + "' " : "";
		var imgTitle = (img.title) ? "title=\"" + img.title + "\" " : "";
		var imgAlt = (img.alt) ? "alt=\"" + img.alt + "\" " : "";
		var imgStyle = "display:inline-block;" + img.style.cssText ;
		if (img.align == "left") imgStyle = "float:left;" + imgStyle;
		if (img.align == "right") imgStyle = "float:right;" + imgStyle;
		if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle;
		var strNewHTML = "<span " + imgID + imgClass + imgTitle +
		    " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle +
		    "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader" +
		    "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>";
		img.outerHTML = strNewHTML;
		i = i-1;
	    }
	}
    }

    // The following code creates the Timeline. To understand it,
    // refer to the documentation and examples at http://simile.mit.edu/timeline/

    var pcTheme = Timeline.PatComTheme.create(Timeline.Platform.getDefaultLocale());

    var eventSource1 = new Timeline.DefaultEventSource();

    var timelineArea = document.getElementById("timelineArea");
    var timelineWidth = timelineArea.offsetWidth;

    var bandInfos = [
	Timeline.createBandInfo({
            eventSource:	eventSource1,
	    date:		maxActivityDate,
	    minEventDate:	"1/1/" + minYear,
	    maxEventDate:	"12/31/" + maxYear,
	    width:		"70%",
            trackHeight:	1.8,
	    trackGap:		0,
	    intervalUnit:	Timeline.DateTime.MONTH,
	    intervalPixels:	100,
	    theme: 		pcTheme
	}),

	Timeline.createBandInfo({
            eventSource:	eventSource1,
	    date:		midpointDate,
	    minEventDate:	"1/1/" + minYear,
	    maxEventDate:	"12/31/" + maxYear,
	    width:		"29%",
	    intervalUnit:	Timeline.DateTime.YEAR,
	    intervalPixels:	Math.floor(timelineWidth / overviewYears),
	    scroll:		false,
	    showEventText:	false,
            trackHeight:	0.8,
            trackGap:		0.1,
	    theme: 		pcTheme
	})
    ];

    bandInfos[1].syncWith = 0;
    bandInfos[1].highlight = true;
    bandInfos[1].eventPainter.setLayout(bandInfos[0].eventPainter.getLayout());

    bandInfos[0].decorators = [
	new Timeline.SpanHighlightDecorator({
	    startDate:		minYear,
	    endDate:		"12/31/" + maxYear,
	    color:		"#DFD",
	    opacity:		40,
	    startLabel:		"",
	    endLabel:		"",
	    theme:		pcTheme
	})
    ];

    bandInfos[1].decorators = [
	new Timeline.SpanHighlightDecorator({
	    startDate:		minYear,
	    endDate:		"12/31/" + maxYear,
	    color:		"#CEC",
	    opacity:		40,
	    startLabel:		"",
	    endLabel:		"",
	    theme:		pcTheme
	}),
	new Timeline.PointLabelDecorator({
	    date:		midpointDate,
	    color:		"#33CC00",
	    label:		"Overview",
	    width:		200,
	    opacity:		25,
	    theme:		pcTheme
	})
    ];

    tl = Timeline.create(timelineArea, bandInfos);
    tl.loadXML(
	"timeline-data.xml", function(xml, url) { eventSource1.loadXML(xml, url); });

    var left = document.getElementById("scrollLeft");
    var right = document.getElementById("scrollRight");

    Timeline.DOM.registerEvent(left, "mousedown", scrollLeft);
    Timeline.DOM.registerEvent(left, "mouseup", scrollStop);
    Timeline.DOM.registerEvent(left, "mouseout", scrollStop);

    Timeline.DOM.registerEvent(right, "mousedown", scrollRight);
    Timeline.DOM.registerEvent(right, "mouseup", scrollStop);
    Timeline.DOM.registerEvent(right, "mouseout", scrollStop);
}

// This code is not needed since we don't resize the Timeline
// var resizeTimerID = null;
// function onResizeTimeline() {
//     if (resizeTimerID == null && typeof(t1) == "object") {
//         resizeTimerID = window.setTimeout(function() {
//             resizeTimerID = null;
//             tl.layout();
//         }, 500);
//     }
// }

// The following code allows the arrows underneath the Timeline to
// scroll the timeline

var scrollSpeed = 5;
var scrollStartSpeed = 5;
var scrollDirection = 1;
var scrollTimer = null;
var scrollEnabled = false;

originalScrollSpeed = 5;
scrollSpeed = 5;

function scrollLeft()
{
    scrollEnabled = true;
    scrollSpeed = scrollStartSpeed;
    scrollDirection = 1;
    scrollTimeline();
}

function scrollRight()
{
    scrollEnabled = true;
    scrollSpeed = scrollStartSpeed;
    scrollDirection = -1;
    scrollTimeline();
}

function scrollTimeline()
{
    if (!scrollEnabled) return;
    scrollSpeed = Math.min(50, Math.abs(scrollSpeed * 1.05));
    tl.getBand(0)._moveEther(scrollDirection * scrollSpeed);
    scrollTimer = window.setTimeout("scrollTimeline()", 100);
}

function scrollStop()
{
    if (scrollEnabled) {
	scrollEnabled = false;
	if (scrollTimer != null) {
	    window.clearTimeout(scrollTimer);
	    scrollTimer  = null;
	}
    }
}

// The PatComTheme controls some of the display properties of the
// Patent Commons Timeline (other properties are handled through
// stylesheets)

Timeline.PatComTheme = new Object();

Timeline.PatComTheme.implementations = [];

Timeline.PatComTheme.create = function(locale) {
    if (locale == null) {
        locale = Timeline.Platform.getDefaultLocale();
    }

    var f = Timeline.PatComTheme.implementations[locale];
    if (f == null) {
        f = Timeline.PatComTheme._Impl;
    }
    return new f();
};

Timeline.PatComTheme._Impl = function() {
    this.firstDayOfWeek = 0; // Sunday

    this.ether = {
        backgroundColors: [
            "#DDD",
            "#BBB",
            "#999"
        ],
        highlightColor:     "white",
        highlightOpacity:   50,
        interval: {
            line: {
                show:       true,
                color:      "#AAA",
                opacity:    25
            },
            weekend: {
                color:      "#FFFFE0",
                opacity:    30
            },
            marker: {
                hAlign:     "Bottom",
                hBottomStyler: function(elmt) {
                    elmt.className = "timeline-ether-marker-bottom";
                },
                hBottomEmphasizedStyler: function(elmt) {
                    elmt.className = "timeline-ether-marker-bottom-emphasized";
                },
                hTopStyler: function(elmt) {
                    elmt.className = "timeline-ether-marker-top";
                },
                hTopEmphasizedStyler: function(elmt) {
                    elmt.className = "timeline-ether-marker-top-emphasized";
                },

                vAlign:     "Right",
                vRightStyler: function(elmt) {
                    elmt.className = "timeline-ether-marker-right";
                },
                vRightEmphasizedStyler: function(elmt) {
                    elmt.className = "timeline-ether-marker-right-emphasized";
                },
                vLeftStyler: function(elmt) {
                    elmt.className = "timeline-ether-marker-left";
                },
                vLeftEmphasizedStyler:function(elmt) {
                    elmt.className = "timeline-ether-marker-left-emphasized";
                }
            }
        }
    };

    this.event = {
        track: {
            offset:         0.5, // em
            height:         1.5, // em
            gap:            0.5  // em
        },
        instant: {
            icon:           Timeline.urlPrefix + "images/dull-green-circle.png",
            lineColor:      "#67AA4A",
            impreciseColor: "#67AA4A",
            impreciseOpacity: 20,
            showLineForNoText: false
        },
        duration: {
            color:          "#476A1A",
            opacity:        100,
            impreciseColor: "#476A1A",
            impreciseOpacity: 20
        },
        label: {
            insideColor:    "white",
            outsideColor:   "black",
            width:          200 // px
        },
        highlightColors: [
            "#FFFF00",
            "#FFC000",
            "#FF0000",
            "#0000FF"
        ],
        bubble: {
            width:          250, // px
            height:         125, // px
            titleStyler: function(elmt) {
                elmt.className = "timeline-event-bubble-title";
            },
            bodyStyler: function(elmt) {
                elmt.className = "timeline-event-bubble-body";
            },
            imageStyler: function(elmt) {
                elmt.className = "timeline-event-bubble-image";
            },
            wikiStyler: function(elmt) {
                elmt.className = "timeline-event-bubble-wiki";
            },
            timeStyler: function(elmt) {
                elmt.className = "timeline-event-bubble-time";
            }
        }
    };
};