var map = null;
var tl = null;
var eventSource = null;
var resizeTimerID = null;
var events = [];
var israel_layer; var israel_layer_viz;
var palestine_layer; var palestine_layer_viz;
var aquifers_layer; var aquifers_layer_viz;    
var battles_layer; var battles_layer_viz;    

function showEvent(date, location) {
  tl.getBand(0).scrollToCenter(new Date(Date.parse(date)));
  map.setCenterAndZoom(new LatLonPoint(location[0], location[1]), 9);
  return false;
}
function hideControls() {
  map.getMap().hideControls();
  //'mouseover' listener shows controls
  GEvent.addListener(map.getMap(), "mouseover", function() {
    map.getMap().showControls();
  });

  //'mouseout' listener hides controls

  GEvent.addListener(map.getMap(), "mouseout", function(){
    map.getMap().hideControls(); 
  });
}
function initMap(init_map) {
    if( !init_map )
      return;
      
    // initialise Google Maps
    map = new Mapstraction("map", "google");
    map.setCenterAndZoom(new LatLonPoint(31.5, 35.5), 7);
    hideControls();
    map.addControls({
      pan: true, 
      zoom: 'small',
      map_type: true 
    });
    map.setMapType(Mapstraction.HYBRID);
    // initialise Simile Timeline with two bands
    eventSource = new Timeline.DefaultEventSource();
    var bandInfos = [
		     Timeline.createBandInfo({
              eventSource:    eventSource,
              width:          "80%", 
              intervalUnit:   Timeline.DateTime.YEAR, 
              intervalPixels: 100
                                  }),
         Timeline.createBandInfo({
              showEventText:  false,
              eventSource:    eventSource,
              width:          "20%", 
              intervalUnit:   Timeline.DateTime.DECADE, 
              intervalPixels: 100,
              trackHeight:    0.75,
              trackGap:       0.2
                                  })
    ];
    // synchronise bands
    bandInfos[1].syncWith = 0;
    bandInfos[1].highlight = true;
    tl = Timeline.create(document.getElementById("timeline"), bandInfos);
    // hijack popup window callback to show earthquake
    Timeline.DurationEventPainter.prototype._showBubble = function(x, y, evt) {
         GEvent.trigger(evt.marker.proprietary_marker, 'click');
         map.setCenterAndZoom(evt.marker.getPoint(), 9);
         
    }
    // add callback for window resize
    // here instead of the html file, to conform with XHTML 1.0
    //window.onresize = onResize;

    israel_layer = map.addOverlay("http://mapsomething.com/demo/waterusage/kml/IsraelNationalWaterCarrier.kmz");
    israel_layer_viz = true;
    palestine_layer = map.addOverlay("http://mapsomething.com/demo/waterusage/kml/PalestineWaterCarrier.kmz");
    palestine_layer_viz = true;    
    aquifers_layer = map.addOverlay("http://mapsomething.com/demo/waterusage/kml/Aquifers.kmz");    
    aquifers_layer_viz = true;

//		addBattleLayer();
		
    // load the data, repeat in regular intervals
    loadFeed();
    // setInterval("loadFeed()", 300000); /* 5 minutes */
}
function addBattleLayer() {
    battles_layer = map.addOverlay("http://mapsomething.com/demo/waterusage/kml/cease_fire_events.kml");
    battles_layer_viz = true;
}
function toggleLayer(layer, layer_viz) {
  if (layer_viz) {
    map.getMap().removeOverlay(layer);
    layer_viz = false;
  } else {
    map.getMap().addOverlay(layer);
    layer_viz = true;
  }
  return layer_viz;
}
function loadFeed() {
    // clean map and timeline and reload everything
    // map.clearOverlays();
    events = [];
    eventSource.clear();
    // GDownloadUrl('palestine.rss', showFeed);
    // GDownloadUrl('kml/development_schemes.kml', showKML);
    GDownloadUrl('kml/israel.kml', showKML);

    // map.addOverlay("http://maps.arij.org/ggl/atlas40.kmz");
    // map.addOverlay("http://www.mapufacture.com/feeds/19.kml")
}
function showKML(data, responseCode) {
    // digest KML document and add events to map and timeline
    if (responseCode == 200) {
        var xml = GXml.parse(data);
        // get the date of the feed and the current date ...
        // var feeddate = new Date(Date.parse(xml.documentElement.getElementsByTagName('')[0].firstChild.data));
        // var now = new Date();
        // var feedhtml = 'data: '+feeddate.toLocaleString()
        //     +'<br/>map: '+now.toLocaleString();
        // .. and display it in the header
        // document.getElementById('data').innerHTML = feedhtml;
        // iterate over all events in the RSS feed
        var items = xml.documentElement.getElementsByTagName('Placemark');

        for (var i = 0; i < items.length; i++) {
            var end = null;
            var start = null;
            var timestamp; var begin; var finish;
            var title = items[i].getElementsByTagName('name')[0].firstChild.data;
            if((timestamp = items[i].getElementsByTagName('when')).length != 0) {              
              var pubdate = timestamp[0].firstChild.data;
              pubdate = pubdate.split("-");
              start = new Date();
              start.setYear(pubdate[0]);
              start.setMonth(pubdate[1]);
              start.setDate(pubdate[2]);              
            } else if ((begin = items[i].getElementsByTagName('begin')).length != 0) {
              begin = begin[0].firstChild.data.split("-");
              start = new Date();
              start.setYear(begin[0]);
              start.setMonth(begin[1]);
              start.setDate(begin[2]); 
              
              finish = items[i].getElementsByTagName('end')[0].firstChild.data.split("-");;
              end = new Date();
              end.setYear(finish[0]);
              end.setMonth(finish[1]);
              end.setDate(finish[2]);              
            }
            var address = items[i].getElementsByTagName('address')[0].firstChild.data;
            var desc = items[i].getElementsByTagName('description')[0].firstChild.data;
            var link = "";
            if((atom_link = items[i].getElementsByTagName('atom:link')).length != 0) {
              // link = atom_link[0].getAttribute('href');
            }
            var major_event = false;
            var open;
            if((open = items[i].getElementsByTagName('open')).length != 0) {
              open = open[0].firstChild.data;
              if(open == 1 )
                major_event = true;
            }
            var actors;
            if((actors = items[i].getElementsByTagName('Snippet')).length != 0) {
              actors = actors[0].firstChild.data.split(",");
            }
            var point = new LatLonPoint(0,0);
            if((coordinates = items[i].getElementsByTagName('coordinates')).length != 0) {
              var georss_point = coordinates[0].firstChild.data.split(", ");
              var lat = georss_point[1];
              var lon = georss_point[0];
              point = new LatLonPoint(parseFloat(lat), parseFloat(lon));
            }
            var icon = items[i].getElementsByTagName('styleUrl')[0].firstChild.data.split("#")[1];
            var marker = createMarker(point,title,desc,address, link,icon,start,end, major_event, actors);
            createEventTimeline(marker, point,title,desc,address, link,icon,start,end, major_event, actors);

        }
        // add all events to the timeline
        eventSource.addMany(events);

        tl.getBand(0).setCenterVisibleDate(new Date(Date.parse("January 1, 1960")));
    } else {
        alert("Unable to load data feed: "+responseCode);
    }
}

function createEventTimeline(marker, point, title, desc, address, link, category, date, end, major_event, actors) {
  // Build Sidebar of events
  if(major_event) {
    year = date.getFullYear();
    event_link = "<a id=\"event_" + year + "\" href=\"#\">" + title + "</a>";
    $("#events_" + year + " .event_title").html(event_link);
    for (var a  in actors) {
      if(actors[a] == "Israel" || actors[a] == "Palestine" || actors[a] == "Jordan" || actors[a] == "UnitedStates" || actors[a] == "Others")
        $("#events_" + year + " .actor_1").append("<span class=\""+actors[a]+"\">&nbsp;&nbsp;&nbsp;&nbsp;</span>");
    }
    $("#event_" + year).bind("click", function(evt) {
      GEvent.trigger(marker.proprietary_marker, 'click');
      map.setCenterAndZoom(marker.getPoint(), 9);
      return false;
    });
  }
  
}

function createMarker(point, title, desc, address, link, category, date, end, major_event, actors) {
    // parse magnitude and coordinates from the title
    var pat = /M (\d+\.\d)+,/;
    // var mag = parseFloat(pat.exec(title)[1]);
    var mag = 5;
    // create icon, size proportional to magnitude
    var marker = new Marker(point);
    // map.addEventListener('click', function() {console.log("clicked")})
    // clicking the icon opens a window with a link to the USGS site

    // create a color coded marker on the timeline
    var color = 'green';
    var icon = "images/icons/bullet_"
    if (actors[0] == "Israel") { color = 'blue'; }
    if (actors[0] == "Jordan") { color = 'green'; }
    if (actors[0] == "Palestine") { color = 'blue'; }
    if (actors[0] == "UnitedStates") { color = 'red'; }
    if (actors[0] == "Others") { color = 'black'; }
    icon = icon + color + ".png";
    var evt = new Timeline.DefaultEventSource.Event(date,end,null,null,
                                                    false,title,null,
                                                    null,null,
                                                    icon,color,null);
    // thanks to David Huynh for pointing this out
    evt.marker = marker;
    events.push(evt);
    info = "<div class='vevent'><h4 class='summary'>" + title + "</h4>";
    info = info + "<p class='description'>" + desc + "</p>";
    info = info + "<span class='dtstart'>" + date.getFullYear() + "</span>";
    info = info + "<span class='location'>" + address + "</span>";
    info = info + "<a href=\""+ link + "\" class='url'>more information</a>";
    info = info + "</div>";

    // alert(title + " - Category: " + category + " ["+ point + "] @ " + date);
    
    // console.log(title + " - Category: " + category + "["+ point + "] @ " + date);

    map.addMarkerWithData(marker, {icon: 'images/markers/'+ category + '_16px.gif', iconSize: [16,16], iconShadow :"images/markers/blank.png", iconShadowSize: [0,0] , category: category, label: title, infoDiv: [info, "itemContent"], date : date});
    
    GEvent.addListener(marker.proprietary_marker, "click", function() {
        // marker.openInfoWindow('<div class="title">'+title+
        //                       '</div><div><a href="'+link+'>'+
        //                       desc+'</a></div>');
                              tl.getBand(0).scrollToCenter(date);
    });    
    return marker;
}

// this is directly from the Timeline tutorial
function onResize() {
    if (resizeTimerID == null) {
        resizeTimerID = window.setTimeout(function() {
            resizeTimerID = null;
            tl.layout();
        }, 500);
    }
}