{@ $wi = $widget_info; }
<load target="css/style.css" />
<load target="js/pageSwitch.js" />

<style>
#imgs { width:{$wi->thumbnail_width}px; height:{$wi->thumbnail_height}px; }
@media all and (max-width: 479px) {
#imgs{width:360px; height:300px;}
}
</style>

<div id="wrap">

	<div id="imgs{$msb_widget_count}">
		<!--@foreach($wi->document_list as $oDocument)-->
		<div><a href="{getUrl('','document_srl',$oDocument->document_srl)}"><img src="{$oDocument->getThumbnail($wi->thumbnail_width,$wi->thumbnail_height,$wi->thumbnail_type)}"/></a>

			<div class="captions" cond="$wi->title_visibility =='true'">
				<ul>
					<li class="a_text" cond="$wi->title_visibility =='true'" style="color:{$wi->title_color}; font-size:{$wi->title_size};">{$oDocument->getTitleText($wi->title_length)}</li>
					<li class="a_summary" cond="$wi->display_summary =='Y'" style="color:{$wi->summary_font_color}; font-size:{$wi->sum_font_size};">{$oDocument->getSummary($wi->content_cut_size)}</li>
					<li class="a_sub" cond="$wi->display_regdate == 'Y'">{$oDocument->getRegdate('Y.m.d')}</li>
					<li class="a_sub" cond="$wi->display_author== 'Y'">{$oDocument->getNickName()}</li>
				</ul>
			</div>
		</div>
		<!--@end-->
	</div>

	<select id="tssel">
		<option value="">페이지 잘라 내기 효과</option>
		<option value="fade">fade</option>
		<optgroup label="스크롤링 효과">
			<option value="scroll">scroll</option>
			<option value="scroll3d">scroll3d</option>
			<option value="scrollCover">scrollCover</option>
			<option value="scrollCoverReverse">scrollCoverReverse</option>
			<option value="scrollCoverIn">scrollCoverIn</option>
			<option value="scrollCoverOut">scrollCoverOut</option>
			<option value="scrollX">scrollX</option>
			<option value="scroll3dX">scroll3dX</option>
			<option value="scrollCoverX">scrollCoverX</option>
			<option value="scrollCoverReverseX">scrollCoverReverseX</option>
			<option value="scrollCoverInX">scrollCoverInX</option>
			<option value="scrollCoverOutX">scrollCoverOutX</option>
			<option value="scrollY">scrollY</option>
			<option value="scroll3dY">scroll3dY</option>
			<option value="scrollCoverY">scrollCoverY</option>
			<option value="scrollCoverReverseY">scrollCoverReverseY</option>
			<option value="scrollCoverInY">scrollCoverInY</option>
			<option value="scrollCoverOutY">scrollCoverOutY</option>
		</optgroup>
		<optgroup label="슬라이딩 효과">
			<option value="slide">slide</option>
			<option value="slideCover">slideCover</option>
			<option value="slideCoverReverse">slideCoverReverse</option>
			<option value="slideCoverIn">slideCoverIn</option>
			<option value="slideCoverOut">slideCoverOut</option>
			<option value="slideX">slideX</option>
			<option value="slideCoverX">slideCoverX</option>
			<option value="slideCoverReverseX">slideCoverReverseX</option>
			<option value="slideCoverInX">slideCoverInX</option>
			<option value="slideCoverOutX">slideCoverOutX</option>
			<option value="slideY">slideY</option>
			<option value="slideCoverY">slideCoverY</option>
			<option value="slideCoverReverseY">slideCoverReverseY</option>
			<option value="slideCoverInY">slideCoverInY</option>
			<option value="slideCoverOutY">slideCoverOutY</option>
		</optgroup>
		<optgroup label="표지 효과">
			<option value="flow">flow</option>
			<option value="flowCover">flowCover</option>
			<option value="flowCoverReverse">flowCoverReverse</option>
			<option value="flowCoverIn">flowCoverIn</option>
			<option value="flowCoverOut">flowCoverOut</option>
			<option value="flowX">flowX</option>
			<option value="flowCoverX">flowCoverX</option>
			<option value="flowCoverReverseX">flowCoverReverseX</option>
			<option value="flowCoverInX">flowCoverInX</option>
			<option value="flowCoverOutX">flowCoverOutX</option>
			<option value="flowY">flowY</option>
			<option value="flowCoverY">flowCoverY</option>
			<option value="flowCoverReverseY">flowCoverReverseY</option>
			<option value="flowCoverInY">flowCoverInY</option>
			<option value="flowCoverOutY">flowCoverOutY</option>
		</optgroup>
		<optgroup label="절단 효과">
			<option value="slice">slice</option>
			<option value="sliceX">sliceX</option>
			<option value="sliceY">sliceY</option>
		</optgroup>
		<optgroup label="확대 / 축소 효과">
			<option value="zoom">zoom</option>
			<option value="zoomCover">zoomCover</option>
			<option value="zoomCoverReverse">zoomCoverReverse</option>
			<option value="zoomCoverIn">zoomCoverIn</option>
			<option value="zoomCoverOut">zoomCoverOut</option>
			<option value="zoomX">zoomX</option>
			<option value="zoomCoverX">zoomCoverX</option>
			<option value="zoomCoverReverseX">zoomCoverReverseX</option>
			<option value="zoomCoverInX">zoomCoverInX</option>
			<option value="zoomCoverOutX">zoomCoverOutX</option>
			<option value="zoomY">zoomY</option>
			<option value="zoomCoverY">zoomCoverY</option>
			<option value="zoomCoverReverseY">zoomCoverReverseY</option>
			<option value="zoomCoverInY">zoomCoverInY</option>
			<option value="zoomCoverOutY">zoomCoverOutY</option>
		</optgroup>
		<optgroup label="왜곡 효과">
			<option value="skew">skew</option>
			<option value="skewCover">skewCover</option>
			<option value="skewCoverReverse">skewCoverReverse</option>
			<option value="skewCoverIn">skewCoverIn</option>
			<option value="skewCoverOut">skewCoverOut</option>
			<option value="skew">skewX</option>
			<option value="skewCoverX">skewCoverX</option>
			<option value="skewCoverReverseX">skewCoverReverseX</option>
			<option value="skewCoverInX">skewCoverInX</option>
			<option value="skewCoverOutX">skewCoverOutX</option>
			<option value="skewY">skewY</option>
			<option value="skewCoverY">skewCoverY</option>
			<option value="skewCoverReverseY">skewCoverReverseY</option>
			<option value="skewCoverInY">skewCoverInY</option>
			<option value="skewCoverOutY">skewCoverOutY</option>
		</optgroup>
		<optgroup label="플립 효과">
			<option value="flip">flip</option>
			<option value="flip3d">flip3d</option>
			<option value="flipClock">flipClock</option>
			<option value="flipPaper">flipPaper</option>
			<option value="flipCover">flipCover</option>
			<option value="flipCoverReverse">flipCoverReverse</option>
			<option value="flipCoverIn">flipCoverIn</option>
			<option value="flipCoverOut">flipCoverOut</option>
			<option value="flipX">flipX</option>
			<option value="flip3dX">flip3dX</option>
			<option value="flipClockX">flipClockX</option>
			<option value="flipPaperX">flipPaperX</option>
			<option value="flipCoverX">flipCoverX</option>
			<option value="flipCoverReverseX">flipCoverReverseX</option>
			<option value="flipCoverInX">flipCoverInX</option>
			<option value="flipCoverOutX">flipCoverOutX</option>
			<option value="flipY">flipY</option>
			<option value="flip3dY">flip3dY</option>
			<option value="flipClockY">flipClockY</option>
			<option value="flipPaperY">flipPaperY</option>
			<option value="flipCoverY">flipCoverY</option>
			<option value="flipCoverReverseY">flipCoverReverseY</option>
			<option value="flipCoverInY">flipCoverInY</option>
			<option value="flipCoverOutY">flipCoverOutY</option>
		</optgroup>
		<optgroup label="폭발 효과">
			<option value="bomb">bomb</option>
			<option value="bombCover">bombCover</option>
			<option value="bombCoverReverse">bombCoverReverse</option>
			<option value="bombCoverIn">bombCoverIn</option>
			<option value="bombCoverOut">bombCoverOut</option>
			<option value="bombX">bombX</option>
			<option value="bombCoverX">bombCoverX</option>
			<option value="bombCoverReverseX">bombCoverReverseX</option>
			<option value="bombCoverInX">bombCoverInX</option>
			<option value="bombCoverOutX">bombCoverOutX</option>
			<option value="bombY">bombY</option>
			<option value="bombCoverY">bombCoverY</option>
			<option value="bombCoverReverseY">bombCoverReverseY</option>
			<option value="bombCoverInY">bombCoverInY</option>
			<option value="bombCoverOutY">bombCoverOutY</option>
		</optgroup>
	</select>

</div>

<script>
var reg=location.search.match(/ts=([^&]*)/),
	ts=reg&&reg[1]|| '{$wi->slide_type}',
	a=new pageSwitch('imgs',{
	duration:{$wi->duration},
	start:0,
	direction:1,
	loop:true,
	ease:/flip(?!Paper)/.test(ts)?'bounce':'ease',
	transition:ts,
	mouse:true,
	mousewheel:true,
	autoplay:{$wi->slideshow},
	arrowkey:true
}),
navs=document.getElementById('navs').getElementsByTagName('a');

a.on('before',function(m,n){
	navs[m].className='';
	navs[n].className='active';
});

if(/^(?:scroll3d|flip)/.test(ts)){
	document.getElementById('imgs').className='visible';
}

document.getElementById('tssel').onchange=function(){
	location.href='?ts='+this.value;
}


var options=document.getElementById('tssel').options,
	i=0,op;
while(op=options[i++]){
	if(op.value===ts){
		op.selected=true;
		break;
	}
}

i=0;
for(;i<navs.length;i++){
	!function(i){
		navs[i].onclick=function(){
			a.slide(i);
		}
	}(i);
}
</script>