= 2009-02-04 =

 * 原本 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
{{{
svn checkout http://redcliff.googlecode.com/svn/trunk/ redcliff-read-only
}}}
 * 赤壁的 Mapplet 
[[Image(redcliff.jpg)]]
 * 在原始碼中，people.json 是用來顯示"主要人物"這個 Tag 的資料來源
[[Image(people.json.jpg)]]
 * 在原始碼中，big_event.json 是用來顯示"歷史事件"這個 Tag 的資料來源
[[Image(big_event.json.jpg)]]
 * 在原始碼中，event.json 是用來顯示點選"歷史事件"其中一個事件後，顯示各事件的關連資料來源
[[Image(event.json.jpg)]]
 * 在原始碼中，location.json 是用來把歷史古城的位置用貼圖方式顯示的經緯度資料來源
[[Image(location.json.jpg)]]
 * 在原始碼中，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==
1){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] 原始碼解析
{{{
#!js
<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="Real-time Earthquakes" 
                description="USGS Earthquakes for the past 7 days"
                author="Scott Haefner"
                author_email="shaefner@usgs.gov"
                author_affiliation="U.S. Geological Survey"
                screenshot="http://earthquake.usgs.gov/eqcenter/mapplets/ss-earthquakes.png"
                thumbnail="http://earthquake.usgs.gov/eqcenter/mapplets/tn-earthquakes.png"
                height="300">
  <Require feature="sharedmap"/>
  <Require feature="analytics"/>
</ModulePrefs>
<Content type="html">
<![CDATA[
<style type="text/css">
h1 {
  font-size: 18px;
  color: #333;
  padding: 0;
  margin: 0 5px;
}
h2 {
  font-size: 14px;
  color: #633;
  padding: 0;
  margin: 1em 5px;
}
p {
  font-family: Georgia, serif;
  font-size: 12px;
  line-height: 18px;
  color: #666;
  padding: 0;
  margin: 2px 0 6px 8px;
}
ol {
  font-size: 12px;
  margin: 1em 1em 1em 2.5em;
  padding: 0;
}
li {
  margin: .4em 0;
  padding: 0;
}
img {
  padding-left: 10px;
}
</style>
<h1>M 4+ Earthquakes, past 7 days</h1>
<div id="content">
</div>

<script type="text/javascript">

// Global variables
var map = null;
var eqs = [];
var icons = [];
var markers = [];

var points = {
  color: { // Marker: icon color
    'pasthour': 'red',
    'pastday': 'orange',
    'pastweek': 'yellow'
  },
  size: { // Marker: icon size in pixels
    'M1': 11,
    'M2': 15,
    'M3': 17,
    'M4': 21,
    'M5': 25,
    'M6': 31,
    'M7': 37,
    'M8': 45,
    'M9': 55
  }
};


function initMap() {
  createMap();
  readMarkers();
}


function createMap() {
  var map_center = new GLatLng(20, 170);
  var map_zoom = 2;
  var map_type = G_SATELLITE_MAP; //G_NORMAL_MAP
  map = new GMap2({ logoPassive:true });
  map.setCenter(map_center, map_zoom, map_type);
}


function readMarkers() {

  // Fetch RSS feed
  var feed = "http://earthquake.usgs.gov/eqcenter/catalogs/eqs7day-M4.xml";
  _IG_FetchXmlContent(feed, function(response) {  
    if (response == null || typeof(response) != "object" || response.firstChild == null) {
      _gel("content").innerHTML = "<i>Invalid data.</i>";
      return;
    }

    var pubDate = response.getElementsByTagName("pubDate");
    var feed_pubDate = pubDate.item(0).firstChild.nodeValue;

    eqs = response.getElementsByTagName("item");
    
    var html = "<p>" + eqs.length + " earthquakes on this map<br />Updated " + feed_pubDate + "</p>";
    html += '<img src="http://earthquake.usgs.gov/eqcenter/mapplets/legend.png" alt="legend" />';
    html += "<h2>10 Most Recent Earthquakes</h2>";
    html += "<ol>";
    
    // Loop through eq list (<item> nodes)
    for (var i = 0; i < eqs.length; i++) {
  
      // For each eq, get child nodes
      var item_nodes = eqs.item(i).childNodes;
      
      dcsubject_count = 1;
      
      // Loop through child nodes
      for (var j = 0; j < item_nodes.length; j++) {
        
        node = item_nodes.item(j);
        
        switch (node.nodeName) {
          case 'title':
            title = node.firstChild.nodeValue;
            break;
          case 'description':
            description = node.firstChild.nodeValue;
            break;
          case 'link':
            link = node.firstChild.nodeValue;
            break;
          case 'geo:lat':
            lat = parseFloat(node.firstChild.nodeValue);
            break;
          case 'geo:long':
            long = parseFloat(node.firstChild.nodeValue);
            break;
          case 'dc:subject':
            switch (dcsubject_count) {
              case 3: //third dc:subject tag
                var depth = node.firstChild.nodeValue;
                break;
              case 2: //second dc:subject tag
                var age = node.firstChild.nodeValue;
                dcsubject_count ++;
                break;
              case 1: //first dc:subject tag
                var mag = node.firstChild.nodeValue;
                dcsubject_count ++;
                break;
            }
            break;
        }
      }
        
      if (i < 10) { // Show first 10 earthquakes in sidebar
        html += '<li><a href="javascript:showBubble(' + i + ')" title="View earthquake on map">' + title + "</a></li>";
      }
      
      var bubble = '<div style=\"width:250px;\"><p><strong>' + title + '</strong><br />' + description + '</p><p><a href="' + link + '" target="_new">Earthquake Details</a> &raquo;</p></div>';
      var titletip = title;
      var icon = getIcon(age, parseInt(mag));

      createMarker(lat, long, icon, titletip, bubble, i);

    }

    html += "</ol>";

    // Display HTML string in <div>
    _gel('content').innerHTML = html;
    
  }, { refreshInterval: (60 * 5) }); // Allow Google to cache feed for only 5-minutes
}


// Create marker object for earthquake overlay

function createMarker(lat, long, icon, titletip, bubble, count) {
  var marker = new GMarker(new GLatLng(lat, long), {icon:icon, title:titletip});
  GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml(bubble, {disableGoogleLinks:true});
  });
  map.addOverlay(marker);
  markers[count] = marker; // Save for use in sidebar link
}


// Set icon properties based on age, magnitude

function getIcon(age, mag) {
  var ref = 'M' + mag + '-' + points.color[age];
  if (!icons[ref]) {
    var center_pt = parseInt(points.size['M'+mag]/2);
    var icon = new GIcon();
    icon.image = 'http://earthquake.usgs.gov/eqcenter/maps/images/' + ref + '.png';
    icon.iconSize = new GSize(points.size['M'+mag], points.size['M'+mag]);
    icon.iconAnchor = new GPoint(center_pt, center_pt);
    icon.infoWindowAnchor = new GPoint(center_pt, center_pt);
    icons[ref] = icon;
  }
  return icons[ref];
}


// Show bubble window when eq clicked from sidebar

function showBubble(i) {
  GEvent.trigger(markers[i], "click");
}

_IG_RegisterOnloadHandler(initMap);
_IG_Analytics("UA-2265247-1", "/eqcenter/mapplets/earthquakes.xml");

</script>

]]></Content>
</Module>
}}}