Add support for country's endonyms (native names)

.gitignore

@@ -1 +1,2 @@
 bower_components
+.directory

README.md

@@ -136,8 +136,8 @@ Attribute			| Type			| Default		| Description
 ## Todo
 - state, provinces, and other types of flags
 - create iconset single image to save multiple requests
-- border drop shadow on images
-- Non-English country aliases
+- better border drop shadow on images
+- optimize image sizes
 - maybe: different image resolutions
 - maybe: squared flags
 

examples/countries.html

@@ -50,24 +50,26 @@ <h1>&lt;flag-icon&gt; Demos</h1>
 
 	<template id="show" bind>
 		<div class="show">
-			<h2>{{name}}</h2>
-			<p/>
+			<h2 style="margin-bottom:0px">{{name}}</h2>
+			{{endonym}}<br>
+			<p>
 			<flag-icon key="{{key}}"></flag-icon>
 			16x11 (default)
-			<p/>
+			<p>
 			<flag-icon key="{{key}}" width="100px"></flag-icon>
 			100px Scaled PNG
-			<p/>
+			<p>
 			<flag-icon key="{{key}}" svg width="100px"></flag-icon>
 			100px Scaled SVG
-			<p/>
+			<p>
 			<flag-icon key="{{key}}" svg width="350px"></flag-icon>
 			350px Scaled SVG
 		</div>
 	</template>
 
 	<script>
 	var countries = [
+		{ name: 'Abkhazia', alpha2: 'AB' },
 		{ name: 'Afghanistan', alpha2: 'AF', alpha3: 'AFG', numeric: 4 },
 		{ name: 'Åland Islands', alpha2: 'AX', alpha3: 'ALA', numeric: 248 },
 		{ name: 'Albania', alpha2: 'AL', alpha3: 'ALB', numeric: 8 },
@@ -323,21 +325,26 @@ <h2>{{name}}</h2>
 		{ name: 'United Nations', key: 'unitednations' },
 		{ name: 'England', key: 'england' },
 		{ name: 'Scotland', key: 'scotland' },
-		{ name: 'Wales', key: 'wales' }
+		{ name: 'Wales', key: 'wales' },
+		{ name: 'South Ossetia', key: 'southossetia' },
+		{ name: 'Northern Cyprus', key: 'northerncyprus' },
+		{ name: 'Kosovo', key: 'XK' },
+		{ name: 'Catalonia', key: 'catalonia' }
 	]
 	var showModel = {
 		name: 'Canada',
+		endonym: '',
 		key: 'ca'
 	};
+	var flagicon;
 	function changeShow(key,isOther){
 		showModel.key = key;
-		if(isOther){
-			showModel.name = other.filter(function(row){ return row.key == key; })[0].name;
-		}else{
-			showModel.name = countries.filter(function(row){ return row.alpha2 == key; })[0].name;
-		}
+		var country = flagicon.findCountry(key);
+		showModel.name = country.title;
+		showModel.endonym = country.data.endonym ? country.data.endonym[0] : '';
 	}
 	window.addEventListener('polymer-ready', function(){
+		flagicon = new FlagIcon();
 		document.getElementById('otherTable').model = {
 			other: other
 		};

examples/index.html

@@ -30,33 +30,18 @@ <h1>&lt;flag-icon&gt; Demos</h1>
 
 	<index-links page="index.html" examples></index-links>
 
-	<h2>Many input formats are allowed</h2>
-
-	<div style="margin-left:50px;">
-		<flag-icon key="Korea Republic"></flag-icon><pre>&lt;flag-icon key="Korea Republic"&gt;&lt;/flag-icon&gt;</pre>
-		<br>
-		<flag-icon key="Republic of Korea"></flag-icon><pre>&lt;flag-icon key="Republic of Korea"&gt;&lt;/flag-icon&gt;</pre>
-		<br>
-		<flag-icon key="Korea, Republic of"></flag-icon><pre>&lt;flag-icon key="Korea, Republic of"&gt;&lt;/flag-icon&gt;</pre>
-		<br>
-		<flag-icon key="RePUBlic of KOREA"></flag-icon><pre>&lt;flag-icon key="RePUBlic of KOREA"&gt;&lt;/flag-icon&gt;</pre>
-		<br>
-		<flag-icon key="KR"></flag-icon><pre>&lt;flag-icon key="KR"&gt;&lt;/flag-icon&gt;</pre>
-		<br>
-		<flag-icon key="KOR"></flag-icon><pre>&lt;flag-icon key="KOR"&gt;&lt;/flag-icon&gt;</pre>
-		<br>
-		<flag-icon key="410"></flag-icon><pre>&lt;flag-icon key="410"&gt;&lt;/flag-icon&gt;</pre>
-		<br>
-		<flag-icon key="South Korea"></flag-icon><pre>&lt;flag-icon key="South Korea"&gt;&lt;/flag-icon&gt;</pre>
-	</div>
-
 	<h2>Try and Find a Flag</h2>
 
+	<polymer-element name="json-stringify" attributes="data">
+		<template><pre>{{json}}</pre></template>
+		<script>Polymer('json-stringify', { dataChanged: function(o,n){ this.json = JSON.stringify(n); } });</script>
+	</polymer-element>
+
 	<template id="test" bind>
 		<table>
 			<tr>
 				<td rowspan="99" style="padding-right:20px">
-					<flag-icon key="{{key}}" width="72px" svg="{{svg}}" usstate="{{usstate}}" canada="{{canada}}"></flag-icon>
+					<flag-icon key="{{key}}" width="72px" svg="{{svg}}" usstate="{{usstate}}" canada="{{canada}}" data="{{data}}"></flag-icon>
 				</td>
 			</tr>
 			<tr>
@@ -78,7 +63,38 @@ <h2>Try and Find a Flag</h2>
 				</td>
 			</tr>
 		</table>
+		<json-stringify data="{{data}}"></json-stringify>
 	</template>
+
+	<h2>Many input formats are allowed</h2>
+
+	<div style="margin-left:10px;">
+		<flag-icon key="Korea Republic"></flag-icon><pre>&lt;flag-icon key="Korea Republic"&gt;&lt;/flag-icon&gt;</pre>
+		<br>
+		<flag-icon key="Republic of Korea"></flag-icon><pre>&lt;flag-icon key="Republic of Korea"&gt;&lt;/flag-icon&gt;</pre>
+		<br>
+		<flag-icon key="Korea, Republic of"></flag-icon><pre>&lt;flag-icon key="Korea, Republic of"&gt;&lt;/flag-icon&gt;</pre>
+		<br>
+		<flag-icon key="RePUBlic of KOREA"></flag-icon><pre>&lt;flag-icon key="RePUBlic of KOREA"&gt;&lt;/flag-icon&gt;</pre>
+		<br>
+		<flag-icon key="KR"></flag-icon><pre>&lt;flag-icon key="KR"&gt;&lt;/flag-icon&gt;</pre>
+		<br>
+		<flag-icon key="KOR"></flag-icon><pre>&lt;flag-icon key="KOR"&gt;&lt;/flag-icon&gt;</pre>
+		<br>
+		<flag-icon key="410"></flag-icon><pre>&lt;flag-icon key="410"&gt;&lt;/flag-icon&gt;</pre>
+		<br>
+		<flag-icon key="South Korea"></flag-icon><pre>&lt;flag-icon key="South Korea"&gt;&lt;/flag-icon&gt;</pre>
+	</div>
+	<h3>Including Endonyms</h3>
+	<div style="margin-left:10px;">
+		<flag-icon key="Hanguk"></flag-icon><pre>&lt;flag-icon key="Hanguk"&gt;&lt;/flag-icon&gt;</pre>
+		<br>
+		<flag-icon key="한국"></flag-icon><pre>&lt;flag-icon key="한국"&gt;&lt;/flag-icon&gt;</pre>
+		<br>
+		<flag-icon key="韓國"></flag-icon><pre>&lt;flag-icon key="韓國"&gt;&lt;/flag-icon&gt;</pre>
+		<br>
+		<flag-icon key="Nam-josŏn"></flag-icon><pre>&lt;flag-icon key="Nam-josŏn"&gt;&lt;/flag-icon&gt;</pre>
+	</div>
 	<script>
 	function classbind(t,text){
 		model.usstate = false;