| 147 | | <script type="text/javascript">(function(){ |
| 148 | | |
| 149 | | function Hash(){ |
| 150 | | this.length = 0; |
| 151 | | this.items = new Array(); |
| 152 | | |
| 153 | | for (var i = 0; i < arguments.length; i += 2) { |
| 154 | | if (typeof(arguments[i + 1]) != 'undefined') { |
| 155 | | this.items[arguments[i]] = arguments[i + 1]; |
| 156 | | this.length++; |
| 157 | | } |
| 158 | | } |
| 159 | | }; |
| 160 | | |
| 161 | | Hash.prototype = { |
| 162 | | removeItem: function(in_key) { |
| 163 | | var tmp_value; |
| 164 | | if (typeof(this.items[in_key]) != 'undefined') { |
| 165 | | this.length--; |
| 166 | | tmp_value = this.items[in_key]; |
| 167 | | delete this.items[in_key]; |
| 168 | | } |
| 169 | | return tmp_value; |
| 170 | | }, |
| 171 | | |
| 172 | | getItem: function(in_key) { |
| 173 | | return this.items[in_key]; |
| 174 | | }, |
| 175 | | |
| 176 | | setItem: function(in_key, in_value) { |
| 177 | | if (typeof(in_value) != 'undefined') { |
| 178 | | if (typeof(this.items[in_key]) == 'undefined') { |
| 179 | | this.length++; |
| 180 | | } |
| 181 | | this.items[in_key] = in_value; |
| 182 | | } |
| 183 | | return in_value; |
| 184 | | }, |
| 185 | | |
| 186 | | hasItem: function(in_key) { |
| 187 | | return typeof(this.items[in_key]) != 'undefined'; |
| 188 | | }, |
| 189 | | |
| 190 | | getLength: function(){ |
| 191 | | return this.length; |
| 192 | | } |
| 193 | | }; |
| 194 | | |
| 195 | | var LOCATION = new Hash(); |
| 196 | | var ELEMENT = new Hash(); |
| 197 | | var EVENT = new Hash(); |
| 198 | | var BIG_EVENT = new Hash(); |
| 199 | | var PEOPLE = new Hash(); |
| 200 | | var PEOPLE_ARRAY = new Array(); |
| 201 | | var CURRENT_EVENT_HASH = new Hash(); |
| 202 | | var CURRENT_ELEMENT_HASH = new Hash(); |
| 203 | | var CURRENT_EVENT = Array(); |
| 204 | | var CURRENT_ELEMENT = new Array(); |
| 205 | | var HIGH_LIGHT_ELEMENT = new Array(); |
| 206 | | var CURRENT_OVERLAY_ID = ""; |
| 207 | | var BASE = 'http://redcliff.googlecode.com/svn/trunk/'; |
| 208 | | var CN_BASE = 'http://www.google.cn/staticcn/chibi/'; |
| 209 | | var LAIBA_BASE = ''; |
| 210 | | var NULL_PIC = 'http://laiba.tianya.cn/laiba/images/274/12295005600705035805/A/1/o.png'; |
| 211 | | |
| 212 | | var CURRENT_BIG_EVENT = null; |
| 213 | | var CURRENT_PEOPLE = null; |
| 214 | | |
| 215 | | var CURRENT_TAB = null; |
| 216 | | |
| 217 | | var URL = { |
| 218 | | location_url: BASE + 'data_tc/location.json?bpc=12191314', |
| 219 | | element_url: BASE + 'data_tc/element.json?bpc=12191328', |
| 220 | | event_url: BASE + 'data_tc/event.json?bpc=12191540', |
| 221 | | big_event_url: BASE + 'data_tc/big_event.json?bpc=12191303', |
| 222 | | people_url: BASE +'data_tc/people.json?bpc=12191540', |
| 223 | | tile_url: 'http://mt.google.cn/mt?v=cnsg1.2&hl=zh-CN&x={X}&y={Y}&z={Z}' |
| 224 | | }; |
| 225 | | |
| 226 | | var FLAGS = { |
| 227 | | '蜀': 'G', |
| 228 | | '魏': 'B', |
| 229 | | '吳': 'R' |
| 230 | | }; |
| 231 | | |
| 232 | | var INFOWIN_TAB_LABELS = ['事件一', '事件二', '事件三', '事件四', '事件五', '事件六']; // add more if there are more overlap... |
| 233 | | |
| 234 | | var G_MAP; |
| 235 | | |
| 236 | | // Google Analytics Account |
| 237 | | var UAACCT = "UA-6735343-1"; |
| 238 | | |
| 239 | | var C_POLYLINE_WEIGHT = 10 |
| 240 | | |
| 241 | | |
| 242 | | |
| 243 | | function Location(raw_location) { |
| 244 | | var me = this; |
| 245 | | this.location = raw_location; |
| 246 | | this.name = location.name; |
| 247 | | this.point = new GLatLng(raw_location.lat, raw_location.lng); |
| 248 | | }; |
| 249 | | |
| 250 | | |
| 251 | | function Element(raw_element) { |
| 252 | | var me = this; |
| 253 | | this.id = raw_element.id |
| 254 | | this.element = raw_element; |
| 255 | | this.type = raw_element.type; |
| 256 | | |
| 257 | | var getHiddenPolylineOverlay = function(points, weigth, id) { |
| 258 | | var latlngs = new Array(); |
| 259 | | $.each(points, function(index, point){ |
| 260 | | latlngs.push(new GLatLng(point.lat, point.lng)); |
| 261 | | }); |
| 262 | | var polyline = new GPolygon(latlngs, "#000000", 10, 0.0); |
| 263 | | GEvent.addListener(polyline, 'click', function(latlng) { |
| 264 | | G_MAP.openInfoWindow("ELEMENT", id, latlng); |
| 265 | | }); |
| 266 | | return polyline; |
| 267 | | }; |
| 268 | | |
| 269 | | var getArrowGroundOverlay = function(arrow_url, sw, ne) { |
| 270 | | var bound = new GLatLngBounds(new GLatLng(ne.lat, ne.lng), new GLatLng(sw.lat, sw.lng)); |
| 271 | | var arrow = new GGroundOverlay(CN_BASE + 'arrow/' + arrow_url + '.png', bound); |
| 272 | | return arrow; |
| 273 | | } |
| 274 | | |
| 275 | | var getMarker = function(icon_url, point, id) { |
| 276 | | var image = CN_BASE + 'icon/' + icon_url + '.png'; |
| 277 | | var icon = new GIcon(G_DEFAULT_ICON, image); |
| 278 | | if (icon_url.length == 2) |
| 279 | | icon.iconSize = new GSize(45,32); |
| 280 | | else |
| 281 | | icon.iconSize = new GSize(25,32); |
| 282 | | var marker = new GMarker(point, {icon:icon}); |
| 283 | | GEvent.addListener(marker, 'click', function() { |
| 284 | | G_MAP.openInfoWindow("ELEMENT", id, point); |
| 285 | | }); |
| 286 | | return marker; |
| 287 | | } |
| 288 | | if (this.type == 'point') { |
| 289 | | this.point = new GLatLng(raw_element.lat, raw_element.lng); |
| 290 | | this.marker = getMarker(raw_element.pic, this.point, this.id); |
| 291 | | } else { |
| 292 | | this.hidden_polyline = getHiddenPolylineOverlay(raw_element.hot_points, C_POLYLINE_WEIGHT, this.id); |
| 293 | | this.arrow = getArrowGroundOverlay(raw_element.arrow, raw_element.arrow_points[0], raw_element.arrow_points[1]); |
| 294 | | |
| 295 | | } |
| 296 | | this.events = raw_element.event_ids; |
| 297 | | }; |
| 298 | | |
| 299 | | Element.prototype = { |
| 300 | | drawOnMap: function() { |
| 301 | | if (this.type == 'line') { |
| 302 | | G_MAP.addOverlay(this.hidden_polyline); |
| 303 | | G_MAP.addOverlay(this.arrow); |
| 304 | | } else { |
| 305 | | G_MAP.addOverlay(this.marker); |
| 306 | | } |
| 307 | | }, |
| 308 | | |
| 309 | | removeFromMap: function() { |
| 310 | | if (this.type == 'line') { |
| 311 | | G_MAP.removeOverlay(this.hidden_polyline); |
| 312 | | G_MAP.removeOverlay(this.arrow); |
| 313 | | } else { |
| 314 | | G_MAP.removeOverlay(this.marker); |
| 315 | | } |
| 316 | | } |
| 317 | | |
| 318 | | /* |
| 319 | | highLight: function() { |
| 320 | | G_MAP.removeOverlay(this.current_overlay); |
| 321 | | G_MAP.addOverlay(this.highlight_overlay); |
| 322 | | this.current_overlay = this.highlight_overlay; |
| 323 | | }, |
| 324 | | |
| 325 | | deHighLight: function() { |
| 326 | | G_MAP.removeOverlay(this.current_overlay); |
| 327 | | G_MAP.addOverlay(this.overlay); |
| 328 | | this.current_overlay = this.overlay; |
| 329 | | }, |
| 330 | | |
| 331 | | adjustZoomLevel: function() { |
| 332 | | } |
| 333 | | */ |
| 334 | | }; |
| 335 | | |
| 336 | | var encapsulateActiveEventOrPeople = function(people_id) { |
| 337 | | if (CURRENT_BIG_EVENT != null) { |
| 338 | | var big_event = BIG_EVENT.getItem(CURRENT_BIG_EVENT); |
| 339 | | big_event.hideDetails(); |
| 340 | | CURRENT_BIG_EVENT = null; |
| 341 | | } |
| 342 | | if (CURRENT_PEOPLE != null && people_id && CURRENT_PEOPLE == people_id) |
| 343 | | return; |
| 344 | | if (CURRENT_PEOPLE != null) { |
| 345 | | var people = PEOPLE.getItem(CURRENT_PEOPLE); |
| 346 | | people.node.encapsulate(); |
| 347 | | CURRENT_PEOPLE = null; |
| 348 | | } |
| 349 | | } |
| 350 | | |
| 351 | | function Event(raw_event) { |
| 352 | | this.id = raw_event.id; |
| 353 | | this.name = raw_event.name; |
| 354 | | this.element_ids = raw_event.element_ids; |
| 355 | | this.people = raw_event.people; |
| 356 | | this.search = raw_event.search; |
| 357 | | this.time = raw_event.time; |
| 358 | | this.time_ad = raw_event.ad; |
| 359 | | this.desc = raw_event.desc; |
| 360 | | this.point = new GLatLng(raw_event.popup.lat, raw_event.popup.lng); |
| 361 | | }; |
| 362 | | |
| 363 | | function BigEvent(raw_event) { |
| 364 | | var me = this; |
| 365 | | this.id = raw_event.id |
| 366 | | this.name = raw_event.name; |
| 367 | | this.element_ids = raw_event.element_ids; |
| 368 | | this.event_ids = raw_event.event_ids; |
| 369 | | this.time = raw_event.time; |
| 370 | | this.time_ad = raw_event.ad; |
| 371 | | this.desc = raw_event.desc; |
| 372 | | this.pic = raw_event.pic; |
| 373 | | this.is_details_shown = false; |
| 374 | | this.details = null; |
| 375 | | this.images = raw_event.images; |
| 376 | | this.center = new GLatLng(raw_event.center.lat, raw_event.center.lng); |
| 377 | | var genNode = function() { |
| 378 | | var node = $('<div class="big-event-item"></div>'); |
| 379 | | |
| 380 | | var table = $('<table><tbody><tr></tr></tbody></table>'); |
| 381 | | var row = table.children().children(); |
| 382 | | var time_cell = $('<td class="big-event-item-time" title="' + me.time_ad + '">' + me.time + '</div>'); |
| 383 | | var link_cell = $('<td class="big-event-item-link"></td>'); |
| 384 | | row.append(time_cell); |
| 385 | | row.append(link_cell); |
| 386 | | row.append('<td class="big-event-item-pic"><img src="' + CN_BASE + 'icon/' + me.pic + '.gif"></td>'); |
| 387 | | node.append(table); |
| 388 | | |
| 389 | | var event_link = $('<a href=#>' + me.name + '</a>'); |
| 390 | | event_link.click(function(){ |
| 391 | | if (me.is_details_shown) { |
| 392 | | me.hideDetails(); |
| 393 | | } else { |
| 394 | | me.showDetails(); |
| 395 | | } |
| 396 | | G_MAP.updateOverlay('E', me.id); |
| 397 | | G_MAP.setCenter(me.center, 8); |
| 398 | | _IG_Analytics(UAACCT, '/click/eventLink/' + me.name); |
| 399 | | return false; |
| 400 | | }); |
| 401 | | link_cell.append(event_link); |
| 402 | | |
| 403 | | me.details = $('<div class="big-event-detail" style="display:none;"></div>'); |
| 404 | | me.details.append($('<p>' + me.desc + '</p>')); |
| 405 | | |
| 406 | | var imgs = $('<div class="big-event-imgs"></div>'); |
| 407 | | $.each(me.images, function(index, img_url) { |
| 408 | | var img = $('<img src="' + img_url + '">'); |
| 409 | | imgs.append(img); |
| 410 | | }); |
| 411 | | me.details.append(imgs); |
| 412 | | |
| 413 | | |
| 414 | | var event_list = $('<table class="events-div"></table>'); |
| 415 | | genEventList(event_list, me.event_ids); |
| 416 | | me.details.append(event_list); |
| 417 | | node.append(me.details); |
| 418 | | $('#big_event_list').append(node); |
| 419 | | return node; |
| 420 | | }; |
| 421 | | |
| 422 | | this.node = genNode(); |
| 423 | | this.is_shown = true; |
| 424 | | }; |
| 425 | | |
| 426 | | BigEvent.prototype = { |
| 427 | | showDetails: function() { |
| 428 | | encapsulateActiveEventOrPeople(null); |
| 429 | | this.details.show(); |
| 430 | | _IG_AdjustIFrameHeight(); |
| 431 | | this.is_details_shown = true; |
| 432 | | CURRENT_BIG_EVENT = this.id; |
| 433 | | }, |
| 434 | | |
| 435 | | hideDetails: function() { |
| 436 | | this.details.hide(); |
| 437 | | _IG_AdjustIFrameHeight(); |
| 438 | | this.is_details_shown = false; |
| 439 | | } |
| 440 | | }; |
| 441 | | |
| 442 | | var genEventList = function(table, event_ids) { |
| 443 | | var tbody = table.append('<tbody></tbody>').children(); |
| 444 | | $.each(event_ids, function(index, event_id){ |
| 445 | | var event = EVENT.getItem(event_id); |
| 446 | | var row = $('<tr></tr>'); |
| 447 | | genEventItem(row, event); |
| 448 | | tbody.append(row); |
| 449 | | }); |
| 450 | | }; |
| 451 | | |
| 452 | | var genEventItem = function(row, event) { |
| 453 | | var time_cell = $('<td class="events-item-time" title="' + event.time_ad + '">' + event.time + '</div>'); |
| 454 | | var link_cell = $('<td class="events-item-link"></td>'); |
| 455 | | var event_link = $('<a href=#>' + event.name + '</a>'); |
| 456 | | event_link.click(function(){ |
| 457 | | G_MAP.openInfoWindow("EVENT", event.id, event.point); |
| 458 | | _IG_Analytics(UAACCT, '/click/eventItemLink/' + event.name); |
| 459 | | return false; |
| 460 | | }); |
| 461 | | link_cell.append(event_link); |
| 462 | | row.append(time_cell); |
| 463 | | row.append(link_cell); |
| 464 | | }; |
| 465 | | |
| 466 | | function PeopleDigestNode(parent_node, desc, people_id) { |
| 467 | | this.people_id = people_id; |
| 468 | | var me = this; |
| 469 | | var node = $('<div class="character-digest-div"></div>'); |
| 470 | | this.digest = $('<div class="character-digest-div-short">' + desc.substring(0,65) + '...</div>'); |
| 471 | | this.detail = $('<div class="character-digest-div-long" style="display:none;">' + desc + '</div>'); |
| 472 | | var show_detail = $('<a href=#>[詳細]</a>'); |
| 473 | | var hide_detail = $('<a href=#>[隱藏]</a>'); |
| 474 | | |
| 475 | | this.digest.append(show_detail); |
| 476 | | this.detail.append(hide_detail); |
| 477 | | |
| 478 | | show_detail.click(function(){ |
| 479 | | me.showDetail(); |
| 480 | | _IG_Analytics(UAACCT, '/click/peopleShowDetailLink/' + me.people_id); |
| 481 | | return false; |
| 482 | | }); |
| 483 | | |
| 484 | | hide_detail.click(function(){ |
| 485 | | me.hideDetail(); |
| 486 | | _IG_Analytics(UAACCT, '/click/peopleHideDetailLink/' + me.people_id); |
| 487 | | return false; |
| 488 | | }); |
| 489 | | |
| 490 | | node.append(this.digest); |
| 491 | | node.append(this.detail); |
| 492 | | parent_node.append(node); |
| 493 | | }; |
| 494 | | |
| 495 | | PeopleDigestNode.prototype = { |
| 496 | | showDetail: function() { |
| 497 | | encapsulateActiveEventOrPeople(this.people_id); |
| 498 | | this.detail.slideDown('fast', _IG_AdjustIFrameHeight); |
| 499 | | this.digest.fadeOut('fast'); |
| 500 | | CURRENT_PEOPLE = this.people_id; |
| 501 | | }, |
| 502 | | hideDetail: function() { |
| 503 | | this.detail.slideUp('fast', _IG_AdjustIFrameHeight); |
| 504 | | this.digest.fadeIn('fast'); |
| 505 | | } |
| 506 | | }; |
| 507 | | |
| 508 | | function PeopleEventListNode(parent_node, event_ids, people_id, center) { |
| 509 | | this.people_id = people_id; |
| 510 | | var me = this; |
| 511 | | var node = $('<div class="events-div"></div>'); |
| 512 | | this.show_events = $('<a class="events-div-show" href=#>歷史事件</a>'); |
| 513 | | this.hide_events = $('<a class="events-div-hide" style="display:none;" href=#>隱藏歷史事件</a>'); |
| 514 | | this.event_list = $('<table class="events-list" style="display:none;"></table>'); |
| 515 | | |
| 516 | | genEventList(this.event_list, event_ids); |
| 517 | | |
| 518 | | this.show_events.click(function(){ |
| 519 | | me.showEvents(); |
| 520 | | G_MAP.updateOverlay('P', people_id); |
| 521 | | G_MAP.setCenter(center, 7); |
| 522 | | _IG_Analytics(UAACCT, '/click/peopleShowEventsLink/' + me.people_id); |
| 523 | | return false; |
| 524 | | }); |
| 525 | | |
| 526 | | this.hide_events.click(function(){ |
| 527 | | me.hideEvents(); |
| 528 | | _IG_Analytics(UAACCT, '/click/peopleHideEventsLink/' + me.people_id); |
| 529 | | return false; |
| 530 | | }); |
| 531 | | |
| 532 | | node.append(this.show_events); |
| 533 | | node.append(this.hide_events); |
| 534 | | node.append(this.event_list); |
| 535 | | parent_node.append(node); |
| 536 | | }; |
| 537 | | |
| 538 | | PeopleEventListNode.prototype = { |
| 539 | | showEvents: function() { |
| 540 | | encapsulateActiveEventOrPeople(this.people_id); |
| 541 | | this.event_list.slideDown('fast', _IG_AdjustIFrameHeight); |
| 542 | | this.hide_events.show(); |
| 543 | | this.show_events.hide(); |
| 544 | | CURRENT_PEOPLE = this.people_id; |
| 545 | | }, |
| 546 | | hideEvents: function() { |
| 547 | | this.event_list.slideUp('fast', _IG_AdjustIFrameHeight); |
| 548 | | this.show_events.show(); |
| 549 | | this.hide_events.hide(); |
| 550 | | } |
| 551 | | }; |
| 552 | | |
| 553 | | function PeopleNode(parent_node, people) { |
| 554 | | this.people_id = people.id; |
| 555 | | var me = this; |
| 556 | | this.digest = null; |
| 557 | | this.event = null; |
| 558 | | this.table = $('<table class="character-item"><tbody><tr></tr></tbody></table>'); |
| 559 | | var img_node = $('<td class="character-img-div"></td>'); |
| 560 | | img_node.append('<img width=60 height=75 src="' + (people.pic == 'null' ? NULL_PIC : people.pic) + '">'); |
| 561 | | var intro_node = $('<td class="character-intro-div"></td>'); |
| 562 | | var title_node = $('<div class="character-title"></div>'); |
| 563 | | var link_node = $('<a href="#">' + people.name + '</a>' + (people.nick ? '<span>字' + people.nick + '</span>' : '')); |
| 564 | | |
| 565 | | 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>'); |
| 566 | | var flag_node = $('<div class="character-title-img" style="background-image:url(\'' + CN_BASE + 'icon/' + FLAGS[people.kingdom] + '.gif\')"></div>'); |
| 567 | | |
| 568 | | gicon_node.click(function(){ |
| 569 | | _IG_Analytics(UAACCT, '/click/searchIcon'); |
| 570 | | return true; |
| 571 | | }); |
| 572 | | title_node.append(flag_node); |
| 573 | | title_node.append(link_node); |
| 574 | | title_node.append(gicon_node); |
| 575 | | intro_node.append(title_node); |
| 576 | | this.digest = new PeopleDigestNode(intro_node, people.desc, people.id); |
| 577 | | |
| 578 | | var row = this.table.children().children(); |
| 579 | | row.append(img_node); |
| 580 | | row.append(intro_node); |
| 581 | | |
| 582 | | var event_node = row.after('<tr><td></td><td></td></tr>').next().children(':last'); |
| 583 | | this.event = new PeopleEventListNode(event_node, people.event_ids, people.id, people.center); |
| 584 | | |
| 585 | | link_node.click(function(){ |
| 586 | | if (!me.is_shown) { |
| 587 | | me.extend(); |
| 588 | | G_MAP.updateOverlay('P', people.id); |
| 589 | | G_MAP.setCenter(people.center, 7); |
| 590 | | me.is_shown = true; |
| 591 | | } else { |
| 592 | | me.encapsulate(); |
| 593 | | me.is_shown = false; |
| 594 | | } |
| 595 | | _IG_Analytics(UAACCT, '/click/peopleLink/' + people.id); |
| 596 | | return false; |
| 597 | | }); |
| 598 | | parent_node.append(this.table); |
| 599 | | this.is_shown = false; |
| 600 | | }; |
| 601 | | |
| 602 | | PeopleNode.prototype = { |
| 603 | | extend: function() { |
| 604 | | encapsulateActiveEventOrPeople(this.people_id); |
| 605 | | this.event.showEvents(); |
| 606 | | this.digest.showDetail(); |
| 607 | | CURRENT_PEOPLE = this.people_id; |
| 608 | | }, |
| 609 | | encapsulate: function() { |
| 610 | | this.event.hideEvents(); |
| 611 | | this.digest.hideDetail(); |
| 612 | | }, |
| 613 | | hide: function() { |
| 614 | | this.encapsulate(); |
| 615 | | this.table.hide(); |
| 616 | | }, |
| 617 | | show: function() { |
| 618 | | this.table.show(); |
| 619 | | } |
| 620 | | }; |
| 621 | | |
| 622 | | |
| 623 | | function People(raw_people) { |
| 624 | | var me = this; |
| 625 | | this.id = raw_people.name; |
| 626 | | this.name = raw_people.name; |
| 627 | | this.nick = raw_people.zi; |
| 628 | | this.birth = raw_people.birth; |
| 629 | | this.death = raw_people.death; |
| 630 | | this.birthplace = raw_people.birthplace; |
| 631 | | this.desc = raw_people.desc; |
| 632 | | this.kingdom = raw_people.kindom; |
| 633 | | this.event_ids = raw_people.event_ids; |
| 634 | | this.element_ids = raw_people.element_ids; |
| 635 | | this.pic = raw_people.pic; |
| 636 | | this.digest = null; |
| 637 | | this.event = null; |
| 638 | | this.center = new GLatLng(raw_people.center.lat, raw_people.center.lng); |
| 639 | | this.node = new PeopleNode($('#character_list'), this); |
| 640 | | this.is_shown = true; |
| 641 | | }; |
| 642 | | |
| 643 | | People.prototype = { |
| 644 | | showNode: function() { |
| 645 | | if (this.is_shown) |
| 646 | | return; |
| 647 | | this.node.show(); |
| 648 | | this.is_shown = true; |
| 649 | | }, |
| 650 | | hideNode: function() { |
| 651 | | if (!this.is_shown) |
| 652 | | return; |
| 653 | | this.node.hide(); |
| 654 | | this.is_shown = false; |
| 655 | | } |
| 656 | | }; |
| 657 | | |
| 658 | | function LoadElement() { |
| 659 | | _IG_FetchContent(URL.element_url, function(data) { |
| 660 | | var json = eval(data); |
| 661 | | $.each(json, function(index, element) { |
| 662 | | ELEMENT.setItem(element.id, new Element(element)); |
| 663 | | }); |
| 664 | | LoadDone(); |
| 665 | | }) |
| 666 | | }; |
| 667 | | |
| 668 | | function LoadEvent() { |
| 669 | | _IG_FetchContent(URL.event_url, function(data) { |
| 670 | | var json = eval(data); |
| 671 | | $.each(json, function(index, event) { |
| 672 | | EVENT.setItem(event.id, new Event(event)); |
| 673 | | }); |
| 674 | | LoadBigEvent(); |
| 675 | | LoadPeople(); |
| 676 | | }); |
| 677 | | |
| 678 | | }; |
| 679 | | |
| 680 | | function LoadPeople() { |
| 681 | | _IG_FetchContent(URL.people_url, function(data) { |
| 682 | | var json = eval(data); |
| 683 | | $.each(json, function(index, raw_people) { |
| 684 | | var people = new People(raw_people) |
| 685 | | PEOPLE.setItem(people.name, people); |
| 686 | | PEOPLE_ARRAY.push(people); |
| 687 | | }); |
| 688 | | LoadDone(); |
| 689 | | }); |
| 690 | | }; |
| 691 | | |
| 692 | | function LoadBigEvent() { |
| 693 | | _IG_FetchContent(URL.big_event_url, function(data) { |
| 694 | | var json = eval(data); |
| 695 | | $.each(json, function(index, big_event) { |
| 696 | | BIG_EVENT.setItem(big_event.id, new BigEvent(big_event)); |
| 697 | | }); |
| 698 | | LoadDone(); |
| 699 | | }); |
| 700 | | }; |
| 701 | | |
| 702 | | function LoadLocation() { |
| 703 | | _IG_FetchContent(URL.location_url, function(data) { |
| 704 | | var json = eval(data); |
| 705 | | $.each(json, function(index, location) { |
| 706 | | LOCATION.setItem(location.name, new Location(location)); |
| 707 | | }); |
| 708 | | LoadElement(); |
| 709 | | LoadEvent(); |
| 710 | | }); |
| 711 | | }; |
| 712 | | |
| 713 | | var LOAD_STATES = 0; |
| 714 | | function LoadDone() { |
| 715 | | LOAD_STATES++; |
| 716 | | if (LOAD_STATES == 3) { // shan zhai! |
| 717 | | makeShareButton(); |
| 718 | | $('#loading').hide(); |
| 719 | | $('#main').show(); |
| 720 | | |
| 721 | | _IG_AdjustIFrameHeight(); |
| 722 | | } |
| 723 | | }; |
| 724 | | |
| 725 | | 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;}});}; |
| 726 | | function makeShareButton() { |
| 727 | | if (!google || !google.share || !google.share.SharingWidget) return; |
| 728 | | // TODO: refine the text here !!!! |
| 729 | | var g = { |
| 730 | | 'linkText': '將此地圖分享給朋友', |
| 731 | | 'url': 'http://maps.google.com.tw/chibi/', |
| 732 | | 'title': 'Google 『赤壁之戰』 地圖', |
| 733 | | 'image': CN_BASE + 'email_logo.png', |
| 734 | | 'subject_template': _un('{FROM}邀請您來看看 Google『赤壁之戰』地圖'), |
| 735 | | 'comments_template': _un('您的朋友（{FROM}）覺得您可能對這篇文章感興趣，來看看吧：'), |
| 736 | | 'description': '赤壁之戰地圖，Google團隊再現一千八百年前的三足鼎立時代！', |
| 737 | | 'buttonStyle': 'link', 'tabs': 'email,email', 'popup': true, 'nopreview': true, 'noaddto': true |
| 738 | | }; |
| 739 | | new google.share.SharingWidget("share_button", g); |
| 740 | | }; |
| 741 | | |
| 742 | | var Utils = { |
| 743 | | |
| 744 | | constructEventHtml : function(event, i) { |
| 745 | | var html = []; |
| 746 | | html.push('<div style="' + (i != 0 ? 'border-top:1px dashed #CCC; margin-top:5px;' : '') + '">'); |
| 747 | | html.push('<div style="font-size:14px; font-weight:bold; padding-top:10px;">' + event.name + '</div>'); |
| 748 | | html.push('<div style="color:#AAAAAA;">' + event.time + ' (' + event.time_ad + ')</div>'); |
| 749 | | html.push('<div style="color:#666666; padding:5px 0px;">' + event.desc + '</div>'); |
| 750 | | html.push('<div style="text-align:right; color:#AAA;">相關搜尋: '); |
| 751 | | $.each(event.search, function(j, keyword) { |
| 752 | | 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>'); |
| 753 | | }); |
| 754 | | html.push('</div>'); |
| 755 | | html.push('</div>'); |
| 756 | | return html.join(''); |
| 757 | | }, |
| 758 | | |
| 759 | | constructInfoWindowHtml : function(events) { |
| 760 | | var html = ['<div style="width:320px; font-size:12px; padding-right:5px;">']; |
| 761 | | $.each(events, function(i, event){ |
| 762 | | html.push(Utils.constructEventHtml(event, i)); |
| 763 | | }); |
| 764 | | html.push('</div>'); |
| 765 | | return html.join(''); |
| 766 | | }, |
| 767 | | |
| 768 | | constructInfoWindowTabsHtml : function(events) { |
| 769 | | var tabs = []; |
| 770 | | $.each(events, function(i, event){ |
| 771 | | var html = ['<div style="width:320px; font-size:12px; padding-right:5px;">']; |
| 772 | | html.push(Utils.constructEventHtml(event, 0)); |
| 773 | | html.push('</div>'); |
| 774 | | tabs.push(new GInfoWindowTab(INFOWIN_TAB_LABELS[i], html.join(''))); |
| 775 | | }); |
| 776 | | return tabs; |
| 777 | | } |
| 778 | | }; |
| 779 | | |
| 780 | | function RedcliffMap(node) { |
| 781 | | var me = this; |
| 782 | | this.gmap = new GMap2(); |
| 783 | | this.gmap.setCenter(new GLatLng(29.833, 113.618), 7, G_PHYSICAL_MAP); |
| 784 | | this.tileLayerOverlay = new GTileLayerOverlay( |
| 785 | | new GTileLayer(null, null, null, { |
| 786 | | tileUrlTemplate: URL.tile_url, |
| 787 | | isPng:true, |
| 788 | | opacity:1.0 |
| 789 | | }) |
| 790 | | ); |
| 791 | | this.gmap.addOverlay(this.tileLayerOverlay); |
| 792 | | }; |
| 793 | | |
| 794 | | |
| 795 | | RedcliffMap.prototype = { |
| 796 | | changeTiles: function(opacity_val) { |
| 797 | | // IE6 does not support opacity, so we remove the layer if opacity is 0 |
| 798 | | if (this.tileLayerOverlay != null) { |
| 799 | | this.gmap.removeOverlay(this.tileLayerOverlay); |
| 800 | | } |
| 801 | | if (opacity_val < 0.01) { |
| 802 | | this.tileLayerOverlay = null; |
| 803 | | } else { |
| 804 | | this.tileLayerOverlay = new GTileLayerOverlay( |
| 805 | | new GTileLayer(null, null, null, { |
| 806 | | tileUrlTemplate: URL.tile_url, |
| 807 | | isPng:true, |
| 808 | | opacity:opacity_val |
| 809 | | }) |
| 810 | | ); |
| 811 | | this.gmap.addOverlay(this.tileLayerOverlay); |
| 812 | | } |
| 813 | | }, |
| 814 | | addOverlay: function(overlay) { |
| 815 | | this.gmap.addOverlay(overlay); |
| 816 | | }, |
| 817 | | removeOverlay: function(overlay) { |
| 818 | | this.gmap.removeOverlay(overlay); |
| 819 | | }, |
| 820 | | openInfoWindow: function(type, id, latlng) { |
| 821 | | if (type == "EVENT") { |
| 822 | | var event = EVENT.getItem(id); |
| 823 | | var info_div = Utils.constructInfoWindowHtml([event]); |
| 824 | | this.gmap.openInfoWindowHtml(latlng, info_div); |
| 825 | | //this.highLightOverlay(event.element_ids); |
| 826 | | } |
| 827 | | if (type == "ELEMENT") { |
| 828 | | var element = ELEMENT.getItem(id); |
| 829 | | var events = new Array(); |
| 830 | | $.each(element.events, function(index, event_id) { |
| 831 | | if (CURRENT_EVENT_HASH.hasItem(event_id)) { |
| 832 | | var event = EVENT.getItem(event_id); |
| 833 | | events.push(event); |
| 834 | | } |
| 835 | | }); |
| 836 | | if (events.length > 1) { |
| 837 | | var info_tabs = Utils.constructInfoWindowTabsHtml(events); |
| 838 | | this.gmap.openInfoWindowTabsHtml(latlng, info_tabs); |
| 839 | | } else { |
| 840 | | var info_div = Utils.constructInfoWindowHtml(events); |
| 841 | | this.gmap.openInfoWindowHtml(latlng, info_div); |
| 842 | | } |
| 843 | | //this.highLightOverlay(id); |
| 844 | | } |
| 845 | | }, |
| 846 | | highLightOverlay: function(element_ids) { |
| 847 | | $.each(element_ids, function(index, element_id) { |
| 848 | | if (CURRENT_ELEMENT_HASH.hasItem(element_id)) { |
| 849 | | var element = ELEMENT.getItem(element_id); |
| 850 | | element.highLight(); |
| 851 | | HIGH_LIGHT_ELEMENT.push(element_id); |
| 852 | | } |
| 853 | | }); |
| 854 | | }, |
| 855 | | |
| 856 | | deHighLightOverlay: function() { |
| 857 | | while (HIGH_LIGHT_ELEMENT.length > 0) { |
| 858 | | var element_id = HIGH_LIGHT_ELEMENT.pop(); |
| 859 | | var element = ELEMENT.getItem(element_id); |
| 860 | | //element.deHighLight(); |
| 861 | | } |
| 862 | | }, |
| 863 | | |
| 864 | | setCenter: function(center, level) { |
| 865 | | this.gmap.panTo(center); |
| 866 | | }, |
| 867 | | |
| 868 | | clearOverlays: function() { |
| 869 | | this.gmap.closeInfoWindow(); |
| 870 | | while (CURRENT_ELEMENT.length > 0) { |
| 871 | | var element_id = CURRENT_ELEMENT.pop(); |
| 872 | | var elem = ELEMENT.getItem(element_id); |
| 873 | | CURRENT_ELEMENT_HASH.removeItem(element_id); |
| 874 | | elem.removeFromMap(); |
| 875 | | } |
| 876 | | |
| 877 | | while (CURRENT_EVENT.length > 0) { |
| 878 | | var event_id = CURRENT_EVENT.pop(); |
| 879 | | CURRENT_EVENT_HASH.removeItem(element_id); |
| 880 | | } |
| 881 | | CURRENT_OVERLAY_ID = ""; |
| 882 | | }, |
| 883 | | |
| 884 | | updateOverlay: function(type, id) { |
| 885 | | if (type + '_' + id == CURRENT_OVERLAY_ID) |
| 886 | | return; |
| 887 | | CURRENT_OVERLAY_ID = type + '_' + id; |
| 888 | | this.clearOverlays(); |
| 889 | | |
| 890 | | var element_ids; |
| 891 | | var event_ids; |
| 892 | | if (type == 'E') { |
| 893 | | var big_event = BIG_EVENT.getItem(id); |
| 894 | | element_ids = big_event.element_ids; |
| 895 | | event_ids = big_event.event_ids; |
| 896 | | } else { |
| 897 | | var people = PEOPLE.getItem(id); |
| 898 | | element_ids = people.element_ids; |
| 899 | | event_ids = people.event_ids; |
| 900 | | } |
| 901 | | |
| 902 | | $.each(element_ids, function(index, element_id) { |
| 903 | | var elem = ELEMENT.getItem(element_id); |
| 904 | | elem.drawOnMap(); |
| 905 | | CURRENT_ELEMENT.push(element_id); |
| 906 | | CURRENT_ELEMENT_HASH.setItem(element_id, ""); |
| 907 | | }); |
| 908 | | |
| 909 | | $.each(event_ids, function(index, event_id) { |
| 910 | | CURRENT_EVENT.push(event_id); |
| 911 | | CURRENT_EVENT_HASH.setItem(event_id, ""); |
| 912 | | }); |
| 913 | | } |
| 914 | | }; |
| 915 | | |
| 916 | | function CharacterFilter() { |
| 917 | | var filter = function() { |
| 918 | | var shu_selected = false; |
| 919 | | var wei_selected = false; |
| 920 | | var wu_selected = false; |
| 921 | | if ($('#checkbox_shu').attr('checked')) shu_selected = true; |
| 922 | | if ($('#checkbox_wei').attr('checked')) wei_selected = true; |
| 923 | | if ($('#checkbox_wu').attr('checked')) wu_selected = true; |
| 924 | | $.each(PEOPLE_ARRAY, function(index, character){ |
| 925 | | if (character.kingdom == '蜀') { |
| 926 | | if (shu_selected) character.showNode(); |
| 927 | | else character.hideNode(); |
| 928 | | } |
| 929 | | if (character.kingdom == '魏') { |
| 930 | | if (wei_selected) character.showNode(); |
| 931 | | else character.hideNode(); |
| 932 | | } |
| 933 | | if (character.kingdom == '吳') { |
| 934 | | if (wu_selected) character.showNode(); |
| 935 | | else character.hideNode(); |
| 936 | | } |
| 937 | | }); |
| 938 | | _IG_AdjustIFrameHeight(); |
| 939 | | _IG_Analytics(UAACCT, '/click/characterFilter'); |
| 940 | | }; |
| 941 | | $('#checkbox_shu').click(filter); |
| 942 | | $('#checkbox_wei').click(filter); |
| 943 | | $('#checkbox_wu').click(filter); |
| 944 | | }; |
| 945 | | |
| 946 | | // Add the handler for changing the tile option using the drop down. |
| 947 | | function TilesSelect() { |
| 948 | | // remove half transparent version for IE6 |
| 949 | | if (navigator.appName == 'Microsoft Internet Explorer' && |
| 950 | | (navigator.appVersion.indexOf('MSIE 6') > 0)) { |
| 951 | | var sel = $('#select_tiles').get(0); |
| 952 | | for (var i = sel.length - 1; i >= 0; i--) { |
| 953 | | if (sel.options[i].value > 0.01 && sel.options[i].value < 0.99) { |
| 954 | | sel.remove(i); |
| 955 | | } |
| 956 | | } |
| 957 | | } |
| 958 | | var change_tiles = function() { |
| 959 | | var selVal = $('#select_tiles').attr('options')[$('#select_tiles').attr('options').selectedIndex].value; |
| 960 | | G_MAP.changeTiles(selVal); |
| 961 | | _IG_Analytics(UAACCT, '/click/tilesSelect/' + selVal); |
| 962 | | }; |
| 963 | | $('#select_tiles').change(change_tiles); |
| 964 | | }; |
| 965 | | |
| 966 | | function TabManager(in_tabs, active_tab) { |
| 967 | | var tabs = new Array(); |
| 968 | | var current_tab = ''; |
| 969 | | var shiftTab = function(active_tab) { |
| 970 | | if (active_tab == current_tab) return; |
| 971 | | $.each([active_tab, current_tab], function(index, tab){ |
| 972 | | var tab_container = $('#' + tab + '_cnt'); |
| 973 | | var tab_item = $('#' + tab + '_tab'); |
| 974 | | var tab_parent = tab_item.parent(); |
| 975 | | if (tab == active_tab) { |
| 976 | | tab_container.show(); |
| 977 | | tab_parent.removeClass('tab-inactive'); |
| 978 | | tab_parent.addClass('tab-active'); |
| 979 | | } else { |
| 980 | | tab_container.hide(); |
| 981 | | tab_parent.removeClass('tab-active'); |
| 982 | | tab_parent.addClass('tab-inactive'); |
| 983 | | } |
| 984 | | }); |
| 985 | | current_tab = active_tab; |
| 986 | | }; |
| 987 | | |
| 988 | | $.each(in_tabs, function(index, tab){ |
| 989 | | $('#' + tab + '_tab').click(function(){ |
| 990 | | shiftTab(tab); |
| 991 | | _IG_AdjustIFrameHeight(); |
| 992 | | _IG_Analytics(UAACCT, '/view/tab/' + tab); |
| 993 | | return false; |
| 994 | | }); |
| 995 | | tabs.push(tab); |
| 996 | | }); |
| 997 | | |
| 998 | | shiftTab(active_tab); |
| 999 | | }; |
| 1000 | | |
| 1001 | | function Disclaimer() { |
| 1002 | | var is_show = false; |
| 1003 | | var box = $('#disclaimer_box'); |
| 1004 | | $('#disclaimer_show').click(function(){ |
| 1005 | | if (is_show) { |
| 1006 | | box.hide(); |
| 1007 | | is_show = false; |
| 1008 | | } else { |
| 1009 | | box.show(); |
| 1010 | | is_show = true; |
| 1011 | | } |
| 1012 | | return false; |
| 1013 | | }); |
| 1014 | | $('#disclaimer_close').click(function(){ |
| 1015 | | box.hide(); |
| 1016 | | is_show = false; |
| 1017 | | return false; |
| 1018 | | }); |
| 1019 | | } |
| 1020 | | |
| | 136 | }}} |
| | 137 | * [註] 底下開始會稍微變動一下原始碼的順序，我們先來看 jQuery 的 main 進入點 |
| | 138 | {{{ |
