jQuery(function($){
	
	$('.JSflickArea').each(function(){
		var $viewport =  $(this).find('.container');
		var $wraper =  $viewport.find('.containerInner');
		var $items = $wraper.find('.item');
		
		var w = 0;
		var h = 0;
		$items.each(function(){
			w = w>$(this).width()?w:$(this).width();
			h = h>$(this).height()?h:$(this).height();
		});
		$viewport.css({width:w,overflow:'hidden'});
		$wraper.css({width:w*$items.length});
		$items.css({width:w,height:h,float:'left'});
		
		var flipsnap = Flipsnap($wraper.get(0), {distance:w});
		
		
		//controller
		var $next = $('.next').click(function() {flipsnap.toNext();});
		var $prev = $('.prev').click(function() {flipsnap.toPrev();});
		var arrowDisabledClass = 'off';
		
		//navigation
		var $navi = $('.nav li');
		var naviCurClass = 'selected';
		
		//callback
		var moveendCallback = function(){
			//controller
			$navi.filter('.'+naviCurClass).removeClass(naviCurClass);
			$navi.eq(flipsnap.currentPoint).addClass(naviCurClass);
			//navigation
			if(flipsnap.hasNext()){$next.removeClass(arrowDisabledClass);}
			else{$next.addClass(arrowDisabledClass);}
			if(flipsnap.hasPrev()){$prev.removeClass(arrowDisabledClass);}
			else{$prev.addClass(arrowDisabledClass);}
		}
		flipsnap.element.addEventListener('fsmoveend', moveendCallback, false);
		moveendCallback();
		
	});
		
});