<%@ page contentType="text/html;charset=utf-8" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="s"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<!doctype html>
<html lang="ko">
	<head>
	<title><s:message code="manager.file.multiFileList.edit"/></title>
	<link rel="stylesheet" href="/codemirror/lib/codemirror.css">
	<link rel="stylesheet" href="/codemirror/addon/dialog/dialog.css">
	<link rel="stylesheet" href="/codemirror/addon/hint/show-hint.css">
	<link rel="stylesheet" href="/codemirror/addon/display/fullscreen.css">
	
	<style>
		body { margin:0; padding:0; }
		textarea { border:1px solid #ddd; border-radius:5px; vertical-align:0;font-family:"돋움", "dotum"; font-size:12px;}
		.CodeMirror {
			height : 426px;
		}
		.CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }
		.cm-tab {
			background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAMCAYAAAAkuj5RAAAAAXNSR0IArs4c6QAAAGFJREFUSMft1LsRQFAQheHPowAKoACx3IgEKtaEHujDjORSgWTH/ZOdnZOcM/sgk/kFFWY0qV8foQwS4MKBCS3qR6ixBJvElOobYAtivseIE120FaowJPN75GMu8j/LfMwNjh4HUpwg4LUAAAAASUVORK5CYII=);
			background-position: right;
			background-repeat: no-repeat;
		}
	</style>
	
	<link rel="stylesheet" href="/css/space.css">
	
	<!-- theme css -->
	<link rel="stylesheet" href="/codemirror/theme/3024-day.css">
	<link rel="stylesheet" href="/codemirror/theme/3024-night.css">
	<link rel="stylesheet" href="/codemirror/theme/ambiance.css">
	<link rel="stylesheet" href="/codemirror/theme/base16-dark.css">
	<link rel="stylesheet" href="/codemirror/theme/base16-light.css">
	<link rel="stylesheet" href="/codemirror/theme/blackboard.css">
	<link rel="stylesheet" href="/codemirror/theme/cobalt.css">
	<link rel="stylesheet" href="/codemirror/theme/eclipse.css">
	<link rel="stylesheet" href="/codemirror/theme/elegant.css">
	<link rel="stylesheet" href="/codemirror/theme/erlang-dark.css">
	<link rel="stylesheet" href="/codemirror/theme/lesser-dark.css">
	<link rel="stylesheet" href="/codemirror/theme/mbo.css">
	<link rel="stylesheet" href="/codemirror/theme/midnight.css">
	<link rel="stylesheet" href="/codemirror/theme/monokai.css">
	<link rel="stylesheet" href="/codemirror/theme/neat.css">
	<link rel="stylesheet" href="/codemirror/theme/night.css">
	<link rel="stylesheet" href="/codemirror/theme/paraiso-dark.css">
	<link rel="stylesheet" href="/codemirror/theme/paraiso-light.css">
	<link rel="stylesheet" href="/codemirror/theme/rubyblue.css">
	<link rel="stylesheet" href="/codemirror/theme/solarized.css">
	<link rel="stylesheet" href="/codemirror/theme/the-matrix.css">
	<link rel="stylesheet" href="/codemirror/theme/tomorrow-night-eighties.css">
	<link rel="stylesheet" href="/codemirror/theme/twilight.css">
	<link rel="stylesheet" href="/codemirror/theme/vibrant-ink.css">
	<link rel="stylesheet" href="/codemirror/theme/xq-dark.css">
	<link rel="stylesheet" href="/codemirror/theme/xq-light.css">
	<!-- theme css -->
	
	<script src="/codemirror/lib/codemirror.js"></script>
	<script src="/codemirror/mode/xml/xml.js"></script>
	<script src="/codemirror/addon/dialog/dialog.js"></script>
	<script src="/codemirror/addon/search/searchcursor.js"></script>
	<script src="/codemirror/addon/search/search.js"></script>
	<script src="/codemirror/addon/fold/xml-fold.js"></script>
	<script src="/codemirror/addon/edit/matchtags.js"></script>
	<script src="/codemirror/addon/edit/closetag.js"></script>
	<script src="/codemirror/addon/hint/show-hint.js"></script>
	<script src="/codemirror/addon/hint/xml-hint.js"></script>
	<script src="/codemirror/addon/hint/html-hint.js"></script>
	<script src="/codemirror/mode/javascript/javascript.js"></script>
	<script src="/codemirror/mode/css/css.js"></script>
	<script src="/codemirror/mode/htmlmixed/htmlmixed.js"></script>
	<script src="/codemirror/addon/display/fullscreen.js"></script>
	<script src="/codemirror/mode/clike/clike.js"></script>
	<script src="/codemirror/keymap/extra.js"></script>
	<script src="/codemirror/addon/selection/active-line.js"></script>
	<script src="/codemirror/addon/edit/matchbrackets.js"></script>
	<script src="/codemirror/addon/zen/zen_codemirror.min.js"></script>
	<script src="/js/cookie.js"></script>
	<script src="/js/seed.app.js"></script>
	<script src="/js/lib/jquery.bxslider.min.js"></script>

	</head>
	
	<body>
	
		<div class="seed-popup-wrap">
			<div class="page-title-wrap clear">
				<div class="page-title-inner">
					<h3 class="page-title"><s:message code="manager.file.nav"/></h3>
					<div class="tooltipBox type01">
						<button type="button" class="page-tip">페이지안내</button>
						<div class="tooltipText">
							<p>파일관리</p>
						</div>
					</div>
				</div>
			</div>
		
			<form:form name="frm" id="frm" method="post" action="/common/proc/${siteIdx}/gtm/multiFileAttributeProc.do">
				<input type="hidden" name="dirPath" id="dirPath" value="<c:out escapeXml='true' value='${dirPath}' />"/>
				<input type="hidden" name="fileName" id="fileName" value="<c:out escapeXml='true' value='${fileName}' />"/>
				<textarea name="fileAttribute" id="fileAttribute" rows="" cols="" style="height:476px; width:99%;"><c:out escapeXml='false' value='${fileAttribute}' /></textarea>
				
				<div class="layout-footer">
					<div class="skin-list-box">
						<label for="layout-skin-list" class="hidden">레이아웃 스킨 선택</label>
						<select onchange="selectTheme()" id="select" class="layout-skin-list">
							<option selected>default</option>
							<option>3024-day</option>
							<option>3024-night</option>
							<option>ambiance</option>
							<option>base16-dark</option>
							<option>base16-light</option>
							<option>blackboard</option>
							<option>cobalt</option>
							<option>eclipse</option>
							<option>elegant</option>
							<option>erlang-dark</option>
							<option>lesser-dark</option>
							<option>mbo</option>
							<option>midnight</option>
							<option>monokai</option>
							<option>neat</option>
							<option>night</option>
							<option>paraiso-dark</option>
							<option>paraiso-light</option>
							<option>rubyblue</option>
							<option>solarized dark</option>
							<option>solarized light</option>
							<option>the-matrix</option>
							<option>tomorrow-night-eighties</option>
							<option>twilight</option>
							<option>vibrant-ink</option>
							<option>xq-dark</option>
							<option>xq-light</option>
						</select>
					</div>
				</div>
	
				<!--
	
				/////////////// 
				Crtl-E 
					toMatchingTag
				Ctrl-Space
					autocomplete
				///////////////
	
				/////////////// Search /////////////////
				Ctrl-F / Cmd-F
					Start searching
				Ctrl-G / Cmd-G
					Find next
				Shift-Ctrl-G / Shift-Cmd-G
					Find previous
				Shift-Ctrl-F / Cmd-Option-F
					Replace
				Shift-Ctrl-R / Shift-Cmd-Option-F
					Replace all 
				/////////////// Search /////////////////
	
	
				/////////////// Full Screen ////////////
				F11
					Full Size
				ESC
					Full Not Size
				/////////////// Full Screen ////////////
	
	
				/////////// TAB Zen Coding/////////
				http://docs.emmet.io/abbreviations/syntax/
				/////////// TAB Zen Coding /////////
	
				-->
				
				<div class="btn-area mb5">
					<button type="submit" class="btn-normal violet"><s:message code="common.button.mod"/></button>
					<a href="javascript:window.close();" class="btn-normal lightgray"><s:message code="common.button.close"/></a>
				</div>
						
			</form:form>
			
		</div>
		
		<script>
		/* <![CDATA[ */
		$("#frm").submit(function(){

			if(!confirm("<s:message code='common.message.item.confirm.mod'/>")){
				return false;
			}
			
			$.blockUI({ message : '<h1><img src="/img/blockbusy.gif" />&nbsp;&nbsp;<s:message code="common.message.ajaxwait"/></h1>' });
		});

		var F11key = false;

		$(".CodeMirror").keyup(function(e) {

			if(e.keyCode == "122" || e.keyCode == "27"){
				if(F11key == false){
					if(e.keyCode == "122"){ //F11
						parent.jf_eventF11('Css');
						F11key = true;
					}else if(e.keyCode == "27"){ //ESC
						parent.jf_eventEsc('Css');
					}
				}else{
					parent.jf_eventEsc('Css');
					F11key = false;
				}
			}
		});
	
		CodeMirror.commands.autocomplete = function(cm) {
			CodeMirror.showHint(cm, CodeMirror.hint.javascript);
		};

		var editor = CodeMirror.fromTextArea(document.getElementById("fileAttribute"), {
			value: "<html>\n  " + document.documentElement.innerHTML + "\n</html>",
			mode: "text/html",
			lineNumbers: true,			
			matchTags: {bothTags: true},
			extraKeys: {
				"Ctrl-E": "toMatchingTag",
				"Ctrl-Space": "autocomplete",
				"F11": function(cm) {
					cm.setOption("fullScreen", !cm.getOption("fullScreen"));
				},
				"Esc": function(cm) {
					if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
				}
			},
			autoCloseTags: true,
			styleActiveLine: true,
			matchBrackets: true,
			syntax: 'css',   /* define Zen Coding syntax */
			profile: 'xhtml', /* define Zen Coding output profile */
			
			// send all key events to Zen Coding
			onKeyEvent: function() {
				return zen_editor.handleKeyEvent.apply(zen_editor, arguments);
			}
		});

		var input = document.getElementById("select");

		function selectTheme() {
			var theme = input.options[input.selectedIndex].innerHTML;
			editor.setOption("theme", theme);
			jf_setCookie("selectTheme", theme);
		}

		var choice = jf_getCookie("selectTheme");

		if (choice != "") {
			input.value = choice;
			editor.setOption("theme", choice);
			$("#select").val(choice).attr("selected", "selected");
		}

		function jf_submit(){
			$("#siteMenuCss").val(editor.getValue());
			$("#frm").submit();
		}

		function jf_codeSubmit(){
			$("#siteMenuCss").val(editor.getValue());
		}

		function jf_codeSetSubmit(){
			editor.setValue($("#siteMenuCss").val());
		}
		/* ]]> */
		</script>
		
	</body>
	
</html>