// JavaScript Document

$(function() {
	
	var ua = navigator.userAgent;
	if ((ua.indexOf('iPhone') > 0) || ua.indexOf('iPod') > 0 || (ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0)) {
			// スマホのとき
			$('head').prepend('<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />');
	}else{
			// PC・タブレットのとき
			$('head').prepend('<meta name="viewport" content="width=1080" />');
	}
	
	// スマホの画像差替え
	var wid = $(window).width();
	if( wid < 767 ){
		$('.sp-img').each(function(){
			$(this).attr("src",$(this).attr("src").replace('_pc', '_sp'));
		});
	}
	
	// 画像の切り替え
	if (window.matchMedia('(min-width: 769px)').matches) {
	$('a img').hover(function(){
    $(this).attr('src', $(this).attr('src').replace('_off', '_on'));
  }, function(){
    if (!$(this).hasClass('currentPage')) {
      $(this).attr('src', $(this).attr('src').replace('_on', '_off'));
    }
  });
	}
	
		// ページ内スクロール
	if (window.matchMedia('(max-width: 767px)').matches) {
	$('a[href^=#]' + 'a:not(".non-scroll")').click(function(){
		var speed = 500;
		var href= $(this).attr("href");
		var target = $(href == "#" || href == "" ? 'html' : href);
		var position = target.offset().top - 50;
		$("html, body").animate({scrollTop:position}, speed, "swing");
		return false;
	});
	}
	if (window.matchMedia('(min-width: 768px)').matches) {
	$('a[href^=#]' + 'a:not(".non-scroll")').click(function(){
		var speed = 500;
		var href= $(this).attr("href");
		var target = $(href == "#" || href == "" ? 'html' : href);
		var position = target.offset().top - 110;
		$("html, body").animate({scrollTop:position}, speed, "swing");
		return false;
	});
	}
	//
	if (window.matchMedia('(max-width: 767px)').matches) {
	$(function(){
    var url = $(location).attr('href');
    if (url.indexOf("?id=") == -1) {
        // スムーズスクロール以外の処理（必要なら）
    }else{
        // スムーズスクロールの処理
        var url_sp = url.split("?id=");
        var hash   = '#' + url_sp[url_sp.length - 1];
        var tgt    = $(hash);
        var pos    = tgt.offset().top - 100;
        $("html, body").animate({scrollTop:pos}, 200, "swing");
    }
	});
	}
	if (window.matchMedia('(min-width: 768px)').matches) {
	$(function(){
    var url = $(location).attr('href');
    if (url.indexOf("?id=") == -1) {
        // スムーズスクロール以外の処理（必要なら）
    }else{
        // スムーズスクロールの処理
        var url_sp = url.split("?id=");
        var hash   = '#' + url_sp[url_sp.length - 1];
        var tgt    = $(hash);
        var pos    = tgt.offset().top- 140;
        $("html, body").animate({scrollTop:pos}, 800, "swing");
    }
	});
	}
	

	 
	var topBtn = $('#pagetop');   
	topBtn.hide();
	//スクロールが100に達したらボタン表示
	$(window).scroll(function () {
		if ($(this).scrollTop() > 100) {
				topBtn.fadeIn();
		} else {
				topBtn.fadeOut();
		}
	});
	//スクロールしてトップ
	topBtn.click(function () {
		$('body,html').animate({
				scrollTop: 0
		}, 400);
		return false;
	});
	
	
	// ムービーイラスト
	if (window.matchMedia('(min-width: 768px)').matches) {
	var illust = $('.movie-box');   
    illust.hide();
    //スクロールが100に達したらボタン表示
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            illust.slideDown();
        }
				else {
            illust.slideUp();
        }
    });
	// ムービーイラスト停止	
	var $elem = $(".movie-box"), //表示の操作をするオブジェクト(フッター)
		$content = $("#movie"), //表示を変更する基準となるオブジェクト
		$win = $(window); //windowオブジェクト
	var contentTop = 0; //表示変更をする基準点
	$win
		.load(function(){
			updatePosition();
			update();
			})
		.resize(function(){
			updatePosition();
			update();
			})
		.scroll(function(){
			update();
			});
	 // HTMLが動的に変わることを考えて、contentTopを最新の状態に更新します
	 function updatePosition(){
			contentTop = $content.offset().top + $elem.outerHeight();
	 }
	 // スクロールのたびにチェック
	 function update(){
		// 現在のスクロール位置 + 画面の高さで画面下の位置を求めます
		if( $win.scrollTop() + $win.height() > contentTop ){
			$elem.addClass("static");
		}else if( $elem.hasClass("static") ){
			$elem.removeClass("static");
		}
		}
	}
	$(".movie").colorbox({iframe:true, innerWidth:640, innerHeight:390});
	if (window.matchMedia('(max-width: 767px)').matches) {
		$(".inline-ribon").colorbox({inline:true, width:"100%"});
		$(".movie").colorbox({iframe:true, innerWidth:280, innerHeight:171});
	}
	
});