{% extends 'template.html' %}
{% block content %}
<div style="height:25px;border-bottom:1px solid #999;margin:-30px -30px 0px -30px;background:#ececeb;">
	<div style="float:left;color:red;margin-top:2px;" id="error_save"></div>
	<div style="float:left;text-align:right;margin:0px 20px 0px 0px;line-height:25px;">{{ file }}</div>
	<button style="float:right;" id="save"><u>S</u>ave</button><div id="saveloading" style="float:left;display:none">Saving...</div>
	<div style="padding-top:2px;font-size:13px;line-height:19px;">
	<input type="checkbox" id="wordwrap" style="float:right;"  checked="checked"/>	
	<label style="float:right;" for="wordwrap">Wordwrap</label>
	</div>
</div>
<pre id="editor" style="margin:0px -30px 0px -30px;cursor:text;display:none;font-size:12px;">{{ content }}</pre>
<div style="clear:both;"></div>  
<form action="{{ save_path }}" method="post" style="display:none" id="editform">
	<input type="hidden" name="content" id="editcontent" />
</form>

{% endblock %}

{% block script %}
<script src="{% nav index %}src/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="{% nav index %}src/mode-html.js" type="text/javascript" charset="utf-8"></script>
<script src="{% nav index %}src/mode-php.js" type="text/javascript" charset="utf-8"></script>
<script>
	$(document).ready(function() {
		$("#editor").width($(".right").width() +60);
		$("#editor").height($(window).height() - 115);
			
		$(window).resize(function() {
			$("#editor").width($(".right").width() + 60);
			$("#editor").height($(window).height() - 115);
		});
		$("#editor").show();
		
		var editor = ace.edit("editor");		
		var html = require("ace/mode/html").Mode;
		var php = require("ace/mode/php").Mode;
		var js = require("ace/mode/javascript").Mode;
		var css = require("ace/mode/css").Mode;
		editor.getSession().setUseWrapMode(true);
		if ("{{mode }}" != "none") 
		editor.getSession().setMode(new {{ mode }}());
		$(".ace_text-layer").css('fontFamily','"Monaco","Monospace","Consolas"');
		
		$("#editform").submit(function(event) {
			$("#error_save").text('');
			
			event.preventDefault(); 
				$("#save").hide();
				$("#saveloading").show();
				
			var $form = $( this ),
				content = editor.getSession().getValue(),
				url = $form.attr( 'action' );

			$.post( url, { content: content,path:'{{file}}' } ,
			  function( data ) {
				  $("#save").show();
				  $("#saveloading").hide();
				  
				  data = $.trim(data);
				  data = data.split('|');
				  
				  if (data[0] != "success") $("#error_save").text('Error: Permission Denied!');
				  if (data[1] != 'null') $("#scaffold_list li").each(function() {
					if ($(this).find('a:eq(0)').text() == data[1]) {
						if ($(this).find('a').length > 2) {
							var edit =$(this).find('a:eq(2)').clone();
							$(this).find('div').empty().append(edit).html("["+$(this).find('div').html() +"]");
						}
					}  
				  });
				  else $(".currentfile").removeClass("unsaved");
			  }
			);
		});
		
		$("#wordwrap").click(function() { editor.getSession().setUseWrapMode($("#wordwrap").attr("checked")); });
		$("#save").click(function() {
			$("#editform").submit();
		});
		
		$("#editor").keydown(function(event) {
			if (!$(".currentfile").hasClass("unsaved")) $(".currentfile").addClass("unsaved");
			if (!(event.which == 83 && event.ctrlKey)) return true;
			
			$("#save").click();
			event.preventDefault();
			return false;
		});
	});
</script>
{% endblock %}