<%@page import="nlib.cmm.NlibCommonController"%>
<%
/**
 * <pre>
 * @Class Name : selectItemDetail.jsp
 * 
 * @Description : 소장자료 상세내용을 조회한다.
 * 
 * 
 * @프로젝트명: 지방문화원 통합자료관리시스템 구축사업 (2021)
 *
 * </pre>
 *
 * @ ------------    --------    ---------------------------
 * @ 수정일                     수정자             수정내용
 * @ ------------    --------    ---------------------------
 * @ 2021. 7. 30.    JSYOO       최초 생성
 * @ 2021.10. 28.    KNKIM       대출예약, 방문열람신청, 카트담기 연결 처리 
 *
 * 
 * @author 이씨플라자 * DIGITALSHIP JSYOO
 * @since 2021. 7. 30. 
 * @version 1.0
 *
 */
 %>
<%@ page language="java" contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="ui" uri="http://egovframework.gov/ctl/ui" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="validator" uri="http://www.springmodules.org/tags/commons-validator" %>
<script src="/js/qrcode.js"></script>
<c:set var="pageTitle"><c:out value='${result.title}'/></c:set>
<script>
$(document).ready(function(){
	
	fn_setPageTitle("<c:out value='${pageTitle}'/>");
    //로그
    $.ajax({
        type: "post",
        url: "/search/InsertDataInquiryLog.ajax",
        data: {"masterId" : '<c:out value="${result.masterId}"/>'}
    }).done(function(response){
    });
    
})

function goDetail(masterId){
    $("#masterId").val(masterId);
    document.referenceDetailForm.action="/search/searchItemDetail.do";
    document.referenceDetailForm.submit();
}

function goList(){
    document.referenceDetailForm.action="/search/searchList.do";
    document.referenceDetailForm.submit();
}

</script>
<div class="wrap">
    <!-- 소장자료 상세페이지 섹션 -->
    <div class="data detail">
        <form id="referenceDetailForm" name="referenceDetailForm" method="post">
        <input type="hidden" name="collection" id="collection" value="<c:out value='${searchVO.collection}'/>" /> 
        <input type="hidden" name="pageIndex" title="페이지번호" value="<c:out value='${searchVO.pageIndex }'/>" /> 
        <input type="hidden" name="pageSize" value="<c:out value='${searchVO.pageSize }'/>" /> 
        
        <input type="hidden" name="filter_creatYyyy" value="<c:out value='${searchVO.filter_creatYyyy}'/>" />
        <input type="hidden" name="creatYyyyYn" value="<c:out value='${searchVO.creatYyyyYn}'/>" />
        
        <input type="hidden" name="filter_class" value="<c:out value='${searchVO.filter_class}'/>" />
        <input type="hidden" name="filter_category" value="<c:out value='${searchVO.filter_category}'/>"/>
        <input type="hidden" name="filter_agency" value="<c:out value='${searchVO.filter_agency}'/>"/>
        <input type="hidden" name="filter_mylist" value="<c:out value='${searchVO.filter_mylist}'/>"/>
        <input type="hidden" name="reQueryChk" value="<c:out value='${searchVO.reQueryChk}'/>"/>
        <input type="hidden" name="query" value="<c:out value='${searchVO.query}'/>"/>
        <input type="hidden" name="reQuery" value="<c:out value='${searchVO.reQuery}'/>"/>
        <input type="hidden" name="bookIndex" value="<c:out value='${searchVO.bookIndex}'/>"/>
        <input type="hidden" name="mngtNo" value="<c:out value='${searchVO.mngtNo}'/>"/>
        <input type="hidden" name="createStartDate" value="<c:out value='${searchVO.createStartDate}'/>"/>
        <input type="hidden" name="createEndDate" value="<c:out value='${searchVO.createEndDate}'/>"/>
        <input type="hidden" name="ageCode" value="<c:out value='${searchVO.ageCode}'/>"/>
        <input type="hidden" name="collectionList" value="<c:out value='${searchVO.collectionList}'/>"/>
        <input type="hidden" name="realQuery" value="<c:out value='${searchVO.realQuery}'/>"/>
        <input type="hidden" name="second_class" value="<c:out value='${searchVO.second_class}'/>"/>
        <input type="hidden" name="second_category" value="<c:out value='${searchVO.second_category}'/>"/>
        <input type="hidden" id="masterId" name="masterId" value="" />
         
        <h2 class="blind">소장자료 상세페이지 섹션영역</h2>
        <div class="inner">
            <div class="row-top">
                <div class="center">
                
                	<div class="title-box">
                		<div class="cla-info">
                            <div class="con-1">
                                <c:if test="${result.ableOnline eq true}">
                                   <span class="online">온라인열람</span>
                                </c:if>
                                <c:if test="${result.ableRent eq true}">
                                   <span class="loan">대출</span>
                                </c:if>
                                <c:if test="${result.ableRead eq true}">
                                   <span class="visit">방문열람</span>
                                </c:if>
                                <c:if test="${result.ableOther eq true}">
                                   <span class="etc">기타</span>
                                </c:if>
                            </div>
                            <div class="con-2">
                                <span class="code"><c:out value="${result.mngtNo}"/></span>
                            </div>
                        </div> 
                        <div class="tit-info"><c:out value="${result.title}"/></div>
                        <div class="btn-info">
                        <c:if test="${result.ableOnline eq true}">
                            <button type="button" class="view" title="새 창 열림" onclick="gfn_showDocPdf('<c:out value="${result.interfaceId}"/>','<c:out value="${result.masterId}"/>','<c:out value="${result.typeDivCd}"/>','<c:out value="${result.dtlsTypeDivCd}"/>')";>원문보기</button>
                        </c:if>
                            <button type="button" class="ris" onclick="gfn_showRis('<c:out value="${result.masterId}"/>');">RIS</button>
                        <c:if test='${result.mUseYn == "Y"}'>
                            <button type="button" class="favorit on" onclick="gfn_changeInterestBtn('<c:out value="${result.masterId }"/>', 'off');">즐겨찾기</button>
                        </c:if>
                        <c:if test='${result.mUseYn != "Y"}'>
                            <button type="button" class="favorit" onclick="gfn_changeInterestBtn('<c:out value="${result.masterId }"/>', 'on');">즐겨찾기</button>
                        </c:if>
                            <button type="button" class="share" onclick="gfn_setSnsShare('<c:out value="${result.masterId}"/>');">공유</button>
                        </div>
                	</div>
                	
                    <div class="left">
                        <div class="img"><img src="<c:out value="${result.rprsThumbUrlWithDefaultBig}"/>" alt="<c:out value='${result.title}'/>"></div>
                    </div>
                    
                    <div class="right">
                        <div class="data-info"> 
                            <div class="de-data">
                                <ul>
                                    <li>
                                        <span>자료유형</span>
                                        <span>
                                                <c:out value="${result.typeCodeNm}"/>
                                                <c:choose>
                                                    <c:when test="${!empty result.typeCodeNm or !empty result.dtlsTypeDivNm}">
                                                        <c:choose>
                                                            <c:when test="${!empty result.typeCodeNm and !empty result.dtlsTypeDivNm}">
                                                                &#62;
                                                            </c:when>
                                                         </c:choose>
                                                    </c:when>
                                                    <c:otherwise>
                                                        -
                                                    </c:otherwise>
                                                </c:choose> 
                                                <c:out value="${result.dtlsTypeDivNm}"/>
                                        </span>
                                    </li>
                                    <li>
                                        <span>연대</span>
                                        <span>
                                            <c:if test="${!empty result.chronologicalCodeStartNm}"><c:out value="${result.chronologicalCodeStartNm}"/>년부터 </c:if>
                                            <c:if test="${!empty result.chronologicalCodeEndNm}"><c:out value="${result.chronologicalCodeEndNm}"/>까지</c:if>
                                            <c:if test="${empty result.chronologicalCodeStartNm and empty result.chronologicalCodeEndNm }">-</c:if>
                                        </span>
                                    </li>
                                    <li>
                                        <span>주제분야</span>
                                        <span>
                                            <c:out value="${result.subjectNmUp}"/>
                                                <c:choose>
                                                    <c:when test="${!empty result.subjectNmUp or !empty result.subjectNm}">
                                                        <c:choose>
                                                            <c:when test="${!empty result.subjectNmUp and !empty result.subjectNm}">
                                                                &#62;
                                                            </c:when>
                                                         </c:choose>
                                                    </c:when>
                                                    <c:otherwise>
                                                        -
                                                    </c:otherwise>
                                                </c:choose> 
                                             <c:out value="${result.subjectNm}"/>
                                        </span>
                                    </li>
                                    <li>
                                        <span>생산기관</span>
                                        <span><c:if test="${empty result.orgNm}">-</c:if><c:out value="${result.orgNm}"/></span>
                                    </li>
                                    <li>
                                        <span>테마</span>
                                        <span><c:if test="${empty result.themeCodeNm}">-</c:if><c:out value="${result.themeCodeNm}"/></span>
                                    </li>
                                    <li>
                                        <span>시대</span>
                                        <span><c:if test="${empty result.ageCodeNm}">-</c:if><c:out value="${result.ageCodeNm}"/></span>
                                    </li>
                                    <li>
                                        <span>생산년도</span>
                                        <span><c:if test="${empty result.creatYyyy}">-</c:if><c:out value="${result.creatYyyy}"/></span>
                                    </li>
                                    <c:if test="${result.typeDivCd eq 'IT_BOOK'}">
	                                    <li>
	                                        <span>저자</span>
	                                        <span><c:if test="${empty result.bookAuthor}">-</c:if><c:out value="${result.bookAuthor}"/></span>
	                                    </li>
	                                    <li>
	                                        <span>출판사</span>
	                                        <span><c:if test="${empty result.bookPublisher}">-</c:if><c:out value="${result.bookPublisher}"/></span>
	                                    </li>
	                                    <li>
	                                        <span>발간유형</span>
	                                        <span><c:if test="${empty result.bookPlbcTypeNm}">-</c:if><c:out value="${result.bookPlbcTypeNm}"/></span>
	                                    </li>
	                                    <li>
	                                        <span>발간매체</span>
	                                        <span><c:if test="${empty result.bookPlbcMda}">-</c:if><c:out value="${result.bookPlbcMda}"/></span>
	                                    </li>
	                                    <li>
	                                        <span>청구기호</span>
	                                        <span><c:if test="${empty result.bookCallNo}">-</c:if><c:out value="${result.bookCallNo}"/></span>
	                                    </li>
                                    </c:if>
                                    <c:if test="${result.typeDivCd eq 'IT_DOC'}">
	                                    <li>
	                                       <span>문서번호</span>
                                           <span><c:if test="${empty result.docNo}">-</c:if><c:out value="${result.docNo}"/></span>
	                                    </li>
                                    </c:if>
                                    <c:if test="${result.typeDivCd eq 'IT_PHOTO'}">
	                                    <li>
	                                       <span>매체</span>
                                           <span><c:if test="${empty result.photoMediaNm}">-</c:if><c:out value="${result.photoMediaNm}"/></span>
	                                    </li>
	                                    <li>
	                                       <span>규격</span>
                                           <span><c:if test="${empty result.photoSizeNm}">-</c:if><c:out value="${result.photoSizeNm}"/></span>
	                                    </li>
	                                    <ul class="full-width">
				                            <li class="detail-accordion">
				                                <span>미디어 설명</span>
				                                <div class="desc-wrap">
				                                    <div class="desc">
				                                        <c:if test="${empty result.photoDescription}">-</c:if>
				                                        <c:out value="${result.photoDescription}" /><c:if test="${fn:length(result.photoDescription) > 50 }"><button type="button" class="btn-hide">접기 -</button></c:if>
				                                    </div>
				                                    <c:if test="${fn:length(result.photoDescription) > 50 }"><button type="button" class="btn-more">더보기+</button></c:if>
				                                </div>
				                            </li>
				                        </ul>
	                                    <ul class="full-width">
				                            <li class="detail-accordion">
				                                <span>미디어 부가설명</span>
				                                <div class="desc-wrap">
				                                    <div class="desc">
				                                        <c:if test="${empty result.photoAdditionalDescription}">-</c:if>
				                                        <c:out value="${result.photoAdditionalDescription}" /><c:if test="${fn:length(result.photoAdditionalDescription) > 50 }"><button type="button" class="btn-hide">접기 -</button></c:if>
				                                    </div>
				                                    <c:if test="${fn:length(result.photoAdditionalDescription) > 50 }"><button type="button" class="btn-more">더보기+</button></c:if>
				                                </div>
				                            </li>
				                        </ul>
                                    </c:if>
                                    <c:if test="${result.typeDivCd eq 'IT_VIDEO'}">
	                                    <li>
                                           <span>미디어 유형</span>
                                           <span><c:if test="${empty result.videoMediaNm}">-</c:if><c:out value="${result.videoMediaNm}"/></span>
                                        </li>
                                        <li>
                                           <span>재생시간</span>
                                           <span><c:if test="${empty result.videoTime}">-</c:if><c:out value="${result.videoTime}"/></span>
                                        </li>
                                        <li>
                                           <span>재생화질상태</span>
                                           <span><c:if test="${empty result.videoStat}">-</c:if><c:out value="${result.videoStat}"/></span>
                                        </li>
                                        <ul class="full-width">
                                            <li class="detail-accordion">
                                                <span>미디어 설명</span>
                                                <div class="desc-wrap">
                                                    <div class="desc">
                                                        <c:if test="${empty result.videoDescription}">-</c:if>
                                                        <c:out value="${result.videoDescription}" /><c:if test="${fn:length(result.videoDescription) > 50 }"><button type="button" class="btn-hide">접기 -</button></c:if>
                                                    </div>
                                                    <c:if test="${fn:length(result.videoDescription) > 50 }"><button type="button" class="btn-more">더보기+</button></c:if>
                                                </div>
                                            </li>
                                        </ul>
                                        <ul class="full-width">
                                            <li class="detail-accordion">
                                                <span>미디어 부가설명</span>
                                                <div class="desc-wrap">
                                                    <div class="desc">
                                                        <c:if test="${empty result.videoAdditionalDescription}">-</c:if>
                                                        <c:out value="${result.videoAdditionalDescription}" /><c:if test="${fn:length(result.videoAdditionalDescription) > 50 }"><button type="button" class="btn-hide">접기 -</button></c:if>
                                                    </div>
                                                    <c:if test="${fn:length(result.videoAdditionalDescription) > 50 }"><button type="button" class="btn-more">더보기+</button></c:if>
                                                </div>
                                            </li>
                                        </ul>
                                    </c:if>
                                    <c:if test="${result.typeDivCd eq 'IT_MAP'}">
	                                    <li>
	                                       <span>도면/지도유형</span>
                                           <span><c:if test="${empty result.mapTypeNm}">-</c:if><c:out value="${result.mapTypeNm}"/></span>
	                                    </li>
	                                    <li>
	                                       <span>위치(주소)</span>
                                           <span><c:if test="${empty result.mapLoc}">-</c:if><c:out value="${result.mapLoc}"/></span>
	                                    </li>
                                    </c:if>
                                    <c:if test="${result.typeDivCd eq 'IT_MUSE'}">
	                                    <li>
	                                       <span>박물유형</span>
                                           <span><c:if test="${empty result.museTypeNm}">-</c:if><c:out value="${result.museTypeNm}"/></span>
	                                    </li>
	                                    <li>
	                                       <span>박물형태</span>
                                           <span><c:if test="${empty result.museKindNm}">-</c:if><c:out value="${result.museKindNm}"/></span>
	                                    </li>
	                                    <li>
	                                       <span>재질</span>
                                           <span><c:if test="${empty result.museMeterialNm}">-</c:if><c:out value="${result.museMeterialNm}"/></span>
	                                    </li>
                                    </c:if>
                                </ul>
                            </div>
                            <div class="b-btn">
                                <c:if test="${result.ableRentAppNow }"><button type="button" class="btn btn-color" title="새 창 열림" onclick="gfn_rentItem('<c:out value="${result.mngOrgCd}"/>', '<c:out value="${result.masterId}"/>')">대출신청</button></c:if>
                                <c:if test="${not result.ableRentAppNow and result.ableRentResNow }"><button type="button" class="btn btn-color" title="새 창 열림" onclick="gfn_rentItem('<c:out value="${result.mngOrgCd}"/>', '<c:out value="${result.masterId}"/>')">대출예약</button></c:if>
                                
                                <c:if test="${result.ableReadNow }"><button type="button" class="btn btn-green" title="새 창 열림" onclick="gfn_reserveReadItem('<c:out value="${result.mngOrgCd}"/>', '<c:out value="${result.masterId}"/>')">방문열람신청</button></c:if>
                                
                                <c:if test="${result.ableRent or result.ableRead }">
                                    <button type="button" class="btn btn-orange" onclick="gfn_addRentCart('<c:out value="${result.masterId}"/>', '<c:out value="${result.ableRent}"/>', '<c:out value="${result.ableRead}"/>')">카트담기</button>
                                </c:if>
                            </div>
                            <c:if test="${fn:length(keywordList) > 0 }">
                                <div class="keyword">
                                    <span class="first">키워드</span>
                                    <c:forEach var="keyword" items="${keywordList }">
                                    <span><c:out value="${keyword}"/></span>
                                    </c:forEach>
                                </div>
                            </c:if>
                        </div>
                    </div>
                </div>
            </div>
            <div class="contents row-bottom">
                <div class="con-1">
                    <div class="list-box">
                        <div class="list">
                            <div class="icon"><img src="/images/icon/icon-data-use.png" alt=""></div>
                            <div class="title">이용상태</div>
                            <div class="con"><c:out value="${result.useStatusNm}"/></div>
                        </div>
                        <div class="list">
                            <div class="icon"><img src="/images/icon/icon-data-return.png" alt=""></div>
                            <div class="title">반납예정일</div>
                            <div class="con">
                                <span>
                                    <c:choose>
                                        <c:when test="${result.ableRentAppNow or empty result.rtnExpctDd}">
                                            -
                                        </c:when>
                                        <c:otherwise>
                                            <c:out value="${result.rtnExpctDd}"/>
                                        </c:otherwise>
                                    </c:choose>
                                </span>
                            </div>
                        </div>
                        <div class="list">
                            <div class="icon"><img src="/images/icon/icon-data-loan.png" alt=""></div>
                            <div class="title">대출</div>
                            <div class="con"> 
                                <c:if test="${result.ableRentAppNow eq true}"><span class="poss">신청가능</span></c:if>
                                <c:if test="${result.ableRentAppNow eq false and result.ableRentResNow eq true}"><span class="poss">예약가능</span></c:if>
                                <c:if test="${result.ableRentNow eq false}"><span class="imposs">신청/예약불가</span></c:if>
                            </div>
                        </div>
                        <div class="list">
                            <div class="icon"><img src="/images/icon/icon-data-visit.png" alt=""></div>
                            <div class="title">방문열람</div>
                            <div class="con">
                                <c:if test="${result.ableReadNow eq true }"><span class="poss">신청가능</span></c:if>
                                <c:if test="${result.ableReadNow eq false }"><span class="imposs">신청불가</span></c:if>
                            </div>
                        </div>
                    </div>
                    <div class="text-box">
                        <p>- 자료의 이용상태, 대출가능여부, 방문열람가능여부를 꼭 확인하신 후 이용해주시길 바랍니다.</p>
                        <p>- 다른 지방문화원 소장자료관 이용자들을 위해 꼭 필요한 자료만 예약한 후, 가능한 날짜에 예약 및 이용 부탁드립니다.</p>
                    </div>
                </div>
                
                <c:if test="${!empty result.bookIndex }">
	                <div class="con-2">
	                    <div class="top">
	                        <h3><span>목차</span>정보</h3>
	                        <button type="button" class="down-btn" title="접기/펼치기">down-btn</button>
	                    </div>
	                    <div class="bottom h-down">
	                        <p><c:out value="${result.bookIndex }"/></p>
	                    </div>
	                </div>
                </c:if>
                <c:if test="${fn:length(seeTogetherListVO) > 0 }">
                <div class="con-3">
                    <div class="bottom">
                        <!-- Swiper -->
                        <div class="swiper DetailSwiper1">
                            <div class="top">
                                <h3><span>함께 볼만한</span>자료</h3>
                            </div>
                            <div class="swiper-wrapper">
                               <c:forEach var="result" items="${seeTogetherListVO}" varStatus="status">
                                <div class="swiper-slide">
                                    <div class="List" onclick="goDetail('<c:out value='${result.masterId}'/>');">
                                        <div class="con-1">
                                            <div class="tit underline pink"><c:out value='${result.title }'/></div>
                                        </div>
                                        <div class="con-2">
                                            <p class="typ"><span>자료유형</span><span><c:if test="${empty result.typeDivNm and empty result.dtlsTypeDivNm}">-</c:if> <c:out value='${result.typeDivNm }'/> <c:if test="${!empty result.typeDivNm and !empty result.dtlsTypeDivNm}">&gt;</c:if><c:out value='${result.dtlsTypeDivNm}'/></span></p>
                                            <p class="sub"><span>주제분야</span><span><c:if test="${empty result.subjectNmUp and empty result.subjectNm}">-</c:if> <c:out value='${result.subjectNm }'/> <c:if test="${!empty result.subjectNmUp and !empty result.subjectNm}">&gt;</c:if><c:out value='${result.subjectNm}'/></span></p>
                                            <p class="age"><span>생산기관</span><span><c:if test="${empty result.orgNm }">-</c:if><c:out value='${result.orgNm }'/></span></p>
                                            <p class="yea"><span>생산년도</span><span><c:if test="${empty result.creatYyyy }">-</c:if><c:out value='${result.creatYyyy }'/></span></p>
                                        </div>
                                    </div>
                                </div>
                                </c:forEach>
                            </div>
                            <div class="swiper-button-next"></div>
                            <div class="swiper-button-prev"></div>
                            <div id="detail1BannerPage" class="pagination">
								<div class="swiper-pagination"></div>
								<div class="loop-count">
									<canvas id="swieper-timer" width="32" height="32"></canvas>
									<button type="button" class="remote remote-detail1"><span></span></button>
								</div>
							</div>
                        </div>
                        <!-- Swiper end -->
                    </div>
                </div>
                </c:if>
            </div>
            
            <div class="row-bottom">   
                <c:if test="${fn:length(similarListVO) > 0 }">
                <div class="con-4">
                    <div class="top">
                        <h3><span>이 자료와 유사한</span>자료</h3>
                        <p><strong>“ <c:forEach items="${mngOrgList }" var="list" varStatus="status"><c:if test="${status.count ne 1}"> ,</c:if><c:out value='${list }'/></c:forEach> ”</strong> 에 있습니다</p>
                    </div>
                    <div class="bottom">
                        <!-- Swiper -->
                        <div class="swiper DetailSwiper2">
                            <div class="swiper-wrapper items cover">
                                <c:forEach var="result" items="${similarListVO}" varStatus="status">
	                                <div class="swiper-slide">
	                                    <div class="List" onclick="gfn_getDetail('<c:out value='${result.masterId}'/>');">
	                                        <div class="inner">
	                                            <div class="thumbnail">
	                                                <span class="image-frame"><img src="<c:out value='${result.rprsThumbUrlWithDefaultMiddle }'/>" alt=""/></span>
	                                                <div class="detail-cover">
	                                                    <strong><c:out value='${result.title }'/></strong>
	                                                    <ul>
	                                                        <li><em>주제유형</em><c:if test="${empty result.typeDivNm}">-</c:if><c:out value='${result.typeDivNm }'/></li>
	                                                        <li><em>주제분야</em><c:if test="${empty result.subjectNmUp}">-</c:if><c:out value='${result.subjectNmUp }'/></li>
	                                                        <li><em>생산기관</em><c:if test="${empty result.orgNm }">-</c:if><c:out value='${result.orgNm }'/></li>
	                                                        <li><em>생산년도</em><c:if test="${empty result.creatYyyy }">-</c:if><c:out value='${result.creatYyyy }'/></li>
	                                                    </ul>
	                                                </div>
	                                            </div>
	                                        </div>
	                                    </div>
	                                </div>
                                </c:forEach>
                            </div>
                            <div class="swiper-button-next"></div>
                            <div class="swiper-button-prev"></div>
                            <div id="detail2BannerPage" class="pagination">
								<div class="swiper-pagination"></div>
								<div class="loop-count">
									<canvas id="swieper-timer" width="32" height="32"></canvas>
									<button type="button" class="remote remote-detail2"><span></span></button>
								</div>
							</div>
                        </div>
                        <!-- Swiper end -->
                    </div>
                </div>
                </c:if>
                <div class="btn-box">
                    <button type="button" class="btn btn-black" onclick="goList();">목록으로</button>
                </div>
            </div>
        </div>
        </form>
    </div>
</div>

<div class="popup pop-sharing" id="div_pop-sharing" style="display:none;">
    <div class="pop-wrap">
        <div class="sharing-bg">
            <p>자료를 <strong>SNS</strong>에 공유해보세요.</p>
            <button class="btn-close-pop">닫기</button>
            <ul class="sns-list">
                <button type="button" class="kstory-icon"><img src="/images/icon/icon-sharing-kstory-big.svg" data-sType="4" alt="카카오스토리 공유하기" class="sns-pop" /><p>카카오스토리</p></button>
                <button type="button" class="nblog-icon"><img src="/images/icon/icon-sharing-nblog-big.svg" data-sType="3" alt="네이버블로그 공유하기" class="sns-pop" /><p>블로그</p></button>           
                <button type="button" class="fb-icon"><img src="/images/icon/icon-sharing-fb-big.svg" data-sType="1" alt="페이스북 공유하기" class="sns-pop" /><p>페이스북</p></button>
                <button type="button" class="tw-icon"><img src="/images/icon/icon-sharing-tw-big.svg" data-sType="2" alt="트위터 공유하기" class="sns-pop" /><p>트위터</p></button>
            </ul>
            <div class="link-copy">
                <label for="p_link-copy" style="display:none;">link</label><input type="text" class="link-txt" id="p_link-copy" value="http://www.nculture.org"/>
                <button type="button" style="margin-top:1px" class="btn btn-white">URL복사</button>
            </div>
        </div>
        <div class="Qr">
            <div class="inner">
                <div id="qrcode" class="Qrimg"></div> 
                <div class="Qrtext"><p><strong>QR코드</strong>를 스캔해주세요.</p></div>
            </div>
        </div>
    </div>
</div>


<script>
$(function(){
    $(window).resize(function() {

 	var windowWidth = $(window).width();
 	var _loop = false;
 	var _slidesPerView = 4;
  	var _slidesPerViewBottom = 5;
  	var _spaceBetween = 30;
  	var _centeredSlides = false;
  	var _lenght = 5;
  	
  	if (windowWidth <= 768) {
  		_loop = false;
      	_slidesPerView = 1;
      	_slidesPerViewBottom = 1;
      	_spaceBetween = 20;
      	_centeredSlides = false;
      	_lenght = 1;
  	}
  	if (windowWidth >= 769) {
  		_loop = false;
      	_slidesPerView = 3;
      	_slidesPerViewBottom = 3;
      	_spaceBetween = 30;
      	_centeredSlides = false;
      	_lenght = 3;
  	}
  	if (windowWidth >= 1400) {
  		_loop = false;
        _slidesPerView = 4;
        _slidesPerViewBottom = 5;
        _spaceBetween = 30;
        _centeredSlides = false;
        _lenght = 5;
    }
  	
  /* 함께 볼만한자료 슬라이드 */
  var detailswiper1 = new Swiper('.DetailSwiper1', {
      loop: _loop,
      slidesPerView: _slidesPerView,
      spaceBetween: _spaceBetween,
      centeredSlides: _centeredSlides,
      autoplay: false,
      navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
      },
      pagination: {
          el: '.pagination .swiper-pagination',
          type: 'fraction',
       },
       breakpoints: {
           768: {
        		loop : _loop,
        		slidesPerView : 1,
        	    spaceBetween : 20,
           },
           1400: {
	       		loop : _loop,
	       		slidesPerView : 3,
	    	    spaceBetween : 30,
           },
           4989: {
	       		loop : _loop,
	       		slidesPerView : 4,
	    	    spaceBetween : 30,
           }
       },
      on: {
          init: function () {
              if (this.slides.length <= _lenght) {
                  // First way:
                  this.allowSlidePrev = this.allowSlideNext = false; // disabling swiping
                  this.el.querySelector(".swiper-button-prev").style.visibility = "hidden";  // hiding arrows prev&next
                  this.el.querySelector(".swiper-button-next").style.visibility = "hidden";
                  this.el.querySelector(".pagination").style.visibility = "hidden";
              }
          }
      }
  });
  
  /* 유사한 자료 슬라이드 */
 var detailswiper2 = new Swiper('.DetailSwiper2', {
     loop: _loop,
     slidesPerView: _slidesPerViewBottom,
     spaceBetween: _spaceBetween,
     centeredSlides: _centeredSlides,
     autoplay: false,
     navigation: {
         nextEl: ".swiper-button-next",
         prevEl: ".swiper-button-prev",
     },
     pagination: {
         el: '.pagination .swiper-pagination',
         type: 'fraction',
      },
      breakpoints: {
          768: {
       		slidesPerView : 1,
       	    spaceBetween : 20,
          },
          1400: {
	       		slidesPerView : 3,
	    	    spaceBetween : 30,
          },
          4989: {
	       		loop : _loop,
	       		slidesPerView : 5,
	    	    spaceBetween : 30,
          }
      },
     on: {
         init: function () {
             if (this.slides.length <= _lenght) {
                 // First way:
                 this.allowSlidePrev = this.allowSlideNext = false; // disabling swiping
                 this.el.querySelector(".swiper-button-prev").style.visibility = "hidden";  // hiding arrows prev&next
                 this.el.querySelector(".swiper-button-next").style.visibility = "hidden";
                 this.el.querySelector(".pagination").style.visibility = "hidden";
             }
         }
     }
 });
 
  
 $('.remote-detail1').click(function () {
	  if($(this).hasClass('restart')){
	     $(this).removeClass('restart');
	     detailswiper1.autoplay.start();
	  }else{
	     $(this).addClass('restart');
	     detailswiper1.autoplay.stop();
	  }
	});
  $('.remote-detail2').click(function () {
	  if($(this).hasClass('restart')){
	     $(this).removeClass('restart');
	     detailswiper2.autoplay.start();
	  }else{
	     $(this).addClass('restart');
	     detailswiper2.autoplay.stop();
	  }
	});
 
    });
    $(window).resize();
});
</script>