import timemap 2.0.1, add colorbox support, use google loader api to load gmaps later

application/default/views/scripts/heihe/timemap.phtml

@@ -9,21 +9,49 @@ $this->breadcrumb('<a href="/data">'.$this->config->title->data.'</a>');
 $this->breadcrumb('<a href="/heihe/">'.$this->config->title->heihe.'</a>');
 $this->breadcrumb('时空联合导航');
 $this->breadcrumb()->setSeparator(' > ');
-$this->headScript()->appendFile('http://maps.google.cn/maps?file=api&v=2&key='.$this->config->google->maps->api);
+//$this->headScript()->appendFile('http://maps.google.cN/maps?file=api&v=2&key='.$this->config->google->maps->api);
 $this->headScript()->appendFile('/js/timeline_var.js');
 $this->headScript()->appendFile('/js/timeline_js/timeline-api.js');
-$this->headScript()->appendFile('/js/timemap/timemap.js');
+$this->headScript()->appendFile('/js/jquery-1.7.min.js');
-$this->headScript()->captureStart(); 
+$this->headScript()->appendFile('/js/timemap.2.0.1/lib/mxn/mxn.js?(google)');
+$this->headScript()->appendFile('/js/timemap.2.0.1/timemap.pack.js');
+$this->headScript()->appendFile('/js/jquery.colorbox-min.js');
+$this->headLink()->appendStylesheet('/css/colorbox.css');
 ?>
+<div id='sidebar'>
+<div id='leftnavi'>
+<?= $this->partial('heihe/navi.phtml'); ?>
+</div>
+</div>
+<div id='right'>     
+    <div id="timemap">
+         <div id="watermap" style="height:500px;width:40%;float:right;"></div>
+          <div id="timeline" style="height:500px;border-right:1px solid #abc;"></div> 
+
+</div>
+</div>
+<script type="text/javascript" charset="utf-8">
 var tm;
-window.onload=function() {
+$(window).bind("load", function() {  var timeout = setTimeout(function() { initLoader();	}, 100);});  
-	tm = TimeMap.init({
+//$(window).bind("load", function() {  var timeout = setTimeout(function() { gmaploaded();	}, 1000);});
+function loadMaps() {
+  google.load("maps", "2", {"callback" : tmloaded,"base_domain": "ditu.google.cn"});
+}
+
+function initLoader() {
+  var script = document.createElement("script");
+  script.src = "https://www.google.com/jsapi?key=<?php echo $this->config->google->maps->api; ?>&callback=loadMaps";
+  script.type = "text/javascript";
+  document.getElementsByTagName("head")[0].appendChild(script);
+}
+function tmloaded() {
+		tm = TimeMap.init({
 		mapId: "watermap",               // Id of map div element (required)
 		timelineId: "timeline",     // Id of timeline div element (required)
-		scrollTo: "2008-06-01",
+		scrollTo: "2000-01-01",
 		options: {
             eventIconPath: "../images/",
-            mapType:G_SATELLITE_MAP,
+            mapType:G_HYBRID_MAP,
             mapCenter: new GLatLng(39,100)
         },
 		datasets: [
@@ -44,10 +72,10 @@ window.onload=function() {
                               "lat" : <?php echo ($row['south']+$row['north'])/2; ?>,
                               "lon" : <?php echo ($row['west']+$row['east'])/2; ?>
                            },
-                          "title" : "<?php echo htmlspecialchars(mb_substr($row['title'],11,mb_strlen($row['title'],'UTF-8')-10,'UTF-8')); ?>",
+                          "title" : "<?php echo htmlspecialchars($row['title']); ?>",
                           "options" : {
                             // set the full HTML for the info window
-                            "infoHtml": "<div class='info'><a href=/heihe/view/uuid/<?php echo $row['uuid']; ?>><?php echo htmlspecialchars($row['title']); ?></a><hr /><img src=/service/thumb/id/<?php echo $row['id']; ?> /></div>",
+                            "infoHtml": "<div class='info'><a href=/heihe/view/uuid/<?php echo $row['uuid']; ?>><?php echo htmlspecialchars($row['title']); ?></a><hr /><img src=/service/thumb/id/<?php echo $row['id']; ?> onclick='$.colorbox({photo:\"true\",href:\"/service/bigthumb/id/<?php echo $row['id']; ?>\"});' /></div>",
                             "theme":"orange"
                         }
                         },
@@ -57,25 +85,12 @@ window.onload=function() {
             }
         ],
         bandIntervals: [
-            Timeline.DateTime.DAY, 
+            Timeline.DateTime.MONTH, 
-            Timeline.DateTime.MONTH
+            Timeline.DateTime.YEAR
         ]
     });
     // manipulate the timemap further here if you like
     var map=tm.map;
     map.setCenter(new GLatLng(39,100),7);
 }
-window.onunload=GUnload();
+</script>
-<?php $this->headScript()->captureEnd(); ?>
-<div id='sidebar'>
-<div id='leftnavi'>
-<?= $this->partial('heihe/navi.phtml'); ?>
-</div>
-</div>
-<div id='right'>     
-    <div id="timemap">
-         <div id="watermap" style="height:500px;width:40%;float:right;"></div>
-          <div id="timeline" style="height:500px;border-right:1px solid #abc;"></div> 
-
-</div>
-</div>