<?xml version="1.0"  encoding="utf-8" ?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:msxsl="urn:schemas-microsoft-com:xslt" xmlns:user="urn:user-namespace-here">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Taiwan in Depth</title>
<link href="/xslGip/2011/css/design.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="/xslGip/2011/css/imageFlow.css"><script type="text/javascript" src="/xslGip/2011/js/multimenu.js"></script><script type="text/javascript">
				
var imf = function () {
	var lf = 0;
	var instances = [];
	function getElementsByClass (object, tag, className) {
		var o = object.getElementsByTagName(tag);
		for ( var i = 0, n = o.length, ret = []; i < n; i++)
			if (o[i].className == className) ret.push(o[i]);
		if (ret.length == 1) ret = ret[0];
		return ret;
	}
	function addEvent (o, e, f) {
		if (window.addEventListener) o.addEventListener(e, f, false);
		else if (window.attachEvent) r = o.attachEvent('on' + e, f);
	}
	function createReflexion (cont, img) {
		var flx = false;
		if (document.createElement("canvas").getContext) {
			flx = document.createElement("canvas");
			flx.width = img.width;
			flx.height = img.height;
			var context = flx.getContext("2d");
			context.translate(0, img.height);
			context.scale(1, -1);
			context.drawImage(img, 0, 0, img.width, img.height);
			context.globalCompositeOperation = "destination-out";
			var gradient = context.createLinearGradient(0, 0, 0, img.height * 2);
			gradient.addColorStop(1, "rgba(255, 255, 255, 0)");
			gradient.addColorStop(0, "rgba(255, 255, 255, 1)");
			context.fillStyle = gradient;
			context.fillRect(0, 0, img.width, img.height * 2);
		} else {
			/* ---- DXImageTransform ---- */
			flx     = document.createElement('img');
			flx.src = img.src;
			flx.style.filter = 'flipv progid:DXImageTransform.Microsoft.Alpha(' +
			                   'opacity=50, style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy=' +
							   (img.height * .25) + ')';
		}
		/* ---- insert Reflexion ---- */
		flx.style.position = 'absolute';
		flx.style.left     = '-1000px';
		cont.appendChild(flx);
		return flx;
	}
	/* //////////// ==== ImageFlow Constructor ==== //////////// */
	function ImageFlow(oCont, size, zoom, border) {
		this.diapos     = [];
		this.scr        = false;
		this.size       = size;
		this.zoom       = zoom;
		this.bdw        = border;
		this.oCont      = oCont;
		this.oc         = document.getElementById(oCont);
		this.scrollbar  = getElementsByClass(this.oc,   'div', 'scrollbar');
		this.text       = getElementsByClass(this.oc,   'div', 'text');
		this.title      = getElementsByClass(this.text, 'div', 'title');
		this.legend     = getElementsByClass(this.text, 'div', 'legend');
		this.bar        = getElementsByClass(this.oc,   'img', 'bar');
		this.arL        = getElementsByClass(this.oc,   'img', 'arrow-left');
		this.arR        = getElementsByClass(this.oc,   'img', 'arrow-right');
		this.bw         = this.bar.width;
		this.alw        = this.arL.width - 5;
		this.arw        = this.arR.width - 5;
		this.bar.parent = this.oc.parent  = this;
		this.arL.parent = this.arR.parent = this;
		this.view       = this.back       = -1;
		this.resize();
		this.oc.onselectstart = function () { return false; }
		/* ---- create images ---- */
		var img   = getElementsByClass(this.oc, 'div', 'bank').getElementsByTagName('a');
		this.NF = img.length;
		for (var i = 0, o; o = img[i]; i++) {
			this.diapos[i] = new Diapo(this, i,
										o.rel,
										o.title || '- ' + i + ' -',
										o.innerHTML || o.rel,
										o.href || '',
										o.target || '_self'
			);
		}
		/* ==== add mouse wheel events ==== */
		if (window.addEventListener)
			this.oc.addEventListener('DOMMouseScroll', function(e) {
				this.parent.scroll(-e.detail);
			}, false);
		else this.oc.onmousewheel = function () {
			this.parent.scroll(event.wheelDelta);
		}
		/* ==== scrollbar drag N drop ==== */
		this.bar.onmousedown = function (e) {
			if (!e) e = window.event;
			var scl = e.screenX - this.offsetLeft;
			var self = this.parent;
			/* ---- move bar ---- */
			this.parent.oc.onmousemove = function (e) {
				if (!e) e = window.event;
				self.bar.style.left = Math.round(Math.min((self.ws - self.arw - self.bw), Math.max(self.alw, e.screenX - scl))) + 'px';
				self.view = Math.round(((e.screenX - scl) ) / (self.ws - self.alw - self.arw - self.bw) * self.NF);
				if (self.view != self.back) self.calc();
				return false;
			}
			/* ---- release scrollbar ---- */
			this.parent.oc.onmouseup = function (e) {
				self.oc.onmousemove = null;
				return false;
			}
			return false;
		}
		/* ==== right arrow ==== */
		this.arR.onclick = this.arR.ondblclick = function () {
			if (this.parent.view < this.parent.NF - 1)
				this.parent.calc(1);
		}
		/* ==== Left arrow ==== */
		this.arL.onclick = this.arL.ondblclick = function () {
			if (this.parent.view > 0)
				this.parent.calc(-1);
		}
	}
	/* //////////// ==== ImageFlow prototype ==== //////////// */
	ImageFlow.prototype = {
		/* ==== targets ==== */
		calc : function (inc) {
			if (inc) this.view += inc;
			var tw = 0;
			var lw = 0;
			var o = this.diapos[this.view];
			if (o && o.loaded) {
				/* ---- reset ---- */
				var ob = this.diapos[this.back];
				if (ob && ob != o) {
					ob.img.className = 'diapo';
					ob.z1 = 1;
				}
				/* ---- update legend ---- */
				this.title.replaceChild(document.createTextNode(o.title), this.title.firstChild);
				this.legend.replaceChild(document.createTextNode(o.text), this.legend.firstChild);
				/* ---- update hyperlink ---- */
				if (o.url) {
					o.img.className = 'diapo link';
					window.status = 'hyperlink: ' + o.url;
				} else {
					o.img.className = 'diapo';
					window.status = '';
				}
				/* ---- calculate target sizes & positions ---- */
				o.w1 = Math.min(o.iw, this.wh * .6) * o.z1;
				var x0 = o.x1 = (this.wh * .6) - (o.w1 * .6);
				var x = x0 + o.w1 + this.bdw;
				for (var i = this.view + 1, o; o = this.diapos[i]; i++) {
					if (o.loaded) {
						o.x1 = x;
						o.w1 = (this.ht / o.r) * this.size;
						x   += o.w1 + this.bdw;
						tw  += o.w1 + this.bdw;
					}
				}
				x = x0 - this.bdw;
				for (var i = this.view - 1, o; o = this.diapos[i]; i--) {
					if (o.loaded) {
						o.w1 = (this.ht / o.r) * this.size;
						o.x1 = x - o.w1;
						x   -= o.w1 + this.bdw;
						tw  += o.w1 + this.bdw;
						lw  += o.w1 + this.bdw;
					}
				}
				/* ---- move scrollbar ---- */
				if (!this.scr && tw) {
					var r = (this.ws - this.alw - this.arw - this.bw) / tw;
					this.bar.style.left = Math.round(this.alw + lw * r) + 'px';
				}
				/* ---- save preview view ---- */
				this.back = this.view;
			}
		},
		/* ==== mousewheel scrolling ==== */
		scroll : function (sc) {
			if (sc < 0) {
				if (this.view < this.NF - 1) this.calc(1);
			} else {
				if (this.view > 0) this.calc(-1);
			}
		},
		/* ==== resize  ==== */
		resize : function () {
			this.wh = this.oc.clientWidth;
			this.ht = this.oc.clientHeight;
			this.ws = this.scrollbar.offsetWidth;
			this.calc();
			this.run(true);
		},
		/* ==== move all images  ==== */
		run : function (res) {
			var i = this.NF;
			while (i--) this.diapos[i].move(res);
		}
	}
	/* //////////// ==== Diapo Constructor ==== //////////// */
	Diapo = function (parent, N, src, title, text, url, target) {
		this.parent        = parent;
		this.loaded        = false;
		this.title         = title;
		this.text          = text;
		this.url           = url;
		this.target        = target;
		this.N             = N;
		this.img           = document.createElement('img');
		this.img.src       = src;
		this.img.parent    = this;
		this.img.className = 'diapo';
		this.x0            = this.parent.oc.clientWidth;
		this.x1            = this.x0;
		this.w0            = 0;
		this.w1            = 0;
		this.z1            = 1;
		this.img.parent    = this;
		this.img.onclick   = function() { this.parent.click(); }
		this.parent.oc.appendChild(this.img);
		/* ---- display external link ---- */
		if (url) {
			this.img.onmouseover = function () { this.className = 'diapo link';	}
			this.img.onmouseout  = function () { this.className = 'diapo'; }
		}
	}
	/* //////////// ==== Diapo prototype ==== //////////// */
	Diapo.prototype = {
		/* ==== HTML rendering ==== */
		move : function (res) {
			if (this.loaded) {
				var sx = this.x1 - this.x0;
				var sw = this.w1 - this.w0;
				if (Math.abs(sx) > 2 || Math.abs(sw) > 2 || res) {
					/* ---- paint only when moving ---- */
					this.x0 += sx * .1;
					this.w0 += sw * .1;
					if (this.x0 < this.parent.wh && this.x0 + this.w0 > 0) {
						/* ---- paint only visible images ---- */
						this.visible = true;
						var o = this.img.style;
						var h = this.w0 * this.r;
						/* ---- diapo ---- */
						o.left   = Math.round(this.x0) + 'px';
						o.bottom = Math.floor(this.parent.ht * .25) + 'px';
						o.width  = Math.round(this.w0) + 'px';
						o.height = Math.round(h) + 'px';
						/* ---- reflexion ---- */
						if (this.flx) {
							var o = this.flx.style;
							o.left   = Math.round(this.x0) + 'px';
							o.top    = Math.ceil(this.parent.ht * .75 + 1) + 'px';
							o.width  = Math.round(this.w0) + 'px';
							o.height = Math.round(h) + 'px';
						}
					} else {
						/* ---- disable invisible images ---- */
						if (this.visible) {
							this.visible = false;
							this.img.style.width = '0px';
							if (this.flx) this.flx.style.width = '0px';
						}
					}
				}
			} else {
				/* ==== image onload ==== */
				if (this.img.complete && this.img.width) {
					/* ---- get size image ---- */
					this.iw     = this.img.width;
					this.ih     = this.img.height;
					this.r      = this.ih / this.iw;
					this.loaded = true;
					/* ---- create reflexion ---- */
					this.flx    = createReflexion(this.parent.oc, this.img);
					if (this.parent.view < 0) this.parent.view = this.N;
					this.parent.calc();
				}
			}
		},
		/* ==== diapo onclick ==== */
		click : function () {
			if (this.parent.view == this.N) {
				/* ---- click on zoomed diapo ---- */
				if (this.url) {
					/* ---- open hyperlink ---- */
					window.open(this.url, this.target);
				} else {
					/* ---- zoom in/out ---- */
					//this.z1 = this.z1 == 1 ? this.parent.zoom : 1;
					//this.parent.calc();
				}
			} else {
				/* ---- select diapo ---- */
				this.parent.view = this.N;
				this.parent.calc();
			}
			return false;
		}
	}
	/* //////////// ==== public methods ==== //////////// */
	return {
		/* ==== initialize script ==== */
		create : function (div, size, zoom, border) {
			/* ---- instanciate imageFlow ---- */
			var load = function () {
				var loaded = false;
				var i = instances.length;
				while (i--) if (instances[i].oCont == div) loaded = true;
				if (!loaded) {
					/* ---- push new imageFlow instance ---- */
					instances.push(
						new ImageFlow(div, size, zoom, border)
					);
					/* ---- init script (once) ---- */
					if (!imf.initialized) {
						imf.initialized = true;
						/* ---- window resize event ---- */
						addEvent(window, 'resize', function () {
							var i = instances.length;
							while (i--) instances[i].resize();
						});
						/* ---- stop drag N drop ---- */
						addEvent(document.getElementById(div), 'mouseout', function (e) {
							if (!e) e = window.event;
							var tg = e.relatedTarget || e.toElement;
							if (tg && tg.tagName == 'HTML') {
								var i = instances.length;
								while (i--) instances[i].oc.onmousemove = null;
							}
							return false;
						});
						/* ---- set interval loop ---- */
						setInterval(function () {
							var i = instances.length;
							while (i--) instances[i].run();
						}, 16);
					}
				}
			}
			/* ---- window onload event ---- */
			addEvent(window, 'load', function () { load(); });
		}
	}
}();

/* ==== create imageFlow ==== */
//          div ID    , size, zoom, border
imf.create("imageFlow", 0.15, 1.5, 10);

				</script></head>
<body>
<div class="wrap">
<div class="header"><span class="header"><img src="/xslGip/2011/images/logo.jpg"></span><div class="nav">
<ul>
<li><a href="dp.asp?mp=10" title="Home">Home</a></li>
<li><a href="http://taiwantoday.tw/dp.asp?mp=9" title="Back to Taiwan Today">Back to Taiwan Today</a></li>
<li><a href="sitemap.asp?mp=10" title="Sitemap">Sitemap</a></li>
<li><a href="/ct.asp?xItem=192421&amp;ctNode=1960&amp;mp=10" title="About Us">About Us</a></li>
<li><a href="http://taiwantoday.tw/sp.asp?xdurl=ttcontact.asp&amp;mp=9" target="_nwGip" title="Feedback">Feedback</a></li>
</ul>
</div><script language="javascript">	
			
				
			 function clear99()
			 {
				
			    document.formname2.keyword2.value ="";	
			 }
      
			 function clear2()
			 {
				
			    document.formname2.keyword2.value ="";	
			 }
			 
			 
			 function clear3()
			 {
				
			    document.epaperForm.email.value ="";	
			 }
			 	
			 function checkForm2()
			{  	
				if((document.epaperForm.email.value=="") ||(document.epaperForm.email.value=="email") )
				{
					alert("Please Input your email");
					return false;
				}
				
			   
			   
			  if ( ((document.epaperForm.email.value).length < 3) || (document.epaperForm.email.value.indexOf('@') < 0) || (document.epaperForm.email.value.indexOf('.') < 0)) 
			   
				
				  {
				  alert("Your email format is Wrong");
					return false;
				   
				  }
			 } 
             
             function checksearchform()
            {
                if((document.formname2.content.value=="Keyword") || (document.formname2.content.value==""))
                {
                    alert("Please input keyword");
                    return false;
                }
                else
                {
                    document.formname2.submit();
                }
            }
				  
			 </script><div class="search">
<form name="formname2" method="post" action="http://search.taiwan.gov.tw/search/wSite/Control" target="_blank"><img src="/xslGip/2011/images/search.png" width="69" height="21"> <input id="queryWord" name="queryWord" type="text" class="text" value="keywords" size="15" onFocus="document.formname2.queryWord.value='';return false;"> <input type="hidden" id="lang" name="lang" value="01"><input type="hidden" id="function" name="function" value="BrowseCate"><input type="hidden" id="doReQuery" name="doReQuery" value="true"><input type="hidden" id="fieldName" name="fieldName" value="fullText"><input type="hidden" id="groupNames_real_F002_077" name="groupNames_real" value="259"><input name="submit1" type="button" value="GO" class="btn2" onclick="check()"><script language="javascript">	
            function check(){
               if (document.formname2.queryWord.value.length==0 || document.formname2.queryWord.value=='keywords') 
               {alert('Please input query keyword!'); 
               } 
                else
                {document.formname2.submit();}
            }
         </script></form>
</div>
</div>
<table width="100%">
<tr>
<td width="32%">
<div class="leftmenu">
<ul>
<li><img width="53" height="44" src="/xslGip/2011/images/menu_pic_1.jpg"><a href="lp.asp?CtNode=1915&CtUnit=164&BaseDSD=12&mp=10" title="Politics">Politics</a></li>
<li><img width="53" height="44" src="/xslGip/2011/images/menu_pic_2.jpg"><a href="lp.asp?CtNode=1916&CtUnit=164&BaseDSD=12&mp=10" title="Economy">Economy</a></li>
<li><img width="53" height="44" src="/xslGip/2011/images/menu_pic_3.jpg"><a href="lp.asp?CtNode=1917&CtUnit=164&BaseDSD=12&mp=10" title="Cross-Strait Relations">Cross-Strait Relations</a></li>
<li><img width="53" height="44" src="/xslGip/2011/images/menu_pic_4.jpg"><a href="lp.asp?CtNode=1918&CtUnit=164&BaseDSD=12&mp=10" title="Global Outreach">Global Outreach</a></li>
<li><img width="53" height="44" src="/xslGip/2011/images/menu_pic_5.jpg"><a href="lp.asp?CtNode=1920&CtUnit=164&BaseDSD=12&mp=10" title="Environmental Protection">Environmental Protection</a></li>
<li><img width="53" height="44" src="/xslGip/2011/images/menu_pic_6.jpg"><a href="lp.asp?CtNode=1921&CtUnit=164&BaseDSD=12&mp=10" title="Science and Technology">Science and Technology</a></li>
<li><img width="53" height="44" src="/xslGip/2011/images/menu_pic_7.jpg"><a href="lp.asp?CtNode=1922&CtUnit=164&BaseDSD=12&mp=10" title="Arts and Culture">Arts and Culture</a></li>
<li><img width="53" height="44" src="/xslGip/2011/images/menu_pic_8.jpg"><a href="lp.asp?CtNode=1923&CtUnit=164&BaseDSD=12&mp=10" title="Society">Society</a></li>
<li><img width="53" height="44" src="/xslGip/2011/images/menu_pic_9.jpg"><a href="lp.asp?CtNode=1924&CtUnit=164&BaseDSD=12&mp=10" title="History">History</a></li>
<li><img width="53" height="44" src="/xslGip/2011/images/menu_pic_10.jpg"><a href="lp.asp?CtNode=1925&CtUnit=164&BaseDSD=12&mp=10" title="Statistics">Statistics</a></li>
</ul>
</div>
</td>
<td width="68%">
<table width="100%">
<tr>
<td>
</td>
</tr>
<tr>
<td height="160px">
<div class="button">
<ul>
<li><a href="lp.asp?CtNode=1964&amp;CtUnit=164&amp;BaseDSD=12&amp;mp=10" title="East China Sea Peace Initiative">East China Sea Peace Initiative</a></li>
<li><a href="lp.asp?CtNode=1984&amp;CtUnit=164&amp;BaseDSD=12&amp;mp=10" title="Fatal Attack on ROC Fishing Boat">Fatal Attack on ROC Fishing Boat</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<div id="imageFlow">
<div class="bank"><a rel="public/Data/352114421929.jpg" title="Voice of reason">ROC Minister of Foreign Affairs David Y.L. Lin reiterates May 17 that the death of Guang Da Xing No. 28 crewman Hong Shi-cheng was not an “unintended killing.”(CNA)</a><a rel="public/Data/352114435529.jpg" title="Crime scene">A map shows the location of Taiwan fishing boat Guang Da Xing No. 28 when it was attacked by a Philippine government vessel, well within the ROC’s exclusive economic zone. (CNA)</a><a rel="public/Data/352114444929.jpg" title="Justice demanded">ROC Deputy Minister of Justice Chen Ming-tang displays May 17 a chart showing the location of the 45 bullet entry points on Taiwan fishing boat Guang Da Xing No. 28, to demonstrate that the attack targeted the cabin. (CNA)</a><a rel="public/Data/352114455729.jpg" title="Business as usual">Filipinos attend church in Taipei City May 19. The ROC government has urged the public to treat Philippine nationals fairly, despite outrage over the killing of Taiwan fisherman Hong Shi-cheng. (CNA) </a><a rel="public/Data/352114463229.jpg" title="Fair play">ROC citizens carry placards May 19 declaring solidarity with Philippine workers in Taiwan at places in Taipei City where the migrant workers gather on their day off. (CNA)</a><a rel="public/Data/351418262829.jpg" title="Powerful patrol">The ROC Coast Guard Administration sends May 13 its largest and newest vessel, the 2,000 metric ton CG Tainan, to beef up patrols in disputed areas of the South China Sea. (Courtesy CGA)</a><a rel="public/Data/351418284029.jpg" title="Protecting fishermen">ROC sailors man a machine gun on a navy frigate May 12. The vessel joined coast guard ships protecting Taiwan boats fishing near disputed waters in the South China Sea. (CNA)</a><a rel="public/Data/351418291929.jpg" title="A minute’s silence">ROC Minister of Foreign Affairs David Y. L. Lin leads government officials in a minute’s silence for slain Taiwan fisherman Hong Shi-cheng May 13 in Taipei City. Hong was killed in an attack on his trawler by a Philippine government vessel. (CNA)</a></div>
<div class="text">
<div class="title">Loading</div>
<div class="legend">Please wait...</div>
</div>
<div class="scrollbar"><img class="track" src="/xslGip/2011/images/sb.gif" alt=""><img class="arrow-left" src="/xslGip/2011/images/sl.gif" alt=""><img class="arrow-right" src="/xslGip/2011/images/sr.gif" alt=""><img class="bar" src="/xslGip/2011/images/sc.gif" alt=""></div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div id="footer"><DIV class="footer"><!--DIV class="copyright"><div class="Link"><UL><LI><A href="ct.asp?xItem=182311&ctNode=1942&mp=10">Privacy Policy</A></LI><LI><A href="ct.asp?xItem=182310&ctNode=1942&mp=10">Disclaimer</A></LI></UL></DIV></DIV--> <!--可輸入版權說明相關文字或Html--><BR/><p>Best viewed at 1024 x 768 resolution.<br/>Copyright&copy © 2012 Ministry of Foreign Affairs, Republic of China (Taiwan)&nbsp;&nbsp; Tel: (886-2) 23970180 Fax: (886-2) 23568233 </p><!--footer End--></DIV></div>
</body>
</html>
