var tl;
function InitTimeLine() {
  var eventSource = new Timeline.DefaultEventSource();
  var theme = Timeline.ClassicTheme.create();
  theme.event.bubble.width = 320;
  theme.event.bubble.height = 220;
  //theme.ether.backgroundColors[1] = theme.ether.backgroundColors[0];
	
  var bandInfos = [
   Timeline.createHotZoneBandInfo({
        zones: [
            {   
                start:    "1000",
                end:      "1949", 
                magnify:  0.002,
                unit:     Timeline.DateTime.CENTURY
            },
            {   
                start:    "1949",
                end:      "1950", 
                magnify:  0.1,
                unit:     Timeline.DateTime.YEAR
            },
            {   
                start:    "1950",
                end:      "2006", 
                magnify:  0.1,
                unit:     Timeline.DateTime.YEAR
            }
        ],
        eventSource:    eventSource,
        date:           "1857",
        width:          "70%", 
        intervalUnit:   Timeline.DateTime.MONTH, 
        intervalPixels: 100,
        theme: theme
    }),
     Timeline.createHotZoneBandInfo({
        zones: [
            {   
                start:    "1000",
                end:      "1949", 
                magnify:  0.004,
                unit:     Timeline.DateTime.CENTURY
            },
            {   
                start:    "1949",
                end:      "1950", 
                magnify:  0.3,
                unit:     Timeline.DateTime.YEAR
            },
            {   
                start:    "1950",
                end:      "2006", 
                magnify:  0.05,
                unit:     Timeline.DateTime.DECADE
            }
        ],
        showEventText:  false,
        trackHeight:    0.5,
        trackGap:       0.2,
        eventSource:    eventSource,
        date:           "1857",                                   
        width:          "30%", 
        intervalUnit:   Timeline.DateTime.YEAR, 
        intervalPixels: 200,
        theme: theme
    })
  ];
  
  bandInfos[1].syncWith = 0;
  bandInfos[1].highlight = true;


  tl = Timeline.create(document.getElementById("my-timeline"), bandInfos, Timeline.HORIZONTAL);
  Timeline.loadXML("http://guicci.ru/timeline/events.xml", function(xml, url) { eventSource.loadXML(xml, url); });
}

var resizeTimerID = null;
function onResize() {
    if (resizeTimerID == null) {
        resizeTimerID = window.setTimeout(function() {
            resizeTimerID = null;
            tl.layout();
        }, 500);
    }
}

function showDiv(objectID) 
{
var theElementStyle = document.getElementById(objectID);
if(theElementStyle.style.display == 'block')
{
theElementStyle.style.display = 'none';
}else{
theElementStyle.style.display = 'block';
}
}