Context Navigation

09-02-04

Timestamp:: Feb 4, 2009, 2:55:55 PM (15 years ago)
Author:: jazz
Comment:: --

Legend:

: Unmodified
: Added
: Removed
: Modified

oid/WorkLog/09-02-04

-                      v2
+                      v3
 = 2009-02-04 =
+ * 原本 waue 發表的[wiki:oid/WorkLog/GoogleMPL Google Map的網址模組轉換]，在官方的名稱為 [http://code.google.com/intl/zh-TW/apis/maps/documentation/mapplets/ Google Mapplets API]
+ * 原本 waue 發表的[wiki:oid/WorkLog/GoogleMPL Google Map的網址模組轉換]，在官方的名稱為 [http://code.google.com/intl/zh-TW/apis/maps/documentation/mapplets/ Google Mapplets API]。
+ * Google Mapplet API 跟 Google Map API 最主要的差別在於 Mapplet 是在官方 Google Map 上呈現，而 Google Map API 則可以用在自己的網站上。
+{{{
+The main difference is that Mapplets run on Google Maps,
+while the traditional Maps API is used to create maps on other websites.
+}}}
  * "赤壁"原始碼 - http://code.google.com/p/redcliff/source/checkout
 {{{
 …
  * 在原始碼中，element.json 是用在點選特定古城位置時，顯示關聯事件的資料來源
 [[Image(element.json.jpg)]]
+ * [http://redcliff.googlecode.com/svn/trunk/mapplet/redcliff_tc.xml 赤壁 Mapplet] 原始碼 XML 解析
+{{{
+#!js
+<?xml version="1.0" encoding="UTF-8"?>
+<Module>
+<ModulePrefs title="赤壁之戰"
+             description="赤壁之戰的歷史地圖"
+             author="Google Redcliff Team"
+             author_email="chibi.ditu@gmail.com">
+# 參考 http://code.google.com/intl/zh-TW/apis/maps/documentation/mapplets/basics.html#Loading_the_Mapplets_API
+# 必須加入 sharedmap 的 feature 才能讓 mapplet 載入定義在 Content 中的 javascript 程式
+   <Require feature="sharedmap"/>
+   <Require feature="dynamic-height" />
+   <Require feature="analytics" />
+</ModulePrefs>
+<Content type="html"><![CDATA[
+<style>@CHARSET "UTF-8";
+### 以下略過 CSS 定義 ###
+</style>
+<!-- Show this gif when loading -->
+# 初始化的時候，顯示"正在讀取..."的圖示跟字樣
+<div id="loading" style="color:#AAA;text-align:center;margin-top:40px;font-size:12px;"><img src="http://www.google.cn/staticcn/chibi/pie_32.gif"><br><br>正在讀取...</div>
+}}}
+ * 底下先定義 DOM 元件
+{{{
+# 初始之後要顯示的 DIV 元件
+<!-- Hide first when loading -->
+<div id="main" style="z-index:10;display:none;">
+   <div class="top-div">
+     <span>選擇地圖: </span>
+     <select class="dropdown-box" id="select_tiles">
+       <option value="1.0">歷史地圖</option>
+       <option value="0.5">混合地圖</option>
+       <option value="0.0">現代地圖</option>
+     </select>
+   </div>
+}}}
+ * 上面這段就是畫面上的下拉式選單
+[[Image(select_tiles.jpg)]]
+{{{
+   <div class="tab-content" id="tabContent">
+     <div class="tab-head">
+           <div class="tab-inactive"><div id="events_tab">歷史事件</div></div>
+           <div class="tab-active"><div id="characters_tab">主要人物</div></div>
+           <div class="tab-inactive"><div id="vote_tab">投票</div></div>
+     </div>
+}}}
+[[Image(tabContent-1.jpg)]]
+{{{
+     <div id="events_cnt" style="display:none;">
+       <div id="unused_bar"><!-- TODO may need to add some text in this bar --></div>
+       <div id="big_event_list" ></div>
+     </div>
+}}}
+[[Image(tabContent-2.jpg)]]
+{{{
+     <div id="characters_cnt">
+       <div id="kingdom_checkbox">
+         <label for="checkbox_wei">曹操軍</label><input id="checkbox_wei" type="checkbox" checked>
+         <label for="checkbox_wu">孫權軍</label><input id="checkbox_wu" type="checkbox" checked>
+         <label for="checkbox_shu">劉備軍</label><input id="checkbox_shu" type="checkbox" checked>
+       </div>
+       <div id="character_list"></div>
+     </div>
+}}}
+[[Image(tabContent-3.jpg)]]
+{{{
+     <div id="vote_cnt" style="display:none;">
+       <div id="unused_bar"></div>
+       <iframe frameborder=0 class="vote-ifr" src="http://redcliffvotetw.appspot.com/?locale=zh_tw"></iframe>
+     </div>
+   </div>
+}}}
+[[Image(tabContent-4.jpg)]]
+{{{
+   <div class="bottom-button-div">
+     <a href='#' id="clear_button">清除地圖上的標誌</a>
+     <span id="share_button"></span>
+   </div>
+   <div class="bottom-button-div2">
+     <a href="#" id="disclaimer_show">聲明</a>
+     <div id="disclaimer_box" style="display:none;"><div>
+          本地圖為Google Inc.製作。赤壁之戰地圖中所使用的各種數據，為參考《後漢書》、《三國志》、《資治通鑑》、《三國郡縣表》等書籍資料，以及<a target="_blank" href= "http://zh.wikipedia.org/w/index.php?title=%E9%A6%96%E9%A1%B5&variant=zh-tw/">維基百科</a>等網站，整理獲得。
+          人物肖像，事件相片等，為<a target="_blank" href="http://www.foxmovies.com.tw/">美商二十世紀福斯影片公司</a>及<a target="_blank" href="http://www.meiah.com/">美亞娛樂資訊集團有限公司</a>授權使用之電影《赤壁》劇照。
+           <br><br>
+          聯繫我們: <a href="mailto:chibi.ditu@gmail.com">chibi.ditu@gmail.com</a>
+           <br>
+           <span id="disclaimer_close">關閉</span>
+         </div></div>
+   </div>
+</div>
+}}}
+[[Image(bottom-button-div1.jpg)]]
+[[Image(bottom-button-div2.jpg)]]
+{{{
+<div style="height:2em;"></div>
+### 載入 jQuery API
+<script src="http://www.google.com/jsapi" type="text/javascript"></script>
+<script type="text/javascript">
+         google.load("jquery", "1.2.6");
+</script>
+<script type="text/javascript">window.serverBase="http://www.google.com";window.apiKey="";window.locale="zh_TW";window.js_messages={'Email':'\u96fb\u5b50\u90f5\u4ef6','Please add your email address to the From: field':'\u8acb\u5c07\u60a8\u7684\u96fb\u5b50\u90f5\u4ef6\u4f4d\u5740\u65b0\u589e\u81f3\u5bc4\u4ef6\u8005\u6b04\u4f4d','Oops! A popup blocker is preventing the bookmarklet from opening. Try holding the Shift key and clicking on the bookmarklet again.':'\u5f88\u62b1\u6b49\uff01\u5feb\u986f\u5c01\u9396\u7a0b\u5f0f\u6b63\u5728\u963b\u6b62\u958b\u555f\u66f8\u7c64\u3002\u5617\u8a66\u6309\u4f4f Shift \u9375\u4e26\u518d\u6b21\u6309\u4e0b\u66f8\u7c64\u3002','Google - Email / Share':'Google - \u5bc4\u9001\u96fb\u5b50\u90f5\u4ef6 / \u5206\u4eab','Edit this shared item':'\u7de8\u8f2f\u6b64\u5206\u4eab\u9805\u76ee','Please enter valid email addresses in the To: field':'\u8acb\u5728\u6536\u4ef6\u8005\u6b04\u4f4d\u4e2d\u8f38\u5165\u6709\u6548\u7684\u96fb\u5b50\u90f5\u4ef6\u4f4d\u5740','Are you sure you want to remove this shared item?':'\u60a8\u78ba\u5b9a\u8981\u79fb\u9664\u9019\u500b\u5206\u4eab\u7684\u9805\u76ee\uff1f','Please enter a valid email address in the From: field':'\u8acb\u5728\u5bc4\u4ef6\u8005\u6b04\u4f4d\u4e2d\u8f38\u5165\u6709\u6548\u7684\u96fb\u5b50\u90f5\u4ef6\u4f4d\u5740','Share':'\u5171\u7528','Oops! We seem to be experiencing network problems. Please check your connection and try again.':'\u5f88\u62b1\u6b49\uff01\u53ef\u80fd\u767c\u751f\u4e86\u7db2\u8def\u554f\u984c\u3002\u8acb\u6aa2\u67e5\u60a8\u7684\u9023\u7dda\u4e26\u518d\u8a66\u4e00\u6b21\u3002','%1 does not exist!':'%1 \u4e0d\u5b58\u5728\uff01','Add a comment...':'\u65b0\u589e\u610f\u898b...','Please add recipients to the To: field':'\u8acb\u5c07\u6536\u4ef6\u8005\u65b0\u589e\u81f3\u6536\u4ef6\u8005\u6b04\u4f4d'};(function() {
+var GLOBAL_document=document,$$PROP_appendChild="appendChild",$$PROP_prototype="prototype",$$PROP_createTextNode="createTextNode",$$PROP_createElement="createElement";function replaceAll(a,b,c){if(b.length==0)return a;var d=a.indexOf(b);while(d>-1){a=a.replace(b,c);d=a.indexOf(b)}return a}var messages=window.js_messages;function formatMessage(a,b){a=getMsg(a);if(b&&b.length)for(var c=0;c<b.length;c++)a=replaceAll(a,"%"+(c+1),b[c]);return a}
+function getMsg(a){if(messages&&messages[a])return messages[a];return a};var win=window,getElid;getElid=GLOBAL_document.getElementById?function(a){return GLOBAL_document.getElementById(a)}:GLOBAL_document.all?function(a){return GLOBAL_document.all[a]}:function(){return undefined};elid=function(a){return typeof a=="string"?getElid(a):a};if(!win.google)win.google={};var google=win.google;if(!google.share)google.share={};share=google.share;google.sharing=share;var serverBase=win.serverBase,key=win.apiKey,locale=win.locale;
+share.SharingWidget=function(a,b){this.m=GLOBAL_document.location.href;this.o=1;this.l=this.d=null;this.a={};this.b=this.h=0;if(b){this.a=b;if(this.a.googleinternal==true)this.h=1;if(this.a.specifiedPageViewed==true&&this.a.url){var c=new Image;c.src=serverBase+"/s2/sharing/share?pub_action=vi&url ="+encodeURIComponent(this.a.url)+"&key="+key}if(this.a.defaultTab=="email")this.b=1}this.a.isEmbedded=true;var d=elid(a);if(d==null){var e=formatMessage("%1 does not exist!",[a]);alert(e)}else this.k(d)};
+var fullBase=serverBase+"/s2/sharing/resources/",BRANDED_WIDGET_HTML='<img src="'+fullBase+'static/images/email_share_button.png"/>',UNBRANDED_WIDGET_HTML=BRANDED_WIDGET_HTML.replace(".png","_unbranded.png"),LINK_ONLY_TEXT=[getMsg("Share"),getMsg("Email")],LINK_TITLE=[getMsg("Share"),getMsg("Email")],LINK_STYLE_CLASS=["google-share-l","google-email-l"],BUTTON_STYLE_CLASS=["google-share-b","google-email-b"],SHARE_BUTTON_STYLE_SUFFIX=";width:16px;height:16px;margin:-1px 0 0 1px;//margin:-2px 3px -1px -18px;//position:absolute;background:url("+
+fullBase+"static/images/icon_share.gif) no-repeat left center;} html>body span.google-share-b-icon{background-image:url("+fullBase+"static/images/icon_share.png);margin:-1px 3px 0px -19px;position:absolute;}",EMAIL_BUTTON_STYLE="a.google-email-b{font-family:arial,sans-serif;display:-moz-inline-box;display:inline-block;position:relative;padding:1px 5px 1px 18px;margin:2px 0 0;font-size:10px;text-decoration:none;color:#03c;background:#fff url("+fullBase+"static/images/icon_email.gif) no-repeat 1px center;border:1px solid #999;} a.google-email-b:hover{border:1px solid #666;background-color:#eee;text-decoration:none;}",
+SHARE_LINK_AND_ICON_STYLE="a.google-share-l{height:16px;padding:2px 4px 0 18px;background:url("+fullBase+"static/images/icon_share.gif) no-repeat left center;} html>body a.google-share-l{background-image:url("+fullBase+"static/images/icon_share.png);}",EMAIL_LINK_AND_ICON_STYLE="a.google-email-l{height:16px;padding:2px 4px 0 18px;background:url("+fullBase+"static/images/icon_email.gif) no-repeat left center;}",LINK_AND_ICON_STYLE=[SHARE_LINK_AND_ICON_STYLE,EMAIL_LINK_AND_ICON_STYLE];
+share.SharingWidget[$$PROP_prototype].j=function(a){if(a==0){var b="";b=typeof opera=="undefined"&&navigator.userAgent.indexOf("WebKit")==-1&&navigator.product=="Gecko"?"float:none":"float:left";return"a.google-share-b{font-family:arial,sans-serif;display:-moz-inline-box;display:inline-block;position:relative;padding:1px 3px 0 0;margin:0;font-size:10px;text-decoration:none;//padding:1px 3px 0 10px;//margin:0 0 0 10px;color:#03c;background:#fff;border:1px solid #999;} html>body a.google-share-b{margin:0 0 0 7px;padding:0 3px 0 10px;} a.google-share-b:hover{border:1px solid #666;background:#eee;text-decoration:none;} span.google-share-b-icon{"+
+b+SHARE_BUTTON_STYLE_SUFFIX}else return EMAIL_BUTTON_STYLE};
+share.SharingWidget[$$PROP_prototype].i=function(){if(this.d)return true;if(share.EmailWidget){this.d=new share.EmailWidget(this.a);return true}if(!this.l){var a=GLOBAL_document[$$PROP_createElement]("link");a.rel="stylesheet";a.href=fullBase+"static/html/ShareWidgetStyle.css";GLOBAL_document.getElementsByTagName("head")[0][$$PROP_appendChild](a);var b=GLOBAL_document[$$PROP_createElement]("script");b.src=serverBase+"/s2/sharing/js?script=socialsharing&key="+key+"&hl="+locale;GLOBAL_document.body[$$PROP_appendChild](b);
+this.l=b}return false};
+share.SharingWidget[$$PROP_prototype].c=function(a){a||(a=0);if(this.a.popup){if(this.d&&this.d.isVisible()){win.focus&&this.a.altWindow.focus();return}var b=0,c=0;if(win.outerWidth){b=win.screenX+(win.outerWidth-762)/2;c=win.screenY+(win.outerHeight-402)/2}else{b=win.screenLeft+(GLOBAL_document.body.clientWidth-742)/2;c=win.screenTop+(GLOBAL_document.body.clientHeight-402)/2}this.a.altWindow=win.open("","_blank","height=390px,width=740px,toolbar=no,directories=no,left="+b+",top="+c+",status=no,menubar=no,scrollbars=no,resizable=1");
+this.a.popup=false}if(this.i())this.d.display();else if(a>20){var d=getMsg("Oops!  We seem to be experiencing network problems.\nPlease check your connection and try again.");win.alert(d)}else{var e=this,f=Math.min(1<<a,1000);win.setTimeout(function(){e.c(a+1)},f)}};
+share.SharingWidget[$$PROP_prototype].k=function(a){this.n=a;if(a!=null)if(this.a.retain_div_contents){var b=this;a.onclick=function(){b.c()}}else{var c=GLOBAL_document[$$PROP_createElement]("style"),d=GLOBAL_document[$$PROP_createElement]("a");d.title=LINK_TITLE[this.b];d.href=this.a.link_href=="void"?"javascript:void(0);":"#";var b=this;share.display_now=function(){b.c()};d.onclick=function(){share.display_now();return false};var e=this.a.linkText?this.a.linkText:LINK_ONLY_TEXT[this.b];if(this.h==
+){a.innerHTML=UNBRANDED_WIDGET_HTML;a.style.cursor="pointer";a.onclick=function(){b.c()}}else if(this.a.buttonStyle)if(this.a.buttonStyle=="link"){d[$$PROP_appendChild](GLOBAL_document[$$PROP_createTextNode](e));a[$$PROP_appendChild](d)}else if(this.a.buttonStyle=="linkAndIcon"){d[$$PROP_appendChild](GLOBAL_document[$$PROP_createTextNode](e));d.className=LINK_STYLE_CLASS[this.b];this.g(c,LINK_AND_ICON_STYLE[this.b]);this.e(a,c);a[$$PROP_appendChild](d)}else this.f(a,c,d);else this.f(a,c,d)}};
+share.SharingWidget[$$PROP_prototype].f=function(a,b,c){if(this.b==0){var d=GLOBAL_document[$$PROP_createElement]("span");d.className="google-share-b-icon";c[$$PROP_appendChild](d);c[$$PROP_appendChild](GLOBAL_document[$$PROP_createTextNode](LINK_ONLY_TEXT[0]))}else c[$$PROP_appendChild](GLOBAL_document[$$PROP_createTextNode](LINK_ONLY_TEXT[1]));c.className=BUTTON_STYLE_CLASS[this.b];this.g(b,this.j(this.b));this.e(a,b);a[$$PROP_appendChild](c)};
+share.SharingWidget[$$PROP_prototype].g=function(a,b){a.setAttribute("type","text/css");if(a.styleSheet)a.styleSheet.cssText=b;else{var c=GLOBAL_document[$$PROP_createTextNode](b);a[$$PROP_appendChild](c)}};share.SharingWidget[$$PROP_prototype].e=function(a,b){var c=GLOBAL_document.getElementsByTagName("head")[0];c?c[$$PROP_appendChild](b):a[$$PROP_appendChild](b)};share.ShareWidget=share.SharingWidget;share.SharingButton=share.SharingWidget;
+ })();
+</script>
+<script type="text/javascript">(function(){
+  function Hash(){
+    this.length = 0;
+    this.items = new Array();
+    for (var i = 0; i < arguments.length; i += 2) {
+      if (typeof(arguments[i + 1]) != 'undefined') {
+        this.items[arguments[i]] = arguments[i + 1];
+        this.length++;
+      }
+    }
+  };
+  Hash.prototype = {
+    removeItem: function(in_key) {
+      var tmp_value;
+      if (typeof(this.items[in_key]) != 'undefined') {
+        this.length--;
+        tmp_value = this.items[in_key];
+        delete this.items[in_key];
+      }
+      return tmp_value;
+    },
+    getItem: function(in_key) {
+      return this.items[in_key];
+    },
+    setItem: function(in_key, in_value) {
+      if (typeof(in_value) != 'undefined') {
+        if (typeof(this.items[in_key]) == 'undefined') {
+          this.length++;
+        }
+        this.items[in_key] = in_value;
+      }
+      return in_value;
+    },
+    hasItem: function(in_key) {
+      return typeof(this.items[in_key]) != 'undefined';
+    },
+    getLength: function(){
+      return this.length;
+    }
+  };
+  var LOCATION = new Hash();
+  var ELEMENT = new Hash();
+  var EVENT = new Hash();
+  var BIG_EVENT = new Hash();
+  var PEOPLE = new Hash();
+  var PEOPLE_ARRAY = new Array();
+  var CURRENT_EVENT_HASH = new Hash();
+  var CURRENT_ELEMENT_HASH = new Hash();
+  var CURRENT_EVENT = Array();
+  var CURRENT_ELEMENT = new Array();
+  var HIGH_LIGHT_ELEMENT = new Array();
+  var CURRENT_OVERLAY_ID = "";
+  var BASE = 'http://redcliff.googlecode.com/svn/trunk/';
+  var CN_BASE = 'http://www.google.cn/staticcn/chibi/';
+  var LAIBA_BASE = '';
+  var NULL_PIC = 'http://laiba.tianya.cn/laiba/images/274/12295005600705035805/A/1/o.png';
+  var CURRENT_BIG_EVENT = null;
+  var CURRENT_PEOPLE = null;
+  var CURRENT_TAB = null;
+  var URL = {
+    location_url: BASE + 'data_tc/location.json?bpc=12191314',
+    element_url: BASE + 'data_tc/element.json?bpc=12191328',
+    event_url: BASE + 'data_tc/event.json?bpc=12191540',
+    big_event_url: BASE + 'data_tc/big_event.json?bpc=12191303',
+    people_url: BASE +'data_tc/people.json?bpc=12191540',
+    tile_url: 'http://mt.google.cn/mt?v=cnsg1.2&hl=zh-CN&x={X}&y={Y}&z={Z}'
+  };
+  var FLAGS = {
+    '蜀': 'G',
+    '魏': 'B',
+    '吳': 'R'
+  };
+  var INFOWIN_TAB_LABELS = ['事件一', '事件二', '事件三', '事件四', '事件五', '事件六']; // add more if there are more overlap...
+  var G_MAP;
+  // Google Analytics Account
+  var UAACCT = "UA-6735343-1";
+  var C_POLYLINE_WEIGHT = 10
+  function Location(raw_location) {
+    var me = this;
+    this.location = raw_location;
+    this.name = location.name;
+    this.point = new GLatLng(raw_location.lat, raw_location.lng);
+  };
+  function Element(raw_element) {
+    var me = this;
+    this.id = raw_element.id
+    this.element = raw_element;
+    this.type = raw_element.type;
+    var getHiddenPolylineOverlay = function(points, weigth, id) {
+      var latlngs = new Array();
+      $.each(points, function(index, point){
+        latlngs.push(new GLatLng(point.lat, point.lng));
+      });
+      var polyline = new GPolygon(latlngs, "#000000", 10, 0.0);
+      GEvent.addListener(polyline, 'click', function(latlng) {
+        G_MAP.openInfoWindow("ELEMENT", id, latlng);
+      });
+      return polyline;
+    };
+    var getArrowGroundOverlay = function(arrow_url, sw, ne) {
+      var bound = new GLatLngBounds(new GLatLng(ne.lat, ne.lng), new GLatLng(sw.lat, sw.lng));
+      var arrow = new GGroundOverlay(CN_BASE + 'arrow/'  + arrow_url + '.png', bound);
+      return arrow;
+    }
+    var getMarker = function(icon_url, point, id) {
+      var image = CN_BASE + 'icon/' + icon_url + '.png';
+      var icon = new GIcon(G_DEFAULT_ICON, image);
+      if (icon_url.length == 2)
+        icon.iconSize = new GSize(45,32);
+      else
+        icon.iconSize = new GSize(25,32);
+      var marker = new GMarker(point, {icon:icon});
+      GEvent.addListener(marker, 'click', function() {
+        G_MAP.openInfoWindow("ELEMENT", id, point);
+      });
+      return marker;
+    }
+    if (this.type == 'point') {
+      this.point = new GLatLng(raw_element.lat, raw_element.lng);
+      this.marker = getMarker(raw_element.pic, this.point, this.id);
+    } else {
+      this.hidden_polyline = getHiddenPolylineOverlay(raw_element.hot_points, C_POLYLINE_WEIGHT, this.id);
+      this.arrow = getArrowGroundOverlay(raw_element.arrow, raw_element.arrow_points[0], raw_element.arrow_points[1]);
+    }
+    this.events = raw_element.event_ids;
+  };
+  Element.prototype = {
+    drawOnMap: function() {
+      if (this.type == 'line') {
+        G_MAP.addOverlay(this.hidden_polyline);
+        G_MAP.addOverlay(this.arrow);
+      } else {
+        G_MAP.addOverlay(this.marker);
+      }
+    },
+    removeFromMap: function() {
+      if (this.type == 'line') {
+        G_MAP.removeOverlay(this.hidden_polyline);
+        G_MAP.removeOverlay(this.arrow);
+      } else {
+        G_MAP.removeOverlay(this.marker);
+      }
+    }
+    /*
+    highLight: function() {
+      G_MAP.removeOverlay(this.current_overlay);
+      G_MAP.addOverlay(this.highlight_overlay);
+      this.current_overlay = this.highlight_overlay;
+    },
+    deHighLight: function() {
+      G_MAP.removeOverlay(this.current_overlay);
+      G_MAP.addOverlay(this.overlay);
+      this.current_overlay = this.overlay;
+    },
+    adjustZoomLevel: function() {
+    }
+    */
+  };
+  var encapsulateActiveEventOrPeople = function(people_id) {
+    if (CURRENT_BIG_EVENT != null) {
+      var big_event = BIG_EVENT.getItem(CURRENT_BIG_EVENT);
+      big_event.hideDetails();
+      CURRENT_BIG_EVENT = null;
+    }
+    if (CURRENT_PEOPLE != null && people_id && CURRENT_PEOPLE == people_id)
+    return;
+    if (CURRENT_PEOPLE != null) {
+      var people = PEOPLE.getItem(CURRENT_PEOPLE);
+      people.node.encapsulate();
+      CURRENT_PEOPLE = null;
+    }
+  }
+  function Event(raw_event) {
+    this.id = raw_event.id;
+    this.name = raw_event.name;
+    this.element_ids = raw_event.element_ids;
+    this.people = raw_event.people;
+    this.search = raw_event.search;
+    this.time = raw_event.time;
+    this.time_ad = raw_event.ad;
+    this.desc = raw_event.desc;
+    this.point = new GLatLng(raw_event.popup.lat, raw_event.popup.lng);
+  };
+  function BigEvent(raw_event) {
+    var me = this;
+    this.id = raw_event.id
+    this.name = raw_event.name;
+    this.element_ids = raw_event.element_ids;
+    this.event_ids = raw_event.event_ids;
+    this.time = raw_event.time;
+    this.time_ad = raw_event.ad;
+    this.desc = raw_event.desc;
+    this.pic = raw_event.pic;
+    this.is_details_shown = false;
+    this.details = null;
+    this.images = raw_event.images;
+    this.center = new GLatLng(raw_event.center.lat, raw_event.center.lng);
+    var genNode = function() {
+      var node = $('<div class="big-event-item"></div>');
+      var table = $('<table><tbody><tr></tr></tbody></table>');
+      var row = table.children().children();
+      var time_cell = $('<td class="big-event-item-time" title="' + me.time_ad + '">' + me.time + '</div>');
+      var link_cell = $('<td class="big-event-item-link"></td>');
+      row.append(time_cell);
+      row.append(link_cell);
+      row.append('<td class="big-event-item-pic"><img src="' + CN_BASE + 'icon/' + me.pic + '.gif"></td>');
+      node.append(table);
+      var event_link = $('<a href=#>' + me.name + '</a>');
+      event_link.click(function(){
+        if (me.is_details_shown) {
+          me.hideDetails();
+        } else {
+          me.showDetails();
+        }
+        G_MAP.updateOverlay('E', me.id);
+        G_MAP.setCenter(me.center, 8);
+        _IG_Analytics(UAACCT, '/click/eventLink/' + me.name);
+        return false;
+      });
+      link_cell.append(event_link);
+      me.details = $('<div class="big-event-detail" style="display:none;"></div>');
+      me.details.append($('<p>' + me.desc + '</p>'));
+      var imgs = $('<div class="big-event-imgs"></div>');
+      $.each(me.images, function(index, img_url) {
+        var img = $('<img src="' + img_url + '">');
+        imgs.append(img);
+      });
+      me.details.append(imgs);
+      var event_list = $('<table class="events-div"></table>');
+      genEventList(event_list, me.event_ids);
+      me.details.append(event_list);
+      node.append(me.details);
+      $('#big_event_list').append(node);
+      return node;
+    };
+    this.node = genNode();
+    this.is_shown = true;
+  };
+  BigEvent.prototype = {
+    showDetails: function() {
+      encapsulateActiveEventOrPeople(null);
+      this.details.show();
+      _IG_AdjustIFrameHeight();
+      this.is_details_shown = true;
+      CURRENT_BIG_EVENT = this.id;
+    },
+    hideDetails: function() {
+      this.details.hide();
+      _IG_AdjustIFrameHeight();
+      this.is_details_shown = false;
+    }
+  };
+  var genEventList = function(table, event_ids) {
+    var tbody = table.append('<tbody></tbody>').children();
+    $.each(event_ids, function(index, event_id){
+      var event = EVENT.getItem(event_id);
+      var row = $('<tr></tr>');
+      genEventItem(row, event);
+      tbody.append(row);
+    });
+  };
+  var genEventItem = function(row, event) {
+    var time_cell = $('<td class="events-item-time" title="' + event.time_ad + '">' + event.time + '</div>');
+    var link_cell = $('<td class="events-item-link"></td>');
+    var event_link = $('<a href=#>' + event.name + '</a>');
+    event_link.click(function(){
+      G_MAP.openInfoWindow("EVENT", event.id, event.point);
+      _IG_Analytics(UAACCT, '/click/eventItemLink/' + event.name);
+      return false;
+    });
+    link_cell.append(event_link);
+    row.append(time_cell);
+    row.append(link_cell);
+  };
+  function PeopleDigestNode(parent_node, desc, people_id) {
+    this.people_id = people_id;
+    var me = this;
+    var node = $('<div class="character-digest-div"></div>');
+    this.digest =  $('<div class="character-digest-div-short">' + desc.substring(0,65) + '...</div>');
+    this.detail = $('<div class="character-digest-div-long" style="display:none;">' + desc + '</div>');
+    var show_detail = $('<a href=#>[詳細]</a>');
+    var hide_detail = $('<a href=#>[隱藏]</a>');
+    this.digest.append(show_detail);
+    this.detail.append(hide_detail);
+    show_detail.click(function(){
+      me.showDetail();
+      _IG_Analytics(UAACCT, '/click/peopleShowDetailLink/' + me.people_id);
+      return false;
+    });
+    hide_detail.click(function(){
+      me.hideDetail();
+      _IG_Analytics(UAACCT, '/click/peopleHideDetailLink/' + me.people_id);
+      return false;
+    });
+    node.append(this.digest);
+    node.append(this.detail);
+    parent_node.append(node);
+  };
+  PeopleDigestNode.prototype = {
+    showDetail: function() {
+      encapsulateActiveEventOrPeople(this.people_id);
+      this.detail.slideDown('fast', _IG_AdjustIFrameHeight);
+      this.digest.fadeOut('fast');
+      CURRENT_PEOPLE = this.people_id;
+    },
+    hideDetail: function() {
+      this.detail.slideUp('fast', _IG_AdjustIFrameHeight);
+      this.digest.fadeIn('fast');
+    }
+  };
+  function PeopleEventListNode(parent_node, event_ids, people_id, center) {
+    this.people_id = people_id;
+    var me = this;
+    var node = $('<div class="events-div"></div>');
+    this.show_events = $('<a class="events-div-show" href=#>歷史事件</a>');
+    this.hide_events = $('<a class="events-div-hide" style="display:none;" href=#>隱藏歷史事件</a>');
+    this.event_list = $('<table class="events-list" style="display:none;"></table>');
+    genEventList(this.event_list, event_ids);
+    this.show_events.click(function(){
+      me.showEvents();
+      G_MAP.updateOverlay('P', people_id);
+      G_MAP.setCenter(center, 7);
+      _IG_Analytics(UAACCT, '/click/peopleShowEventsLink/' + me.people_id);
+      return false;
+    });
+    this.hide_events.click(function(){
+      me.hideEvents();
+      _IG_Analytics(UAACCT, '/click/peopleHideEventsLink/' + me.people_id);
+      return false;
+    });
+    node.append(this.show_events);
+    node.append(this.hide_events);
+    node.append(this.event_list);
+    parent_node.append(node);
+  };
+  PeopleEventListNode.prototype = {
+    showEvents: function() {
+      encapsulateActiveEventOrPeople(this.people_id);
+      this.event_list.slideDown('fast', _IG_AdjustIFrameHeight);
+      this.hide_events.show();
+      this.show_events.hide();
+      CURRENT_PEOPLE = this.people_id;
+    },
+    hideEvents: function() {
+      this.event_list.slideUp('fast', _IG_AdjustIFrameHeight);
+      this.show_events.show();
+      this.hide_events.hide();
+    }
+  };
+  function PeopleNode(parent_node, people) {
+    this.people_id = people.id;
+    var me = this;
+    this.digest = null;
+    this.event = null;
+    this.table = $('<table class="character-item"><tbody><tr></tr></tbody></table>');
+    var img_node = $('<td class="character-img-div"></td>');
+    img_node.append('<img width=60 height=75 src="' + (people.pic == 'null' ? NULL_PIC : people.pic) + '">');
+    var intro_node = $('<td class="character-intro-div"></td>');
+    var title_node = $('<div class="character-title"></div>');
+    var link_node = $('<a href="#">' + people.name + '</a>' + (people.nick ? '<span>字' + people.nick + '</span>' : ''));
+    var gicon_node = $('<a title="搜尋" target="_blank" href="http://www.google.com.tw/search?ie=utf8&source=redcliff&q=' + encodeURIComponent(people.name) + '"><img border=0 src="' + CN_BASE + 'search_icon.gif"></a>');
+    var flag_node = $('<div class="character-title-img" style="background-image:url(\'' + CN_BASE + 'icon/' + FLAGS[people.kingdom] + '.gif\')"></div>');
+    gicon_node.click(function(){
+      _IG_Analytics(UAACCT, '/click/searchIcon');
+      return true;
+    });
+    title_node.append(flag_node);
+    title_node.append(link_node);
+    title_node.append(gicon_node);
+    intro_node.append(title_node);
+    this.digest = new PeopleDigestNode(intro_node, people.desc, people.id);
+    var row = this.table.children().children();
+    row.append(img_node);
+    row.append(intro_node);
+    var event_node = row.after('<tr><td></td><td></td></tr>').next().children(':last');
+    this.event = new PeopleEventListNode(event_node, people.event_ids, people.id, people.center);
+    link_node.click(function(){
+      if (!me.is_shown) {
+        me.extend();
+        G_MAP.updateOverlay('P', people.id);
+        G_MAP.setCenter(people.center, 7);
+        me.is_shown = true;
+      } else {
+        me.encapsulate();
+        me.is_shown = false;
+      }
+      _IG_Analytics(UAACCT, '/click/peopleLink/' + people.id);
+      return false;
+    });
+    parent_node.append(this.table);
+    this.is_shown = false;
+  };
+  PeopleNode.prototype = {
+    extend: function() {
+      encapsulateActiveEventOrPeople(this.people_id);
+      this.event.showEvents();
+      this.digest.showDetail();
+      CURRENT_PEOPLE = this.people_id;
+    },
+    encapsulate: function() {
+      this.event.hideEvents();
+      this.digest.hideDetail();
+    },
+    hide: function() {
+      this.encapsulate();
+      this.table.hide();
+    },
+    show: function() {
+      this.table.show();
+    }
+  };
+  function People(raw_people) {
+    var me = this;
+    this.id = raw_people.name;
+    this.name = raw_people.name;
+    this.nick = raw_people.zi;
+    this.birth = raw_people.birth;
+    this.death = raw_people.death;
+    this.birthplace = raw_people.birthplace;
+    this.desc = raw_people.desc;
+    this.kingdom = raw_people.kindom;
+    this.event_ids = raw_people.event_ids;
+    this.element_ids = raw_people.element_ids;
+    this.pic = raw_people.pic;
+    this.digest = null;
+    this.event = null;
+    this.center = new GLatLng(raw_people.center.lat, raw_people.center.lng);
+    this.node = new PeopleNode($('#character_list'), this);
+    this.is_shown = true;
+  };
+  People.prototype = {
+    showNode: function() {
+      if (this.is_shown)
+        return;
+      this.node.show();
+      this.is_shown = true;
+    },
+    hideNode: function() {
+      if (!this.is_shown)
+        return;
+      this.node.hide();
+      this.is_shown = false;
+    }
+  };
+  function LoadElement() {
+    _IG_FetchContent(URL.element_url, function(data) {
+      var json = eval(data);
+      $.each(json, function(index, element) {
+        ELEMENT.setItem(element.id, new Element(element));
+      });
+      LoadDone();
+    })
+  };
+  function LoadEvent() {
+    _IG_FetchContent(URL.event_url, function(data) {
+      var json = eval(data);
+      $.each(json, function(index, event) {
+        EVENT.setItem(event.id, new Event(event));
+      });
+      LoadBigEvent();
+      LoadPeople();
+    });
+  };
+  function LoadPeople() {
+    _IG_FetchContent(URL.people_url, function(data) {
+      var json = eval(data);
+      $.each(json, function(index, raw_people) {
+        var people = new People(raw_people)
+        PEOPLE.setItem(people.name, people);
+        PEOPLE_ARRAY.push(people);
+      });
+      LoadDone();
+    });
+  };
+  function LoadBigEvent() {
+    _IG_FetchContent(URL.big_event_url, function(data) {
+      var json = eval(data);
+      $.each(json, function(index, big_event) {
+        BIG_EVENT.setItem(big_event.id, new BigEvent(big_event));
+      });
+      LoadDone();
+    });
+  };
+  function LoadLocation() {
+    _IG_FetchContent(URL.location_url, function(data) {
+      var json = eval(data);
+      $.each(json, function(index, location) {
+        LOCATION.setItem(location.name, new Location(location));
+      });
+      LoadElement();
+      LoadEvent();
+    });
+  };
+  var LOAD_STATES = 0;
+  function LoadDone() {
+    LOAD_STATES++;
+    if (LOAD_STATES == 3) { // shan zhai!
+      makeShareButton();
+      $('#loading').hide();
+      $('#main').show();
+      _IG_AdjustIFrameHeight();
+    }
+  };
+  function _un(str) {return str.replace(/&([^;]+);/g, function(s,entity) {switch (entity) {case 'amp':return '&';case 'lt':return '<'; case 'gt':return '>';case 'quot':return '"';default:if (entity.charAt(0) == '#') {var n=Number('0' + entity.substr(1));if (!isNaN(n)){return String.fromCharCode(n);}}return s;}});};
+  function makeShareButton() {
+    if (!google || !google.share || !google.share.SharingWidget) return;
+    // TODO: refine the text here !!!!
+    var g = {
+      'linkText': '將此地圖分享給朋友',
+      'url': 'http://maps.google.com.tw/chibi/',
+      'title': 'Google 『赤壁之戰』 地圖',
+      'image': CN_BASE + 'email_logo.png',
+      'subject_template': _un('{FROM}邀請您來看看 Google『赤壁之戰』地圖'),
+      'comments_template': _un('您的朋友（{FROM}）覺得您可能對這篇文章感興趣，來看看吧：'),
+      'description': '赤壁之戰地圖，Google團隊再現一千八百年前的三足鼎立時代！',
+      'buttonStyle': 'link', 'tabs': 'email,email', 'popup': true, 'nopreview': true, 'noaddto': true
+    };
+    new google.share.SharingWidget("share_button", g);
+  };
+  var Utils = {
+    constructEventHtml : function(event, i) {
+      var html = [];
+      html.push('<div style="' + (i != 0 ? 'border-top:1px dashed #CCC; margin-top:5px;' : '') + '">');
+        html.push('<div style="font-size:14px; font-weight:bold; padding-top:10px;">' + event.name + '</div>');
+        html.push('<div style="color:#AAAAAA;">' + event.time + ' (' + event.time_ad + ')</div>');
+        html.push('<div style="color:#666666; padding:5px 0px;">' + event.desc + '</div>');
+        html.push('<div style="text-align:right; color:#AAA;">相關搜尋: ');
+        $.each(event.search, function(j, keyword) {
+          html.push('<a style="color:#915E00;margin-left:3px;" target=_blank href="http://www.google.com.tw/search?ie=utf8&source=redcliff&q=' + encodeURIComponent(keyword) + '">' + keyword + '</a>');
+        });
+        html.push('</div>');
+      html.push('</div>');
+      return html.join('');
+    },
+    constructInfoWindowHtml : function(events) {
+      var html = ['<div style="width:320px; font-size:12px; padding-right:5px;">'];
+      $.each(events, function(i, event){
+        html.push(Utils.constructEventHtml(event, i));
+      });
+      html.push('</div>');
+      return html.join('');
+    },
+    constructInfoWindowTabsHtml : function(events) {
+      var tabs = [];
+      $.each(events, function(i, event){
+        var html = ['<div style="width:320px; font-size:12px; padding-right:5px;">'];
+        html.push(Utils.constructEventHtml(event, 0));
+        html.push('</div>');
+        tabs.push(new GInfoWindowTab(INFOWIN_TAB_LABELS[i], html.join('')));
+      });
+      return tabs;
+    }
+  };
+  function RedcliffMap(node) {
+    var me = this;
+    this.gmap = new GMap2();
+    this.gmap.setCenter(new GLatLng(29.833, 113.618), 7, G_PHYSICAL_MAP);
+    this.tileLayerOverlay = new GTileLayerOverlay(
+      new GTileLayer(null, null, null, {
+        tileUrlTemplate: URL.tile_url,
+        isPng:true,
+        opacity:1.0
+      })
+    );
+    this.gmap.addOverlay(this.tileLayerOverlay);
+  };
+  RedcliffMap.prototype = {
+    changeTiles: function(opacity_val) {
+      // IE6 does not support opacity, so we remove the layer if opacity is 0
+      if (this.tileLayerOverlay != null) {
+        this.gmap.removeOverlay(this.tileLayerOverlay);
+      }
+      if (opacity_val < 0.01) {
+        this.tileLayerOverlay = null;
+      } else {
+        this.tileLayerOverlay = new GTileLayerOverlay(
+          new GTileLayer(null, null, null, {
+            tileUrlTemplate: URL.tile_url,
+            isPng:true,
+            opacity:opacity_val
+          })
+        );
+        this.gmap.addOverlay(this.tileLayerOverlay);
+      }
+    },
+    addOverlay: function(overlay) {
+      this.gmap.addOverlay(overlay);
+    },
+    removeOverlay: function(overlay) {
+      this.gmap.removeOverlay(overlay);
+    },
+    openInfoWindow: function(type, id, latlng) {
+      if (type == "EVENT") {
+        var event = EVENT.getItem(id);
+        var info_div = Utils.constructInfoWindowHtml([event]);
+        this.gmap.openInfoWindowHtml(latlng, info_div);
+        //this.highLightOverlay(event.element_ids);
+      }
+      if (type == "ELEMENT") {
+        var element = ELEMENT.getItem(id);
+        var events = new Array();
+        $.each(element.events, function(index, event_id) {
+          if (CURRENT_EVENT_HASH.hasItem(event_id)) {
+            var event = EVENT.getItem(event_id);
+            events.push(event);
+          }
+        });
+        if (events.length > 1) {
+          var info_tabs = Utils.constructInfoWindowTabsHtml(events);
+          this.gmap.openInfoWindowTabsHtml(latlng, info_tabs);
+        } else {
+          var info_div = Utils.constructInfoWindowHtml(events);
+          this.gmap.openInfoWindowHtml(latlng, info_div);
+        }
+        //this.highLightOverlay(id);
+      }
+    },
+    highLightOverlay: function(element_ids) {
+      $.each(element_ids, function(index, element_id) {
+        if (CURRENT_ELEMENT_HASH.hasItem(element_id)) {
+          var element = ELEMENT.getItem(element_id);
+          element.highLight();
+          HIGH_LIGHT_ELEMENT.push(element_id);
+        }
+      });
+    },
+    deHighLightOverlay: function() {
+      while (HIGH_LIGHT_ELEMENT.length > 0) {
+        var element_id = HIGH_LIGHT_ELEMENT.pop();
+        var element = ELEMENT.getItem(element_id);
+        //element.deHighLight();
+      }
+    },
+    setCenter: function(center, level) {
+      this.gmap.panTo(center);
+    },
+    clearOverlays: function() {
+      this.gmap.closeInfoWindow();
+      while (CURRENT_ELEMENT.length > 0) {
+        var element_id = CURRENT_ELEMENT.pop();
+        var elem = ELEMENT.getItem(element_id);
+        CURRENT_ELEMENT_HASH.removeItem(element_id);
+        elem.removeFromMap();
+      }
+      while (CURRENT_EVENT.length > 0) {
+        var event_id = CURRENT_EVENT.pop();
+        CURRENT_EVENT_HASH.removeItem(element_id);
+      }
+      CURRENT_OVERLAY_ID = "";
+    },
+    updateOverlay: function(type, id) {
+      if (type + '_' + id == CURRENT_OVERLAY_ID)
+        return;
+      CURRENT_OVERLAY_ID = type + '_' + id;
+      this.clearOverlays();
+      var element_ids;
+      var event_ids;
+      if (type == 'E') {
+        var big_event = BIG_EVENT.getItem(id);
+        element_ids = big_event.element_ids;
+        event_ids = big_event.event_ids;
+      } else {
+        var people = PEOPLE.getItem(id);
+        element_ids = people.element_ids;
+        event_ids = people.event_ids;
+      }
+      $.each(element_ids, function(index, element_id) {
+        var elem = ELEMENT.getItem(element_id);
+        elem.drawOnMap();
+        CURRENT_ELEMENT.push(element_id);
+        CURRENT_ELEMENT_HASH.setItem(element_id, "");
+      });
+      $.each(event_ids, function(index, event_id) {
+        CURRENT_EVENT.push(event_id);
+        CURRENT_EVENT_HASH.setItem(event_id, "");
+      });
+    }
+  };
+  function CharacterFilter() {
+    var filter = function() {
+      var shu_selected = false;
+      var wei_selected = false;
+      var wu_selected = false;
+      if ($('#checkbox_shu').attr('checked')) shu_selected = true;
+      if ($('#checkbox_wei').attr('checked')) wei_selected = true;
+      if ($('#checkbox_wu').attr('checked')) wu_selected = true;
+      $.each(PEOPLE_ARRAY, function(index, character){
+        if (character.kingdom == '蜀') {
+          if (shu_selected) character.showNode();
+          else character.hideNode();
+        }
+        if (character.kingdom == '魏') {
+          if (wei_selected) character.showNode();
+          else character.hideNode();
+        }
+        if (character.kingdom == '吳') {
+          if (wu_selected) character.showNode();
+          else character.hideNode();
+        }
+      });
+      _IG_AdjustIFrameHeight();
+      _IG_Analytics(UAACCT, '/click/characterFilter');
+    };
+    $('#checkbox_shu').click(filter);
+    $('#checkbox_wei').click(filter);
+    $('#checkbox_wu').click(filter);
+  };
+  // Add the handler for changing the tile option using the drop down.
+  function TilesSelect() {
+    // remove half transparent version for IE6
+   if (navigator.appName == 'Microsoft Internet Explorer' &&
+       (navigator.appVersion.indexOf('MSIE 6') > 0)) {
+      var sel = $('#select_tiles').get(0);
+      for (var i = sel.length - 1; i >= 0; i--) {
+        if (sel.options[i].value > 0.01 && sel.options[i].value < 0.99) {
+          sel.remove(i);
+        }
+      }
+    }
+    var change_tiles = function() {
+      var selVal = $('#select_tiles').attr('options')[$('#select_tiles').attr('options').selectedIndex].value;
+      G_MAP.changeTiles(selVal);
+      _IG_Analytics(UAACCT, '/click/tilesSelect/' + selVal);
+    };
+    $('#select_tiles').change(change_tiles);
+  };
+  function TabManager(in_tabs, active_tab) {
+    var tabs = new Array();
+    var current_tab = '';
+    var shiftTab = function(active_tab) {
+      if (active_tab == current_tab) return;
+      $.each([active_tab, current_tab], function(index, tab){
+        var tab_container = $('#' + tab + '_cnt');
+        var tab_item = $('#' + tab + '_tab');
+        var tab_parent = tab_item.parent();
+        if (tab == active_tab) {
+          tab_container.show();
+          tab_parent.removeClass('tab-inactive');
+          tab_parent.addClass('tab-active');
+        } else {
+          tab_container.hide();
+          tab_parent.removeClass('tab-active');
+          tab_parent.addClass('tab-inactive');
+        }
+      });
+      current_tab = active_tab;
+    };
+    $.each(in_tabs, function(index, tab){
+      $('#' + tab + '_tab').click(function(){
+        shiftTab(tab);
+        _IG_AdjustIFrameHeight();
+        _IG_Analytics(UAACCT, '/view/tab/' + tab);
+        return false;
+      });
+      tabs.push(tab);
+    });
+    shiftTab(active_tab);
+  };
+  function Disclaimer() {
+    var is_show = false;
+    var box = $('#disclaimer_box');
+    $('#disclaimer_show').click(function(){
+       if (is_show) {
+         box.hide();
+         is_show = false;
+       } else {
+         box.show();
+         is_show = true;
+       }
+       return false;
+    });
+    $('#disclaimer_close').click(function(){
+      box.hide();
+      is_show = false;
+      return false;
+    });
+  }
+  $(function(){
+    G_MAP = new RedcliffMap();
+    LoadLocation();
+    new TilesSelect();
+    new TabManager(['events', 'characters', 'vote'], 'characters');
+    new Disclaimer();
+    $('#clear_button').click(function(){
+      G_MAP.clearOverlays();
+    });
+    new CharacterFilter();
+    _IG_Analytics(UAACCT, "/view/load");
+  });
+})();
+</script>
+<!-- NOTE: Add "?bpc=<radnom>" to by pass the cache for the js file. -->
+]]></Content>
+</Module>
+}}}
  * [http://maps.google.com/maps/mpl?moduleurl=http://earthquake.usgs.gov/eqcenter/mapplets/earthquakes.xml 國外的地震中心google maps] 原始碼解析
 {{{