jkxyz/chords.html

## chords.html
<!doctype html>
<html>
	<head>
		<title>Chord Randomiser</title>
		<style type="text/css">
			body, html { margin: 0; padding: 0; background: #fff; font: 19pt serif; }
				div#outer { width: 300px; margin: 0 auto; padding-top: 50px; text-align: center; }
					div#key, div#chord, div#type { font-weight: bold; position: absolute; top: 49px; }
						div#key { margin-left: 125px; }
						div#chord { margin-left: 230px; }
						div#type { margin-left: 260px; display: none; }
					div.read { margin-right: 30px; display: inline; }
					div#extra { display: none; position: absolute; top: 48px; margin-left: 15px; }
						div#extra a { background: none; color: #000; font-weight: bold; font-size: 19pt; }
					a { background: #000; color: #fff; padding: 2px; cursor: pointer; text-decoration: none; font-size: 11pt; }
						a.r { background: #fff; color: #000; cursor: auto; }
		</style>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
		<script type="text/javascript">
			var rnd = function () {
				var a = document.getElementsByTagName('a')[1];
				if ( a.className != 'r' ) {
					var keys, chords, types;
					keys = 'C,D,E,F,G,A,B,C';
					chords = 'I,ii,iii,IV,V,vi';
					types = 'Maj,min,Dim,Aug,Maj7,min7,7,m7b5,Dim7,Maj9,min9,9';

					a.innerHTML = 'Randomising...';
					a.className += 'r';

					keys = keys.split(',');
					chords = chords.split(',');
					types = types.split(',');

					setTimeout( function() {
						var key, chord, type;

						a.innerHTML = 'Randomise';
						a.className = a.className.replace( /(?:^|\s)r(?!\S)/g , '' );

						key = Math.floor(Math.random() * keys.length);
						document.getElementById('key').innerHTML = keys[key];

						chord = Math.floor(Math.random() * chords.length);
						document.getElementById('chord').innerHTML = chords[chord];

						type = Math.floor(Math.random() * types.length);
						document.getElementById('type').innerHTML = types[type];

						if ( document.getElementById('extra').className != 'r' ) {
							document.getElementById('extra').style.display = 'inline';
						}
					}, 500);
				}
			};

			$(document).ready(function(){
				$('div#extra a').mouseover( function() {
					$('div#extra').css('margin-left','17px');
				});
				$('div#extra a').mouseout( function() {
					$('div#extra').css('margin-left','15px');
				});

				$('div#extra a').click( function() {
					$('div#extra').animate({marginLeft:'50px',opacity:'0'}).hide('slow');
					$('div#extra a').addClass('r');
					$('div#type').show('fast');
					$('a').animate({marginLeft:'50px'});
					$('div#outer').animate({paddingRight:'50px'});
				});
			});
		</script>
	</head>
	<body>
		<div id="outer">
			<div id="key"></div><div id="chord"></div><div id="type"></div>
			<div class="read">Key of</div><div class="read">, Chord</div><div id="extra"><a>&raquo;</a></div>
			<br />
			<a onclick="rnd();">Randomise</a>
		</div>
	</body>
</html>
	<!doctype html>
	<html>
	<head>
	<title>Chord Randomiser</title>
	<style type="text/css">
	body, html { margin: 0; padding: 0; background: #fff; font: 19pt serif; }
	div#outer { width: 300px; margin: 0 auto; padding-top: 50px; text-align: center; }
	div#key, div#chord, div#type { font-weight: bold; position: absolute; top: 49px; }
	div#key { margin-left: 125px; }
	div#chord { margin-left: 230px; }
	div#type { margin-left: 260px; display: none; }
	div.read { margin-right: 30px; display: inline; }
	div#extra { display: none; position: absolute; top: 48px; margin-left: 15px; }
	div#extra a { background: none; color: #000; font-weight: bold; font-size: 19pt; }
	a { background: #000; color: #fff; padding: 2px; cursor: pointer; text-decoration: none; font-size: 11pt; }
	a.r { background: #fff; color: #000; cursor: auto; }
	</style>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
	<script type="text/javascript">
	var rnd = function () {
	var a = document.getElementsByTagName('a')[1];
	if ( a.className != 'r' ) {
	var keys, chords, types;
	keys = 'C,D,E,F,G,A,B,C';
	chords = 'I,ii,iii,IV,V,vi';
	types = 'Maj,min,Dim,Aug,Maj7,min7,7,m7b5,Dim7,Maj9,min9,9';

	a.innerHTML = 'Randomising...';
	a.className += 'r';

	keys = keys.split(',');
	chords = chords.split(',');
	types = types.split(',');

	setTimeout( function() {
	var key, chord, type;

	a.innerHTML = 'Randomise';
	a.className = a.className.replace( /(?:^\|\s)r(?!\S)/g , '' );

	key = Math.floor(Math.random() * keys.length);
	document.getElementById('key').innerHTML = keys[key];

	chord = Math.floor(Math.random() * chords.length);
	document.getElementById('chord').innerHTML = chords[chord];

	type = Math.floor(Math.random() * types.length);
	document.getElementById('type').innerHTML = types[type];

	if ( document.getElementById('extra').className != 'r' ) {
	document.getElementById('extra').style.display = 'inline';
	}
	}, 500);
	}
	};

	$(document).ready(function(){
	$('div#extra a').mouseover( function() {
	$('div#extra').css('margin-left','17px');
	});
	$('div#extra a').mouseout( function() {
	$('div#extra').css('margin-left','15px');
	});

	$('div#extra a').click( function() {
	$('div#extra').animate({marginLeft:'50px',opacity:'0'}).hide('slow');
	$('div#extra a').addClass('r');
	$('div#type').show('fast');
	$('a').animate({marginLeft:'50px'});
	$('div#outer').animate({paddingRight:'50px'});
	});
	});
	</script>
	</head>
	<body>
	<div id="outer">
	<div id="key"></div><div id="chord"></div><div id="type"></div>
	<div class="read">Key of</div><div class="read">, Chord</div><div id="extra"><a>»</a></div>
	<br />
	<a onclick="rnd();">Randomise</a>
	</div>
	</body>
	</html>