<%@ page language="java" contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="ui" uri="http://egovframework.gov/ctl/ui" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>

<script>

$(document).ready(function() {
	$("#DIV_PAGE_MAIN").removeClass("sub");
    var unreadNotiCnt = $(".noti-btn span.count").text();
    gfn_myAlert(unreadNotiCnt);
});

function fn_search(keyword) {
	var form = document.createElement("form");
	form.style.display = "none";
	$(form).attr("action", "/search/searchList.do");
	$(form).attr("method", "post");
	
	var element = document.createElement("input");
	$(element).attr("name", "query");
	
	$(element).attr("value", keyword);
	form.appendChild(element);
	document.body.appendChild(form);
	form.submit();
	document.body.removeChild(form);
	
	return;
}

function fn_viewAncmnt(articleId) {
    var form = document.createElement("form");
    form.style.display = "none";
    $(form).attr("action", "/bbs/selectAncmntArticle.do");
    $(form).attr("method", "post");
    
    var element = document.createElement("input");
    $(element).attr("name", "articleId");
    
    $(element).attr("value", articleId);
    form.appendChild(element);
    document.body.appendChild(form);
    form.submit();
    document.body.removeChild(form);
    
    return;
}

function fn_viewQna(articleId, secretYn, myQnaYn) {
	
    // 비밀글인 경우, 본인에 한하여 조회 가능 
    if(secretYn == "Y" && myQnaYn == "N") {
        alert("비공개 게시물은 작성자만 확인할 수 있습니다.");
        return;
    }
    
    var form = document.createElement("form");
    form.style.display = "none";
    $(form).attr("action", "/bbs/selectQnaArticle.do");
    $(form).attr("method", "post");
    
    var element = document.createElement("input");
    $(element).attr("name", "articleId");
    
    $(element).attr("value", articleId);
    form.appendChild(element);
    document.body.appendChild(form);
    form.submit();
    document.body.removeChild(form);
    
    return;
}

function fn_listPops(typeDivCd) {
    $("div.tab_content div.tabs_item").hide();
    $("#listPops_" + typeDivCd).show();
	
}
</script>

    <!-- 섹션1 -->
    <section class="sec1">
        <h2 class="blind">배너 섹션영역</h2>
        <div class="inner">
            <div class="banner">
                <h3>온라인 대출/알람예약 서비스를 통해<br>문화원 소장자료들을 만나보세요.</h3>
                <p>자료 검색을 통해 원하는 자료를 찾고, 대출/열람 예약 신청까지!<br>온라인에서 쉽고 간편하게 할 수 있습니다.</p>
            </div>
            <div class="color-box">
                <div class="list">
                    <a href="javascript:void(0);" onclick="location.href = '/inform/selectNCultureOperationInfo.do';" title="이용안내">
                    <div class="title">이용안내</div>
                    <div class="icon"><img src="/images/icon/icon-sec1-01.png" alt="이용안내 아이콘"></div>
                    <div class="open"><img src="/images/icon/icon-plus.png" alt="플러스 아이콘"></div>
                    </a>
                </div>
                <div class="list">
                    <a href="javascript:void(0);" onclick="gfn_gotoUrl('/inform/selectNCultureLocationInfo.do')" title="찾아오시는 길">
                    <div class="title">찾아오시는 길</div>
                    <div class="icon"><img src="/images/icon/icon-sec1-02.png" alt="지도 아이콘"></div>
                    <div class="open"><img src="/images/icon/icon-plus.png" alt="플러스 아이콘"></div>
                    </a>
                </div>
                <div class="list">
                    <a href="javascript:void(0);" onclick="location.href = '/rent/listRentItems.do';" title="대출관리">
                    <div class="title">대출관리</div>
                    <div class="icon"><img src="/images/icon/icon-sec1-03.png" alt="대출 아이콘"></div>
                    <div class="open"><img src="/images/icon/icon-plus.png" alt="플러스 아이콘"></div>
                    </a>
                </div>
                <div class="list">
                    <a href="javascript:void(0);" onclick="location.href = '/read/listReadItems.do';" title="열람관리">
                    <div class="title">열람관리</div>
                    <div class="icon"><img src="/images/icon/icon-sec1-04.png" alt="열람 아이콘"></div>
                    <div class="open"><img src="/images/icon/icon-plus.png" alt="플러스 아이콘"></div>
                    </a>
                </div>
            </div>
        </div>
    </section>
    
    <!-- 섹션2 -->
    <c:if test="${fn:length(listKeywords) > 0 }">
    <section class="sec2">
        <h2 class="blind">키워드 섹션영역</h2>
        <div class="inner">
            <div class="keyword-box">
                <h3 class="title"><span>AI 추천</span> 키워드</h3>
                <p class="desc">어떤 자료들을 소장 중인지 키워드로 살펴보세요!</p>
                <ul class="list-tag">
                    <c:forEach var="itemKeyword" items="${listKeywords }">
                    <li><a href="javascript:void(0)" title="${itemKeyword.keyName }" onclick="fn_search('${itemKeyword.keyName }')">#  ${itemKeyword.keyName }</a>
                    </li>
                    </c:forEach>
                </ul>
            </div>
        </div>
    </section>
    </c:if>
     
    <!-- 섹션3 -->
    <c:if test="${fn:length(listOrgPicks) > 0 }">
    <section class="sec3">
        <h2 class="blind">문화원픽 섹션영역</h2>
        <div class="inner">
            <div class="pick-box">
                <h3 class="title"><span>문화원's</span> Pick</h3>
                <p class="desc">${mngOrgNm }<c:if test='${fn:endsWith(mngOrgNm, "원") }'>이</c:if><c:if test='${not fn:endsWith(mngOrgNm, "원") }'>가</c:if> 추천하는 자료를 만나보세요!</p>
                
                <!-- Swiper -->
                <div class="swiper pickSwiper">
                    <div class="swiper-wrapper">
                    
                    <c:forEach var="itemPick" items="${listOrgPicks }">
                    
                        <div class="swiper-slide">
                            <div class="list-box">
                                <div class="images"><a href="javascript:void(0)" onclick="gfn_getDetail('${itemPick.masterId }')" title="상세조회"><img src="${itemPick.rprsThumbUrlWithDefaultMiddle }" alt="상세조회"></a></div>
                                <div class="subject">
                                    <a href="javascript:void(0)" onclick="gfn_getDetail('${itemPick.masterId }')" title="상세조회">
                                        <span class="block"><span class="cla">${itemPick.typeDivNm }</span></span>
                                        <span class="tit underline pink">${itemPick.title }</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                        
                    </c:forEach>
                    
                    </div>
                    <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-pagination"></div>
                </div>
            </div>
        </div>
    </section>
    </c:if>
    
    <!-- 섹션4 -->
    <section class="sec4">
        <h2 class="blind">중간배너 섹션영역</h2>
        <div class="inner">
            <div class="middle-banner">
                <h3>회원가입만 하면 발급되는<br><strong>간편 온라인 회원증!</strong></h3>
                <p>문화원 소장자료관 회원가입 시 해당 문화원에서<br>사용할 수 있는 온라인 회원증이 발급됩니다.</p>
            </div>
        </div>
    </section>
    
    <!-- 섹션5 -->
    <c:if test="${fn:length(listTypeDivCodes) > 0 }">
    <section class="sec5">
        <h2 class="blind">인기자료 섹션영역</h2>
        <div class="inner">
            <h3 class="title"><span>유형별</span> 인기자료</h3>
            <p class="desc">자료유형별로 이런 인기자료들이 있어요!</p>
            <div class="tab">
            	<div class="mo_tabs_wrap">
	                <ul class="tabs">
	                    <c:forEach var="itemTypeDivCode" items="${listTypeDivCodes }">
	                    <li><a href="javascript:void(0)" onclick="javascript:fn_listPops('${itemTypeDivCode.typeDivCd}')">${itemTypeDivCode.typeDivNm}</a></li>
	                    </c:forEach>
	                </ul>
                </div>

                <div class="tab_content">
                    <c:forEach var="itemTypeDivCode" items="${listTypeDivCodes }">
                    <div class="tabs_item" id="listPops_${itemTypeDivCode.typeDivCd}">
	                    <div class="swiper popularSwiper">
	                        <ul class="swiper-wrapper">
	                            <c:forEach var="itemPop" items="${listPops }">
	                            <c:if test='${itemPop.typeDivCd eq itemTypeDivCode.typeDivCd }'>
	                            <li class="swiper-slide">
	                                <div class="con-1">
	                                    <div class="block"><span class="cla">${itemPop.typeDivNm }</span></div>
	                                    <div class="tit underline pink" onclick="gfn_getDetail('${itemPop.masterId}')">${itemPop.title }</div>
	                                </div>
	                                <div class="con-2">
	                                    <p class="sub"><span>주제분야</span><span><c:if test="${empty itemPop.subjectNm }">-</c:if>${itemPop.subjectNm }</span></p>
	                                    <p class="age"><span>생산기관</span><span><c:if test="${empty itemPop.orgNm }">-</c:if>${itemPop.orgNm }</span></p>
	                                    <p class="yea"><span>생산년도</span><span><c:if test="${empty itemPop.creatYyyy }">-</c:if>${itemPop.creatYyyy }</span></p>
	                                </div>
	                            </li>
	                            </c:if>
	                            </c:forEach>
	                        </ul> 
	                        <div class="swiper-pagination"></div>
	                    </div>
                    </div>
					</c:forEach>
                </div>
            </div>
        </div>
    </section>
    </c:if>
    
    <!-- 섹션6 -->
    <c:if test="${fn:length(listOnline) > 0 }">
    <section class="sec6">
        <h2 class="blind">온라인자료관 섹션영역</h2>
        <div class="inner">
            <h3 class="title"><span>온라인</span> 자료관</h3>
            <p class="desc">문화원 전자자료를 온라인으로 간편하게 열람해보세요!</p>
            <div class="more-btn"><a href="javascript:void(0)" onclick="location.href='/search/searchList.do?collection=lib_online';"><span>더보기 &#62;</span></a></div>
            <!-- Swiper -->
            <div class="swiper onlineSwiper">
                <div class="swiper-wrapper items cover">
                
                    <c:forEach var="itemOnline" items="${listOnline }">
                    <div class="swiper-slide">
                        <div class="List">
                            <div class="inner">
                                <div class="thumbnail">
                                    <span class="image-frame"><img src="${itemOnline.rprsThumbUrlWithDefaultMiddle }" alt="썸네일"  /></span>
                                    <div class="detail-cover">
                                        <strong>${itemOnline.title }</strong>
                                        <ul>
                                            <li><em>자료유형</em><c:if test="${empty itemOnline.typeDivNm }">-</c:if>${itemOnline.typeDivNm }</li>
                                            <li><em>주제분야</em><c:if test="${empty itemOnline.subjectNmUp }">-</c:if>${itemOnline.subjectNmUp }</li>
                                            <li><em>생산기관</em><c:if test="${empty itemOnline.orgNm }">-</c:if>${itemOnline.orgNm }</span></li>
                                            <li><em>생산년도</em><c:if test="${empty itemOnline.creatYyyy }">-</c:if>${itemOnline.creatYyyy }
                                            ${itemOnline.masterId }</li>
                                        </ul>
                                        <div class="btn-box">
                                            <div class="view"><a href="javascript:void(0)" onclick="gfn_showDocPdf('${itemOnline.interfaceId }','${itemOnline.masterId }','${itemOnline.typeDivCd}','${itemOnline.dtlsTypeDivCd}')">원문보기</a></div>
                                            <div class="RIS"><a href="javascript:void(0)" onclick="risShow('${itemOnline.masterId }')">RIS</a></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    </c:forEach>
                </div>
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
                <div class="swiper-pagination"></div>
            </div>
        </div>
    </section>
    </c:if>
    
    <!-- 섹션7 -->
    <section class="sec7">
        <h2 class="blind">커뮤니티 섹션영역</h2>
        <div class="inner">
            <div class="Fl notice">
                <div class="ti"><span>공지사항</span><a href="javascript:void(0)" onclick="location.href='/bbs/listAncmnts.do';"><span>더보기 <img src="/images/icon/icon-more.png" alt="더보기 아이콘"></span></a></div>
                <div class="con">
                    <c:forEach var="itemAncmnt" items="${listAncmnt }">
                    <div class="list">
                        <a href="javascript:void(0)" onclick="fn_viewAncmnt('${itemAncmnt.articleId}')">
                            <div class="box"><p>${fn:substring(itemAncmnt.regDd,8,10) }</p><p> ${fn:substring(itemAncmnt.regDd,2,4) }.${fn:substring(itemAncmnt.regDd,5,7) }</p></div>
                            <div class="text">
                                <p><c:if test='${itemAncmnt.notiYn == "Y"}'>[공지]</c:if>${itemAncmnt.title}
                                   <c:if test='${itemAncmnt.attachYn == "Y"}'><img src="/images/icon/icon-file.png" class="file" alt="파일 아이콘"></c:if></p>
                            </div>
                        </a>
                    </div>
                    </c:forEach>
                </div>
            </div>
            <div class="Fl qna">
                <div class="ti"><span>Q&amp;A</span><a href="javascript:void(0)" onclick="location.href='/bbs/listQnas.do';"><span>더보기 <img src="/images/icon/icon-more.png" alt="더보기 아이콘"></span></a></div>
                <div class="con">
                    <c:forEach var="itemQna" items="${listQna }">
                    <div class="list">
                        <a href="javascript:void(0)" onclick="fn_viewQna('${itemQna.articleId}', '${itemQna.secretYn}', '${itemQna.myQnaYn}')">
                            <div class="box"><p>${fn:substring(itemQna.regDd,8,10) }</p><p> ${fn:substring(itemQna.regDd,2,4) }.${fn:substring(itemQna.regDd,5,7) }</p></div>
                            <div class="text">
                                <p>${itemQna.title} 
                                <c:if test='${itemQna.attachYn == "Y"}'><img src="/images/icon/icon-file.png" class="file" alt="파일 아이콘"></c:if>
                                <c:if test='${itemQna.secretYn == "Y"}'><img src="/images/icon/icon-password.png" class="pw" alt="잠금 아이콘"></c:if>
                                </p>
                            </div>
                            <c:if test='${itemQna.answerYn == "Y"}'>
                            <div class="answer suc">
                                <p>답변완료</p>
                            </div>
                            </c:if>
                            <c:if test='${itemQna.answerYn != "Y"}'>
                            <div class="answer">
                                <p>답변대기</p>
                            </div>
                            </c:if>
                        </a>
                    </div>
                    </c:forEach>
                </div>
            </div>
        </div>
    </section>


<script>
	var windowWidth = $(window).width();
	var _slidesPerView = 5;
	var _spaceBetween = 30;
	if (windowWidth < 480) {
		_slidesPerView = 1;
		_spaceBetween = 20;
	}

	/* 문화원s pick */
	var swiper = new Swiper(".pickSwiper", {
		loop : true,
		slidesPerView : _slidesPerView,
		spaceBetween : _spaceBetween,
		centeredSlides : true,
		autoplay : {
			delay : 2500,
			disableOnInteraction : false,
		},
		navigation : {
			nextEl : ".swiper-button-next",
			prevEl : ".swiper-button-prev",
		},
	/*
	pagination: {
	    el: ".swiper-pagination",
	    clickable: true,
	},
	 */
	});

	var _slidesPerViewOnline = 7;
	if (windowWidth < 480) {
		_slidesPerViewOnline = 1.5;
		/* 유형별 인기자료 */
		var swiper = new Swiper(".popularSwiper", {
			slidesPerView : 1,
			spaceBetween : _spaceBetween,
			centeredSlides : true,
			pagination : {
				el : ".swiper-pagination",
			},
		});
	}

	/* 온라인 자료관 */
	var swiper = new Swiper(".onlineSwiper", {
		loop : true,
		slidesPerView : _slidesPerViewOnline,
		spaceBetween : _spaceBetween,
		centeredSlides : true,
		// autoplay: {
		//     delay: 4000,
		//     disableOnInteraction: false,
		// },
		navigation : {
			nextEl : ".swiper-button-next",
			prevEl : ".swiper-button-prev",
		},
	/*
	pagination: {
	    el: ".swiper-pagination",
	    clickable: true,
	},
	 */
	});
</script>


