function assert(value, desc){
	var results = document.getElementById("results");
	if(!results){
		results = document.createElement("ul");
		document.getElementsByTagName("body")[0].appendChild(results);
		results.setAttribute("id", "results");
	}
	var li = document.createElement("li");
	li.className = value ? "pass" : "fail";
	li.appendChild(document.createTextNode(desc));
	results.appendChild(li);
}
$(function(){
	$('.menu_item').bind({
	    'touchstart': function(e) {
	        $(this).removeClass("notouchstyle").addClass("touchstyle");
	    },
	    'touchend': function(e) {
	        $(this).removeClass("touchstyle").addClass("notouchstyle");
	    },
		'touchmove': function(e) {
	        $(this).removeClass("touchstyle").addClass("notouchstyle");
	    }
	});
});
$(function(){
	$('.no_flick_item').bind({
	    'touchstart': function(e) {
	        $(this).removeClass("notouchstyle").addClass("touchstyle");
	    },
	    'touchend': function(e) {
	        $(this).removeClass("touchstyle").addClass("notouchstyle");
	    },
		'touchmove': function(e) {
	        $(this).removeClass("touchstyle").addClass("notouchstyle");
	    }
	});
});
$(function(){
	flickMenuDo();
});

//$(window).on('resize',function(){
//	if(window.innerWidth < 500){
		//assert(true, window.innerWidth + ":SmallDevice");
//		applySmallDevice();	
//	}else{
		//assert(true, window.innerWidth + ":BigDevice");
//		applyBigDevice();
//	}
//});


function applySmallDevice(){
	var no_flick_area = document.getElementsByClassName('no_flick_area');
	for(var i=0; i<no_flick_area.length; i++){
		no_flick_area[i].setAttribute("style", "display:none;overflow:hidden;");
	}
	var noscriptTarget = document.getElementsByClassName("noscript_menu");
	for(var i=0; i<noscriptTarget.length; i++){
		noscriptTarget[i].setAttribute("style", "display:block");
	}
	var containerIn = document.getElementsByClassName('containerIn');
	for(var i=0; i<containerIn.length; i++){
		containerIn[i].setAttribute("style", "display:block;overflow:hidden;");
	}
	
}
function applyBigDevice(){
	var noscriptTarget = document.getElementsByClassName("noscript_menu");
	for(var i=0; i<noscriptTarget.length; i++){
		noscriptTarget[i].setAttribute("style", "display:none");
	}
	var containerIn = document.getElementsByClassName('containerIn');
	for(var i=0; i<containerIn.length; i++){
		containerIn[i].setAttribute("style", "display:none;");
	}
	var no_flick_area = document.getElementsByClassName('no_flick_area');
	for(var i=0; i<no_flick_area.length; i++){
		no_flick_area[i].setAttribute("style", "display:block;");
	}
}

function flickMenuDo(){
	var menu_item = document.getElementsByClassName('menu_item');
	for(var i=0; i<menu_item.length; i++){
		menu_item[i].setAttribute("style", "-webkit-tap-highlight-color:rgba(0,0,0,0);");
		if(i == menu_item.length-1){
			menu_item[i].setAttribute("style", "-webkit-tap-highlight-color:rgba(0,0,0,0);margin-right:0;");
		}	
	}

	var no_flick_item = document.getElementsByClassName('no_flick_item');
	for(var i=0; i<no_flick_item.length; i++){
		no_flick_item[i].setAttribute("style", "display:block;-webkit-tap-highlight-color:rgba(0,0,0,0);");
		if(i == no_flick_item.length-1){
			no_flick_item[i].setAttribute("style", "display:block;-webkit-tap-highlight-color:rgba(0,0,0,0);margin-right:0");
		}
	}

	var flickBg2 = document.getElementsByClassName('flickBg2');
	for(var i=0; i<flickBg2.length; i++){
		flickBg2[i].setAttribute("style", "margin-bottom:5px;");
	}

	if(window.orientation == 0 && window.innerWidth < 300){
		applySmallDevice();
	}
	jQuery(function($){
		$('.JSflickArea').each(function(){
			var $viewport =  $(this).find('.containerBig');
			
			//wrapper： floatさせている画像郡全体の幅（hiddenしている部分も含める）
			var $wraper =  $viewport.find('.containerIn');
			var $items = $wraper.find('.menu_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({"overflow":"hidden"});
			
			//$wraper.css({"width":w*$items.length+20*$items.length});
			
			
			//distance：フリック時の移動距離と移動可能スパン
			var flipsnap = Flipsnap('.containerIn', {distance:70, transitionDuration: 250, maxPoint:2});
			
			//controller
			var $next = $('.next').click(function() {flipsnap.toNext();});
			var $prev = $('.prev').click(function() {flipsnap.toPrev();});
			var arrowDisabledClass = 'off';
			
			//navigation
			var moveendCallback = function(){		
				//navigation
				
				if(flipsnap.hasNext()){
					$next.removeClass(arrowDisabledClass);
				}else{
					$next.addClass(arrowDisabledClass);
				}

				if(flipsnap.hasPrev()){
					$prev.removeClass(arrowDisabledClass);
				}else{
					$prev.addClass(arrowDisabledClass);
				}

				//丸印の装飾
				var first_circle = document.getElementById("first_circle");
				var second_circle = document.getElementById("second_circle");
				var third_circle = document.getElementById("third_circle");
				if(flipsnap.hasNext() && !(flipsnap.hasPrev())){
					first_circle.setAttribute("style", "background-color:#008ee8");
					second_circle.setAttribute("style", "background-color:#bee9fe");
					third_circle.setAttribute("style", "background-color:#bee9fe");
				}else if(!(flipsnap.hasNext())){
					first_circle.setAttribute("style", "background-color:#bee9fe");
					second_circle.setAttribute("style", "background-color:#bee9fe");
					third_circle.setAttribute("style", "background-color:#008ee8");
				}else{
					first_circle.setAttribute("style", "background-color:#bee9fe");
					second_circle.setAttribute("style", "background-color:#008ee8");
					third_circle.setAttribute("style", "background-color:#bee9fe");
				}
				
			}

			flipsnap.element.addEventListener('fsmoveend', moveendCallback, false);
			moveendCallback();	
			
			//ターゲットとするアイコンの設定
			//左端に設定したい場合は、htmlにdefault_icon_0を指定
			//真ん中に設定したい場合は、htmlにdefault_icon_1を指定
			//右端に設定したい場合は、htmlにdefault_icon_2を指定
			if(document.getElementById("default_icon_1")){
				flipsnap.moveToPoint(1);
			}else if(document.getElementById("default_icon_2")){
				flipsnap.moveToPoint(2);
			}else if(document.getElementById("default_icon_3")){
				flipsnap.moveToPoint(3);
			}
			//リフレッシュ
			//$(window).on('resize',function(){
			//	flipsnap.refresh();		
			//});
			
		　　$(window).on('resize',function(){
				var orientation = window.orientation;
				if(orientation == 0 && window.innerWidth < 300){
					applySmallDevice();
					flipsnap.refresh();	
				}else{
					applyBigDevice();
				}
			});

		});
	});
}