<!doctype html>
<html>
<head>

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js"></script>

<link rel="stylesheet" type="text/css" href="reset.css" />
<link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui-1.8.6.custom.css" />

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<style type="text/css">
div#editor { display:none; }
li * { vertical-align:middle; }
label { display:inline-block; width:8em; vertical-align:middle; margin:0;padding:0; }
input { width:20em; }
textarea { display:inline-block; width:20em; height:10em; margin:0;padding:0; }
button { display:inline-block; }

div#styleEditor { display:none; font-size:18px; }
div#fontChooserContainer { display:none; height:20em;width:26em; }
#styleEditor h3 { text-align:left; }

body { width:7.5in; height:10in; font-size:12px; border:1px black solid; }

#page { font-family:'Droid Serif'; }

h1, h2, h3, h4 {margin:0 auto; text-align:center;}
h1 { font-size:3cm; margin:2cm auto; }
h2 { font-size:2cm; margin:0.5cm auto; }
h3 { font-size:1cm; margin:1cm auto; }
</style>

<script type="text/javascript">
var fonts = [["Serif", ["Droid Serif", "Cousine", "OFL Sorts Mill Goudy TT", "Vollkorn", "Crimson Text", "Arvo"]],
	["Sans Serif",["Droid Sans", "Nobile", "Molengo", "PT Sans", "Inconsolata", "Droid Sans Mono", "Josefin Slab"]],
	["Other",["Tangerine", "Philosopher", "Lobster", "Reenie Beanie"]]];

// loads Fonts dynamically
// http://www.hunlock.com/blogs/Howto_Dynamically_Insert_Javascript_And_CSS
function loadFont(fontName) {
	var head = document.getElementsByTagName("head")[0];
	var style = document.createElement("link");
	style.type="text/css";
	style.rel ="stylesheet";
	style.href="http://fonts.googleapis.com/css?family="+fontName.replace(" ","+");
	head.appendChild(style);
}

$(function() {
	$("#editor").dialog({width: "auto", title: "Flyer Generator r002"});
	$("#time").datepicker({ showButtonPanel:true, numberOfMonths: 2 });
	// otherwise, only changes on blur/focus
	$("input, textarea").keyup(function() { $(this).change() });
	$("input, textarea").change(function() {
			$("#"+$(this).attr("id")+"_body").html($(this).val());
		});
	$("#format").change(function() {
		$( "#time" ).datepicker( "option", "dateFormat", $(this).val() );
	});
	// set up way to reopen dialog in a non-intrusive way
	$("body").dblclick(function() {
			$("#editor").dialog("open");
			return false;
		});

	// load fonts
	for(var fam in fonts) {
		for(var f in fonts[fam][1]) {
			loadFont(fonts[fam][1][f]);
		}
	}
	// add fonts to the font chooser
	for(var fam in fonts) {
		var family = fonts[fam][0];
		for(var f in fonts[fam][1]) {
			var font = fonts[fam][1][f];
			var header = $("<h3></h3>").html(family+" - "+font);
			header.css("font-family",font);
			$("#fontChooser").append(header);
			var example = $("<div></div>").html("abcdefghijklmnopqrstuvwxyz0123456789");
			example.css("font-family",font);
			$("#fontChooser").append(example);
			header.data('font',font);
			example.data('font',font);
		}
	}

	$("#styleEditor").dialog({autoOpen:false,model:true,width:'auto'});
	$("#styler").click(function(){
			$("#styleEditor").dialog("open");
		});
	$("#fontChooser").accordion({autoHeight:false});
	$("#fontFamily").click(function(){
			$("#fontChooserContainer").toggle();
		});
	$("#fontChooser > h3, #fontChooser > div").dblclick(function(){
			$("#page").css("font-family",$(this).data('font'));
			$("#fontChooserContainer").hide();
			return false;
		});
});
</script>

</head>

<body>

<div id="page">
<h1 id="tagline_body">Tagline</h1>

<h3 id="description_body">Description</h3>

<h2 id="time_body">Today</h2>
<h2 id="location_body">Location</h2>

<h4 id="contact_body"></h4>

<!--Fix this: need a good way to hot-swap footer/other branding-specific layout styles-->
<div style="display:block;position:absolute;top:7.25in;width:8.5in;">
<img src="qrcode.png" style="height:7cm;float:left;" />
<img src="adi_logo.png" style="height:5cm;float:right;margin-top:1cm;margin-right:1in;" />
</div>

</div>

<div id="editor">
<ul>
<li><label for="tagline">Tagline:</label><input type="text" name="tagline" id="tagline" value="Tagline" />
</li>
<li><label for="description">Description:</label>
<textarea name="description" id="description">Description</textarea></li>
<li><label for="time">Time:</label><input type="text" name="time" id="time" /></li>
<li>
<label for="format">Time Format options:</label>
	<select id="format" name="format">
		<option value="mm/dd/yy">Default - mm/dd/yy</option>
		<option value="d MM">Short - d M</option>
		<option value="D, d MM">D d M</option>
		<option value="DD, d MM">DD d M</option>
		<option value="d M, yy">d M, yy</option>
		<option value="d MM, yy">d MM, yy</option>
		<option value="DD, d MM, yy">DD, d MM, yy</option>
	</select>
</p>
</li>
<li><label for="location">Location:</label><input type="text" name="location" id="location" value="Location" /></li>
<li><label for="contact">Contact:</label><input type="text" name="contact" id="contact" /></li>
<li><button id="styler">Style Everything</button></li>
</div>

<div id="styleEditor">
<ul>
<li>
<button id="fontFamily">Change Font Family</button>
<div id="fontChooserContainer">
<div id="fontChooser">
</div>
</div>
</li>
<li>
<button id="fontSize">Change Font Size - WIP</button>
</li>
<li>
<button id="width">Change Width - WIP</button>
</li>
</div>

</body>
</html>