var tl;
var map;
var resizeTimerID = null;
var marker = [];
var mImage;
var infowin;
var infow = [];

function close_about_box() {
     document.getElementById("about_box").style.display = "none";
}

function show_about_box() {
     document.getElementById("about_box").style.display = "block";
}

function show_info_box(a, b) {
     if (b) {
         if (infowin) infowin.close();
         infowin = infow[a];
         infowin.open(map, marker[a]);
     }
     else {
         google.maps.event.addListener(marker[a], "click", function() {
                              if (infowin) infowin.close();
                              infowin = infow[a];        
                              infowin.open(map, this); 
         });
     } 
}

function loadMap() {
    var latlng = new google.maps.LatLng(45, 0);
    var mapOpts = {
         zoom: 3,
         center: latlng,
         mapTypeControl: true,
         mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
         mapTypeId: google.maps.MapTypeId.TERRAIN
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOpts);

     var iconImageUrl = "001_15.png";
     var iconSize = new google.maps.Size(24,  24);
     var iconPosition = new google.maps.Point(0, 0);
     var iconHotSpotOffset = new google.maps.Point(12, 12);
     mImage = new google.maps.MarkerImage(iconImageUrl, iconSize,
                            iconPosition, iconHotSpotOffset);
}

function loadTimeL() {

            Timeline.OriginalEventPainter.prototype._showBubble = function(x, y, evt) {
                     show_info_box(evt.getID(), true);
            }
            var eventSource = new Timeline.DefaultEventSource(0);
            
            var theme = Timeline.ClassicTheme.create();
            var d = "1994";
            
            var bandInfos = [
                Timeline.createBandInfo({
                    width:          "80%", 
                    intervalUnit:   Timeline.DateTime.YEAR, 
                    intervalPixels:  100,
                    eventSource:    eventSource,
                    date:           d,
                    theme:          theme
                }),
                Timeline.createBandInfo({
                    width:          "20%", 
                    intervalUnit:   Timeline.DateTime.DECADE, 
                    intervalPixels: 80,
                    eventSource:    eventSource,
                    date:           d,
                    theme:          theme,
                    layout:         'overview'
                })
            ];
            bandInfos[1].syncWith = 0;
            bandInfos[1].highlight = true;
            
            tl = Timeline.create(document.getElementById("tl"), bandInfos, Timeline.HORIZONTAL);
            tl.loadJSON("data.txt", function(json, url) { 
                                eventSource.loadJSON(json, url); 
                                loadMarks(json);
            });         
}

function loadMarks(d) {

     for (var i = 0; i < d.events.length; i++) {
           marker[i] = new google.maps.Marker({
                                             position: new google.maps.LatLng(d.events[i].lat, d.events[i].lng),
                                             icon: mImage,
                                             map: map,
                                             title: d.events[i].title
           });
                   
           infow[i] = new google.maps.InfoWindow({content: "<b>" + d.events[i].title + "</b><br><i>" + d.events[i].person + "</i><br><br><pre><code>" + d.events[i].description + "</code></pre>", size: new google.maps.Size(50,50)});  
           show_info_box(i);   
     }
}
              
function onResize() {
     if (resizeTimerID == null) {
         resizeTimerID = window.setTimeout(function() {
         resizeTimerID = null;
         tl.layout();
         }, 500);
     }
}

function init() {
    loadTimeL();
    loadMap();
}