kanreisa/player.html

## player.html

<!DOCTYPE HTML>
<html lang="ja-JP">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<title>reiplayer/v2.9.0-alpha</title>

<script type="text/javascript" charset="utf-8" src="//ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js"></script>
<script type="text/javascript" charset="utf-8" src="./jwplayer/jwplayer.js"></script>
<script type="text/javascript">

/**
 * reiplayer, version 2.9.0-alpha, released at 2012-12-28
 * (c) 2012 Yuki KAN <@kanreisa>
 *
 * This is freely distributable under the terms of an MIT-style license.
 *
 * RELEASE note:
 * version 2.9-alpha[20121228] - Added: IE 10+ support
 *                               Fixes: refactored
 * version 2.8-alpha[20110614] - Fixes: jwplayer control timing
 *                               Added: "Play from the beginning" button
 *                               Added: volume autosave (localStorage)
 * version 2.7-alpha[20110613] - Added: play time autosave (localStorage)
 *                               Added: alert when unsupported browser
 *                               Fixes: autofocus finder
 * version 2.6-alpha[20110612] - Added: finder!
 *                               Fixes: -webkit-transitions
 * version 2.5-alpha[20110612] - Added: colored playing title
 * version 2.4-alpha[20110611] - Added: iOS 5 support
 *                               Fixes: variable confliction
 * version 2.3-alpha[20110611] - Added: random colored tag
 *                               Fixes: -webkit-transitions
 * version 2.2-alpha[20110611] - Added: implemented error handling when an HTTP-error occurs
 * version 2.1-alpha[20110611] - Added: tag([.+]) highlighting
 * version 2.0-alpha[20110610] - First: hello!
**/

Event.observe(window, 'load', function() {

	if (
		//(navigator.userAgent.toLowerCase().indexOf('chrome/') !== -1) ||
		(navigator.userAgent.toLowerCase().indexOf('firefox/') !== -1) ||
		(window.opera)
	) {
		alert('not supported browser: ' + navigator.userAgent);
	}

	var R = {
		_message: {
			ja: {
				'Play from the beginning': '最初から再生'
			}
		},
		e: {
			//head: $$('head')[0],
			body: $$('body')[0]
		},
		regex: {
			dir  : /^.*\/$/,
			video: /^.*\/.+\.(flv|m4v|mp4)$/,
			audio: /^.*\/.+\.(m4a|mp3)$/,
			dn   : /^(.*\/)[^\/]+\..+$/,
			fn   : /^.*\/([^\/]+\..+)$/,
			upper: /^(.*\/)[^\/]+\/$/
		}
	};

	/**
	 * load libraries -> initialize pager
	**/
	(function() {
		/* observe hash */
		var hash;
		setInterval(function() {
			if (hash != window.location.hash) {//compare hash
				hash = window.location.hash;//save new hash

				var hS = hash.replace('#', '');//save current hash without "#"
				var hA = hS.split('/');//split

				if (hA[0] == '!') {
					hS = hS.replace('!', '');//remove "!" prefix
					L(hS);
				} else {
					window.location.hash = '!/';
				}
			}
		}, 200);
	})();

	/**
	 * pager -> loader
	**/
	var L = function(pURL) {
		if (pURL.match(R.regex.video) || pURL.match(R.regex.audio)) {
			var fn = pURL.match(R.regex.fn)[1];
			var dn = pURL.match(R.regex.dn)[1];
		} else if (pURL.match(R.regex.dir)) {
			var dn = pURL;
		} else {
			window.location.hash = '!/';
		}
		if (dn) {
			new Ajax.Request(dn, {
				method: 'get',
				onSuccess: function(response) {
					if ($('navigation')) {
						$('navigation').update(response.responseText);
					} else {
						var div = new Element('div', {
							id: 'navigation'
						}).update(response.responseText);
						R.e.body.appendChild(div);
					}

					var as = [];
					$$('div#navigation a').each(function(a) {
						var fn = a.getAttribute('href', 2);//get href

						if ((fn == '../') && (dn == '/')) {
							var href = '/';
							fn = 'QUIT...';
						} else if (fn == '../') {
							var href = '#!' + dn.match(R.regex.upper)[1];
							fn = dn.match(R.regex.upper)[1];
						} else {
							var href = '#!' + dn + fn;
						}

						var name = decodeURIComponent(fn);
						name = name.replace(/\[([^\[\]]+)\]/g, '<span>$1</span>');

						if ( (name.match(/\.(flv|m4v|mp4|m4a|mp3)$/)) || (name.match(/\/$/)) || (name == 'QUIT...')) {
							as.push(
								new Element('a', {
									href: 'javascript:void(0);'
								}).observe('click', function() {
									window.location.href = href;
								}).insert(name)
							);
						}
					});

					$('navigation').update();

					as.each(function(a) {
						$('navigation').appendChild(a);
					});

					var colour = {};
					var classr = {};
					$$('a > span').each(function(span) {
						var tag = span.innerHTML;
						if (! colour[tag]) {
							colour[tag] = (function() {
								var r = Math.floor(Math.random() * 150) + 100;
								var g = Math.floor(Math.random() * 150) + 100;
								var b = Math.floor(Math.random() * 150) + 100;
								return 'rgb(' + r + ', ' + g + ', ' + b + ')';
							})();
							classr[tag] = Math.floor(Math.random() * 9999999999);
						}
						span.setStyle({
							background: colour[tag]
						});
						span.addClassName(classr[tag]);
						span.observe('mouseover', function() {
							$$('a > span:not(.' + classr[tag] + ')').each(function(target) {
								target.addClassName('hover');
							});
						});
						span.observe('mouseout', function() {
							var myname = this.className;
							$$('a > span:not(.' + classr[tag] + ')').each(function(target) {
								target.removeClassName('hover');
							});
						});
						span.observe('click', function(e) {
							$('finder-input').value = this.innerHTML;
							e.stop();
						});
					});

					//version 2.5-alpha[20110612] - Added: colored playing title
					setTimeout(function() {
						$$('div#navigation a').each(function(a) {
							if (a.innerText == R.fnPlaying) {
								a.addClassName('playing');
							} else {
								a.removeClassName('playing');
							}
						});
					}, 500);
				},
				onFailure: function() {
					window.location.hash = '!/';
				}
			});
		}
		if (fn) {
			R.fnPlaying = decodeURIComponent(fn);
			var location = dn + fn;

			if ($('display')) {
				$('display').update();
			} else {
				R.e.body.appendChild(new Element('div', {id: 'display'}));
			}

			$('display').appendChild(new Element('a', {
				'href': 'javascript:void(0);'
			}).setStyle({
				position: 'absolute',
				top: '6px',
				left: '5px'
			}).observe('click', function() {
				jwplayer().seek(0);
				jwplayer().play(true);
			}).update(R._message.ja['Play from the beginning']));//!/

			$('display').appendChild(new Element('span', {
			}).setStyle({
				position: 'absolute',
				top: '6px',
				left: '80px'
			}).update(R.fnPlaying));

			/* //!/
			$('display').appendChild(new Element('span', {
			}).setStyle({
			}).update();
			*/

			if ($('player')) {
				$('player').update();
			} else {
				R.e.body.appendChild(new Element('div', {id: 'player'}));
			}

			$('player').appendChild(new Element('div', {id: 'canvas'}));

			var playerWidth = $('player').getWidth();
			var playerHeight= $('player').getHeight();

			jwplayer('canvas').stop();

			if (location.match(/^.+\.(m4v|mp4)$/)) jwplayer('canvas').setup({
				'id'        : 'video',
				'width'     : playerWidth,
				'height'    : playerHeight,
				'autostart' : true,
				'file'      : location,
				'provider'  : 'http',
				'http.startparam' : 'start',
				'modes'     : [
					{'type': 'html5'}
					//{'type':'flash', src: './reiplayer-libs/jw/player.swf'}
				]
			});

			if (location.match(/^.+\.(flv|m4a)$/)) jwplayer('canvas').setup({
				'id'        : 'video',
				'width'     : playerWidth,
				'height'    : playerHeight,
				'autostart' : true,
				'provider'  : 'video',
				'file'      : location,
				'modes'     : [{'type':'flash', src: './reiplayer-libs/jw/player.swf'}]
			});

			Event.stopObserving(window, 'resize');
			var resizePlayer = function() {
				var playerWidth = $('player').getWidth();
				var playerHeight= $('player').getHeight();
				jwplayer().resize(playerWidth, playerHeight);
			};
			Event.observe(window, 'resize', resizePlayer);
			setTimeout(resizePlayer, 500);

			//play time restore/autosave
			clearTimeout(R.autosaveTimer);
			var autosavePosition = function() {
				window.localStorage['reiplayer-pos-' + location] = jwplayer().getPosition();
				R.autosaveTimer = setTimeout(autosavePosition, 3000);
			};
			var fr = true;
			jwplayer().onPlay(function() {
				if (fr) {
					fr = false;
					R.autosaveTimer = setTimeout(autosavePosition, 3500);

					if (window.localStorage['reiplayer-pos-' + location]) {
						var playPosition = window.localStorage['reiplayer-pos-' + location];
						if (playPosition != jwplayer().getDuration()) {
							setTimeout(function() {
								jwplayer().seek(Math.floor(playPosition));
							}, 700);
						}
					}
				}
			});

			//volume restore/autosave
			jwplayer().onReady(function() {
				if (window.localStorage['reiplayer-volume']) {
					jwplayer().setVolume(window.localStorage['reiplayer-volume']);
				}
			});
			jwplayer().onVolume(function() {
				window.localStorage['reiplayer-volume'] = jwplayer().getVolume();
			});
		}
	};

	/**
	 * finder
	**/
	(function() {
		var finder = function _finder() {
			$$('div#navigation a').each(function(a) {
				if (input.value !== '') {
					if (a.innerText.toLowerCase().indexOf(input.value.toLowerCase(), 0) != -1) {
						a.show();
					} else {
						a.hide();
					}
				} else {
					a.show();
				}
			});
		};

		var input = new Element('input', {
			id         : 'finder-input',
			type       : 'text',
			placeholder: '...',
			autofocus  : true//autofocus finder
		});
		var button = new Element('input', {
			id   : 'finder-button',
			type : 'button',
			value: 'grep'
		});

		input.observe('keyup', finder);
		input.observe('blur', finder);
		button.observe('click', finder);

		var div = new Element('div', {
			id: 'finder'
		});
		div.appendChild(input);
		div.appendChild(button);

		R.e.body.appendChild(div);
	})();
});

</script>
<style type="text/css">
	body {
		background : #1b1b1b;
		margin     : 0;
		padding    : 0;
		font-family: メイリオ, Meiryo, 'ＭＳ Ｐゴシック', 'hiragino kaku gothic pro', Osaka; }

	div#finder {
		position        : absolute;
		display         : 100;
		background      : #333;
		top             : 0;
		right           : 0;
		width           : 300px;
		height          : 30px;
		padding         : 0; }

		div#finder > input[type="text"] {
			display      : inline-block !important;
			position     : absolute;
			right        : 0;
			left         : 2px;
			bottom       : 2px;
			top          : 2px;
			width        : auto;
			margin       : 0;
			padding-left : 5px;
			border       : 2px solid #fff;
			font-family  : メイリオ, Meiryo, 'ＭＳ Ｐゴシック', 'hiragino kaku gothic pro', Osaka; }

		div#finder > input[type="text"]:focus {
			outline: none; }

		div#finder > input[type="button"] {
			position          : absolute;
			top               : 2px;
			right             : 2px;
			bottom            : 2px;
			width             : 50px;
			margin            : 0;
			border            : 2px solid #fff;
			color             : #ddd;
			background        : #004acc; }

		div#finder > input[type="button"]:hover {
			color            : #fff; }

		div#finder > input[type="button"]:active {
			background       : #003399; }

	div#navigation {
		display   : 100;
		background: #111;
		position  : absolute;
		top       : 30px;
		right     : 0;
		bottom    : 0;
		overflow  :auto;
		width     : 300px; }

	div#navigation a {
		cursor          : default;
		text-decoration : none;
		white-space     : normal;
		word-break      : break-all;
		font-size       : 11px;
		display         : block;
		background      : #222;
		color           : #aaa;
		padding         : 3px 10px 3px 5px; }

	/* div#navigation a:nth-child(even) {
		background-color: #333; } */

	div#navigation a:hover {
		background        : #333;
		color             : #fff; }

		div#navigation a > span {
			cursor      : pointer;
			background  : #000;
			font-size   : 10px;
			margin-right: 3px;
			padding     : 0 2px 0 2px;
			color       : #000;
			opacity     : 1;
			transition  : all 0.2s; }

		div#navigation a > span.hover {
			transition  : all 0.1s;
			opacity     : 0.2; }

	div#navigation a.playing {
		color             : #fff;
		background        : #69821b !important;
		-webkit-transition: all 0.2s; }

	div#navigation a.playing:hover {
		color             : #583822;
		-webkit-transition: all 0.2s; }

	div#display {
		potision        : absolute;
		top             : 0;
		right           : 300px;
		left            : 0;
		height          : 30px;
		background      : #000;
		background-image: -webkit-gradient(linear, left top, left bottom,
		                    color-stop(0,   #333),
							color-stop(1,   #000)
		                  );
		color           : #ccc;
		margin-right    : 300px; }

		div#display > a {
			text-decoration: none;
			border         : 1px solid #444;
			background     : #222;
			color          : #ccc;
			font-size      : 11px; }

		div#display > a:hover {
			border         : 1px solid #555;
			background     : #333;
			color          : #fff; }

		div#display > span {
			border         : 1px solid transparent;
			color          : #ccc;
			font-size      : 11px; }

	div#player {
		background: #000;
		position  : absolute;
		top       : 30px;
		right     : 300px;
		bottom    : 0;
		left      : 0; }
</style>
</head>
<body>
</body>
</html>

	<!DOCTYPE HTML>
	<html lang="ja-JP">
	<head>
	<meta charset="utf-8" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />

	<title>reiplayer/v2.9.0-alpha</title>

	<script type="text/javascript" charset="utf-8" src="//ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js"></script>
	<script type="text/javascript" charset="utf-8" src="./jwplayer/jwplayer.js"></script>
	<script type="text/javascript">

	/**
	* reiplayer, version 2.9.0-alpha, released at 2012-12-28
	* (c) 2012 Yuki KAN <@kanreisa>
	*
	* This is freely distributable under the terms of an MIT-style license.
	*
	* RELEASE note:
	* version 2.9-alpha[20121228] - Added: IE 10+ support
	* Fixes: refactored
	* version 2.8-alpha[20110614] - Fixes: jwplayer control timing
	* Added: "Play from the beginning" button
	* Added: volume autosave (localStorage)
	* version 2.7-alpha[20110613] - Added: play time autosave (localStorage)
	* Added: alert when unsupported browser
	* Fixes: autofocus finder
	* version 2.6-alpha[20110612] - Added: finder!
	* Fixes: -webkit-transitions
	* version 2.5-alpha[20110612] - Added: colored playing title
	* version 2.4-alpha[20110611] - Added: iOS 5 support
	* Fixes: variable confliction
	* version 2.3-alpha[20110611] - Added: random colored tag
	* Fixes: -webkit-transitions
	* version 2.2-alpha[20110611] - Added: implemented error handling when an HTTP-error occurs
	* version 2.1-alpha[20110611] - Added: tag([.+]) highlighting
	* version 2.0-alpha[20110610] - First: hello!
	**/

	Event.observe(window, 'load', function() {

	if (
	//(navigator.userAgent.toLowerCase().indexOf('chrome/') !== -1) \|\|
	(navigator.userAgent.toLowerCase().indexOf('firefox/') !== -1) \|\|
	(window.opera)
	) {
	alert('not supported browser: ' + navigator.userAgent);
	}

	var R = {
	_message: {
	ja: {
	'Play from the beginning': '最初から再生'
	}
	},
	e: {
	//head: $$('head')[0],
	body: $$('body')[0]
	},
	regex: {
	dir : /^.*\/$/,
	video: /^.*\/.+\.(flv\|m4v\|mp4)$/,
	audio: /^.*\/.+\.(m4a\|mp3)$/,
	dn : /^(.*\/)[^\/]+\..+$/,
	fn : /^.*\/([^\/]+\..+)$/,
	upper: /^(.*\/)[^\/]+\/$/
	}
	};

	/**
	* load libraries -> initialize pager
	**/
	(function() {
	/* observe hash */
	var hash;
	setInterval(function() {
	if (hash != window.location.hash) {//compare hash
	hash = window.location.hash;//save new hash

	var hS = hash.replace('#', '');//save current hash without "#"
	var hA = hS.split('/');//split

	if (hA[0] == '!') {
	hS = hS.replace('!', '');//remove "!" prefix
	L(hS);
	} else {
	window.location.hash = '!/';
	}
	}
	}, 200);
	})();

	/**
	* pager -> loader
	**/
	var L = function(pURL) {
	if (pURL.match(R.regex.video) \|\| pURL.match(R.regex.audio)) {
	var fn = pURL.match(R.regex.fn)[1];
	var dn = pURL.match(R.regex.dn)[1];
	} else if (pURL.match(R.regex.dir)) {
	var dn = pURL;
	} else {
	window.location.hash = '!/';
	}
	if (dn) {
	new Ajax.Request(dn, {
	method: 'get',
	onSuccess: function(response) {
	if ($('navigation')) {
	$('navigation').update(response.responseText);
	} else {
	var div = new Element('div', {
	id: 'navigation'
	}).update(response.responseText);
	R.e.body.appendChild(div);
	}

	var as = [];
	$$('div#navigation a').each(function(a) {
	var fn = a.getAttribute('href', 2);//get href

	if ((fn == '../') && (dn == '/')) {
	var href = '/';
	fn = 'QUIT...';
	} else if (fn == '../') {
	var href = '#!' + dn.match(R.regex.upper)[1];
	fn = dn.match(R.regex.upper)[1];
	} else {
	var href = '#!' + dn + fn;
	}

	var name = decodeURIComponent(fn);
	name = name.replace(/\[([^\[\]]+)\]/g, '<span>$1</span>');

	if ( (name.match(/\.(flv\|m4v\|mp4\|m4a\|mp3)$/)) \|\| (name.match(/\/$/)) \|\| (name == 'QUIT...')) {
	as.push(
	new Element('a', {
	href: 'javascript:void(0);'
	}).observe('click', function() {
	window.location.href = href;
	}).insert(name)
	);
	}
	});

	$('navigation').update();

	as.each(function(a) {
	$('navigation').appendChild(a);
	});

	var colour = {};
	var classr = {};
	$$('a > span').each(function(span) {
	var tag = span.innerHTML;
	if (! colour[tag]) {
	colour[tag] = (function() {
	var r = Math.floor(Math.random() * 150) + 100;
	var g = Math.floor(Math.random() * 150) + 100;
	var b = Math.floor(Math.random() * 150) + 100;
	return 'rgb(' + r + ', ' + g + ', ' + b + ')';
	})();
	classr[tag] = Math.floor(Math.random() * 9999999999);
	}
	span.setStyle({
	background: colour[tag]
	});
	span.addClassName(classr[tag]);
	span.observe('mouseover', function() {
	$$('a > span:not(.' + classr[tag] + ')').each(function(target) {
	target.addClassName('hover');
	});
	});
	span.observe('mouseout', function() {
	var myname = this.className;
	$$('a > span:not(.' + classr[tag] + ')').each(function(target) {
	target.removeClassName('hover');
	});
	});
	span.observe('click', function(e) {
	$('finder-input').value = this.innerHTML;
	e.stop();
	});
	});

	//version 2.5-alpha[20110612] - Added: colored playing title
	setTimeout(function() {
	$$('div#navigation a').each(function(a) {
	if (a.innerText == R.fnPlaying) {
	a.addClassName('playing');
	} else {
	a.removeClassName('playing');
	}
	});
	}, 500);
	},
	onFailure: function() {
	window.location.hash = '!/';
	}
	});
	}
	if (fn) {
	R.fnPlaying = decodeURIComponent(fn);
	var location = dn + fn;

	if ($('display')) {
	$('display').update();
	} else {
	R.e.body.appendChild(new Element('div', {id: 'display'}));
	}

	$('display').appendChild(new Element('a', {
	'href': 'javascript:void(0);'
	}).setStyle({
	position: 'absolute',
	top: '6px',
	left: '5px'
	}).observe('click', function() {
	jwplayer().seek(0);
	jwplayer().play(true);
	}).update(R._message.ja['Play from the beginning']));//!/

	$('display').appendChild(new Element('span', {
	}).setStyle({
	position: 'absolute',
	top: '6px',
	left: '80px'
	}).update(R.fnPlaying));

	/* //!/
	$('display').appendChild(new Element('span', {
	}).setStyle({
	}).update();
	*/

	if ($('player')) {
	$('player').update();
	} else {
	R.e.body.appendChild(new Element('div', {id: 'player'}));
	}

	$('player').appendChild(new Element('div', {id: 'canvas'}));

	var playerWidth = $('player').getWidth();
	var playerHeight= $('player').getHeight();

	jwplayer('canvas').stop();

	if (location.match(/^.+\.(m4v\|mp4)$/)) jwplayer('canvas').setup({
	'id' : 'video',
	'width' : playerWidth,
	'height' : playerHeight,
	'autostart' : true,
	'file' : location,
	'provider' : 'http',
	'http.startparam' : 'start',
	'modes' : [
	{'type': 'html5'}
	//{'type':'flash', src: './reiplayer-libs/jw/player.swf'}
	]
	});

	if (location.match(/^.+\.(flv\|m4a)$/)) jwplayer('canvas').setup({
	'id' : 'video',
	'width' : playerWidth,
	'height' : playerHeight,
	'autostart' : true,
	'provider' : 'video',
	'file' : location,
	'modes' : [{'type':'flash', src: './reiplayer-libs/jw/player.swf'}]
	});

	Event.stopObserving(window, 'resize');
	var resizePlayer = function() {
	var playerWidth = $('player').getWidth();
	var playerHeight= $('player').getHeight();
	jwplayer().resize(playerWidth, playerHeight);
	};
	Event.observe(window, 'resize', resizePlayer);
	setTimeout(resizePlayer, 500);

	//play time restore/autosave
	clearTimeout(R.autosaveTimer);
	var autosavePosition = function() {
	window.localStorage['reiplayer-pos-' + location] = jwplayer().getPosition();
	R.autosaveTimer = setTimeout(autosavePosition, 3000);
	};
	var fr = true;
	jwplayer().onPlay(function() {
	if (fr) {
	fr = false;
	R.autosaveTimer = setTimeout(autosavePosition, 3500);

	if (window.localStorage['reiplayer-pos-' + location]) {
	var playPosition = window.localStorage['reiplayer-pos-' + location];
	if (playPosition != jwplayer().getDuration()) {
	setTimeout(function() {
	jwplayer().seek(Math.floor(playPosition));
	}, 700);
	}
	}
	}
	});

	//volume restore/autosave
	jwplayer().onReady(function() {
	if (window.localStorage['reiplayer-volume']) {
	jwplayer().setVolume(window.localStorage['reiplayer-volume']);
	}
	});
	jwplayer().onVolume(function() {
	window.localStorage['reiplayer-volume'] = jwplayer().getVolume();
	});
	}
	};

	/**
	* finder
	**/
	(function() {
	var finder = function _finder() {
	$$('div#navigation a').each(function(a) {
	if (input.value !== '') {
	if (a.innerText.toLowerCase().indexOf(input.value.toLowerCase(), 0) != -1) {
	a.show();
	} else {
	a.hide();
	}
	} else {
	a.show();
	}
	});
	};

	var input = new Element('input', {
	id : 'finder-input',
	type : 'text',
	placeholder: '...',
	autofocus : true//autofocus finder
	});
	var button = new Element('input', {
	id : 'finder-button',
	type : 'button',
	value: 'grep'
	});

	input.observe('keyup', finder);
	input.observe('blur', finder);
	button.observe('click', finder);

	var div = new Element('div', {
	id: 'finder'
	});
	div.appendChild(input);
	div.appendChild(button);

	R.e.body.appendChild(div);
	})();
	});

	</script>
	<style type="text/css">
	body {
	background : #1b1b1b;
	margin : 0;
	padding : 0;
	font-family: メイリオ, Meiryo, 'ＭＳＰゴシック', 'hiragino kaku gothic pro', Osaka; }

	div#finder {
	position : absolute;
	display : 100;
	background : #333;
	top : 0;
	right : 0;
	width : 300px;
	height : 30px;
	padding : 0; }

	div#finder > input[type="text"] {
	display : inline-block !important;
	position : absolute;
	right : 0;
	left : 2px;
	bottom : 2px;
	top : 2px;
	width : auto;
	margin : 0;
	padding-left : 5px;
	border : 2px solid #fff;
	font-family : メイリオ, Meiryo, 'ＭＳＰゴシック', 'hiragino kaku gothic pro', Osaka; }

	div#finder > input[type="text"]:focus {
	outline: none; }

	div#finder > input[type="button"] {
	position : absolute;
	top : 2px;
	right : 2px;
	bottom : 2px;
	width : 50px;
	margin : 0;
	border : 2px solid #fff;
	color : #ddd;
	background : #004acc; }

	div#finder > input[type="button"]:hover {
	color : #fff; }

	div#finder > input[type="button"]:active {
	background : #003399; }

	div#navigation {
	display : 100;
	background: #111;
	position : absolute;
	top : 30px;
	right : 0;
	bottom : 0;
	overflow :auto;
	width : 300px; }

	div#navigation a {
	cursor : default;
	text-decoration : none;
	white-space : normal;
	word-break : break-all;
	font-size : 11px;
	display : block;
	background : #222;
	color : #aaa;
	padding : 3px 10px 3px 5px; }

	/* div#navigation a:nth-child(even) {
	background-color: #333; } */

	div#navigation a:hover {
	background : #333;
	color : #fff; }

	div#navigation a > span {
	cursor : pointer;
	background : #000;
	font-size : 10px;
	margin-right: 3px;
	padding : 0 2px 0 2px;
	color : #000;
	opacity : 1;
	transition : all 0.2s; }

	div#navigation a > span.hover {
	transition : all 0.1s;
	opacity : 0.2; }

	div#navigation a.playing {
	color : #fff;
	background : #69821b !important;
	-webkit-transition: all 0.2s; }

	div#navigation a.playing:hover {
	color : #583822;
	-webkit-transition: all 0.2s; }

	div#display {
	potision : absolute;
	top : 0;
	right : 300px;
	left : 0;
	height : 30px;
	background : #000;
	background-image: -webkit-gradient(linear, left top, left bottom,
	color-stop(0, #333),
	color-stop(1, #000)
	);
	color : #ccc;
	margin-right : 300px; }

	div#display > a {
	text-decoration: none;
	border : 1px solid #444;
	background : #222;
	color : #ccc;
	font-size : 11px; }

	div#display > a:hover {
	border : 1px solid #555;
	background : #333;
	color : #fff; }

	div#display > span {
	border : 1px solid transparent;
	color : #ccc;
	font-size : 11px; }

	div#player {
	background: #000;
	position : absolute;
	top : 30px;
	right : 300px;
	bottom : 0;
	left : 0; }
	</style>
	</head>
	<body>
	</body>
	</html>