<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:py="http://genshi.edgewall.org/"
      xmlns:xi="http://www.w3.org/2001/XInclude">

<xi:include href="master.html" />
<head>
	<title py:content="tube and 'Designing tube %s' % tube.name or 'Designing a new tube'" />
	<!-- YUI -->
	<link rel="stylesheet" type="text/css" href="${tg.url('/scripts/wireit/lib/yui/reset-fonts-grids/reset-fonts-grids.css')}" />
	<link rel="stylesheet" type="text/css" href="${tg.url('/scripts/wireit/lib/yui/assets/skins/sam/skin.css')}" />
	
	<!-- InputEx CSS -->
	<link type='text/css' rel='stylesheet' href="${tg.url('/scripts/wireit/lib/inputex/css/inputEx.css')}" />
	
	<!-- YUI-accordion CSS -->
	<link rel="stylesheet" type="text/css" href="${tg.url('/scripts/wireit/lib/accordionview/assets/skins/sam/accordionview.css')}" />
	
	<!-- WireIt CSS -->
	<link rel="stylesheet" type="text/css" href="${tg.url('/scripts/wireit/css/WireIt.css')}" />
	<link rel="stylesheet" type="text/css" href="${tg.url('/scripts/wireit/css/WireItEditor.css')}" />
	
	<link rel="stylesheet" type="text/css" href="${tg.url('/css/design.css')}" />
	
	<script src="${tg.url('/scripts/codemirror/codemirror.js')}" type="text/javascript"></script>
	
	<!-- YUI -->
	<script type="text/javascript" src="${tg.url('/scripts/wireit/lib/yui/utilities/utilities.js')}"></script>
	<script type="text/javascript" src="${tg.url('/scripts/wireit/lib/yui/resize/resize-min.js')}"></script>
	<script type="text/javascript" src="${tg.url('/scripts/wireit/lib/yui/layout/layout-min.js')}"></script>
	<script type="text/javascript" src="${tg.url('/scripts/wireit/lib/yui/container/container-min.js')}"></script>
	<script type="text/javascript" src="${tg.url('/scripts/wireit/lib/yui/json/json-min.js')}"></script>
	<script type="text/javascript" src="${tg.url('/scripts/wireit/lib/yui/button/button-min.js')}"></script>
	
	<!-- InputEx with wirable options (WirableField-beta) -->
	<script src="${tg.url('/scripts/wireit/lib/inputex/js/inputex.js')}"  type='text/javascript'></script>
	<script src="${tg.url('/scripts/wireit/lib/inputex/js/Field.js')}"  type='text/javascript'></script>
	<script type="text/javascript" src="${tg.url('/scripts/wireit/js/util/inputex/WirableField-beta.js')}"></script>
	<script src="${tg.url('/scripts/wireit/lib/inputex/js/Group.js')}"  type='text/javascript'></script>
	<script src="${tg.url('/scripts/wireit/lib/inputex/js/Visus.js')}"  type='text/javascript'></script>
	<script src="${tg.url('/scripts/wireit/lib/inputex/js/fields/StringField.js')}"  type='text/javascript'></script>
	<script src="${tg.url('/scripts/wireit/lib/inputex/js/fields/Textarea.js')}"  type='text/javascript'></script>
	<script src="${tg.url('/scripts/wireit/lib/inputex/js/fields/SelectField.js')}"  type='text/javascript'></script>
	<script src="${tg.url('/scripts/wireit/lib/inputex/js/fields/IntegerField.js')}"  type='text/javascript'></script>
	<script src="${tg.url('/scripts/wireit/lib/inputex/js/fields/NumberField.js')}"  type='text/javascript'></script>
	<script src="${tg.url('/scripts/wireit/lib/inputex/js/fields/EmailField.js')}"  type='text/javascript'></script>
	<script src="${tg.url('/scripts/wireit/lib/inputex/js/fields/UrlField.js')}"  type='text/javascript'></script>
	<script src="${tg.url('/scripts/wireit/lib/inputex/js/fields/ListField.js')}"  type='text/javascript'></script>
	<script src="${tg.url('/scripts/wireit/lib/inputex/js/fields/CheckBox.js')}"  type='text/javascript'></script>
	<script src="${tg.url('/scripts/wireit/lib/inputex/js/fields/InPlaceEdit.js')}"  type='text/javascript'></script>
	<script src="${tg.url('/scripts/wireit/lib/inputex/js/fields/ColorField.js')}"  type='text/javascript'></script>
	<script src="${tg.url('/scripts/wireit/lib/inputex/js/fields/TypeField.js')}"  type='text/javascript'></script>
    <script src="${tg.url('/scripts/wireit/lib/inputex/js/fields/CombineField.js')}"  type='text/javascript'></script>
	
	<!-- YUI-Accordion -->
	<script src="${tg.url('/scripts/wireit/lib/accordionview/accordionview-min.js')}"  type='text/javascript'></script>
	
	<!-- WireIt -->
	<!--[if IE]><script type="text/javascript" src="${tg.url('/scripts/wireit/lib/excanvas.js')}"></script><![endif]-->
	<script type="text/javascript" src="${tg.url('/scripts/wireit/js/WireIt.js')}"></script>
	<script type="text/javascript" src="${tg.url('/scripts/wireit/js/CanvasElement.js')}"></script>
	<script type="text/javascript" src="${tg.url('/scripts/wireit/js/Wire.js')}"></script>
	<script type="text/javascript" src="${tg.url('/scripts/wireit/js/Terminal.js')}"></script>
	<script type="text/javascript" src="${tg.url('/scripts/wireit/js/util/DD.js')}"></script>
	<script type="text/javascript" src="${tg.url('/scripts/wireit/js/util/DDResize.js')}"></script>
	<script type="text/javascript" src="${tg.url('/scripts/wireit/js/Container.js')}"></script>
	<script type="text/javascript" src="${tg.url('/scripts/wireit/js/Layer.js')}"></script>
	<script type="text/javascript" src="${tg.url('/scripts/wireit/js/util/inputex/FormContainer-beta.js')}"></script>
	<script type="text/javascript" src="${tg.url('/scripts/wireit/js/LayerMap.js')}"></script>
	
	<script type="text/javascript" src="${tg.url('/scripts/wireit/designeditor.js')}"></script>
	
	<script type="text/javascript" src="${tg.url('/scripts/wireit/js/adapters/json-rpc.js')}"></script>
	<script type="text/javascript" src="${tg.url('/scripts/wireit/js/ImageContainer.js')}"></script>
	
	
	<!-- Roral gow-like notifications -->
	<script type="text/javascript" src="${tg.url('/scripts/roar/Roar.js')}"></script>
	<link rel="stylesheet" type="text/css" href="${tg.url('/scripts/roar/Roar.css')}" />
	
	<!-- MooDialog messages -->
	<script type="text/javascript" src="${tg.url('/scripts/moodialog/Overlay.js')}"></script>
	<script type="text/javascript" src="${tg.url('/scripts/moodialog/MooDialog.js')}"></script>
	<script type="text/javascript" src="${tg.url('/scripts/moodialog/MooDialog.Error.js')}"></script>
	<script type="text/javascript" src="${tg.url('/scripts/moodialog/MooDialog.Confirm.js')}"></script>
	<link rel="stylesheet" type="text/css" href="${tg.url('/scripts/moodialog/css/MooDialog.css')}" />
	
	
	<!-- Our Code -->
	<script type="text/javascript" src="${tg.url('/scripts/wireit/designer.js')}"></script>
	<script type="text/javascript" src="${tg.url('/tubes/language_definition', params=dict(jsonp='dynamic_language'))}"></script>
	
	
	<script type="text/javascript">
		var tube_id = ${tube and tube.id or 0};
		var resize_container = function() {
			var center = $('center');
			pos = center.getPosition();
			var content = $('centercontainer');
			y = window.getSize().y - pos.y
			    - content.getStyle('borderBottomWidth').toInt()
				- content.getStyle('paddingBottom').toInt()
				- content.getStyle('marginBottom').toInt()
				- $('footer').getHeight();
			center.setStyle('height', y + 'px');
		};
		window.addEvent('resize', resize_container);
		window.addEvent('domready', function() {
			dynamic_language.modules.each(function(module) {
				pythonBox.language.modules.push(module);
			});
			pythonBox.init(pythonBox);
			resize_container();
			pythonBox.editor.loadModule();
		});
	</script>
</head>
<body>
	<div id="sidebar" style="z-index: 1;">
		<h3>Info</h3>
		<ul class="formfields">
			<li>
				<label for="name">Name:</label>
				<input type="text" name="name" id="tube_name" value="${getattr(tube, 'name', None)}" />
			</li>
			<li>
				<label for="display_name">Display Name:</label>
				<input type="text" name="display_name" id="tube_display_name" value="${getattr(tube, 'display_name', None)}" />
			</li>
			<li>
				<input type="checkbox" name="active" id="tube_active" checked="${getattr(tube, 'active', False) and 'checked' or None}">Active</input>
			</li>
			<li>
				<input type="checkbox" name="needs_source" id="tube_needs_source" checked="${getattr(tube, 'needs_source', False) and 'checked' or None}">Needs Source</input>
			</li>
		</ul>
		<h3>Components</h3>
		<div id="left"></div>
		<div id="layerMap"></div>
		<h3>Controls</h3>
		<button id="save">Save</button>
		<button id="launch">Launch</button>
	</div>
	<div id="centercontainer" style="position: relative; margin-left: 250px; margin-top: 10px; height: 500px;">
		<div id="center" style="position: relative;"></div>
	</div>
</body>
</html>