<!doctype html>
<html>
	<head>
	<meta charset="utf-8">
	<title>ThemeFusion <%= fontBaseName %> Font</title>
		<style>
		body {
			background:#fff;
			color:#222;
			}
		h1, div, footer {
			font-family:'Helvetica Neue', Arial, sans-serif;
			}
		h1 {
			font-size:18px;
			}
		.icons {
			-webkit-column-count:5;
			   -moz-column-count:5;
			        column-count:5;
			-webkit-column-gap:20px;
			   -moz-column-gap:20px;
			        column-gap:20px;
			}
		.icons__item,
		.icons__item i {
			line-height:2em;
			cursor:pointer;
			}
		.icons__item:hover {
			color:#800;
			}
		.icons__item i {
			display:inline-block;
			width:32px;
			text-align:center;
			}
		.icons__item:hover i {
			-webkit-transform:scale(1.5);
			   -moz-transform:scale(1.5);
			    -ms-transform:scale(1.5);
			     -o-transform:scale(1.5);
			        transform:scale(1.5);
			}
		footer {
			margin-top:2em;
			font-size:14px;
			color:#999;
			}

		<%= styles %>
		</style>
	</head>
	<body>
		<h1>ThemeFusion <%= fontBaseName %></h1>

		<div class="icons" id="icons">
			<% for (var glyphIdx = 0; glyphIdx < glyphs.length; glyphIdx++) { var glyph = glyphs[glyphIdx] %>
				<div class="icons__item" data-name="<%= glyph %>"><i class="<%= baseClass %> <%= classPrefix %><%= glyph %>"></i> <%= classPrefix %><%= glyph %></div>
			<% } %>
		</div>

		<h1>Usage</h1>
		<pre><code>&lt;i class=&quot;<%= baseClass ? baseClass + ' ' : '' %><%= classPrefix %><span id="name">name</span>&quot;&gt;&lt;/i&gt;</code></pre>

		<div style="display:none">
			$fusionIcon = array(<% for (var glyphIdx = 0; glyphIdx < glyphs.length; glyphIdx++) { var glyph = glyphs[glyphIdx] %>'<%= glyph %>',<% } %>);
		</div>

		<footer></footer>

		<script>
		(function() {
			document.getElementById('icons').onclick = function(e) {
				e = e || window.event;
				document.getElementById('name').innerHTML = e.target.getAttribute('data-name') || e.target.parentNode.getAttribute('data-name');
			}
		})();
		</script>
	</body>
</html>
