var DEBUG_MODE = true && window.location.href.indexOf("shop.hokubatsu.com") <= 0;
function c(s) {
    if (DEBUG_MODE && this.console && typeof console.log != "undefined") {
        console.log(s);
    }
}
// #######################################################################################
// #######################################  READY  #######################################
// #######################################################################################
$(document).ready(function(){


	// ####################################  TOP
	// ---------
	//   pan
	// ---------
	if(!$("#slymenu").length) {
		$(window).bind("scroll", function() {
			// document
			scrollHeight = $(document).height();
			// window+scroll now
			scrollPosition = $(window).height() + $(window).scrollTop();
			// height footer
			footHeight = $(".footer").height();
			// scrolling to footer
			if ( scrollHeight - scrollPosition <= footHeight ) {
				$(".pan-wrapper").css({"position":"absolute","bottom": "0px","z-index":"100"});
			} else {
				$(".pan-wrapper").css({"position":"fixed","bottom": "0px"});
			}
		});
	}
	
	// ---------
	//   news
	// ---------
	if($('.news-list').length) {
		$('.news-list').prepend('<li class="news-item">24/04/27 本日は店休日です。ご注文・お問い合わせのお返事は翌営業日になります。何卒ご了承ください。</li><li class="news-item"><a href="https://info.hokubatsu.com/archives/1149" title="ゴールデンウィーク休業のお知らせ 2024">24/04/26 ゴールデンウィーク休業のお知らせ 2024</a></li><li class="news-item"><a href="https://info.hokubatsu.com/archives/1143" title="男の隠れ家 2024年5月号『龍神様と出会う開運の旅』にイラストを描かせていただきました">24/04/01 男の隠れ家 2024年5月号『龍神様と出会う開運の旅』にイラストを描かせていただきました</a></li><li class="news-item"><a href="https://info.hokubatsu.com/archives/1139" title="臨時休業のお知らせ 3/11-3/17">24/03/11 臨時休業のお知らせ 3/11-3/17</a></li><li class="news-item"><a href="https://info.hokubatsu.com/archives/1136" title="サーバーメンテナンスにともなう、サイト停止のお知らせ [2024.2.27 深夜～早朝]">24/02/09 サーバーメンテナンスにともなう、サイト停止のお知らせ [2024.2.27 深夜～早朝]</a></li><li class="news-item"><a href="https://info.hokubatsu.com/archives/1130" title="時空旅人Vol.78 『平泉　奥州藤原氏と仏国土の夢』にイラストを描かせていただきました">24/01/26 時空旅人Vol.78 『平泉　奥州藤原氏と仏国土の夢』にイラストを描かせていただきました</a></li>').jScrollPane();
	}
	
	// ---------------
	//   create menu
	// ---------------
    if($("#slymenu").length) {
        
        callMenu();
        function callMenu() {

            $.ajax({
				url: "https://tool.hokubatsu.com/api/1/",
                type: 'GET',
                async: false,
                data: {
                    mode: 'menu'
                }
            })
			.then( function(result) {
                var $rs = JSON.parse(result.replace(/\u2028|\u2029/g, ''));
                var $ul = $('<ul>');
                $cnt = 0;
                for (var $i in $rs) {
                    if($cnt==0) {
                        $('<li class="products-category-item">').append(
                            $('<a>').attr('href','#').attr('id',"btn-"+$i.toLowerCase()).attr('class','active').append(
                                $rs[$i]
                            )
                        ).appendTo($ul);
                    } else {
                        $('<li class="products-category-item">').append(
                            $('<a>').attr('href','#').attr('id',"btn-"+$i.toLowerCase()).append(
                                $rs[$i]
                            )
                        ).appendTo($ul);
                    }
                    $cnt++;

                }
                $('<div>').append($ul).appendTo($('#slymenu'));
            })

            // ES6 arrow is X
            .fail( function (result) {
                $( "#categoryMenu" ).html( "error:" );
					c(result);
            });
        }
        
    }

    
////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////// COMMON
////////////////////////////////////////////////////////////////////////////////
    
    // ---------
	//   gotop
	// ---------
	if($(".gotopbtn").length) {
		$(".gotopbtn").on('click', function () {
			$(this).blur();
			$('html,body').animate({ scrollTop: 0 }, 'slow');
			return false;
		});
	}
    

    // -------------
	//   blog-info
	// -------------
	if($('.blog__list').length) {
		$('.blog__list').prepend('<li class="blog-item"><a href="https://blog.hokubatsu.com/tencho/taste-error/" title="誤りを味わう" target="_blank"><span class="date">2024年04月15日</span><span class="title">誤りを味わう：ちくま学芸文庫の正史三国志をよく読んでいますが、た...</span></a></li><li class="blog-item"><a href="https://blog.hokubatsu.com/tencho/%e5%81%83%e6%9c%88%e5%88%80%e3%81%ae%e4%bd%9c%e3%82%8a%e6%96%b9/" title="偃月刀の作り方" target="_blank"><span class="date">2024年04月09日</span><span class="title">偃月刀の作り方：昨日、ブラウザのブックマークの整理を行っていたので...</span></a></li><li class="blog-item"><a href="https://blog.hokubatsu.com/tencho/%e3%81%bc%e3%81%86%e3%81%97%e3%83%91%e3%83%b3%e3%81%8c%e2%97%8b%e2%97%8b/" title="ぼうしパンが○○" target="_blank"><span class="date">2024年03月19日</span><span class="title">ぼうしパンが○○：こんにちは、店長です。私、密かに数年前からマイブー...</span></a></li><li class="blog-item"><a href="https://blog.hokubatsu.com/3594study/wikipedia%e3%81%ae%e8%ac%8e-%e9%95%b7%e5%9d%82%e3%81%af%e3%81%a9%e3%81%93%ef%bc%9f%e6%bc%a2%e6%b4%a5%e3%82%82%ef%bc%9f/" title="wikipediaの謎 – 長坂はどこ？漢津も？" target="_blank"><span class="date">2024年02月08日</span><span class="title">wikipediaの謎 – 長坂はどこ？漢津も？：先日から色々な方の長坂の戦いの地図を眺めていました...</span></a></li><li class="blog-item"><a href="https://blog.hokubatsu.com/3594study/%e6%84%8f%e5%a4%96%e3%81%aa%e9%96%a2%e4%bf%82/" title="意外な関係" target="_blank"><span class="date">2024年01月20日</span><span class="title">意外な関係：先日、三国志手ぬぐいの新作「陸遜」を発売いたしまし...</span></a></li>');
	}
	
	
	// -------------------
	//   footer-calendar
	// -------------------

	$('#calendar').fullCalendar({
		header: {
			left: 'title',
			center: '',
			right: 'prev next'
		},
		height: 320,
    		dayNamesShort: ['日','月','火','水','木','金','土'],
		titleFormat: {
			month: 'YYYY年 MM月',
		},
 		firstDay : 0,
		googleCalendarApiKey: 'AIzaSyDTtOgMwHYw7Q2Cc7x0rp7Y0GPBsdwodh0',
		eventSources: [{
            googleCalendarId: 'ja.japanese#holiday@group.v.calendar.google.com',
			className: 'calendar_1'
		},{
			googleCalendarId: '22hfn8g4bn5u65mt4ar7j4f28s@group.calendar.google.com',
			className: 'calendar_2'
		}],
		eventClick: function(event) {
			return false;
		},
		loading: function(bool) {
			$('#loading').toggle(bool);
		}
	});


    
////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////// DETAIL
////////////////////////////////////////////////////////////////////////////////
    // ----------
	//   QrCode
	// ----------
	if($("#qrbtn").length) {
		
		function qrtoggle() {
			var x = ($("#qr").css("display")=="none")? "QRコードを表示する" : "QRコードを隠す";
			$("#qrbtn").text(x);
		}
		$("#qrbtn").click(function () {
	  		$("#qr").animate(
	  			{opacity: "toggle",height:"toggle"}, 
	  			200, 
	  			"easeInQuart", 
	  			qrtoggle()
	  		);
	  		return false;
	  	});
		$("#qr img").click(function () {
	  		$("#qr").animate(
	  			{opacity: "toggle",height:"toggle"}, 
	  			200, 
	  			"easeInQuart",
	  			qrtoggle()
	  		);
	  		return false;
	  	});
  	}
    
    // ------
	//   ?
	// ------
  	if($("div#poption").length) {	
  		$("#poption").css("display","none");
  		var wd = $("div#poption").attr("rel");
  		$("#poption").load(wd + " table","",function(){
  			$("#poption").fadeIn(1000);
  		});
  	}
    
    // ---------------
	//   tshits size
	// ---------------
  	if($(".shirts-list").length) {
  		var proto = location.protocol;
  		var hname = location.hostname;
  		var sizeurl = proto + '//' + hname + "/?mode=f2";
  		

  		var chk_sizes = ['TSNM','TSNM2','TSNM3','TSNM4','TSTM','TSTW','TSTW2','TSNW','TSNW2','TSNW3','TSN140','TSLM','TSLW','TSLW2','PONM'];

		for (var i=0; i<chk_sizes.length; i++) {
			var wd = chk_sizes[i];
			var wdbox = wd + "box";
			if($("p:contains('["+ wd +"]')").length) {
				$("div.shirts-list").append('<div class="shirtssizebox" id="'+ wdbox +'"></div>');
				$("div#"+ wdbox).css("display","none");
				$("div#"+ wdbox).load(
					sizeurl + " div#" + wd
					,""
					,function(){
						$(this).fadeIn(1000);
					}
				);
			}
			$("p.text:contains('["+ wd +"]')").css("display","none");
		}
  	}
    
    
    // -------------
	//   slide-nav
	// -------------
	if($('.slide-nav').length) {
		$('a[href^=#]').click(function() {
			var speed = 400; // millisecond
			var href= $(this).attr("href");
			var target = $(href == "#" || href == "" ? 'html' : href);
			var position = target.offset().top - 40;
			$('body,html').animate({scrollTop:position}, speed, 'swing');
			return false;
		});
		var wH = $('main>.wrapper').height();
		var mT = mT = parseInt($('.slide-nav').css('margin-top'), 10);
		$('.contents-2column-sidebar').css('height', wH -mT);
		jQuery('#side-nav').containedStickyScroll({
			duration: 800,
			closeChar: 'x'
		});
	}
	
	if($('.shopinfo').length) {
		$("main>.wrapper").addClass("bg-shopinfo");
	}
    
    
    // -----------------
	//   VOICE masonly
	// -----------------
	if($("#voice").length) {
		
		function masonry_reload(){
			$('#voice').masonry({
				itemSelector: '.voice-item',
				isFitWidth: true,
				isAnimated: false
			});
		}
		//resize
		$('.voice-item').exResize({
			contentsWatch : true,
			callback : function(){
				masonry_reload();
			}
		});
		
		
	}
    
    
    // ----------------------
	//   Additional plugins
	// ----------------------
	if($("li.active").length) $("li.active").removeClass();
	$("div.products-list div:first-child").fadeIn("slow");
    
    
});
// #######################################################################################
// #######################################   LOAD  #######################################
// #######################################################################################
$(window).on('load', function() {
	
	//------------------------------
	// chg 4 slyde menu (category)
	//------------------------------
	if($("#slymenu").length) {
	
		$("#slymenu a").click(function(e){

			var $myId = $(this).attr("id");
			var $myTableID = $myId + "table";
			var $myClass = $(this).attr("class");
			var $rq = $myId.split('-')[1];
			var $rs = callSlyItem($rq);

			if($myClass!="active") {
				
				// delete 
				$("#slymenu a").removeClass();
				$("#"+$myTableID).siblings().fadeOut("fast", function(){
					// create table	
					$("#"+$myTableID).fadeIn("slow");
					$("li.active").removeClass();
				});
				// add class
				$(this).addClass("active");
				
			}
			return false;
		});
	
        callSlyItem();
        function callSlyItem($rq) {

            if(!$rq) $rq='';
            $.ajax({
                url: "https://tool.hokubatsu.com/api/1/",
                type: 'GET',
                data: {
                    mode: 'list',
                    rq : $rq
                }
            })
            .then( function(result) {

                $('.products-list').css('opacity','0');
                $('.products-list').empty();

                var $rs = JSON.parse(result);
                var $cnt = 0;
                var $url = '';

                for (var $i in $rs) {

                    if($cnt == 0) {
                        $catName = $rs[$i]['catName'];
                        if($catName == 'UW' || $catName == 'PC') $catName = 'GG';
                        $d1 = $('<div>').attr('id','btn-'+$catName.toLowerCase()+'table').attr('class','frame products-item-group');
                        $ul1 = $('<ul>').attr('class','slidee clearfix');
                        $d1.append($ul1);
                        $d1.append('<div class="scrollbar"><div class="handle"></div></div>');
                    }


                    if(($rs[$i]['pNameEN'] == 'TITLE' || $rs[$i]['pNameEN'] == 'TITLE_GRP')  && $rs[$i]['pNameJP'] == '') {

                        // リンクアイコン　現在は大カテで
                        if($rs[$i]['pNameEN'] == 'TITLE') $url = "/?mode=cate&cbid=" + $rs[$i]['url'] + "&csid=0&sort=n";
                        if($rs[$i]['pNameEN'] == 'TITLE_GRP') $url = "/?mode=grp&gid=" + $rs[$i]['url'];
                        $src = "https://tool.hokubatsu.com/img/img_itemlist_" + $rs[$i]['catName'] + ".jpg";
                        var $createImg = new Image();
                        $createImg.src = $src;
                        $rel = "bg_top_" + $rs[$i]['catName'] + ".jpg";
                        $ttlurl = "img_bgtitle_" + $rs[$i]['catName'] + ".png";
                        $ttl = $rs[$i]['catNameJP'];
                        $li = $('<li>').append(
                            $('<a>').attr('href',$url).append(
                                $('<img>').attr({
                                    'src': $src,
                                    'target': '_self',
                                    'title' : $ttl,
                                    'rel' : $rel,
                                    'alt' : $ttl,
                                    'titleurl' : $ttlurl
                                })
                            )
                        );
                        $ul1.append($li);

                    } else {

                        $url = "/?pid=" + $rs[$i]['url'];
                        $src = "https://tool.hokubatsu.com/img/img_itemlist_"+ $rs[$i]['catName']+ "_"+ $rs[$i]['pNameEN']+ ".jpg";
                        var $createImg = new Image();
                        $createImg.src = $src;
                        $rel = "bg_top_"+ $rs[$i]['catName']+ "_"+ $rs[$i]['pNameEN']+ ".jpg";
                        $ttlurl = "img_bgtitle_"+ $rs[$i]['catName']+ "_"+ $rs[$i]['pNameEN']+ ".png";
                        $ttl = $rs[$i]['catNameJP']+ "："+ $rs[$i]['pNameJP'];
                        $li = $('<li>').append(
                            $('<a>').attr('href',$url).append(
                                $('<img>').attr({
                                    'src': $src,
                                    'target': '_self',
                                    'title' : $ttl,
                                    'rel' : $rel,
                                    'alt' : $ttl,
                                    'titleurl' : $ttlurl
                                })
                            )
                        );
                        if($rs[$i]['new']==1) {
                            $li.append(
                                $('<span>').attr("class","newspan").append(
                                    'NEW'
                                )
                            );
                        }
                        $ul1.append($li);

                    }
                    $cnt++;	
                    
                } //endfor:



                // isImgLoading?
                var $imglist = $('img', $ul1);
                var count = 0;
                for (var i = 0; i < $imglist.length; i++) {
                    var $createImg = new Image();
                    $createImg.onload = function () {
                      count += 1;
                      createPList($imglist, count, $d1);
                    }
                    $createImg.onerror = function () {
                      count += 1;
                    }
                    $createImg.src = $imglist[i].src;
                }

                var createPList = function($imglist, count, $d1){
                    var current = Math.floor(count / $imglist.length * 100);
                    if(current === 100) {
                        $('.products-list').append($d1).animate({opacity: '1'}, 1000);
                        if(('ontouchstart' in window)) {
                            clickSmapho();
                        } else {
                            clickPC();
                        }
                            horizon();
                    }
                };

            })
            .fail(function(result) {
                $( ".products-list" ).html( "error:" );
            });

        } //END callSlyItem();
        
    }



    
    

	// ----------
	//   top-UI
	// ----------
	if($("#slymenu").length) {
        
/////////////////////////////// func
function clickPC() {
    
    c("clickPC");
    $('.slidee a').bind('click', function(e) {

        var imgfolder_url = 'https://tool.hokubatsu.com/img/';

        //imgURL
        var bglink = $(this).children("img").attr("rel");
        bglink = imgfolder_url + bglink;

        if($(this).parent().attr("class") == "active") {
            $(this).attr('target','_self');
            return true;
        }

        // add delclass
        $(".bglayer").addClass("delbg");

        // create
        var bglayerName = "bglayer" + parseInt( new Date() /1000 );
        var bglayerHTML = '<div id="' + bglayerName + '" class="bglayer"></div>';
        var loadingHTML = '<span class="loading45"><span>L</span><span>o</span><span>a</span><span>d</span><span>i</span><span>n</span><span>g</span><span>.</span><span>.</span><span>.</span></span>';
        $(this).prepend(loadingHTML);
        $("#container").prepend(bglayerHTML);

        //btn reset
        $(".slidee li").removeClass();
        $(this).parent().addClass("active");

        // changeItemImg
        $("#"+bglayerName).css({
              "background-image":"url("+bglink+")"
            , "background-position":"top center"
            , "height" : $("#container").height()
            , "width" : $("#container").width()
            , "z-index" : -100
            , "display" : "none"
        }).animate({opacity: "toggle"}, 1200, "easeOutQuint",function(e){
            // delbefore Item
            $("div.delbg").animate({opacity: "0"}, 900, "easeInQuint",function(){
                $(".loading45").animate({opacity: "0"}, 300, "easeInQuint",function(){
                    $(this).remove();
                });
                $(this).remove();
            });
        });

        // link_bar img/url/price
        var jumpurl = $(this).attr("href");
        var titleurl = $(this).children("img").attr("titleurl");
        var price = $(this).children("img").attr("price");
        $("#bgis a").attr("href",jumpurl);
        $("#bgtitle img").attr("src", imgfolder_url + titleurl);
        $("#price span").text(price);								
        return false;

    });

}// END-clickPC();
function clickSmapho() {

    var flg_Click = false;
    var flg_TouchStart = false;

    $.when(
        $('.slidee').addClass("myslide")
    )
    .done(function() {
        $('.myslide').removeClass("slidee");
        $('.scrollbar').remove();
    });
    $('.frame').css({'height':'102px'});
    $('.products-list').css({'height':'102px'});
    $('.frame').css({'position':'relative'});
    $('.myslide').css({'position':'absolute'});

    var frames = $('.frame');
    for(i=0; i<frames.length; i++) {
        var frameItemCnt = $("#"+ frames[i].id + " li").length;
        $("#"+ frames[i].id + " ul").css({"width": frameItemCnt*102 + "px"});
    }


    ///////////////////////////////////////////////////////////////	area
    var click_X;
    var target_X;
    if(frames.length == 0) return false;
    var totalWidth = getPropFunc(".frame","width");	//frame width
    var dispArea = 0// ul width
    var page_min = 0;
    var page_max = 0;
    var thisID = '';

    var newTarget_X = 0;

    $(".frame").on("touchstart", function(eo){
        thisID = $(this).attr('id');
        dispArea = getPropFunc("#"+thisID+" .myslide","width");
        page_min = (totalWidth-dispArea);

        $("#" + thisID + " .slidee").css({'left':newTarget_X});
        click_X = eo.originalEvent.touches[0].clientX;
        target_X = getPropFunc("#" + thisID + " .myslide","left");
        if(isNaN(target_X)) target_X = 0;
        $(".frame").on("touchmove", moveFunc);
        return false;
    });

    $(".frame").on("touchend", function(eo){
        $(".frame").off("touchend", moveFunc);
    });
    
    function moveFunc (eo) {
        var dragX = click_X - eo.originalEvent.touches[0].clientX;
        newTarget_X = target_X - dragX;
        if (newTarget_X < page_min) {
            newTarget_X = page_min;
        }else if (newTarget_X > page_max) {
            newTarget_X = page_max;					
        }

        $("#" + thisID + " .myslide").css({"left": + newTarget_X + "px"});
    }
    function getPropFunc (target, prop) {
        return Number($(target).css(prop).split("px")[0]);
    }
    ///////////////////////////////////////////////////////////////
    
    $('.myslide a').bind('click', function(e) { 
        return false; 
    });

    $('.myslide a').bind('touchstart', function(e) {
        flg_Click = true;
        setTimeout(function(){ flg_Click = false; }, 300);
        flg_TouchStart = true;
    });

    $('.myslide a').bind('touchmove', function(e) {
        flg_Click = false;
    });

    $('.myslide a').bind('touchend', function(e) {

        flg_TouchStart = false;

        // click判定
        if(!flg_Click) return false;

        if($(this).parent().attr("class") == "active") {

            $(this).attr('target','_self');
            var thishref = $(this).attr("href");
            location.href = thishref;
            return true;
        }

        //imgURL
        var bglink = $(this).children("img").attr("rel");
        bglink = imgfolder_url + bglink;

        // add delclass
        $(".bglayer").addClass("delbg");

        // create
        var bglayerName = "bglayer" + parseInt( new Date() /1000 );
        var bglayerHTML = '<div id="' + bglayerName + '" class="bglayer"></div>';
        var loadingHTML = '<span class="loading45"><span>L</span><span>o</span><span>a</span><span>d</span><span>i</span><span>n</span><span>g</span><span>.</span><span>.</span><span>.</span></span>';
        $(this).prepend(loadingHTML);
        $("#container").prepend(bglayerHTML);

        //btn reset
        $(".myslide li").removeClass();
        $(this).parent().addClass("active");

        // changeItemImg
        $("#"+bglayerName).css({
              "background-image":"url("+bglink+")"
            , "background-position":"top center"
            , "height" : $("#container").height()
            , "width" : $("#container").width()
            , "z-index" : -100
            , "display" : "none"
        }).animate({opacity: "toggle"}, 1200, "easeOutQuint",function(e){

            // delbefore Item
            $("div.delbg").animate({opacity: "0"}, 900, "easeInQuint",function(){
                $(".loading45").animate({opacity: "0"}, 300, "easeInQuint",function(){
                    $(this).remove();
                });
                $(this).remove();
            });

        });

        // link_bar img/url/price
        var jumpurl = $(this).attr("href");
        var titleurl = $(this).children("img").attr("titleurl");
        var price = $(this).children("img").attr("price");
        $("#bgis a").attr("href",jumpurl);
        $("#bgtitle img").attr("src", imgfolder_url + titleurl);
        $("#price span").text(price);
        return false;

    });
			
} // END clickSmapho()
        
        
        
        
	
		if(!$("#container").length) {
			$(".header, .main").wrapAll('<div id="container" class="container clearfix">');
		}
		
		var imgfolder_url = "https://tool.hokubatsu.com/img/";
		
		//-----------------------------------------------
		// chg 4 itemlist  (item)
		//-----------------------------------------------
		var isTouch = ('ontouchstart' in window);
		if(isTouch) {
			//smapho      
			clickSmapho();
		} else {
			//pc
			//create
			clickPC();
		}


        
		// create dummybox
		var $dummyHTML = '<div id="xx" class="bglayer delbg"></div>';
		var $bgURL = imgfolder_url + 'bg_top.jpg';
		
		$("#container").prepend($dummyHTML);
		$("#xx").css({
				"background-image": $bgURL, 
				"background-position":"top center", 
				"background-attachment":"scroll", 
				"height" : $("#container").height(), 
				"width" : $("#container").width(), 
				"z-index" : -50, 
				"display" : "block"
		});

		
		
		
		// link
		$("#bgis > dl , #bgis > p").hover(function(e){
			$("#bgis").css({ opacity: "0.85" });
		},function(e){
			$("#bgis").css({ opacity: "1" });
		});


		// background:windowResize:15/05/25
		$(window).resize(function(){
			$('.bglayer').css({
				"width" : $("#container").width() ,
				"height" : $("#container").height()
			});
		});
        
    }
    
    
function horizon() {

    var frameIDs = $('.products-list').children('div');
    var isTouch = ('ontouchstart' in window);

    for (var i = 0; i < frameIDs.length; i++) {


        if(isTouch) {


        } else {

            var frameID = frameIDs[i].id;
            var $frame  = $('#' + frameID );
            var $slidee = $frame.children('ul').eq(0);
            var $wrap   = $frame;

            // PC
            $frame.sly({
                horizontal: 1,
                itemNav: 'basic',
                smart: false,
                activateOn: 'click',
                mouseDragging: 0,
                touchDragging: 1,
                startAt: 0,
                scrollBar: $wrap.find('.scrollbar'),
                scrollBy: 1,
                scrollTrap: true,

                pagesBar: null,
                activatePageOn: 'click',
                speed: 500,
                elasticBounds: 0,
                easing: 'easeOutExpo',
                dragHandle: 1,
                dynamicHandle: 0,
                clickBar: 1,
                rollTrap: false,

                // Buttons
                forward: null,
                backward: null,
                prev: null,
                next: null,
                prevPage: null,
                nextPage: null
            });
        }

    }// END-for
            
} // END horizon()
    
    
    // ----------
	//   Voice
	// ----------
    if($("#voice").size() > 0) {
		var $container = $('#voice');
		$container.imagesLoaded(function(){
		  $container.masonry({
		    itemSelector: '.voice-item',
		    isFitWidth: true,
		    isAnimated: false
		  });
		});
    }
    
    
    // ----------
	//   DETAIL
	// ----------
    if($('.detail').length) {

		
		// ----------------------
		//   img color grouping
		// ----------------------
		$d = $(".product-thumb-image");
		// colored img named. started
		// ex.) id****_01_mos.jpg
		if($d.length > 6  && $d.first().attr('src').match(/_01_/i)) {
			
			var $colorList = [];
			var $buttonList = {};
			var $url;
			
			$d.each(function(index){
				// url
				$url = $(this).attr('src');
				$urlSplit = $url.split('_');
				$color = $urlSplit[2];
				if($urlSplit.length==4) {
					// for colorli
					if(jQuery.inArray($color, $colorList) == -1) {
						$colorList.push($color);
					}
				}
				// for colorchg btn
				if(!$buttonList[$color]) $buttonList[$color] = [];
				$buttonList[ $color ].push($url);
			});
			
			// deleteThumbList
			$(".product-image-list").remove(); 

			// createBtnBox
			$(".product-image-lists").after('<div id="colorBtn" class="colorBtn-list clearfix"><ul></ul></div>');
			
			// createBtn
			var $colorBtn = "";
			var $cnt = 0;
			for(var $k in $buttonList) {
				
				// define ID
				$btnId = "cBtn-"+ $k;
				$targetId = "ul-"+ $k;
				
				// create ul of url each colors
				// THUMB NAIL
				$imgList = $buttonList[$k];
				$buf = "";
				for(var $kk=0; $kk<$imgList.length; $kk++) {
					if($kk==0) $buf += '<ul id="'+ $targetId+ '" class="product-image-list dpno">';
					$buf += '<li><a target="_blank" href="'+ $imgList[$kk].replace("_th", "").replace("_mb", "")+ '">';
					$buf += '<img class="product-thumb-image" src="' + $imgList[$kk] + '"></a></li>';
					if($kk == $imgList.length-1) {
						$buf += '</ul>';
						$(".product-image-lists").append($buf);
						
					}
				}
				
				// create-colorBtn
				$colorBtn  = '<li class="colorBtn-item">';
				$colorBtn += '<a class="colorBtn" href="#" rel="'+ $targetId +'" id="'+ $btnId +'">';
				$colorBtn += '<img src="https://tool.hokubatsu.com/img/colorBtn.png" alt="'+ $k +'"></a></li>';
				$("#colorBtn ul").append($colorBtn);
				$firstBtn = "";
				if($cnt==0) {
					$("#"+ $targetId).css("display","block");
					$firtstBtn = $btnId;
				}
				$cnt++;
			}
			
			// append btnClick
			function colorBtnClick(x) {
				// btn effect
				thumbBorderOff($("#colorBtn a"));
				thumbBorderOn(x);

				// target effect
				$thumbUlId = x.attr("rel");
				if($("#"+ $thumbUlId).css("display")!="block") {
					$(".product-image-list").css({"display":"none"});
					$("#"+ $thumbUlId).css("display","block");
				}

				// target border
				thumbBorderOn($("#"+ $thumbUlId + " li:first-child a"));
				thumbClick($("#"+ $thumbUlId + " li:first-child a"));
				thumbOpacityOff($(".product-image-list a"));
				thumbOpacityOn($("#"+ $thumbUlId + " li:first-child a"));
				return false;
			}
			$(".colorBtn").click(function(){
				colorBtnClick($(this));
				return false;
			});
			
			// btn settings first
			thumbBorderOff($("#colorBtn a"));
			thumbBorderOn($("#"+ $firtstBtn));
	
		}
	
	
        // thumbnail settings first
        thumbOpacityOff($(".product-image-list a"));
        thumbBorderOff($(".product-image-list a"));
        thumbOpacityOn($(".product-image-list a:first"));
        thumbBorderOn($(".product-image-list a:first"));
        $(".product-image-list a").click(function(e){
            thumbBorderOff($(this));
            thumbOpacityOff($(".product-image-list a"));
            thumbClick($(this));
            thumbOpacityOn($(this));
            return false;
        });

        function thumbOpacityOn(x) {
            x.css({"opacity":"1"});
        }
        function thumbOpacityOff(x) {
            x.css({"opacity":"0.5"});
        }
        function thumbBorderOn(x) {
            x.css({"border":"solid 1px #AAAAAA"});
        }
        function thumbBorderOff(x) {
            x.css({"border":"solid 1px #FFFFFF"});
        }
        function thumbClick(x) {
            var link = x.attr("href");
            $(".product-image").attr("src",link);
            thumbBorderOff($(".product-image-list a"));
            thumbBorderOn(x);
        }
    
    }
    
    
    
});