<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@include file="/WEB-INF/jsp/includes.jsp"%>
<input type="hidden" value="myCourse" id="currentMenu" />
<div class="layout-wrap">
	<div class="layout layout-content">
		<div class="crumbs">
			<a class="link-action" href="${contextPath }/portal/mycourse/index.mooc"><i
				class="icon-ttm icon-back02"></i>课程</a> &gt;
			${unit.unitNo }&gt; ${unit.unitName }
		</div>
		<div class="view-tab learn-tab ">
			<div class="tab-header t-scroll-tab">
				<span class="btn-scroll scroll-left">&lsaquo;</span>
				<span class="btn-scroll scroll-right">&rsaquo;</span>
				<div class="tabs-wrap">
					<ul class="tabs clearfix">
						<c:forEach items="${itemList}" var="item">
							<li class="<c:if test="${itemId==item.itemId}">tab-active</c:if>">
								<a class="tab-inner" href="javascript:void(0)" itemId="${item.itemId }"><i
									class="ic-play01 icon-ttm"></i>${item.itemName }</a>
							</li>
						</c:forEach>
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>
<div id="playDiv"></div>
<coeus:js src="/js/app/study/study.log.js" />
<script type="text/javascript">
$(function(){
	getResource(${itemId});
	
	/*tab标签切换*/
    $(".tab-inner").click(function () {
        var itemId = $(this).attr("itemId");
        var $tab = $(this).parent();
        $tab.siblings(".tab-active").removeClass("tab-active");
        $tab.addClass("tab-active");
        try {
        	jwplayer("mediaplayer").destroy();
		} catch (e) {
			
		}
        getResource(itemId);
    });
});

function getResource(itemId){
	$.ajax({
        url: CONTEXTPATH + "/study/play.mooc",
        type: "post",
        dataType: "html",
        data: {
            itemId: itemId
        },
        success: function (response) {
            $("#playDiv").html(response);
        }
    });
}
</script>