nash716/gist:1497669

## gistfile1.html
<html><head>
<meta charset="utf-8">
<style type="text/css">
html {
	height: 100%;
	width: 100%;
	display: table;
}
body {
	height: 100%;
	display: table-cell;
	vertical-align: middle;
	font-size: 300%;
	overflow: hidden;
	text-align: center;
	padding-bottom: 20px;
}
.nondisp {
	display: none;
}
#right {
	width: 50%;
	float: right;
}
#left {
	width: 50%;
	float: left;
}
.radius {
	border-radius: 20px;
	background-color: #dddddd;
	width: 90%;
	padding: 20px 20px;
	cursor: pointer;
	margin-top: 20px;
}
#status {
	position: fixed;
	top: 0px;
	left: 0px;
	font-size: 50%;
}
</style>
<script type="text/javascript" src="/socket.io/socket.io.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script type="text/javascript">
var socket;
$(document).ready(function() {
	socket = new io.Socket();
	socket.connect();
	socket.on('connect', function() {
		$('#select').show();
		$('#status').text('サーバーと接続成功！');
	});

	socket.on('disconnect', function(message){
		alert('disconnected');
	});
});
function controller() {
	$('#select').hide();
	$('#controller').show();
	$('#status').text('コマンドを選択…');
}

function receiver() {
	location.hash = 'receive';
	$('#select').hide();
	$('#receiver').show();
	$('#status').text('受信待ち…');
	socket.on('message', function(mes) {
		location.hash = 'receive/' + mes;
		location.hash = 'receive';
	});
}

function send(type) {
	socket.send(JSON.stringify({"type": type}));
}

</script>
</head><body>
<div id="status"></div>
<div id="select" class="nondisp">
	<h3>どっちか選んでね！</h3>
	<div id="left" align="center" onclick="controller()">
		<div class="radius">コントローラ</div>
	</div>
	<div id="right" align="center" onclick="receiver()">
		<div class="radius">レシーバ</div>
	</div>
</div>
<div id="receiver" class="nondisp">
	<h3>受信準備完了！普通にブラウジングしててね！</h3>
	<div id="stack"></div>
</div>
<div id="controller" class="nondisp">
	<h3>行う操作を選んでね！</h3>
	<div id="left" align="center" onclick="send('stop');">
		<div class="radius">一時停止</div>
	</div>
	<div id="right" align="center" onclick="send('play');">
		<div class="radius">再生</div>
	</div>
	<div id="left" align="center" onclick="send('chide');">
		<div class="radius">コメント非表示</div>
	</div>
	<div id="right" align="center" onclick="send('cdisp');">
		<div class="radius">コメント表示</div>
	</div>
	<div id="left" align="center" onclick="send('fullscreen');">
		<div class="radius">フルスクリーン</div>
	</div>
	<div id="right" align="center" onclick="send('normal');">
		<div class="radius">通常</div>
	</div>
	<div id="left" align="center" onclick="send('mute');">
		<div class="radius">ミュートON</div>
	</div>
	<div id="right" align="center" onclick="send('muteoff');">
		<div class="radius">ミュートOFF</div>
	</div>

	<div id="right" align="center" onclick="send('earth');" style="margin-top: 200px">
		<div class="radius">自爆</div>
	</div>
</div>
</body></html>
	<html><head>
	<meta charset="utf-8">
	<style type="text/css">
	html {
	height: 100%;
	width: 100%;
	display: table;
	}
	body {
	height: 100%;
	display: table-cell;
	vertical-align: middle;
	font-size: 300%;
	overflow: hidden;
	text-align: center;
	padding-bottom: 20px;
	}
	.nondisp {
	display: none;
	}
	#right {
	width: 50%;
	float: right;
	}
	#left {
	width: 50%;
	float: left;
	}
	.radius {
	border-radius: 20px;
	background-color: #dddddd;
	width: 90%;
	padding: 20px 20px;
	cursor: pointer;
	margin-top: 20px;
	}
	#status {
	position: fixed;
	top: 0px;
	left: 0px;
	font-size: 50%;
	}
	</style>
	<script type="text/javascript" src="/socket.io/socket.io.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
	<script type="text/javascript">
	var socket;
	$(document).ready(function() {
	socket = new io.Socket();
	socket.connect();
	socket.on('connect', function() {
	$('#select').show();
	$('#status').text('サーバーと接続成功！');
	});

	socket.on('disconnect', function(message){
	alert('disconnected');
	});
	});
	function controller() {
	$('#select').hide();
	$('#controller').show();
	$('#status').text('コマンドを選択…');
	}

	function receiver() {
	location.hash = 'receive';
	$('#select').hide();
	$('#receiver').show();
	$('#status').text('受信待ち…');
	socket.on('message', function(mes) {
	location.hash = 'receive/' + mes;
	location.hash = 'receive';
	});
	}

	function send(type) {
	socket.send(JSON.stringify({"type": type}));
	}

	</script>
	</head><body>
	<div id="status"></div>
	<div id="select" class="nondisp">
	<h3>どっちか選んでね！</h3>
	<div id="left" align="center" onclick="controller()">
	<div class="radius">コントローラ</div>
	</div>
	<div id="right" align="center" onclick="receiver()">
	<div class="radius">レシーバ</div>
	</div>
	</div>
	<div id="receiver" class="nondisp">
	<h3>受信準備完了！普通にブラウジングしててね！</h3>
	<div id="stack"></div>
	</div>
	<div id="controller" class="nondisp">
	<h3>行う操作を選んでね！</h3>
	<div id="left" align="center" onclick="send('stop');">
	<div class="radius">一時停止</div>
	</div>
	<div id="right" align="center" onclick="send('play');">
	<div class="radius">再生</div>
	</div>
	<div id="left" align="center" onclick="send('chide');">
	<div class="radius">コメント非表示</div>
	</div>
	<div id="right" align="center" onclick="send('cdisp');">
	<div class="radius">コメント表示</div>
	</div>
	<div id="left" align="center" onclick="send('fullscreen');">
	<div class="radius">フルスクリーン</div>
	</div>
	<div id="right" align="center" onclick="send('normal');">
	<div class="radius">通常</div>
	</div>
	<div id="left" align="center" onclick="send('mute');">
	<div class="radius">ミュートON</div>
	</div>
	<div id="right" align="center" onclick="send('muteoff');">
	<div class="radius">ミュートOFF</div>
	</div>

	<div id="right" align="center" onclick="send('earth');" style="margin-top: 200px">
	<div class="radius">自爆</div>
	</div>
	</div>
	</body></html>