<%@ 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.skin.siteSkinCss.title"/></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">
	<link rel="stylesheet" href="//fonts.googleapis.com/earlyaccess/notosanskr.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 : 466px;
		}
		.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>
	
	<!-- 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>
	<style>
		html{overflow:hidden;}
		body{background:#fff;}	
	</style>
	</head>
	
	<body>
	
		<form:form name="frm" id="frm" method="post" action="/gtm/proc/${siteIdx}/siteSkinCssModProc.do">
			<input type="hidden" name="pageType" id="pageType" value="<c:out escapeXml='true' value='${pageType}' />" />
			<input type="hidden" name="pageName" id="pageName" value="<c:out escapeXml='true' value='${pageName}' />" />		
			<textarea name="siteSkinCss" id="siteSkinCss" style="display:none; "><c:out escapeXml='true' value='${siteSkinCss}' /></textarea>
			<textarea name="codeTextArea" id="codeTextArea" style="height:500px; width:99%;"><c:out escapeXml='true' value='${siteSkinCss}' /></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 /////////

			-->
		</form:form>


			<script>
		/* <![CDATA[ */
		$("#frm").submit(function(){
			$.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('${siteLayOutPosition}');
						F11key = true;
					}else if(e.keyCode == "27"){ //ESC
						parent.jf_eventEsc('${siteLayOutPosition}');
					}
				}else{
					parent.jf_eventEsc('${siteLayOutPosition}');
					F11key = false;
				}
			}
		});
		
		
		CodeMirror.commands.autocomplete = function(cm) {
			CodeMirror.showHint(cm, CodeMirror.hint.javascript);
		};

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

		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(){
			$("#siteSkinCss").val(editor.getValue());
			$("#frm").submit();
		}

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

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