<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>ಠ_ಠ</title>
<!--
-	Hello y'all!
-	This page is crafted by Mathijs Lagerberg (http://monkeyinmysoup.com)
-	for fun and is poorly tested.
-
-	Feel free to copy source code, emoticons or ideas from this page
-	to use for your own projects. Use the above website for giving Google juice,
- 	kudos or credits, but only if you want to.
-
-	Have fun!
-->
<link rel="shortcut icon" type="image/png" href="emots_favicon.png" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<style type="text/css">
* {
	padding: 0;
	margin: 0;
	outline: 0;
	border: 0;
}
body {
	background: #8AC1E6;
	color: #222;
	width: 100%;
	font-family: sans-serif;
	font-size: 12pt;
}
h1	{
	font-size: 16pt;
	color: #fff;
	text-shadow: rgba(0,0,0,0.9) 0px 1px 5px;
	margin-bottom: 0.5em;
}
p	{ margin: 1em 0; }
p, a, dt, dd, td { text-shadow: rgba(0,0,0,0.4) 0px 1px 1px;}
a 	{
	color: black;
	opacity: 0.5;
	-webkit-transition: opacity 0.3s linear;
	-moz-transition: opacity 0.3s linear;
	-ms-transition: opacity 0.3s linear;
	-o-transition: opacity 0.3s linear;
	transition: opacity 0.3s linear;
	}
a:hover {
	opacity: 1;
}
hr	{ height: 1px; background: #333; margin: 2em; box-shadow: 0px 1px 3px rgba(0,0,0,0.5);}
.smaller { font-size: 80%;}
td {
	background: rgba(255,255,255,0.3);
	border-radius: 3px;
	padding: 1em;
	spacing: no-wrap;
	height: 4em;
	text-align: center;
	cursor: pointer;
	display: none;
	-webkit-transition: background 0.3s linear;
	-moz-transition: background 0.3s linear;
	-ms-transition: background 0.3s linear;
	-o-transition: background 0.3s linear;
	transition: background 0.3s linear;
}
#bookmarklet {
	position: absolute;
	right: 0px;
	top: 0px;
	margin: 8px;
	color: #ccc;
}
#bookmarklet a {
	color: #ccc;
}
#footer {
	position: absolute;
	right: 0px;
	bottom: 0px;
	margin: 1em;
}
td:hover {
	background: rgba(255,255,255,0.6);
}
#copyarea {
	visibility: hidden;
}
#copy {
	border: 1px solid #333;
	border-radius: 3px;
	padding: 0.5em;
}
.popup {
	border-radius: 10px;
	background: rgba(0,0,0,0.6);
	color: white;
	padding: 10px;
	text-shadow: 0 1px 3px #000;
	box-shadow: 0 1px 3px rgba(0,0,0,0.4);

	position: absolute;
	width: 100px;
	right: -2px;
	bottom: 40px;
}
#tab2, #tab3, #tab4 { display: none;}
.tabbar {
	background: #444;
	padding: 1em 1em 0 1em;
	margin: 0;
}
.tab {
	display: inline;
	cursor: pointer;
	padding: 0.5em;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	color: white;
	font-size: 14px;
	text-shadow: 0 1px 3px #000;
	font-weight: bold;
}
.tab.active {
	background: #8AC1E6;
}
</style>
</head>
<body>

<div class="tabbar">
<ul>
<li data-tab="tab1" class="tab active" title="Happy / positive / ಠ_ಠ">Popular</li>
<li data-tab="tab2" class="tab" title="Sad / negative / rage / pedo">Page 2</li>
<li data-tab="tab3" class="tab" title="Misc.">Page 3</li>
</ul>
</div>

<div class="tabcontent" id="tab1">
	<table width="100%" border="0" cellpadding="0" cellspacing="10">
	  <tr>
		<td width="20%" valign="middle" title="Dude.">ಠ_ಠ</td>
		<td width="20%" valign="middle" title="So beautiful">ಥ_ಥ</td>
		<td width="20%" valign="middle" title="Yay">◕‿◕</td>
		<td width="20%" valign="middle" title="Holy crap!">⊙▃⊙</td>
		<td width="20%" valign="middle" title="Quite">┌─┐<br />
┴─┴<br />
 ಠ_ರೃ</td>
	  </tr>
	  <tr>
		<td valign="middle" title="Yeeeaaaahhhhhh!">(⌐■_■)</td>
		<td valign="middle" title="Like a boss">（￣ー￣）</td>
		<td valign="middle" title="I Dunno LOL!!">¯\(°_o)/¯</td>
		<td valign="middle" title="Sup">¯\_(ツ)_/¯</td>
		<td valign="middle" title="Zombie dude.">ರ_ರ</td>
	  </tr>
	  <tr>
		<td valign="middle" title="Heeeeey bro">(✌ﾟ∀ﾟ)☞</td>
		<td valign="middle" title="Thumbsup">(づ°‿°.)づ</td>
		<td valign="middle" title="Don't pick me">٩◔̯◔۶</td>
		<td valign="middle" title="Off course.">◉_◉</td>
		<td valign="middle" title="Oh no you didn't">ಠ_๏</td>
	  </tr>
	</table>
</div>

<div class="tabcontent" id="tab2">
	<table width="100%" border="0" cellpadding="0" cellspacing="10">
	  <tr>
	    <td width="20%" valign="middle" title="Y U NO">ლ（ﾟДﾟლ)</td>
	    <td width="20%" valign="middle" title="orz">囧rz</td>
	    <td width="20%" valign="middle" title="Damn you vile woman!">(ಠ ›ಠ)</td>
	    <td width="20%" valign="middle" title="I hate spiders">⊙﹏⊙</td>
	    <td width="20%" valign="middle" title="I dieded">(✖╭╮✖)</td>
	  </tr>
	  <tr>
	    <td valign="middle" title="I'm awake. Do continue.">ਉ_ਉ</td>
	  	<td valign="middle" colspan="2" title="Flipping Table">(╯°□°）╯︵ ┻━┻</td>
		<td valign="middle" colspan="2" title="Chill out bro">┬─┬ノ( º _ ºノ)</td>
	  </tr>
	  <tr>
		<td valign="middle" title="I.. I...">๏̯͡๏</td>
		<td valign="middle" title="Pedobear">ᶘ ᵒᴥᵒᶅ</td>
		<td valign="middle" title=""></td>
		<td valign="middle" title=""></td>
		<td valign="middle" title=""></td>
	  </tr>
	</table>
</div>

<div class="tabcontent" id="tab3">
	<table width="100%" border="0" cellpadding="0" cellspacing="10">
	  <tr>
		<td width="20%" valign="middle" title="">╚(•⌂•)╝</td>
		<td width="20%" valign="middle" title="">╚(ಠ_ಠ)=┐</td>
		<td width="20%" valign="middle" title="">┌( ಠ_ಠ)┘</td>
		<td width="20%" valign="middle" title="">◔̯◔</td>
		<td width="20%" valign="middle" title="">◔_◔</td>
	  </tr>
	  <tr>
		<td width="20%" valign="middle" title="">(/) (°,,,°) (/)</td>
		<td width="20%" valign="middle" title="">(V) (°,,,°) (V)</td>
		<td width="20%" valign="middle" title="">【•】_【•】</td>
		<td width="20%" valign="middle" title="">ᵔᴥᵔ</td>
		<td width="20%" valign="middle" title="">^‿^</td>
	  </tr>
	  <tr>
		<td width="20%" valign="middle" title="">(✿◠‿◠)</td>
		<td width="20%" valign="middle" title="">(◡‿◡)</td>
		<td width="20%" valign="middle" title=""></td>
		<td width="20%" valign="middle" title=""></td>
		<td width="20%" valign="middle" title=""></td>
	  </tr>
	</table>
</div>

<div id="bookmarklet" class="smaller">
	<a href="http://monkeyinmysoup.com/" target="_blank">by Monkey In My Soup</a>
	|
	Bookmarklet: <a href="javascript:(function(){f='http://data.monkeyinmysoup.com/pages/emots.html';a=function(){if(!window.open(f+'?v=1','Very Important Emots','height=416,width=670,title=no,location=no,scrollbars=no,menubars=no,navigation=no,statusbar=no,directories=no,resizable=no,status=no,toolbar=no,menuBar=no'))location.href=f+'?v=1'};if(/Firefox/.test(navigator.userAgent)){setTimeout(a,0)}else{a()}})()" title="Drag this to your bookmarks bar">ಠ_ಠ</a>
	|
	<a href="http://thenextweb.org/TwitterKeys/keys.php">More symbols &raquo;</a>
</div>
<div id="footer" class="smaller">
	<span id="copyarea">
	<label for="redditmode">Enable Reddit mode (adds slashes): </label>
	<input type="checkbox" id="redditmode" name="redditmode" checked="checked" />
		
	| Copy &amp; paste: <input type="text" id="copy" value="" /></span>
	<div id="popup" class="popup"></div>
</div>

<script type="text/javascript">
var ಠ_ಠ = {
	
	timeoutId: -1,
	POPUP_TIMEOUT: 3000,
	currentText: '',
	
	isInRedditMode: function() {
		return $('#redditmode').is(':checked');
	},
	
	setText: function(text) {
		ಠ_ಠ.currentText = text;
		if (ಠ_ಠ.isInRedditMode()) {
			text = text
				.replace(/\\/g,'\\\\')
				.replace(/_/g,'\\_');
		}
		$('#copy')
			.val(text)
			.select();
	},
	
	onEmotClick: function(elem) {
		var text = $(elem).text();
		if (text.length > 0) {
			// Cancel previous timeout
			if (ಠ_ಠ.timeoutId > -1) {
				window.clearTimeout(ಠ_ಠ.timeoutId);
			}
			// Put text in textarea
			$('#copyarea').css({'visibility': 'visible'});
			ಠ_ಠ.setText(text);
			// Show popup
			$("#popup").fadeIn();
			// Hide popup after a short while
			ಠ_ಠ.timeoutId = window.setTimeout(function() {
				$('#popup').fadeOut();
			}, ಠ_ಠ.POPUP_TIMEOUT);
		}
	},
	
	saveState: function() {
		if (localStorage) {
			localStorage.setItem('redditmode', ಠ_ಠ.isInRedditMode() ? 'true' : 'false');
		}
	},
	
	restoreState: function() {
		if (localStorage && localStorage.getItem('redditmode')) {
			var value = localStorage.getItem('redditmode');
			$('#redditmode').attr('checked', value == 'true');
		}
	},
}

$(document).ready(function() {
	// Adjust instruction manual to user's keyboard
	if(navigator.appVersion.indexOf('Mac') != -1) {
		$('#popup').hide().text('Hit ⌘+C to copy to clipboard');
	} else {
		$('#popup').hide().text('Hit Ctrl+C to copy to clipboard');
	}
	
	// Get reddit-mode toggle from cookie
	ಠ_ಠ.restoreState();
	
	// Click listener for emots
	$('td').click(function() {
		ಠ_ಠ.onEmotClick(this);
	});
	
	// Click listener for tabs
	$('.tab').click(function() {
		var $this = $(this);
		// De-highlight tabs
		$('.tab').removeClass('active');
		// Highlight current tab
		$this.addClass('active');
		// Hide tab contents
		$('.tabcontent').hide();
		// Show selected tab content
		var tab = $this.attr('data-tab');
		$('#' + tab).show();
	});
	
	// Click listener for checkbox
	$('#redditmode').change(function() {
		ಠ_ಠ.setText(ಠ_ಠ.currentText);
		ಠ_ಠ.saveState();
	});
	
	// Nice fade-in at the start
	$('td').each(function() {
		var text = $(this).text();
		if (text.length > 0) {
			$(this).fadeIn();
		}
	});
});
</script>
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-19063149-1']);
  _gaq.push(['_trackPageview']);

  (function() {
	var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
	ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
	var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
</body>
</html>