<?xml version="1.0" encoding="UTF-8" ?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.0" xmlns:bm="urn:jsptld:/WEB-INF/bm.tld">
	<jsp:directive.page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" />
	<jsp:text>
		<![CDATA[ <?xml version="1.0" encoding="UTF-8" ?> ]]>
	</jsp:text>
	<jsp:text>
		<![CDATA[ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ]]>
	</jsp:text>

	<html xmlns="http://www.w3.org/1999/xhtml">
		<head>
			<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
			<title>Insert title here</title>
			<script type="text/javascript" src="../../demos/bg/js/jquery.js"></script>
			<script type="text/javascript" src="../../demos/bg/js/jquery.ui-1.0/ui.tabs.js"></script>
			<script type="text/javascript" src="../../demos/bg/js/jquery.ui-1.0/ui.mouse.js"></script>
			<script type="text/javascript" src="../../demos/bg/js/jquery.ui-1.0/ui.draggable.js"></script>
			<script type="text/javascript" src="../../demos/bg/js/jquery.ui-1.0/ui.draggable.ext.js"></script>
			<script type="text/javascript" src="../../demos/bg/js/farbtastic/farbtastic.js"></script>
			<script type="text/javascript" src="../../demos/bg/js/stampeditor.js"></script>
			<style type="text/css">
				img {
					border-width: 0px;
					margin: 0;
					padding: 0;
				}

				p {
					margin: 0;
				}
			</style>
			<link href="../../demos/bg/css/tabs.css" rel="stylesheet" type="text/css" />
			<link href="../../demos/bg/css/farbtastic/farbtastic.css" rel="stylesheet" type="text/css" />
			<link rel="stylesheet" href="../../demos/bg/js/jquery.ui-1.0/themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)" />
		</head>
		<body>

			<div id="header">
				<h1>Briefmarkengenerator: Basteln Sie sich Ihre virtuellen Briefmarken* selbst ! </h1>
				* (gut geeignet für E-Mails :-)
			</div>
			<div id="layout_bar">
				Entwurf und Ergebnis
				<input type="radio" value="line" name="layout"/>
				<label>nebeneinander</label>
				<input type="radio" value="column" name="layout" checked="checked"/>
				<label>übereinander</label>
				<input type="radio" value="overlap" name="layout"/>
				<label>überlappend</label>
				 platzieren
			</div>
			<div id="main">
				<div id="edit_panel">
					<div class="draghandle">
						Draghandle
					</div>
					<ul id="tabs">
						<li id="tab_format"><a href="#tab_pane_format"><span>Format</span></a></li>
						<li id="tab_image"><a href="#tab_pane_image"><span>Bild</span></a></li>
						<li id="tab_labels"><a href="#tab_pane_labels"><span>Schriftzüge</span></a></li>
						<li id="tab_stamp"><a href="#tab_pane_stamp"><span>Briefmarke</span></a></li>
					</ul>
					<jsp:include page="format.jsp" />
					<jsp:include page="image.jsp" />
					<jsp:include page="labels.jsp" />
					<jsp:include page="stamp.jsp" />
				</div>

				<div id="draft">
					<p class="headline">Enwurf</p>
					<div id="edit_container">Entwurf</div>
				</div>
				<div id="result">
					<p class="headline">Ergebnis</p>
					<div id="stamp_container">Ergebnis</div>
				</div>

				<div id="pickertoolbar">
					<div class="draghandle"><img src="../../demos/bg/pix/cross.png" /></div>
					<div id="colorpicker">placeholder</div>
					<input type="text" id="color" name="color" value="#123456" size="7"/><br />
					<input type="button" value="übernehmen" id="pickertoolbar_set" /> <input type="button" value="abbrechen" id="pickertoolbar_abort"/>
				</div>


			</div>
		</body>
	</html>

</jsp:root>