<header id="header">
	<h1 class="header_title text-center">
		<p class="header_title_text">ゆるキャラ　名前検索</p>
	</h1>
</header>
<main id="main">
	<div ng-app="myApp" ng-controller="myCtrl">
			<div class="main_search">
				<input type="text" ng-model="type" size="20" placeholder="※ゆるキャラ名を入力...">
				<button ng-click="onClick()" class="main_search_btn">検索</button>
			</div> <!-- main_search -->
			<div class="main_result">
				<p class="main_result_show" ng-show="show">読込中…</p>
				<ul>
					<li class="main_result_item" ng-repeat="list in lists | filter:type track by $index">{{list}}</li>
				</ul>
			</div> <!-- main_result -->
	</div> <!-- angular wrap -->
</main>
<footer id="footer">
	<p class="footer_text text-center">
	　data by <a href="http://linkdata.org/work/rdf1s3454i">KeitarouNakayama/ご当地キャラクター</a> __created	by <a href="https://twitter.com/0310lan">0310lan</a>
	</p>
</footer>

body {
	margin: 0;
	padding: 0;
	background-color: #FFCC33;
}
ul, li {
	list-style-type: none;
}
#header {
	padding: 20px 10px;
}
.header_title {}
.header_title_text {
	color: #ffffff;
	font-weight: bold;
	font-size: 120%;
	text-shadow: 1px 1px 2px #000;
}
#main {
	padding: 10px;
}
.main_search {
	width: 300px;
	margin: auto;
	padding: 10px;
	margin: auto;
}
.main_search input {
	width: 220px;
	border:1px solid #000;
}
.main_search_btn {
	min-width: 50px;
	border:1px solid #000;
}
.main_result {
	margin-top: 40px;
}
.main_result_show {
	padding: 10px 30px;
	font-weight: bold;
	font-size: 1.2em;
}
.main_result ul {
	overflow: hidden;
}
.main_result_item {
	width: 120px;
	height: 120px;
	padding: 5px;
	margin: 5px;
	background-color: #4169E1;
	color: #ffffff;
	fot-size: 1em;
	font-weight: bold;
	float: left;
	overflow: hidden;
}
#footer {
	margin-top: 40px;
	padding: 10px;
	border-top: 1px solid #aaa;
}
.footer_text {}

angular.module('myApp', [])
.controller('myCtrl', ["$scope", "$http", function($scope, $http) {
	var url = "http://linkdata.org/api/1/rdf1s3454i/local_character_rdf.json?callback=JSON_CALLBACK";
	var nameFolder = "http://imi.ipa.go.jp/ns/core/rdf#名称";
	$scope.lists = [];
	$scope.show = false;
	$scope.onClick = function() {
			$scope.show = true;
		$http.jsonp(url).success(function(data) {
			var num = 1;
			angular.forEach(data, function(value, key, obj) {
				$scope.lists[num++] = value[nameFolder][0].value;
			})
			$scope.show = false;
		})
		.error(function(err) {
			alert(err);
		})
	}
}]);