{{extend 'layout.html'}}
<!-- begin "edit" block -->
{{
  def shortcut(combo, description):
    return XML('<li><span class="teletype-text">%s</span><span>%s</span></li>' % (combo, description))
  def listfiles(app, dir, regexp='.*\.py$'):
      files = sorted(
         listdir(apath('%(app)s/%(dir)s/' % {'app':app, 'dir':dir}, r=request), regexp))
      files = [x.replace('\\', '/') for x in files if not x.endswith('.bak')]
      return files

  def editfile(path,file,vars={}):
	args=(path,file) if 'app' in vars else (app,path,file)
	url = URL('edit', args=args, vars=vars)
    return A(file, _class='editor_filelink', _href=url, _style='word-wrap: break-word;')
}}
{{cm=URL('static','codemirror')}}
<link rel="stylesheet" href="{{=cm}}/lib/codemirror.css">
<link rel="stylesheet" href="{{=cm}}/theme/web2py.css">
<script src="{{=cm}}/lib/codemirror.js"></script>
<script src="{{=cm}}/mode/clike/clike.js"></script>
{{if TEXT_EDITOR_KEYBINDING == 'emacs':}}<script src="{{=cm}}/keymap/emacs.js"></script>{{pass}}
{{if TEXT_EDITOR_KEYBINDING == 'vi':}}<script src="{{=cm}}/keymap/vim.js"></script>{{pass}}
<script src="{{=cm}}/mode/python/python.js"></script>
<script src="{{=cm}}/mode/xml/xml.js"></script>
<script src="{{=cm}}/mode/css/css.js"></script>
<script src="{{=cm}}/mode/javascript/javascript.js"></script>
<script src="{{=cm}}/mode/htmlmixed/htmlmixed.js"></script>
<script src="{{=cm}}/lib/util/search.js"></script>
<script src="{{=cm}}/lib/util/searchcursor.js"></script>
<script src="{{=cm}}/lib/util/dialog.js"></script>
<link rel="stylesheet" href="{{=cm}}/lib/util/dialog.css">
<script src="{{=cm}}/emmet.min.js"></script>
<script language="Javascript" type="text/javascript" src="{{=URL('static','js/ajax_editor.js')}}"></script>
<script language="Javascript" type="text/javascript">

jQuery(document).on('shown click', 'a[data-toggle="tab"]', function (e) {
	var tab_id = jQuery(this).attr('href');
	var editor = jQuery(tab_id + " textarea").data('editor');
	if (editor) {
		editor.setSize(jQuery(tab_id).width(),  jQuery(tab_id).height());
		editor.refresh();
	}
	//jQuery(function(){jQuery('.CodeMirror-scroll').css("height","auto").css("overflow-x","auto");});
});

// Close the selected tab
jQuery(document).on('click', '#filesTab button[class="close"]', function (e) {
	var tab_body   = jQuery(jQuery(this).parent().attr("href"));  // it should be a div
	var tab_header = jQuery(this).parent().parent();              // it should be a li

	if (tab_header.hasClass('active') === true) { 	//Set active an other tab
		jQuery(tab_header).prev().children('a[data-toggle="tab"]').tab('show'); // Select first tab		
	}
	tab_header.remove(); //remove li of tab
	tab_body.remove();   //remove li of tab
});

// Revert current file
jQuery(document).on('click', '#revert', function (e) {
	e.preventDefault();
	load_file(jQuery(this).attr("href"));
});
// Restore current file
jQuery(document).on('click', '#restore', function (e) {
	e.preventDefault();
	load_file(jQuery(this).attr("href"));
});

// open the selected file
jQuery(document).on('click', 'a.editor_filelink', function (e) {
	e.preventDefault();
	var url = jQuery(this).attr("href");
	load_file(url);
});

	function isFullScreen(instance) {
		return /\bCodeMirror-fullscreen\b/.test(instance.getWrapperElement().className);
	}
	function winHeight() {
		return window.innerHeight || (document.documentElement || document.body).clientHeight;
	}
	function setFullScreen(instance, full) {
		var wrap = instance.getWrapperElement(), scroll = instance.getScrollerElement();
		if (full) {
			wrap.className += " CodeMirror-fullscreen";
			scroll.style.height = winHeight() + "px";
			document.documentElement.style.overflow = "hidden";
		} else {
			wrap.className = wrap.className.replace(" CodeMirror-fullscreen", "");
			scroll.style.height = "";
			document.documentElement.style.overflow = "";
		}
		instance.refresh();
	}
	CodeMirror.connect(window, "resize", function() {
		var showing = document.body.getElementsByClassName("CodeMirror-fullscreen")[0];
		if (!showing) return;
		console.log('CodeMirror.connect()',winHeight() );
		showing.CodeMirror.getScrollerElement().style.height = winHeight() + "px";
	});
	// must be here or break emmet/zencoding
	CodeMirror.defaults.extraKeys["Ctrl-S"] = 
		function(instance) {
			doClickSave();};
	CodeMirror.defaults.extraKeys["Ctrl-F11"]= 
		function(instance) {
			setFullScreen(instance, !isFullScreen(instance));};
	CodeMirror.defaults.extraKeys["Tab"] = "indentMore";
	CodeMirror.defaults.extraKeys["Esc"]=
		function(instance) {
			if (isFullScreen(instance)) {
				setFullScreen(instance, false);};}

	{{if len(request.args) > 1:}}
		load_file('{{=URL(f='edit', args=request.args, vars=request.get_vars)}}');
	{{pass}}
</script>

{{block sectionclass}}edit{{end}}


<div class='row-fluid'>
<p class="right controls pull-right">
  {{=button(URL('design',args=request.vars.app if request.vars.app else request.args[0], anchor=request.vars.id), T('back'))}}
  {{#if request.args[1]=='models':}}
  <a class="button btn" href="http://www.web2py.com/sqldesigner" target="_blank"><span>{{=T('online designer')}}</span></a>
  {{#pass}}
  <a class="button btn" href="http://www.web2py.com/examples/static/epydoc/index.html" target="_blank"><span>{{=T('docs')}}</span></a>
</p>
</div>
<div id="editor_area" class="row-fluid">
	<ul class="nav nav-list span2 well" rel="pagebookmark" id="filelist">
	{{dirs=[{'name':'models', 'reg':'.*\.py$'}, 
		{'name':'controllers', 'reg':'.*\.py$'},
		{'name':'views', 'reg':'[\w/\-]+(\.\w+)+$'},
		{'name':'modules', 'reg':'.*\.py$'},
		{'name':'private', 'reg': '[^\.#].*'}]}}
	{{for dir in dirs:}}
	<li class="nav-header component" onclick="collapse('{{="%s_files" % dir['name']}}');">{{=dir['name']}}</li>
	<li id="{{="%s_files" % dir['name']}}">
		<ul class="nav nav-list">	
		{{for f in listfiles(app, dir['name'], regexp=dir['reg'] ):}}
		{{id="%s__" % dir['name'] + f.replace('.','__')}}
		{{current_file = request.args(len(request.args) - 1)}} 
		<li class="{{#='active' if current_file==f else ''}}">
		{{=editfile(dir['name'], f, dict(id=id))}}	
		</li>
		{{pass}}
		</ul>
	</li>
	{{pass}}	
	</ul>
	<div class="span10" id="edit_placeholder">
		<ul class="nav nav-tabs " id="filesTab">
		</ul>
		<div id="myTabContent" class="tab-content">
		</div>
	</div>
</div>
<!-- end "edit" block -->