<div class="random">
		<a href="http://en.wikipedia.org/wiki/Special:Random" target="_blank">Random Article</a>
	</div>
	<div class="search-box-container" id="search-container">
		<i class="fa fa-search fa-3x" id="search"></i>
		<input placeholder="search" id="search-input" type="text" class="search" style="display: none;">
		<div class="content" style="margin-top: 90px;">
			<ul id="list">
			</ul>
		</div>
	</div>

body{
	transition: all 6s ease; 
}

.search-box-container{
	position: relative;
	width: 30%;
	height: 100px;
	background-color: #fefefe;
	margin: 0 auto;
	top: 200px;
	border-radius: 10px;
	text-align: center;
	transition: all 0.5 ease; 
}

.search-box-container i{
	margin-top: 25px;
}

.search{
	outline: none;
	width: 60%;
	margin: 0 auto;
	padding: 6px;
	font-size: 18px;
	text-align: center;
	border-radius: 5px;
	border: 2px solid rgb(129, 151, 224);
	position: relative;
	top: 30px;
}

.search-animation{
	width: 60%;
	margin: 0 auto;
	position: relative;
	transition: all 0.5s ease;
	top: 50px;
}

.random{
	text-align: center;
	position: relative;
	top: 40px;
}

.random a{
	text-decoration: none;
	padding: 5px 10px;
	background-color: #fefefe;
	border-radius: 2px;
}

a{
	text-decoration: none;
}

.content{
	width: 100%;
	height: 300px;
	/*background-color: #fff;*/
	border-radius: 5px;
}

.content ul{
	list-style: none;
	margin: 0px;
	padding: 0px;
	/*width: 100%;*/
}

.content ul li{
	margin: 10px 0px;
	text-align: justify;
	padding: 1px 50px;
	background-color: #fefefe;
	box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
	border-radius: 3px;
  border-left: 5px solid transparent;
}

.content ul li:hover{
	border-left: 5px solid #E91E63;
}

.snippet{
	text-indent: 20px;
	font-size: 18px;
	color: #00897B;
}

h3{
	color: rgba(103,58,183,1);
}

function changeBackground() {
	var color = '#'+Math.random().toString(16).slice(2,8);
	document.body.style.background=color;
}

$(document).ready(function() {
	changeBackground();
	setInterval(function() {
		changeBackground();
	},2000);

	// var dataList = {
	// 	'action': 'query',
	// 	'format': 'json',
	// 	'list': 'search',
	// 	'srprop': 'snippet',
	// 	'srlimit': 9,
	// 	'srsearch': 'apj'
	// };

	// $.ajax( {
	//     url: 'https://en.wikipedia.org/w/api.php',
	// 	dataType: 'jsonp',
	// 	data: dataList,
	// 	jsonp: 'callback',
	//     success: function(data) {
	//        console.log(data);
	//     }
	// });

	$('#search').click(function() {
		// $('#search-container').html('');
		$('#search-input').show();
		$('#search-container').addClass('search-animation');
		$('#search-input').focus();
		$('#search').remove();
	});

	$('#search-input').keypress(function(e) {
		if (e.which == 13) {
			var dataList = {
				'action': 'query',
				'format': 'json',
				'list': 'search',
				'srprop': 'snippet',
				'srlimit': 9,
				'srsearch': $(this).val()
			};

			$.ajax( {
				url: 'https://en.wikipedia.org/w/api.php',
				dataType: 'jsonp',
				data: dataList,
				jsonp: 'callback',
				success: function(data) {
					console.log(data);
					var html = '';
					for (var i = 0; i < data.query.search.length; i++) {
						var articleUrl = data.query.search[i].title.replace(/\s/g, "_")
						html += '<li><a target="_blank" href=http://en.wikipedia.org/wiki/'+articleUrl+'>';
						html += '<h3>'+data.query.search[i].title+'</h3></a>';
						html += '<p class="snippet">'+data.query.search[i].snippet;
						html += '</p>';
						html += '</li>';
					}
					console.log(html);
					$('#list').html(html);
				}
			});
		}
	});
});