<!DOCTYPE html>
<html lang="en" dir="auto">
<head>
    {% block head %}
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>GFR - {% block title %}{% endblock %}</title>
    {% endblock %}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <style type="text/css">
    {% block style %}
        html{
	  font-family: sans-serif;
	}
    @font-face {
        font-family: "Adobe NotDef";
        src: url(https://cdn.jsdelivr.net/gh/adobe-fonts/adobe-notdef/AND-Regular.ttf);
    }
	.box-title{
	  width: 100%;
	  font-size: 8pt;
	  font-weight: 700;
	  border-top: 1px solid black;
	  padding-top: 5px;
	  margin-bottom: 10pt;
	  display: block;
	}
	.box{
	  margin-bottom: 20pt;
	  width: 100%;
	  float: left;
	}
	.box-text{
	}
	
	#nav{
	  position: fixed;
	  right: 20px;
	  z-index: 100;
	}
	#font-toggle{
	}
	.nav-item{
		display: block;
		cursor: pointer;
		-webkit-user-select: none; /* Safari */        
		-moz-user-select: none; /* Firefox */
			-ms-user-select: none; /* IE10+/Edge */
		user-select: none; /* Standard */
		text-align: center;
		color: white;
		background-color: black;
		display: block;
		font-size: 9pt;
		padding: 5px;
		margin: 2px;
	}
	.tooltip {
	position: relative;
	display: inline-block;
	border-bottom: 1px dotted black;
	}

	.tooltip .tooltiptext {
	font-family: sans-serif;
	visibility: hidden;
	width: 500px;
	background-color: black;
	color: #fff;
	text-align: left;
	font-size: 12pt;
	line-height: 15pt;
	border-radius: 6px;
	padding: 5px 0;

	/* Position the tooltip */
	position: absolute;
	z-index: 1;
	}

	.tooltip:hover .tooltiptext {
	padding: 10px;
	visibility: visible;
	}
	.tooltipleft {
		float:left;
		width: 249px;
	}
	.tooltipright {
		float:right;
		width:250px;
	}

			/* Stuff needed for the table differ */
            body {
                font-family: Helvetica;
            }
            .node {
                font-family: courier;
                cursor: pointer;
                position: relative;
                left: 30px;
                padding: 5px;
                display: block;
                border: 1px dashed grey;
            }
            .header {
            font-weight: bold;
            }
            .attr-before{
                color: red;
                cursor: text;
            }
            .attr-after{
                color: green;
                cursor: text;
            }
            .leaf {
            font-weight: bold;
            }
            .old .cell .new {
            	display:  none;
            }
            .new .cell .old {
            	display:  none;
            }
            .both .cell .old {
            	opacity: 0.75;
            	color:  red;
            }
            .both .cell .new {
            	opacity: 0.75;
            	position: absolute;
            	top: 0;
            	color:  green;
            }
			.spacer {
				display:block;
				float:left;
				width:100%;
			}

	  {% for font_face in font_faces_old %}
	    {{ font_face.render() }}
	  {% endfor %}

	  {% for font_face in font_faces_new %}
	    {{ font_face.render() }}
	  {% endfor %}

	  {% for font_face in font_faces %}
	    {{ font_face.render() }}
	  {% endfor %}

	  {% for font_class in font_styles_old %}
	    {{ font_class.render() }}
	  {% endfor %}

	  {% for font_class in font_styles_new %}
	    {{ font_class.render() }}
	  {% endfor %}

	  {% for font_class in font_styles %}
	    {{ font_class.render() }}
	  {% endfor %}
	{% endblock %}

	   #ot-panel {
		max-height: 400px;
		overflow-y: scroll;
		background: white;
		padding: 10px;
		display: none;
	   }
    </style>
</head>
<body>
    <div id="nav">
		{% if include_ui %}
			<div class="nav-item" id="font-toggle">old</div>
		{% endif %}
			<div class="nav-item" id="ot-button">OT features</div>
			<div id="ot-panel">
			</div>
		{% block nav %}{% endblock %}
	</div>
    <div id="content">
	<h2>{% block content_name %}{% endblock %}</h2>
	{% block content %}
	{% endblock %}
    </div>
</body>
	<script>

	POSITION = "old"
	fontToggle = document.getElementById("font-toggle")
	function switchFonts() {
	boxTitles = document.getElementsByClassName("box-title")
	items = document.getElementsByClassName("box-text");
	  
	if (POSITION === "old") {
	  POSITION = "new"
	  for (item of boxTitles) {
	    item.textContent = item.textContent.replace("old", "new")
	    fontToggle.textContent = "new"
	  }
	  for (item of items) {
		item.className = item.className.replace("old", "new")
	  }

	  } else {
	  POSITION = "old"
	  for (item of boxTitles) {
	    item.textContent = item.textContent.replace("new", "old")
	    fontToggle.textContent = "old"
	  }
	  for (item of items) {
		item.className = item.className.replace("new", "old")
	  }
	}
	}
	if (fontToggle !== null) {
		fontToggle.addEventListener("click", switchFonts);
	}

// apply optional ot feats

function buildFeatureList() {
	var features = [
		'aalt', 'c2sc', 'calt', 'case', 'cpsp', 'dlig', 'dnom',
		'fina', 'frac', 'init', 'kern', 'liga', 'lnum', 'numr', 'onum',
		'ordn', 'pnum', 'salt', 'sinf', 'smcp', 'sups',
		'swsh', 'titl', 'tnum', 'zero', 'ss01', 'ss02',
		'ss03', 'ss04', 'ss05', 'ss06', 'ss07', 'ss08',
		'ss09', 'ss10', 'ss11', 'ss12', 'ss13', 'ss14',
		'ss15', 'ss16', 'ss17', 'ss18', 'ss19', 'ss20'
	]
	
	var otPanel = document.getElementById("ot-panel")
	for (i=0; i<features.length; i++) {
		var feat = features[i]
		
		var row = document.createElement("div");

		var item = document.createElement("input");
		item.type = "checkbox"
		item.value = feat
		item.classList.add("ot-checkbox")
		var label = document.createElement("label")
		label.textContent = feat

		row.appendChild(item)
		row.appendChild(label)

		otPanel.appendChild(row)
	}
}

buildFeatureList()


function enableFeatures() {
	var checkboxes = document.getElementsByClassName("ot-checkbox")
	var res = []
	var disableKerning = false
	for (i=0; i<checkboxes.length; i++) {
		if (checkboxes[i].checked === true) {
			var checkbox = checkboxes[i]
			res.push('"' + checkbox.value + '"')

			if (checkbox.value === "kern") {
				disableKerning = true
			}
		}
	}	

	var boxText = document.getElementsByClassName("box-text")
	var otString = res.join(", ")
	for (j=0; j<boxText.length; j++) {
		boxText[j].style.fontFeatureSettings = otString
		if (disableKerning === true) {
			boxText[j].style.fontKerning = "none"
		}
	}
}

var otButton = document.getElementById("ot-button")
otButton.addEventListener("click", function() {
    otPanel = document.getElementById("ot-panel")
    if (otPanel.style.display !== "block") {
        otPanel.style.display = "block"
    } else {
        otPanel.style.display = "none"
    }
})
var checkboxes = document.getElementsByClassName("ot-checkbox")
for (i=0; i<checkboxes.length; i++) {
	cb = checkboxes[i]
	cb.addEventListener("click", enableFeatures)
}	
    {% block js %}
	{% endblock %}

    </script>
</html>

