// JavaScript Document
$(function(){
  // ボタンをクリック時
  var btListClass = ".bt-list"
  $(".btn-easy").click(function () {
    $(btListClass).addClass("active-easy");
    $(btListClass).removeClass("active-world");
  });
  $(".btn-world").click(function () {
    $(btListClass).addClass("active-world");
    $(btListClass).removeClass("active-easy");
  });
  $(".bg-overlay,.close").click(function () {
    $(btListClass).removeClass("active-easy");
    $(btListClass).removeClass("active-world");
  });

  // アニメーション関連
  $(".btn-easy").click(function () {
    $(".bg-area").velocity({ opacity: 1 , zIndex: 10000 }, 300);
    $(".box-top").velocity({ top: -400 , left: -700 }, 400);
    $(".box-bottom").velocity({ bottom: -400 , right: -700 }, 400);
    $(".easy-area").velocity({ width: 600, height:400,opacity: 1 },{ display: "block",delay: 200 }, 200);
    $(".bt-list span.txt").velocity({ opacity: 0 },{ display: "none" }, 0);
    $(".bt-list li").velocity({ width: 68 },{ delay: 360 }, 10);
    $(".world-map").velocity({ opacity: 0 },{ display: "none" }, 0);
    
    $("#world-map").velocity({ opacity: 0, backgroundSize: '100%', backgroundPositionY: 0, backgroundPositionX: 0 },{ delay: 0 }, 0);
    $(".country-list,.map-back").velocity({ opacity: 0 },{ display: "none" , delay: 0 }, 400);
  });
  $(".btn-world").click(function () {
    $(".bg-area").velocity({ opacity: 1 , zIndex: 10000 }, 300);
    $(".box-top").velocity({ top: -400 , left: -700 }, 400);
    $(".box-bottom").velocity({ bottom: -400 , right: -700 }, 400);
    $(".world-map").velocity({ width: 600, height:400,opacity: 1 },{ display: "block",delay: 200 }, 200);
    $(".bt-list li").velocity({ width: 68 },{ delay: 360 }, 10);
    $(".bt-list span.txt,.easy-area,.area-btn").velocity({ opacity: 0 },{ display: "none" }, 0);
    
    $("#world-map").velocity({ opacity: 1, backgroundSize: '100%', backgroundPositionY: 0, backgroundPositionX: 0 },{ delay: 0 }, 0);
    $("#world-map h3").velocity({ opacity: 1 },{ display: "inline-block" , delay: 300 }, 0);
    $(".country-list,.map-back").velocity({ opacity: 0 },{ display: "none" , delay: 0 }, 400);
    $(".map-ov").velocity({ opacity: 1 }, 300);
  });
  // ウィンドウが出た後
  $(".bg-overlay,.close").click(function () {
    $(".bg-area").velocity({ opacity: 0 , zIndex: -1 }, 600);
    $(".box-top").velocity({ top: 0 , left: 0 }, 400);
    $(".box-bottom").velocity({ bottom: 0 , right: 0 }, 400);
    $(".search-box").velocity({ width: 0, height:0, opacity: 0 },{ delay: 360 }, 10000);
    $(".bt-list span.txt,#world-map h3").velocity({ opacity: 1 },{ display: "inline-block" , delay: 300 }, 0);
    $(".bt-list li").velocity({ width: 290 }, 300);
    
    $("#world-map").velocity({ opacity: 1, backgroundSize: '100%', backgroundPositionY: 0, backgroundPositionX: 0 },{ delay: 0 }, 0);
    $(".country-list,.map-back").velocity({ opacity: 0 },{ display: "none" , delay: 0 }, 400);
  });
  //
  // ここから世界地図
  //
  $("#world-map h3").click(function () {
    $(".map-back").velocity({ opacity: 1 },{ display: "block" , delay: 0 }, 0);
    $("#world-map h3").velocity({ opacity: 0 },{ display: "none" , delay: 0 }, 0);
    $(".map-ov").velocity({ opacity: 0 },{ display: "none" , delay: 0 }, 0);
  });
  // 方面選択に戻る
  $(".map-back").click(function () {
    $("#world-map").velocity({ opacity: 1, backgroundSize: '100%', backgroundPositionY: 0, backgroundPositionX: 0 },{ delay: 0 }, 0);
    $(".area-btn,.country-list,.map-back").velocity({ opacity: 1 },{ display: "none" , delay: 0 }, 0);
    $("#world-map h3").velocity({ opacity: 1 },{ display: "inline-block" , delay: 0 }, 0);
    $(".map-ov").velocity({ opacity: 1 },{ display: "block" , delay: 0 }, 0);
  });
  // ヨーロッパ
  $(".europe").click(function () {
    $("#world-map").velocity({ opacity: 1, backgroundSize: '450%', backgroundPositionY: -470 , backgroundPositionX: 0 },{ delay: 0 }, 0);
    $(".europe + .country-list,.area-btn-europe").velocity({ opacity: 1 },{ display: "block" , delay: 0 }, 0);
  });
    $(".area-btn-europe").click(function () {
      $(".europe + .country-list,.area-btn-europe").velocity({ opacity: 0 },{ display: "none" , delay: 0 }, 0);
    });

  
  // アフリカ
  $(".africa").click(function () {
    $("#world-map").velocity({ opacity: 1, backgroundSize: '240%', backgroundPositionY: -360,backgroundPositionX: 100 },{ delay: 0 }, 0);
    $(".africa + .country-list,.area-btn-africa").velocity({ opacity: 1 },{ display: "block" , delay: 0 }, 0);
  });
    $(".area-btn-africa").click(function () {
      $(".africa + .country-list,.area-btn-africa").velocity({ opacity: 0 },{ display: "none" , delay: 0 }, 0);
    });

  
  // インド洋
  $(".indianocean").click(function () {
    $("#world-map").velocity({ opacity: 1, backgroundSize: '480%',backgroundPositionX: -400, backgroundPositionY: -1000 },{ delay: 0 }, 0);
    $(".indianocean + .country-list,.area-btn-indianocean").velocity({ opacity: 1 },{ display: "block" , delay: 0 }, 0);
  });
    $(".area-btn-indianocean").click(function () {
      $(".indianocean + .country-list,.area-btn-indianocean").velocity({ opacity: 0 },{ display: "none" , delay: 0 }, 0);
    });

  // アジア
  $(".asia").click(function () {
    $("#world-map").velocity({ opacity: 1, backgroundSize: '320%',backgroundPositionX: -450, backgroundPositionY: -470 },{ delay: 0 }, 0);
    $(".asia + .country-list,.area-btn-asia").velocity({ opacity: 1 },{ display: "block" , delay: 0 }, 0);
  });
    $(".area-btn-asia").click(function () {
      $(".asia + .country-list,.area-btn-asia").velocity({ opacity: 0 },{ display: "none" , delay: 0 }, 0);
    });

  
  // ハワイ
  $(".pacific").click(function () {
    $("#world-map").velocity({ opacity: 1, backgroundSize: '450%',backgroundPositionX: -1200, backgroundPositionY: -770 },{ delay: 0 }, 0);
    $(".pacific + .country-list,.area-btn-pacific").velocity({ opacity: 1 },{ display: "block" , delay: 0 }, 0);
  });
    $(".area-btn-pacific").click(function () {
      $(".pacific + .country-list,.area-btn-pacific").velocity({ opacity: 0 },{ display: "none" , delay: 0 }, 0);
    });

  
  // オセアニア
  $(".oceania").click(function () {
    $("#world-map").velocity({ opacity: 1, backgroundSize: '300%',backgroundPositionX: -660, backgroundPositionY: -620 },{ delay: 0 }, 0);
    $(".oceania + .country-list,.area-btn-oceania").velocity({ opacity: 1 },{ display: "block" , delay: 0 }, 0);
  });
    $(".area-btn-oceania").click(function () {
      $(".oceania + .country-list,.area-btn-oceania").velocity({ opacity: 0 },{ display: "none" , delay: 0 }, 0);
    });

    
  // アメリカ
  $(".america").click(function () {
    $("#world-map").velocity({ opacity: 1, backgroundSize: '260%',backgroundPositionX: -900, backgroundPositionY: -180 },{ delay: 0 }, 0);
    $(".america + .country-list,.area-btn-america").velocity({ opacity: 1 },{ display: "block" , delay: 0 }, 0);
  });
    $(".area-btn-america").click(function () {
      $(".america + .country-list,.area-btn-america").velocity({ opacity: 0 },{ display: "none" , delay: 0 }, 0);
    });

  
  // 中南米・カリブ
  $(".caribbean").click(function () {
    $("#world-map").velocity({ opacity: 1, backgroundSize: '260%',backgroundPositionX: -1100, backgroundPositionY: -480 },{ delay: 0 }, 0);
    $(".caribbean + .country-list,.area-btn-caribbean").velocity({ opacity: 1 },{ display: "block" , delay: 0 }, 0);
  });
    $(".area-btn-caribbean").click(function () {
      $(".caribbean + .country-list,.area-btn-caribbean").velocity({ opacity: 0 },{ display: "none" , delay: 0 }, 0);
    });

  
  // マップのロールオーバー
  var mapOvClass = ".map-ov"
  $("#world-map h3").hover(function(){
    var worldClass = $(this).attr('class');
    $(mapOvClass).toggleClass(worldClass);
  });
  
  $('.country-list.eu li').each(function(i){
    $(this).attr('class','eu ' + 'eu-' + (i+1));
  });
  $('.country-list.af li').each(function(i){
    $(this).attr('class','af ' + 'af-' + (i+1));
  });
  $('.country-list.in li').each(function(i){
    $(this).attr('class','in ' + 'in-' + (i+1));
  });
  $('.country-list.as li').each(function(i){
    $(this).attr('class','as ' + 'as-' + (i+1));
  });
  $('.country-list.pa li').each(function(i){
    $(this).attr('class','pa ' + 'pa-' + (i+1));
  });
  $('.country-list.oc li').each(function(i){
    $(this).attr('class','oc ' + 'oc-' + (i+1));
  });
  $('.country-list.am li').each(function(i){
    $(this).attr('class','am ' + 'am-' + (i+1));
  });
  $('.country-list.ca li').each(function(i){
    $(this).attr('class','ca ' + 'ca-' + (i+1));
  });
  
  $(".country-list li").hover(function(){
    var areaClass = $(this).attr('class');
    $(mapOvClass).toggleClass(areaClass);
  });
  

});