<!-- window.onerror = function(){...} -->
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Carsten Pfeffer">
<meta name="copyight" content="(c)2012 Carsten Pfeffer">
<meta name="language" content="en">
<meta name="keywords" content="Python, learning Python, emscripten, cpython, codemirror, empythoned, python training, web ide">
<meta name="description" content="Browser side Python training suite">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title> Think Python - IDE</title>
<link rel="stylesheet" href="main.css" type="text/css">
<link rel="stylesheet" href="editor/lib/codemirror.css">
<script src="editor/lib/codemirror.js"></script>
<script src="main.js"></script>
<script src="ide.js"></script>
<script src="editor/mode/python/python.js"></script>
<link rel="stylesheet" href="ide.css" type="text/css">
<script language="JavaScript">
<!--
toolhover = new Image();
toolhover.src="img/tool.svg"
toolhover.src="img/menu_hover.svg"
window.onresize = function ()
{
setSizers();
};
window.onload = initIDE;
-->
</script>
</head>
<body onmousemove="dragSizer(event);">
<div id="maincontainer">
<!-- MENUBAR ============================================================= -->
<div id="menubar">
<span class="menu" onclick="hideAllMenus();document.getElementById('fileMenu').style.display = 'block';"
onmouseover="this.style.backgroundImage='url(img/menu_hover.svg)'"
onmouseout="this.style.backgroundImage='none'">
File</span>
<span class="menu" onclick="hideAllMenus();document.getElementById('editMenu').style.display = 'block';"
onmouseover="this.style.backgroundImage='url(img/menu_hover.svg)'"
onmouseout="this.style.backgroundImage='none'">
Edit</span>
<span class="menu" onclick="hideAllMenus();document.getElementById('helpMenu').style.display = 'block';"
onmouseover="this.style.backgroundImage='url(img/menu_hover.svg)'"
onmouseout="this.style.backgroundImage='none'">
Help</span>
<img src="img/closebutton.svg" id="closebutton" onclick="quit()"
onmouseover="this.src='img/closebutton_hover.svg'"
onmouseout="this.src='img/closebutton.svg'"/>
</div>
<!-- TOOLBAR ============================================================= -->
<div id="toolbar" onclick="hideAllMenus();">
<span class="tool"
onmouseover="this.style.backgroundImage='url(img/tool.svg)'"
onmouseout="this.style.backgroundImage='none'"
onclick="onNew()">
<img src="img/tool_new.svg" alt="new file" title="new file"/></span>
<span class="tool"
onmouseover="this.style.backgroundImage='url(img/tool.svg)'"
onmouseout="this.style.backgroundImage='none'"
onclick="showOpening()">
<img src="img/tool_open.svg" alt="open file" title="open file"/></span>
<span class="tool"
onmouseover="this.style.backgroundImage='url(img/tool.svg)'"
onmouseout="this.style.backgroundImage='none'"
onclick="saveFile()">
<img src="img/tool_save.svg" alt="save file" title="save file"/></span>
<span class="toolSeparator"></span>
<span class="tool" id="tool_run"
onmouseover="this.style.backgroundImage='url(img/tool.svg)'"
onmouseout="this.style.backgroundImage='none'">
<img src="img/tool_run.svg" alt="run script" title="run script"/></span>
<!-- <span class="tool"
onmouseover="this.style.backgroundImage='url(img/tool.svg)'"
onmouseout="this.style.backgroundImage='none'">
<img src="img/tool_debug.svg" alt="start debugger" title="start debugger"/></span>-->
<span class="tool"
onmouseover="this.style.backgroundImage='url(img/tool.svg)'"
onmouseout="this.style.backgroundImage='none'" onclick="clearTerminal()">
<img src="img/tool_clear_terminal.svg" alt="clear terminal" title="clear terminal"/></span>
</div>
<!-- CEODE EXLORER ============================================================= -->
<div id="codeexplorer" onclick="hideAllMenus();">
</div>
<!-- EDITOR ============================================================= -->
<div id="editor" onclick="hideAllMenus();"><textarea id="code" name="code">
import this</textarea></div>
<script>
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
mode: {name: "python",
version: 2,
singleLineStringErrors: false},
lineNumbers: true,
indentUnit: 4,
tabMode: "shift",
matchBrackets: true,
onChange: showClassTree,
extraKeys: {Tab: function(cm) { cm.replaceSelection(" ", "end"); }}
});
</script>
<!-- TERMINAL ============================================================= -->
<textarea id="terminal" readonly="readonly" onclick="hideAllMenus();"></textarea>
<!-- SEPARATORS =========================================================== -->
<div id="horizontalSeparator" onmousedown="startHorizontalDrag()" onmouseup="stopHorizontalDrag()"></div>
<div id="verticalSeparator" onmousedown="startVerticalDrag()" onmouseup="stopVerticalDrag()"></div>
</div>
<!-- MENUS ============================================================= -->
<div id="fileMenu" class="dropDownMenu">
<p class="menuItem" onclick="hideAllMenus();onNew();"
onmouseover="this.style.backgroundColor='#C0C0FF'"
onmouseout="this.style.backgroundColor='white'">New</p>
<p class="menuItem" onclick="hideAllMenus();showOpening();"
onmouseover="this.style.backgroundColor='#C0C0FF'"
onmouseout="this.style.backgroundColor='white'">Open</p>
<p class="menuItem" onclick="hideAllMenus();saveFile();"
onmouseover="this.style.backgroundColor='#C0C0FF'"
onmouseout="this.style.backgroundColor='white'">Save</p>
<hr/>
<p class="menuItem" onclick="hideAllMenus();quit();"
onmouseover="this.style.backgroundColor='#C0C0FF'"
onmouseout="this.style.backgroundColor='white'">Close IDE</p>
</div>
<div id="editMenu" class="dropDownMenu">
<p class="menuItem" onclick="hideAllMenus();editor.undo();"
onmouseover="this.style.backgroundColor='#C0C0FF'"
onmouseout="this.style.backgroundColor='white'">Undo</p>
<p class="menuItem" onclick="hideAllMenus();editor.redo();"
onmouseover="this.style.backgroundColor='#C0C0FF'"
onmouseout="this.style.backgroundColor='white'">Redo</p>
</div>
<div id="helpMenu" class="dropDownMenu">
<p class="menuItem" onclick="hideAllMenus();window.open('http://sourceforge.net/projects/thinkpython/','_blank');"
onmouseover="this.style.backgroundColor='#C0C0FF'"
onmouseout="this.style.backgroundColor='white'">Sourceforge Project</p>
<p class="menuItem" onclick="hideAllMenus();window.open('about.html','_blank');"
onmouseover="this.style.backgroundColor='#C0C0FF'"
onmouseout="this.style.backgroundColor='white'">About</p>
</div>
<div id="overlay"></div>
<div id="loading">
<img src="img/loadingpy.gif"/>
<br/><hr/>
Loading...
</div>
<div id="opening">
<h4>Open a file</h4>
<input type="file" id="openfile" name="openfile"/>
<br/><br/>
<button onclick="hideOpening()">Cancel</button>
<button onclick="openFile()">Ok</button>
</div>
</body>
</html>
