https://bizinfo.go.kr/js/search/ark_main.js

1function getContextPath() {
2  var hostIndex = location.href.indexOf( location.host ) + location.host.length;
3  return location.href.substring( hostIndex, location.href.indexOf('/', hostIndex + 1) );
4};
5
6var g_oConvert = "fw";							// 정방향, 역방향 값
7var isArk = true;								// 자동완성 기능 사용 여부
8var isKeydown = false;							// 브라우저가 파이어폭스, 오페라일 경우 keydown 사용 여부
9var isListShow = true;
10var cursorPos = -1;								// 자동완성 커서 위치 값
11var formName = "#searchForm";					// 검색 form의 name을 설정한다.
12var queryId = "#query";							// 검색어 <input> 의 id을 설정한다
13var arkId = "#ark";								// 자동완성 전체 <div> 의 id을 설정한다
14var wrapId = "ark_wrap";						// 자동완성 결과 <div> 의 id을 설정한다
15var footerId = "ark_footer";					// 자동완성 Footer <div> 의 id을 설정한다
16var contentListId = "ark_content_list";			// 자동완성 Content List <li> 의 id을 설정한다
17var imgDownId = "ark_img_down";					// 자동완성 down 이미지 id을 설정한다
18var imgUpId = "ark_img_up";						// 자동완성 up 이미지 id을 설정한다
19var arkUpId = "ark_up";							// 자동완성 up 이미지 <div> 의 id을 설정한다
20var arkDownId = "ark_down";						// 자동완성 down 이미지 <div> 의 id을 설정한다
21var totalFwCount = 0;							// 전방 검색 전체 개수
22var totalRwCount = 0;							// 후방 검색 전체 개수
23var target = "";								// ARK 웹서버 설정파일의 목록에 있는 추천어 서비스 대상을 지정한다.
24var charset = "utf-8";							// 인코딩 설정 (인코딩이 utf-8이 아닐 경우 8859_1 로 설정해야함)
25var datatype = "json";							// 반환받을 Data의 타입을 설정. XML 과 JSON이 가능 (xml | json)
26var arkPath = getContextPath(); //getContextPath();						// 자동완성 경로
27var transURL =  "/web/searchArk.do";		// trans 페이지의 URL을 설정한다.
28var tempQuery = "";
29
30jQuery.browser = {}; (function () { jQuery.browser.msie = false; jQuery.browser.version = 0; if (navigator.userAgent.match(/MSIE ([0-9]+)\./)) { jQuery.browser.msie = true; jQuery.browser.version = RegExp.$1; } })();
31/**
32 *  ARK 구성요소의 위치 및 크기를 아래 변수를 통해 조정함.
33 */
34var browser = "";
35if ($.browser.msie) {
36	browser = "IE";
37} else if ($.browser.mozilla) {
38	browser = "FF";
39} else if ($.browser.opera) {
40	browser = "OPERA";
41} else if ($.browser.webkit) {
42	browser = "CHROME";
43}
44var browserVersion = $.browser.version;			// 웹브라우져의 버전
45var offset = null;
46var offsetTop = 0;
47var offsetLeft = 0;
48
49/** ARK 구성요소의 위치 및 크기를 아래 변수를 통해 조정함. **/
50var IE6_TOP_OFFSET = -36;				// IE6 일 경우 TOP 옵셋 값 오차 조정
51var IE6_LEFT_OFFSET = 20;				// IE6 일 경우 LEFT 옵셋 값 오차 조정
52var IE7_TOP_OFFSET = -63;				// IE7 일 경우 TOP 옵셋 값 오차 조정
53var IE7_LEFT_OFFSET = -18;				// IE7 일 경우 LEFT 옵셋 값 오차 조정
54var IE8_TOP_OFFSET = 0;					// IE8 일 경우 TOP 옵셋 값 오차 조정
55var IE8_LEFT_OFFSET = 0;				// IE8 일 경우 LEFT 옵셋 값 오차 조정
56var FF_TOP_OFFSET = 0;
57var FF_LEFT_OFFSET = 0;
58var CHROME_TOP_OFFSET = 0;
59var CHROME_LEFT_OFFSET = 0;
60var OPERA_TOP_OFFSET = 0;
61var OPERA_LEFT_OFFSET = 0;
62
63/** ARK 구성요소의 위치 및 크기를 아래 변수를 통해 조정함. **/
64var arkWidth = 5;								// 자동완성 전체 넓이 값을 설정한다(변동폭).
65var arkTop = -1;								// 자동완성 상단에서의 위치 값을 설정한다.
66var arkLeft = 8;								// 자동완성 왼쪽에서의 위치 값을 설정한다.
67var arkImgTop = 26;								// 자동완성 화살표 이미지의 상단에서 위치 값을 설정한다.
68var arkImgLeft = 26;							// 자동완성 화살표 이미지의 왼쪽에서 위치 값을 설정한다.
69var tooltip01TopPos = 0;						// 자동완성 기능끄기 툴팁의 상단 기준 위치 오차 조정값
70var tooltip01LeftPos = -155;					// 자동완성 기능끄기 툴팁의 좌측 기준 위치 오차 조정값
71var tooltip02TopPos = 0;						// 자동완성 기능켜기 툴팁의 상단 기준 위치 오차 조정값
72var tooltip02LeftPos = 0;						// 자동완성 기능켜기 툴팁의 좌측 기준 위치 오차 조정값
73
74var keyFix = new beta.fix('query');
75
76$(document).ready(function() {
77	// 자동완성 기능 사용 여부 확인 한다.
78	if(getCookie("ark")=="off") {
79		isArk = false;
80		$(queryId).attr("autocomplete","on");
81	} else {
82		$(queryId).attr("autocomplete","off");
83	}
84
85	// 브라우져별 ARK 옵셋 설정
86	setArkOffset();
87
88	// 자동완성 <div> 생성
89	drawArk();

90
91	// 자동완성 위치 설정
92	setArkLocation();
93
94	// 자동완성 넓이 및 높이 설정
95	setArkSize();
96
97	if ($.browser.opera || $.browser.mozilla) {
98		//alert("oepra:" + $.browser.opera + " / mozilla:" + $.browser.mozilla);
99		$(document).keydown(function(event) {
100			var query = $(queryId).val();
101			
102			if (event.which == 38 || event.which == 40) {
103				if (query != "") {
104					showArk();
105				}
106				moveFocusEvent(event);
107			} else {
108				if ($(event.target).is(queryId)) {
109					isKeydown = true;
110					eventKeydown();
111				}
112			}
113		});
114	} else if ($.browser.msie || $.browser.webkit) {
115		//alert("msie:" + $.browser.msie + " / webkit:" + $.browser.webkit);
116		$(document).keyup(function(event) {
117			var query = $(queryId).val();
118			
119			if (event.keyCode == 38 || event.keyCode == 40) {
120				// 아래(40), 위(38) 방향키 조작시의 이벤트 처리
121				if (query != "") {
122					showArk();
123				}
124				moveFocusEvent(event);
125			} else if (event.keyCode == 16) {
126			} else if (event.keyCode == 8 && query == "") {
127				$("#" + contentListId).html("");
128				hideArk();
129			} else {
130				if ($(event.target).is(queryId)) {
131					if (isArk && $(queryId).val() != "") {
132						if(datatype == "json") {
133							requestArkJson($(queryId).val());
134						} else if(datatype == "xml") {
135							requestArkXml($(queryId).val());
136						}
137					} else if ($(queryId).val() == "") {
138						hideArk();
139					}
140				}
141			}
142		});
143	}
144
145	// Backspace 에 대한 처리
146	$(queryId).keyup(function(event) {
147		if(event.keyCode == 8 && $(this).val() == "") {
148			$("#" + contentListId).html("");
149			hideArk();
150		}
151	});
152
153	// 브라우저에서 일어나는 클릭 이벤트를 체크한다.
154	$(document).click(function(event) {
155		stopEventBubble(event);
156		if ($(event.target).is("#" + imgDownId)) {
157			isListShow = false;
158			showArk();
159			showArkGuide();
160			setArkFooter();
161		} else if ($(event.target).is("#" + imgUpId)) {
162			hideArk();
163		} else if ($(event.target).is(queryId)) {
164			if (isArk) {
165				var query = $(queryId).val();
166				if (query != "") {
167					if(datatype == "json") {
168						requestArkJson($(queryId).val());
169					} else if(datatype == "xml") {
170						requestArkXml($(queryId).val());
171					}
172					keyword = query;
173				}
174				isKeydown = true;
175			}
176		} else if (!$(event.target).is("#" + wrapId)) {
177			hideArk();
178		}
179	});
180	
181	$("#" + imgUpId).hover(
182		function() {
183			$("#tooltip01").show();
184		},
185		function() {
186			$("#tooltip01").hide();
187		}
188	);
189});
190
191/************************************************
192 * jQuery Event Bubbling 방지를 위한 함수.
193 * @name stopEventBubble
194 * @param evt 페이지 이벤트
195 ************************************************/
196function stopEventBubble(evt) {
197	var eventReference = (typeof evt !== "undefined") ? evt : event;
198	//alert(eventReference.stopPropagation);
199
200	if(eventReference.stopPropagation) {
201		eventReference.stopPropagation();
202	} else {
203		eventReference.cancelBubble = true;
204	}
205}
206
207/************************************************
208 * 자동완성 키워드 목록 출력을 위한 DIV 생성
209 * @name drawArk
210 ************************************************/
211function drawArk() {
212	var str;
213
214	// 자동완성 접기/펼침 이미지 생성
215	// str = "<div id=\"" + arkDownId + "\" style=\"position:absolute; display:block; cursor:pointer;\"><img id=\"" + imgDownId + "\" src=\"" + arkPath + "/images/search/arrow_auto.gif\" alt=\"자동완성펼치기\"></div>";
216	// str += "<div id=\"" + arkUpId + "\" style=\"position:absolute; display:none; cursor:pointer;\"><img id=\"" + imgUpId + "\" src=\"" + arkPath + "/images/search/arrow_auto2.gif\" alt=\"자동완성접기\" ></div>";
217	
218	// 툴팁 이미지 생성
219	// str += "<div id=\"tooltip01\" style=\"position:absolute; display:none; cursor:pointer; z-index:999999;\"><img id=\"tooltipIcon01\" src=\"" + arkPath +"/images/search/tooltip_01.gif\"/></div>";
220
221	// 자동완성 결과 생성
222	str = "<div class=\"search_word_list\" id=\"" + wrapId +"\">";
223	str += "	<ul id=\"" + contentListId + "\">";
224	// str += "		<li>";
225	// str += "			<ul class=\"fl\" id=\"" + contentListId + "\"></ul class=\"fl\">";
226	// str += "		</li>";
227	// str += "		<li class=\"ark_footer\" id=\"" + footerId +"\"></li>";
228	str += "	</ul>";
229	str += "<span class=\"ark_close_btn\"><a href=\"#\" id=\"ark_close\" onclick=\"hideArk();\">닫기</a></span>";
230	str += "</div>";
231
232	$(arkId).html(str);
233}
234
235/************************************************
236 * Browser별로 기준점 Offset 값을 설정
237 * @name setArkOffset
238 ************************************************/
239function setArkOffset() {
240	offset = $(queryId).position();
241	if(!offset) return false;
242	offsetTop = offset.top;
243	offsetLeft = offset.left;
244
245	if (browser == "IE") {
246		if (browserVersion == "6.0") {
247			offsetTop = offsetTop + IE6_TOP_OFFSET;
248			offsetLeft = offsetLeft + IE6_LEFT_OFFSET;
249		} else if (browserVersion == "7.0") {
250			offsetTop = offsetTop + IE7_TOP_OFFSET;
251			offsetLeft = offsetLeft + IE7_LEFT_OFFSET;
252			offsetTop = offsetTop - 2;
253		} else if (browserVersion == "8.0") {
254			offsetTop = offsetTop + IE8_TOP_OFFSET;
255			offsetLeft = offsetLeft + IE8_LEFT_OFFSET;
256		}
257	} else if (browser == "FF") {
258		offsetTop = offsetTop + FF_TOP_OFFSET;

259		offsetLeft = offsetLeft + FF_LEFT_OFFSET;
260	} else if (browser == "CHROME") {
261		offsetTop = offsetTop + CHROME_TOP_OFFSET;
262		offsetLeft = offsetLeft + CHROME_LEFT_OFFSET;
263	} else if (browser == "OPERA") {
264		offsetTop = offsetTop + OPERA_TOP_OFFSET;
265		offsetLeft = offsetLeft + OPERA_LEFT_OFFSET;
266	}
267}
268
269/************************************************
270 * 자동완성 DIV의 위치 자동설정
271 * @name setArkLocation
272 ************************************************/
273function setArkLocation() {
274	var queryWidth = parseInt($(queryId).width());
275	var queryHeight = parseInt($(queryId).height());
276
277	// 자동완성 전체 위치 설정
278	// $(arkId).css({"position" : "relative", "z-index":"999999", "top" : offsetTop + "px", "left" : offsetLeft + "px", "width" : (queryWidth + arkWidth) + "px"});
279
280	// ARK Wrap의 위치 설정
281	// $("#" + wrapId).css({"position" : "absolute", "top" : arkTop, "left" : arkLeft});
282
283	// 화살표 닫기 이미지 위치 설정
284	$("#" + arkUpId).css({"top" : (arkImgTop - queryHeight) + "px"});
285	$("#" + arkUpId).css({"left" : ((queryWidth - 10) + arkImgLeft) + "px"});
286
287	// 화살표 열기 이미지 위치 설정
288	$("#" + arkDownId).css({"top" : (arkImgTop - queryHeight) + "px"});
289	$("#" + arkDownId).css({"left" : ((queryWidth - 10) + arkImgLeft) + "px"});
290	
291	// 자동완성접기 툴팁 이미지 위치 설정
292	$("#tooltip01").css({"top" : (offsetTop + tooltip01TopPos) + "px", "left" : (offsetLeft + queryWidth + tooltip01LeftPos) + "px"});
293}
294
295/************************************************
296 * 자동완성 DIV의 넓이/높이 자동설정
297 * @name setArkSize
298 ************************************************/
299function setArkSize() {
300	var queryWidth = parseInt($(queryId).width());
301	// $("#" + wrapId).css({"width" : (queryWidth + arkWidth) + "px"}); // 자동완성 넓이 설정
302	// $("#" + contentListId).css({"width" : (queryWidth + arkWidth) + "px"}); // 자동완성 결과 리스트 넓이 설정
303	$("#" + footerId).css({"width" : (queryWidth + arkWidth) + "px"}); // 자동완성 풋터 넓이 설정
304}
305
306
307/************************************************
308 * 자동완성 결과 요청
309 * @name requestArk
310 * @param query 키보드 입력된 문자열
311 ************************************************/
312function requestArkJson(query) {
313	jQuery.support.cors = true;
314
315	cursorPos = -1;
316
317	$.ajaxSetup({cache:false});
318	$.ajax({
319		url: transURL,
320		type: "POST",
321		dataType: "json",
322		data: {"convert":g_oConvert, "target":target, "charset":charset, "query":query, "datatype": datatype},
323		success: function(data) {
324			if(data.result.length <= 0) {
325				totalFwCount = 0;
326				totalRwCount = 0;
327			}
328
329			var str = "";
330
331			$.each(data.result, function(i, result) {
332				var totalCount = parseInt(result.totalcount);
333			
334				if (i == 0) {
335					totalFwCount = totalCount;
336				} else {
337					totalRwCount = 10;
338				}
339				
340				
341				if (totalCount > 0) {
342					// 정방향, 역방향 구분선
343					if (i > 0 && totalFwCount > 0 && totalRwCount > 0) {
344						str += "<li style=\"border-top:1px solid #f3f3f3;\"></li>";
345					}
346
347					// 자동완성 리스트 설정
348					$.each(result.items, function(num,item){
349						if(num < 5) {
350							if (num > totalRwCount) {
351								return;
352							}
353
354							if (i != 0) {
355								num = totalFwCount + num;
356							}
357							str += "<li id=\"bg" + num + "\" onclick=\"onClickKeyword(" + num + ");\" onmouseover=\"onMouseOverKeyword(" + num + ");\"";
358							str += " onmouseout=\"onMouseOutKeyword(" + num + ");\" data-keyword='"+item.keyword+"'>" + showSource(parseInt(item.type)) + "&nbsp;&nbsp;" + item.hkeyword;
359						}
360					});
361				}
362			});
363
364			if ((totalFwCount + totalRwCount) == 0) {
365				$("#" + contentListId).html("<li>해당 단어로 시작하는 검색어가 없습니다.</li>");
366			} else {
367				$("#" + contentListId).html(str);
368			}
369
370			setArkFooter();
371			showArk();
372		}
373    });
374}
375
376function requestArkXml(query) {
377	jQuery.support.cors = true;
378
379	cursorPos = -1;
380	totalFwCount = 0;
381	totalRwCount = 0;
382
383	$.ajaxSetup({cache:false});
384	$.ajax({

385		url: transURL,
386		type: "POST",
387		dataType: "xml",
388		data: {"convert":g_oConvert, "target":target, "charset":charset, "query":query, "datatype": datatype},
389		success: function(data, xhr) {
390			var str = "";
391
392			var $resultElement = $(data).find("Response").find("Value");
393			var returnCode = $resultElement.find("Return").text();
394
395			if (returnCode == 0) {
396				if ($resultElement.find("ARKList").size() <= 0) {
397					totalFwCount = 0;
398				} else {
399					var totalCount = $resultElement.find("ARKList").find("TotalCount").text();
400					totalFwCount = totalCount;
401				}
402
403				if ($resultElement.find("ARKRList").size() <= 0) {
404					totalRwCount = 0;
405				} else {
406					var totalCount = $resultElement.find("ARKRList").find("TotalCount").text();
407					totalRwCount = totalCount;
408				}
409
410				// ARKList
411				$resultElement.find("ARKList").each(function(idx) {
412					$(this).find("ARK").each(function(idx) {
413						var $ark = $(this);
414						var hkeyword = $ark.attr("HKeyword");
415						var keyword = $ark.attr("keyword");
416						var count = $ark.attr("count");
417						var type = $ark.attr("type");
418
419						str += "<li id=\"bg"+ idx +"\" onclick=\"onClickKeyword(" + idx + ");\" onmouseover=\"onMouseOverKeyword(" + idx + ");\"";
420						str += " onmouseout=\"onMouseOutKeyword(" + idx + ");\">" + showSource(parseInt(type)) + "&nbsp;&nbsp;" + hkeyword;
421						// str += " <span id=\"f" + idx +"\" style=display:none;>" + keyword + "</span>";
422						// str += " <span style=\"position:absolute; right:0;\">" + showRankIcon(parseInt(count)) + "&nbsp</span></li>";
423					});
424				});
425
426				if(totalFwCount > 0 && totalRwCount > 0) {
427					str += "<li style=\"border-top:1px solid #f3f3f3; padding:0;\"></li>";
428				}
429
430				// ARKRList
431				$resultElement.find("ARKRList").each(function(idx) {
432					$(this).find("ARK").each(function(i) {
433						var nums = i + parseInt(totalFwCount);
434						var $ark = $(this);
435						var hkeyword = $ark.attr("HKeyword");
436						var keyword = $ark.attr("keyword");
437						var count = $ark.attr("count");
438						var type = $ark.attr("type");
439
440						str += "<li id=\"bg"+ nums +"\" onclick=\"onClickKeyword(" + nums + ");\" onmouseover=\"onMouseOverKeyword(" + nums + ");\"";
441						str += " onmouseout=\"onMouseOutKeyword(" + nums + ");\">" + showSource(parseInt(type)) + "&nbsp;&nbsp;" + hkeyword;
442						str += " <span id=\"f" + nums +"\" style=display:none;>" + keyword + "</span>";
443						// str += " <span style=\"position:absolute; right:0;\">" + showRankIcon(parseInt(count)) + "&nbsp</span></li>";
444					});
445				});
446
447				if ((totalFwCount + totalRwCount) == 0) {
448					$("#" + contentListId).html("<li style=\"padding:6px 0 6px 10px;\">해당 단어로 시작하는 검색어가 없습니다.</li>");
449				} else {
450					$("#" + contentListId).html(str);
451				}
452
453				setArkFooter();
454				showArk();
455			}
456		}
457	});
458}
459
460
461var keyword = "";
462
463/************************************************
464 * 브라우저가 FireFox, Opera 일 경우 한글 입력
465 * @name eventKeydown
466 ************************************************/
467function eventKeydown() {
468	// 방향키 이동시 메소드 실행을 중지시킨다.
469	if(!isKeydown) {
470		return;
471	}
472
473	if (keyword != $(queryId).val()) {
474		keyword = $(queryId).val();
475		if (keyword != "" && isArk) {
476			if(datatype == "json") {
477				requestArkJson($(queryId).val());
478			} else if(datatype == "xml") {
479				requestArkXml($(queryId).val());
480			}
481		} else {
482			hideArk();
483		}
484	}
485	setTimeout("eventKeydown()", 20);
486}
487
488
489/************************************************
490 * 방향키 이벤트 처리
491 * @name moveFocusEvent
492 * @param event 페이지 이벤트
493 ************************************************/
494function moveFocusEvent(event) {
495	isKeydown = false;
496
497	if (event.keyCode == 38) {
498		if (cursorPos==-1 || cursorPos==0) {
499			cursorPos = -1;
500			hideArk();
501			$(queryId).val(tempQuery);
502			tempQuery = "";
503		} else {
504			onMouseOutKeyword(cursorPos);
505			cursorPos = cursorPos - 1;
506			onMouseOverKeyword(cursorPos);
507			$(queryId).val($("#bg" + cursorPos).data('keyword'));
508		}
509	} else if (event.keyCode == 40) {

510		if(cursorPos == -1) {
511			tempQuery = $(queryId).val();
512		}
513		if ((totalFwCount + totalRwCount) > (cursorPos + 1)) {
514			onMouseOutKeyword(cursorPos);
515			cursorPos = cursorPos + 1;
516			onMouseOverKeyword(cursorPos);
517			$(queryId).val($("#bg" + cursorPos).data('keyword'));
518		}
519	}
520}
521
522/************************************************
523 * MouseOver 일 경우 선택한 배경을 설정
524 * @name onMouseOverKeyword
525 * @param cursorNum 커서의 위치 인덱스 값
526 ************************************************/
527function onMouseOverKeyword(cursorNum) {
528	clearCursorPos();
529	cursorPos = cursorNum;
530	$("#bg" + cursorNum).css({"backgroundColor" : "#eeeeee"});
531	$("#bg" + cursorNum).css({"cursor" : "pointer"});
532}
533
534/************************************************
535 * MouseOut 일 경우 설정한 배경을 초기화
536 * @name onMouseOutKeyword
537 * @param cursorNum 커서의 위치 인덱스 값
538 ************************************************/
539function onMouseOutKeyword(curSorNum) {
540	cursorPos = curSorNum;
541	$("#bg" + cursorPos).css({"backgroundColor" : "#ffffff"});
542}
543
544/************************************************
545 * 커서 위치가 변경될 때마다 선택되지 않은 부분 초기화
546 * @name clearCursorPos
547 ************************************************/
548function clearCursorPos() {
549	for(var i=0; i<(totalFwCount + totalRwCount); i++){
550		$("#bg" + i).css({"backgroundColor" : "#ffffff"});
551	}
552}
553
554/************************************************
555 * 마우스 클릭시 검색을 수행
556 * @name onClickKeyword
557 * @param cursorPos 커서의 위치
558 ************************************************/
559function onClickKeyword(cursorPos) {
560    $(queryId).val($("#bg" + cursorPos).data('keyword'));
561    $(formName).submit();
562}
563
564/************************************************
565 * 자동완성 상태를 설정
566 * @name showArkGuide
567 ************************************************/
568function showArkGuide() {
569	var str = "<li style=\"line-height:145%; font-size:11px;\">";
570
571	if (isArk) {
572		str += "현재 검색어 &nbsp;<strong>자동 추천 기능</strong>을 사용하고 있습니다.<br>검색어 입력시 자동으로 관련어를 추천합니다.";
573	} else {
574		str += "<strong>자동 추천 기능</strong>을 사용해 보세요. <label OnClick=\"setArkOn();\" style=\"cursor:pointer;color:#435fea;text-decoration:underline;\">기능켜기</label><br>검색어 입력시 자동으로 관련어를 추천합니다.";
575	}
576
577	str += "</li>";
578
579	$("#" + contentListId).html(str);
580}
581
582/************************************************
583 * 자동완성 Footer 생성
584 * @name setArkFooter
585 ************************************************/
586function setArkFooter() {
587	var str = "";
588
589	if (isArk && $(queryId).val() != "" && (totalFwCount + totalRwCount) > 0 && isListShow) {
590		str += "<div class=\"left\" style=\"padding:8px 0 0 5px; color:#888888;\">";
591
592		if (g_oConvert == "fw") {
593			str += "<label OnClick=\"onConvert('rw');\" style=\"cursor:pointer;\">끝단어 더보기</label>";
594		} else if (g_oConvert == "rw") {
595			str += "<label OnClick=\"onConvert('fw');\" style=\"cursor:pointer;\">첫단어 더보기</label>";
596		}
597
598		str += "</div>";
599	}
600
601	if (isArk) {
602		str += "<div class=\"right\" style=\"padding:8px 0 0 0; color:#888888;\">";
603
604		if ($(queryId).val() != "" && isListShow) {
605			str += "<label id=\"arkOff\" onmouseover=\"previewShow(event, this,'tooltip02');\" OnClick=\"setArkOff();\" style=\"cursor:pointer;\">기능끄기</label>";
606			$("body").append("<span style=\"display:none;\"><div id=\"tooltip02\" style=\"position:absolute;\"><img id=\"tooltipIcon02\" src=\"/images/search/tooltip_02.gif\"/></div></span>");
607		} else {
608			str += "<label OnClick=\"showArk();\" style=\"cursor:pointer;\">닫기</label>";
609			isListShow = true;
610		}
611
612		str += "</div>";
613	} else {
614		str += "<div class=\"right\" style=\"padding:8px 0 0 0; color:#888888;\"><label OnClick=\"showArk();\" style=\"cursor:pointer;\">닫기</label></div>";
615	}
616
617	$("#" + footerId).html(str);
618}
619
620/************************************************
621 * 자동완성 목록을 화면에 보여줌
622 * @name showArk
623 ************************************************/
624function showArk() {
625  if(  $(queryId).val() != ""){
626	    $("#" + wrapId).show();
627	    $("#" + arkUpId).show();
628	    $("#" + arkDownId).hide();
629	}
630}
631
632/************************************************
633 * 자동완성 목록을 화면에서 감춤
634 * @name hideArk

635 ************************************************/
636function hideArk() {
637	$("#" + wrapId).hide();
638	$("#" + arkUpId).hide();
639	$("#" + arkDownId).show();
640	
641	// 자동완성 없을 경우 검색박스 css 수정. 2022.04.20 추가.
642	if( $(".main_search_input") || $(".search_keyword_input")){
643		$(".main_search, .custom_search").removeClass("focus");
644	}
645
646}
647
648/************************************************
649 * 도움말 팝업
650 * @name openHelp
651 ************************************************/
652function openHelp() {
653	window.open(arkPath + "/help/help_01.html", "도움말", "height=540,width=768,toolbar=no,menubar=no,scrollbars=yes,resizable=no,location=no,directories=no,status=no");
654}
655
656/************************************************
657 * 단어 입력 후 정방향/역방향 이미지 버튼 클릭시 이벤트 처리
658 * @name onConvert
659 * @param convert
660 ************************************************/
661function onConvert(convert) {
662	var query = $(queryId).val();
663
664	if (convert == "fw") {
665		g_oConvert = "fw";
666	} else {
667		g_oConvert = "rw";
668	}
669
670	if (datatype == "json") {
671		requestArkJson(query);
672	} else if (datatype == "xml") {
673		requestArkXml(query);
674	}
675
676	return;
677}
678
679/************************************************
680 * 자동완성 기능 끄기
681 * @name setArkOff
682 ************************************************/
683function setArkOff() {
684	$(queryId).attr("autocomplete", "on");
685	isArk = false;
686
687	var today = new Date();
688	var expire_date = new Date(today.getTime() + 365*60*60*24*1000);
689	setCookie("ark", "off", expire_date);
690}
691
692/************************************************
693 * 자동완성 기능 켜기
694 * @name setARkOn
695 ************************************************/
696function setArkOn() {
697	$(queryId).attr("autocomplete", "on");
698	isArk = true;
699
700	var today = new Date();
701	var expireDate = new Date(today.getTime() - 60*60*24*1000);
702	setCookie("ark", "on", expireDate);
703
704	var query = $(queryId).val();
705	if (query != "") {
706		if(datatype == "json") {
707			requestArkJson(query);
708		} else if(datatype == "xml") {
709			requestArkXml(query);
710		}
711		setArkFooter();
712	}
713}
714
715/************************************************
716 * 쿠키 설정값을 저장
717 * @name setCookie
718 * @param name 쿠키 항목명
719 * @param value 쿠키 항목의 값
720 * @param expire 쿠키 만료일자
721 ************************************************/
722function setCookie(name, value, expire) {
723	var expire_date = new Date(expire);
724	document.cookie = name + "=" + escape(value) + "; path=/; expires=" + expire_date.toGMTString();
725}
726
727/************************************************
728 * 쿠키 설정값을 로드
729 * @name getCookie
730 * @param name 쿠키 항목명
731 ************************************************/
732function getCookie(name) {
733	var dc = document.cookie;
734	var prefix = name + "=";
735	var begin = dc.indexOf("; " + prefix);
736	if (begin == -1) {
737		begin = dc.indexOf(prefix);
738		if (begin != 0) {
739			return null;
740		}
741	} else {
742		begin += 2;
743	}
744
745	var end = document.cookie.indexOf(";", begin);
746
747	if (end == -1) {
748		end = dc.length;
749	}
750
751	return unescape(dc.substring(begin + prefix.length, end));
752}
753
754/************************************************
755 * 폰트 컬러 설정
756 * @name showSource
757 * @param count 등급 레벨
758 ************************************************/
759function showSource(count) {
760	var color;
761	var ret;
762
763	if (count >= 0 && count <= 4) {
764		color = "#575757";
765	} else {
766		color = "#CC6633";
767	}
768
769	if (count == 0 || count == 5) {
770		ret = "<font style='font-size:11px;font-family:돋움;color:"+color+"'>사전</font>";
771	} else if(count == 1 || count == 6) {
772		ret = "<font style='font-size:11px;font-family:돋움;color:"+color+"'>일반</font>"; //색인
773	} else if(count == 2 || count == 7) {
774		ret = "<font style='font-size:11px;font-family:돋움;color:"+color+"'>인기</font>";
775	} else if(count == 3 || count == 8) {
776		ret = "<font style='font-size:11px;font-family:돋움;color:"+color+"'>테마</font>";
777	} else if(count == 4 || count == 9) {
778		ret = "<font style='font-size:11px;font-family:돋움;color:"+color+"'>추천</font>";
779	} else {
780		ret = "";
781	}
782
783	return ret;
784}
785
786/************************************************
787 * 추천어 리스트 우측에 Ranking 이미지 출력
788 * @name showRankIcon
789 * @param count 랭크 점수
790 ************************************************/
791function showRankIcon(count) {
792	var str;
793
794	if (count >= 0 && count <= 20) {
795		str = "<font style=\"font-size:9px;color:#CC6633\">|</font><font style=\"font-size:9px;color:#C0C0C0\">||||</font>";
796	} else if(count > 20 && count <= 40) {
797		str = "<font style=\"font-size:9px;color:#CC6633\">||</font><font style=\"font-size:9px;color:#C0C0C0\">|||</font>";
798	} else if(count > 40 && count <= 60) {
799		str = "<font style=\"font-size:9px;color:#CC6633\">|||</font><font style=\"font-size:9px;color:#C0C0C0\">||</font>";
800	} else if(count > 60 && count <= 80) {
801		str = "<font style=\"font-size:9px;color:#CC6633\">||||</font><font style=\"font-size:9px;color:#C0C0C0\">|</font>";
802	} else if(count > 80 && count <= 100) {
803		str = "<font style=\"font-size:9px;color:#CC6633\">|||||</font>";
804	} else {
805		str = "<font style=\"font-size:9px;color:#CC6633\">|||||</font>";
806	}
807
808	return str;
809}
810
811
812var preview = "";
813var gobj = "";
814
815function attachEvent_(obj, evt, fuc, useCapture) {
816	if (!useCapture) {
817		useCapture = false;
818	}
819
820	if (obj.addEventListener) {
821		// W3C DOM 지원 브라우저
822		return obj.addEventListener(evt,fuc,useCapture);
823	} else if (obj.attachEvent) {
824		// MSDOM 지원 브라우저
825		return obj.attachEvent("on"+evt, fuc);
826	} else {
827		// NN4 나 IE5mac 등 비 호환 브라우저
828		MyAttachEvent(obj, evt, fuc);
829		obj['on'+evt]=function() { MyFireEvent(obj,evt) };
830	}
831}
832
833function detachEvent_(obj, evt, fuc, useCapture) {
834  if(!useCapture) useCapture=false;
835  if(obj.removeEventListener) {
836    return obj.removeEventListener(evt,fuc,useCapture);
837  } else if(obj.detachEvent) {
838    return obj.detachEvent("on"+evt, fuc);
839  } else {
840    MyDetachEvent(obj, evt, fuc);
841    obj['on'+evt]=function() { MyFireEvent(obj,evt) };
842  }
843}
844
845function MyAttachEvent(obj, evt, fuc) {
846  if(!obj.myEvents) obj.myEvents= {};
847  if(!obj.myEvents[evt]) obj.myEvents[evt]=[];
848  var evts = obj.myEvents[evt];
849  evts[evts.length]=fuc;
850}
851
852function MyFireEvent(obj, evt) {
853  if(!obj.myEvents || !obj.myEvents[evt]) return;
854  var evts = obj.myEvents[evt];
855  for (var i=0;i<len;i++) {
856    len=evts.length;
857    evts[i]();
858  }
859}
860
861function previewShow(e, obj, pv) {
862  preview=pv;
863  gobj=obj;
864  attachEvent_(obj, "mousemove", previewMove, false);
865  attachEvent_(obj, "mouseout", previewHide, false);
866}
867
868function previewMove(e) {
869  var hb = document.getElementById(preview);
870  if(hb.parentElement) {
871	  hb.parentElement.style.display="block";
872  } else {
873	  hb.parentNode.style.display="";
874  }
875  var evt = e ? e : window.event;
876  var posx=0;
877  var posy=0;
878
879  if (evt.pageX || evt.pageY) { // pageX/Y 표준 검사
880    posx = evt.pageX +8;
881    posy = evt.pageY +16;
882  }

882 else if (evt.clientX || evt.clientY) { //clientX/Y 표준 검사 Opera
883    posx = evt.clientX +10;
884    posy = evt.clientY +20;
885    if (window.event) { // IE 여부 검사
886      posx += document.body.scrollLeft - 80;
887      posy += document.body.scrollTop;
888     }
889  }
890
891  hb.style.left = posx + "px";
892  hb.style.top = posy + "px";
893}
894
895function previewHide() {
896  var hb = document.getElementById(preview);
897  if(hb.parentElement) hb.parentElement.style.display="none";
898  else hb.parentNode.style.display="none";
899
900  detachEvent_(gobj,"mousemove", previewMove, false);
901}