<?xml version="1.0" encoding="UTF-8" ?>
<Module>
	<ModulePrefs title="지식상자" directory_title="위키백과 지식상자"
		description="위키백과의 유익한 문서 내용을 간략하게 표시하여, 사용자에게 폭넓은 지식을 줄 수 있는 지식상자 위젯입니다. 시작 경로에 의해 설정된 용어를 시작으로 관련된 용어를 자동 탐색하여 지속적으로 표시합니다."
		screenshot="http://muik.net/gadgets/wikipedia.png"
		thumbnail="http://muik.net/gadgets/wikipedia_thumb.png"
		author="muik" author_email="muikor@gmail.com" author_link="http://muik.net/about"
		author_location="Seoul, Korea" 
		height="250" scaling="false">
		<Require feature="minimessage"/>
		<Require feature="dynamic-height"/>
	</ModulePrefs>
	<UserPref name="style_mode" display_name="스타일" default_value="White" datatype="enum">
		<EnumValue value="White" />
		<EnumValue value="Gray" />
		<EnumValue value="Black" />
	</UserPref>
	<UserPref name="title" display_name="제목" default_value="위키백과 지식상자"/>
	<UserPref name="next_time" display_name="지연시간(초)" default_value="5"/>
	<UserPref name="start_type" display_name="시작 경로" default_value="위키백과:대문" datatype="enum">
		<EnumValue value="위키백과:대문" />
		<EnumValue value="위키백과:요즘_화제" />
		<EnumValue value="임의 문서" />
		<EnumValue value="사용자 용어" />
	</UserPref>
	<UserPref name="user_terms" display_name="사용자 용어(,구분)" default_value=""/>
	<Content type="html">
	<![CDATA[ 
	<script type="text/javascript" src="http://www.google.com/jsapi"></script>
	<script type="text/javascript">
	google.load('search', '1.0');	//구글 검색 Ajax API 로드
	
	//구글 가젯 에디터에서 gadgets.* 지원안됨
	if(!gadgets.util)
		gadgets.util = {registerOnLoadHandler: _IG_RegisterOnloadHandler};	
	if(!gadgets.Prefs)
		gadgets.Prefs = _IG_Prefs;
	
	/**
	 * 위키백과 지식상자 위젯
	 **/
	var WikiPediaWidget = {
		MAX_TERMS: 100,		//최대 용어 수
		NEXT_TIME: 5,		//다음 용어 표시 시간(초)
		terms: [],			//위키백과 용어집
		termIndex: -1,		//현재 표시하는 용어 인덱스
		refTermIndex: -1,	//관련 용어 추가한 인덱스
		//초기화
		init: function() {
			var prefs = new gadgets.Prefs();
			var width;

			if (_gel('box').offsetWidth)
				width = _gel('box').offsetWidth;
			else if (_gel('box').clientWidth)
				width = _gel('box').clientWidth;
			else
				width = 166;			

			var style_mode = prefs.getString("style_mode");
			_gel('xsnazzy').className = style_mode.toLowerCase()+'_style';
			
			//가로에 따른 높이 조정
			var height = ((250-90)*(166-18)) / (width-18) +90;
			_gel('xsnazzy').style.height = height +'px';
			_gel('box').style.height = height-10 +'px';
			_IG_AdjustIFrameHeight();
			
			_gel('title').innerHTML = prefs.getString("title");
			this.NEXT_TIME = prefs.getInt("next_time");
			
			this.initGsearch();
			this.setTerms(prefs);
		},
		//용어집 설정
		setTerms: function(prefs) {
			this.termIndex = -1;
			this.refTermIndex = -1;
			
			if (!prefs)
				prefs = new gadgets.Prefs();
				
			var start_type = prefs.getString("start_type");			
			var user_terms = prefs.getString("user_terms");
			
			if (start_type == '위키백과:대문')
				this.terms = ['위키백과:대문'];
			else if (start_type == '위키백과:요즘_화제')
				this.terms = ['위키백과:요즘_화제'];
			else if (start_type == '임의 문서')
				this.requestRandomTerm();
			else if (user_terms)	//사용자 용어
				this.terms = user_terms.split(',');
			else {		//사용자 용어 미입력 에러
				var msg = new _IG_MiniMessage(__MODULE_ID__, _gel("content"));
				msg.createDismissibleMessage("<strong>설정하기 에러!</strong><p>사용자 용어를 입력해주세요.</p>");
			}
			
			this.nextTerm();
		},
		//관련 용어 추가
		requestReferencedTerm: function(term) {
			if (this.terms.length >= this.MAX_TERMS)
				return;
			//var params = {};
			//params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.JSON;
			var url = 'http://ko.wikipedia.org/w/api.php?action=query&prop=links&pllimit=400&format=json&titles='+encodeURI(term);
			//gadgets.io.makeRequest(url, this.responseReferencedTerm, params);
			_IG_FetchContent(url, this.responseReferencedTerm);
		},
		responseReferencedTerm: function(obj) {
			var data = eval('('+obj+')');
			var links, title, cnt=0;
			var terms = WikiPediaWidget.terms;
			
			for (var i in data.query.pages) {
				links = data.query.pages[i].links;
				break;
			}
			
			if (!links)
				return;
			
			//관련 용어 섞기
			links.sort(function() {return 0.5 - Math.random()});
			
			//관련 용어 추가
			for (var i=0; i<links.length; i++) {
				if (terms.length >= WikiPediaWidget.MAX_TERMS)
					break;
				title = links[i].title;
				//날짜, 분류 용어 무시
				if (title.search(/:/) > -1 || 
								 title.search(/[0-9]{1,2}월 [0-9]{1,2}일$/) > -1 ||
								 title.search(/[0-9]{1,2}월$/) > -1 ||
								 title.search(/[0-9]{4}년$/) > -1 ||
								 title.search(/^.요일$/) > -1)
					continue;
				
				terms[terms.length] = title;
				
				if (++cnt > 10)
					break;
			}
		},
		//랜덤 용어 추가
		requestRandomTerm: function() {
			var url = 'http://ko.wikipedia.org/w/api.php';
			url += '?action=query&list=random&rnnamespace=0&rnlimit=10&format=json';
			//gadgets.io.makeRequest(url, this.responseReferencedTerm, params);
			_IG_FetchContent(url, this.responseRandomTerm);
		},
		responseRandomTerm: function(obj) {
			var data = eval('('+obj+')');
			var rand_terms = data.query.random;
			var terms = WikiPediaWidget.terms;
			
			for (var i=0; i<rand_terms.length; i++)
				terms[terms.length] = rand_terms[i].title;
		},
		//다음 용어
		nextTerm: function(loading) {
			var terms = this.terms;
			if (!terms.length) {
				setTimeout('WikiPediaWidget.nextTerm()', 100);
				return;
			}
			var i = ++this.termIndex;
			var term;
			
			if (i >= terms.length) {
				this.setTerms();
				return;
			}
			
			term = terms[i];
			if (loading)
				this.setLoading(term);
			//추가로 중복하여 관련 용어 한번 추가 
			if (this.refTermIndex < i) {
				this.refTermIndex = i;
				this.requestReferencedTerm(term);
			}
			this.searchWikipedia(term);
		},
		//이전 용어
		prevTerm: function(loading) {
			var terms = this.terms;
			var i = --this.termIndex;
			var term;
			
			if (i < 0)
				this.termIndex = i = terms.length-1;
			
			term = terms[i];
			if (loading)
				this.setLoading(term);
			this.searchWikipedia(term);
		},
		//구글 검색 초기화
		initGsearch: function() {
			var searchControl = new google.search.SearchControl();
			this.searchControl = searchControl;
	
			searchControl.addSearcher(new google.search.WebSearch());
			searchControl.setSearchCompleteCallback(this, this.OnSearchComplete);
			searchControl.draw(null);
		},
		//위키백과 용어 검색
		searchWikipedia: function(term) {
			this.searchControl.execute(term+' site:wikipedia.org');
		},
		OnSearchComplete: function(sc, searcher) {
			var title, content, url;
			
			if (searcher.results.length > 0) {
				title = searcher.results[0].title.replace(/ - .+/, '');
				content = searcher.results[0].content;
				url = decodeURI(searcher.results[0].url);
			} else {
				this.nextTerm();
				return;
			}
			
			if (!title || !content) {
				this.nextTerm();
				return;
			}
			
			this.showContent(title, content, url);
			
			clearTimeout(this.nextTimer);
			this.nextTimer = setTimeout('WikiPediaWidget.nextTerm()', this.NEXT_TIME*1000);
		},
		//로딩 설정
		setLoading: function (term) {
			this.loading = true;
			_gel('term').innerHTML = term;
			_gel('term').href = '';
			_gel('content').innerHTML = 'Loading..';
			_gel('content').className = 'loading';
			_gel('link').style.display = 'none';
		},
		//용어 정보 표시
		showContent: function (title, content, url) {
			_gel('term').innerHTML = title;
			_gel('term').href = url;
			_gel('content').className = '';
			_gel('content').innerHTML = content;
			_gel('link').href = url;
			_gel('link').style.display = '';
		},
		//다음 버튼 클릭
		onNext: function() {
			clearTimeout(this.nextTimer);
			this.nextTerm(true);
		},
		//이전 버튼 클릭
		onPrev: function() {
			clearTimeout(this.nextTimer);
			this.prevTerm(true);
		},
		//자동 다음 용어 넘김 멈춤
		stopAutoNext: function() {
			clearTimeout(this.nextTimer);
		},
		//자동 다음 용어 넘김 계속
		startAutoNext: function() {
			this.nextTimer = setTimeout('WikiPediaWidget.nextTerm()', this.NEXT_TIME*1000);
		}
	}
	
	function init() {
		WikiPediaWidget.init();
	}
	
	gadgets.util.registerOnLoadHandler(
			function(){
				google.setOnLoadCallback(init);
			});
	</script>
	
	<style type="text/css">
	/**
	 * 위키백과 지식상자 위젯 기본 스타일
	 **/
	#title_div {
		background-color: #676D77;
		color: #ddd;
	}
	#title_div h3 {
		position: relative;
		height: 14px;
		overflow: hidden;
		margin: 0;
		padding: 0 3px 3px 3px;
		font-size: 12px;
		text-align: center;
		font-weight: 100;
	}
	#knowledge_box {
		padding: 8px;
	}
	a#term {
		display: block;
		padding: 2px 0;
		text-decoration: none;
		color: #006;
	}
	h4 {
		margin: 0;
		border-bottom: 2px solid #ccc;
		background-color: #efe;
	}
	#knowledge_box #content {
		overflow: hidden;
		margin-top: 8px;
		padding: 0;
		color: #555;
		font-size: 12px;
	}
	#content.loading {
		text-align: center;
		line-height: 100px;
	}
	#content .mmlib_table { /* 미니 메세지 */
		font-size: 12px;
		padding: 5px;
	}
	#link {
		position: absolute;
		bottom: 3px;
		padding: 4px 0;
		font-size: 12px;
		background-color: white;
	}
	.control_btn {
		position: absolute;
		bottom: 25px;
		right: 6px;
	}
	.control_btn input {
		width: 20px;
		height: 21px;
		margin-left: 2px;
		font-family: "Times New Roman", Times, serif;
		font-weight: bold;
	}

	/** 
	 * Snazzy Borders - Rounded borders without images 
	 * http://www.cssplay.co.uk/boxes/snazzy.html
	 *
	 * Snazzy Borders를 높이 고정으로 수정
	 */
	#xsnazzy {background: transparent; position: relative;}
	.xtop, .xbottom {display:block; background:transparent; font-size:1px;}
	.xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}
	.xb1, .xb2, .xb3 {height:1px;}
	.xb2, .xb3, .xb4 {background:#ccc; border-left:1px solid #08c; border-right:1px solid #08c;}
	.xb1 {margin:0 5px; background:#08c;}
	.xb2 {margin:0 3px; border-width:0 2px;}
	.xb3 {margin:0 2px;}
	.xb4 {height:2px; margin:0 1px;}
	.xboxcontent {display:block; background:#ccc; border:0 solid #08c; border-width:0 1px; overflow: hidden;}
	
	/** 
	 * 화이트 스타일 
	 */	
	/* 배경색 설정 */
	.xb2, .xb3, .xb4, .xboxcontent {
		background:#fff;
	}
	/* 상단 배경색 설정 */
	.xtop * {
		background:#676D77;
	}
	/* 테두리 설정 */
	.xb2, .xb3, .xb4, .xboxcontent {
		border-color: #ccc;
	}.xb1 {
		background:#ccc;
	}
	
	/** 
	 * 블랙 스타일 
	 */	
	/* 배경색 설정 */
	.black_style .xb2, .black_style .xb3, .black_style .xb4, .black_style .xboxcontent {
		background:#333;
	}
	/* 상단 배경색 설정 */
	.black_style .xtop * {
		background:#4C4C4C;
	}
	/* 테두리 설정 */
	.black_style .xb2, .black_style .xb3, .black_style .xb4, .black_style .xboxcontent {
		border-color: #ccc;
	}.black_style .xb1 {
		background:#ccc;
	}
	/* 타이틀 */
	.black_style #box #title_div {
		background-color: #4C4C4C;
		color: #999;
	}
	/* 요약 내용 글씨색 */
	.black_style #knowledge_box p {
		color: #aaa;
	}
	/* 용어 명 */
	.black_style a#term {
		color: #fff;
	}
	.black_style h4 {
		border-color: #B2CF42;
		background-color: #607022;
	}
	/* 위키백과 바로가기 링크 */
	.black_style #link {
		color: #a77;
		background-color: #333;
	}
	
	/** 
	 * 그레이 스타일 
	 */	
	/* 배경색 설정 */
	.gray_style .xb2, .gray_style .xb3, .gray_style .xb4, .gray_style .xboxcontent {
		background:#A6A4A9;
	}
	/* 상단 배경색 설정 */
	.gray_style .xtop * {
		background:#4F4F55;
	}
	/* 테두리 설정 */
	.gray_style .xb2, .gray_style .xb3, .gray_style .xb4, .gray_style .xboxcontent {
		border-color: #CFCCC4;
	}.gray_style .xb1 {
		background:#CFCCC4;
	}
	/* 타이틀 */
	.gray_style #box #title_div {
		background-color: #4F4F55;
		color: #A6A4A9;
	}
	/* 요약 내용 글씨색 */
	.gray_style #knowledge_box p {
		color: #4C4C4C;
	}
	/* 용어 명 */
	.gray_style a#term {
		color: #fff;
	}
	.gray_style h4 {
		border-color: #E45757;
		background-color: #C86767;
	}
	/* 위키백과 바로가기 링크 */
	.gray_style #link {
		color: #E3E3F8;
		background-color: #A6A4A9;
	}
	</style>
	
	<div id="xsnazzy" class="" onMouseOver="WikiPediaWidget.stopAutoNext()" onMouseOut="WikiPediaWidget.startAutoNext()">
		<b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>
		
		<div id="box" class="xboxcontent">
			<div id="title_div"><h3 id="title">위키백과 지식상자</h3></div>
			<div id="knowledge_box">
				<div>
					<h4><a id="term" href="" target="_blank"></a></h4>
					<p id="content"></p>
					<a id="link" href="" target="_blank">위키백과에서 자세히 보기</a>
				</div>
				<div class="control_btn">
					<input type="button" value="<" onClick="WikiPediaWidget.onPrev()"><input type="button" value=">" onClick="WikiPediaWidget.onNext()">
				</div>
			</div>
		</div>
		
		<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
	</div>

	]]>
	</Content>
</Module>