<div class="slide-v">
	<ul class="tab">
		<li class="is-selected"><a href="#product-01">스포츠 포토</a></li>
		<li><a href="#product-02">패션 포토</a></li>
		<li><a href="#product-03">동물 포토</a></li>
	</ul>
	
	<div class="view-box">
		<ul class="list-wrap is-selected" id="product-01">
			<li class="flag-01">
				<img src="http://lorempixel.com/g/150/113/sports" alt="">
			</li>
			<li class="flag-02">
				<img src="http://lorempixel.com/g/150/113/sports" alt="">
			</li>
			<li class="flag-03">
				<img src="http://lorempixel.com/g/150/113/sports" alt="">
			</li>
		</ul>
		<ul class="list-wrap" id="product-02">
			<li class="flag-01">
				<img src="http://lorempixel.com/g/150/113/fashion" alt="">
			</li>
			<li class="flag-02">
				<img src="http://lorempixel.com/g/150/113/fashion" alt="">
			</li>
			<li class="flag-03">
				<img src="http://lorempixel.com/g/150/113/fashion" alt="">
			</li>
		</ul>
		<ul class="list-wrap" id="product-03">
			<li class="flag-01">
				<img src="http://lorempixel.com/g/150/113/animals" alt="">
			</li>
			<li class="flag-02">
				<img src="http://lorempixel.com/g/150/113/animals" alt="">
			</li>
			<li class="flag-03">
				<img src="http://lorempixel.com/g/150/113/animals" alt="">
			</li>
		</ul>
	</div>
</div>

*{margin: 0;padding: 0;}
body {font-size: 12px;margin: 50px;}
li {list-style: none;}
.slide-v {margin-top: 30px}
.slide-v:after {clear: both; display:block; content:""}
.slide-v .tab {float: left; width: 122px;height: 114px;border: 1px solid #ccc; background-color: #e6e6e6;}
.slide-v .tab li a {display: inline-block;color: #333; text-decoration: none;padding: 7px 20px 8px 20px; margin: 2px 0; }
.slide-v .tab li.is-selected a {background-color: #aa7f5d; color: #fff;}
.slide-v .tab li:nth-child(1) a {margin-top: 12px;}
.slide-v .view-box {overflow: hidden;height: 115px;position: relative;margin-left: 150px;}
.slide-v .list-wrap {position: absolute;top: 0;left: 0;display: none;}
.slide-v .list-wrap.is-selected {display: block;}
.slide-v .list-wrap li {float: left;border: 1px solid #9b9b9b; width: 150px;height: 113px;text-align: center;margin-left: 10px;position: relative;}
.slide-v .list-wrap li:first-child {margin-left: 0;}
.slide-v .list-wrap li > a { display: table-cell; width: 226px;height: 117px;text-align: center;vertical-align: middle;font-size: 18px;}
.slide-v .list-wrap li.on > a{display: none;}

var JUI = JUI || {};

(function(param) {
	var global = param.global,
		$      = param.$;
	
	JUI.verticalSlide = function (container, options) {
		
		if (!container.length) {
			return;
		}
		
		var detect = {},
			config = {
				isSelected : 0,
				speed : 400
			},
			active = 'is-selected';
		
		$.extend(config, options);
		
		function init() {
			setup();
			isSelected();
		}
		
		function isSelected() {
			detect.tabListItem.removeClass(active);
			detect.viewContents.removeClass(active);
			detect.tabListItem.eq(config.isSelected).addClass(active);
			detect.viewContents.eq(config.isSelected).addClass(active);
		}
		
		function setup() {
			
			detect.tabContainer = container.find('.tab');
			detect.tabListItem  = detect.tabContainer.find('li');
			detect.viewBox  	= container.find('.view-box');
			detect.viewContents = detect.viewBox.find('.list-wrap');
			detect.tabLength 	= detect.tabListItem.length;
			detect.max 			= detect.tabLength - 1;
			detect.currentIndex = config.isSelected;
			detect.height 		= detect.viewContents.height();
			
			// 탭 리스트 인덱스 설정
			detect.tabListItem.each(function (index) {
				$(this).find('a').data('index', index);
			});
			
		}
		
		function direction(selectedIndex) {
			return detect.currentIndex < selectedIndex ? 'goToUp' : 'goToDown';
		}
		
		function slideStarting(selectedIndex, speed) {
			
			if ((detect.currentIndex == selectedIndex) || (selectedIndex > detect.max)) {
				return;
			}
			
			if (detect.viewContents.is(':animated')) {
				return;
			}
			
			var position = direction(selectedIndex),
				offset;
			
			switch(position) {
				case 'goToUp' :
					offset = detect.height;
					break;
				case 'goToDown' :
					offset = -detect.height;
			}
			
			detect.viewContents.eq(selectedIndex).css({'top': offset}).addClass(active);
			detect.viewContents.eq(selectedIndex).animate({'top' : 0}, speed);
			
			detect.viewContents.eq(detect.currentIndex).animate({'top': -offset}, speed, function () {
				slideEnding(selectedIndex);
			});
			
		}
		
		function slideEnding(selectedIndex) {
			
			detect.tabListItem.eq(detect.currentIndex).removeClass(active);
			detect.viewContents.eq(detect.currentIndex).removeClass(active);
			detect.tabListItem.eq(selectedIndex).addClass(active);
			detect.viewContents.removeAttr('style');
			
			detect.currentIndex = selectedIndex;
		}
		
		init();
		
		detect.tabListItem.on('click.banner', ' > a', function () {
			slideStarting($(this).data('index'), config.speed);
			return false;
		});
		
	};
	
}({global: window, $: window.jQuery}));

$(function () {
	/**
	 * @param1 필수, @param2 옵션
	 * @param1 @type $('selector') :슬라이더 컨테이너 박스
	 * @ppram2 @type {} : 객체리터럴
	 * {isSelected:0, speed: 400} : 처음 활성화시켜놓을 요소, 애니메이션 속도
	 * ex) JUI.verticalSlide($('.slide-v'), {isSelected: 1, speed: 400});
	 **/
	JUI.verticalSlide($('.slide-v'));
});