// --------------------------------------------------------------------
// エス・ティー・ワールドで行くヨーロッパ旅行
// --------------------------------------------------------------------
'use strict';

// jquery.animate fps
jQuery.fx.interval = 34;

// --------------------------------------------------------------------
// 人気・周遊ツアー
// --------------------------------------------------------------------
jQuery.fn.stwPickupTours = function(){
    this.each(function(){
        var $this = $(this);
        $.get($this.data('url'), function(data){
            if( data.length ){
                var $inner = $this.children('.sec_inner').removeClass('loading');
                var $tourlist = $inner.children('.tourlist').html( data );
                // 上下スクロール
                if( $inner.outerHeight() < $tourlist.outerHeight() ){
                    // コンテンツを倍に増やして上下に無限移動
                    var $items = $tourlist.append(data).children();
                    var index = 0;
                    var top;
                    var tween;
                    $inner.children('.prev').on('click', function(){
                        // ツアーひとつ上に移動
                        //$tourlist.finish();
                        tween && tween.pause(0.5);
                        if( !index ){
                            // 上にない場合、真ん中に飛んでから
                            index = $items.length / 2;
                            top = $items.eq(0).offset().top - $items.eq( index ).offset().top;
                            $tourlist.css({ top: top });
                        }
                        top = $items.eq(0).offset().top - $items.eq( --index ).offset().top;
                        //$tourlist.animate({ top: top });
                        tween = TweenLite.to($tourlist, 0.5, { top: top });
                    });
                    $inner.children('.next').on('click', function(){
                        // ツアーひとつ下に移動
                        //$tourlist.finish();
                        tween && tween.pause(0.5);
                        top = $items.eq(0).offset().top - $items.eq( ++index ).offset().top;
                        if( top + $tourlist.outerHeight() < $inner.outerHeight() ){
                            // 下にない場合、上のおなじツアーに飛んでから
                            index -= $items.length / 2;
                            top = $items.eq(0).offset().top - $items.eq( index - 1 ).offset().top;
                            $tourlist.css({ top: top });
                            top = $items.eq(0).offset().top - $items.eq( index ).offset().top;
                        }
                        //$tourlist.animate({ top: top });
                        tween = TweenLite.to($tourlist, 0.5, { top: top });
                    });
                    $inner.addClass('scroll');
                }
                else $inner.addClass('no-scroll');
            }
            else $this.remove();
            setTimeout(function(){ $(window).trigger('load.masonry'); },0);
        });
    });
    return this;
};

// --------------------------------------------------------------------
// ツアー検索フォーム
// --------------------------------------------------------------------
jQuery.fn.stwTourSearchForm = function(){
    this.each(function(){
        var $form = $(this).addClass('loading');
        // 既定方面グループ
        var default_group = $form.find('[name="homenG"]').val();
        // 検索パラメータ取得
        $.get($form.data('url'), function(data){
            // 出発地
            if( data.depjoken ){
                var html = ['<option value="">指定なし</option>'];
                $.each(data.depjoken, function(){
                    html.push('<option value="'+ this.code +'">'+ this.name +'</option>');
                });
                $form.find('select.dep').html(html.join(''));
            }
            // 出発日
            if( data.depdates ){
                var $year = $form.find('select.year');
                var $month = $form.find('select.month');
                var $date = $form.find('select.date');
                // 年
                var html = [];
                $.each(Object.keys( data.depdates ).sort(), function(){
                    html.push('<option value="'+ this +'">'+ this +'</option>');
                });
                $year.html(html.join(''));
                // 年を選択したら月を初期化
                $year.change(function(){
                    var year = this.value;
                    var html = ['<option value="">--</option>'];
                    $.each(Object.keys( data.depdates[year] ).sort(), function(){
                        html.push('<option value="'+ this +'">'+ this +'</option>');
                    });
                    $month.html(html.join(''));
                }).change();
                // 月を選択したら日を初期化
                $month.change(function(){
                    var month = this.value;
                    var year = $year.val();
                    var html = ['<option value="">--</option>'];
                    $.each(data.depdates[year][month].sort(), function(){
                        html.push('<option value="'+ this +'">'+ this +'</option>');
                    });
                    $date.html(html.join(''));
                });
            }
            // 人気のテーマ
            if( data.themes ){
                var html = ['<option value="">指定なし</option>'];
                $.each(data.themes, function(){
                    html.push('<option value="'+ this.code +'">'+ this.name +'</option>');
                });
                $form.find('select.theme').html(html.join(''));
            }
            // 目的地
            if( data.citylist ){
                var $homen1 = $form.find('select.homen1');
                var $homen2 = $form.find('select.homen2');
                var $city1 = $form.find('select.city1');
                var $city2 = $form.find('select.city2');
                // 方面選択肢
                var codes = [];
                var homens = [];
                $.each(data.citylist, function(){
                    if( codes.indexOf(this.homencd) >= 0 ) return;
                    codes.push( this.homencd );
                    homens.push({ code:this.homencd, name:this.homenname });
                });
                var html = ['<option value="">国</option>'];
                $.each(homens, function(){
                    html.push('<option value="'+ this.code +'">'+ this.name +'</option>');
                });
                $homen1.html(html.join(''));
                $homen2.html(html.join(''));
                // 方面を選択したら都市を初期化
                var homen_cities_html = function( homencd ){
                    var cities = [];
                    $.each(data.citylist, function(){
                        if( this.homencd !== homencd ) return;
                        cities.push({ code:this.citycd, name:this.cityname });
                    });
                    var html = ['<option value="">都市</option>'];
                    $.each(cities, function(){
                        html.push('<option value="'+ this.code +'">'+ this.name +'</option>');
                    });
                    return html.join('');
                };
                $homen1.change(function(){ $city1.html( homen_cities_html(this.value) ); });
                $homen2.change(function(){ $city2.html( homen_cities_html(this.value) ); });
            }
            $form.removeClass('loading');
        });
        // 検索実行
        $form.find('.submit').on('click', function(){
            // hidden要素クリア初期化
            $form.find('[name="homenG"]').val( default_group );
            $form.find('[name="homen"]').val('');
            $form.find('[name="city"]').val('');
            $form.find('[name="year"]').val('');
            $form.find('[name="keyword1"]').val('');
            $form.find('[name="keyword2"]').val('');
            $form.find('[name="theme"]').val('');
            $form.find('[name="only"]').val('');
            $form.find('[name="multicity"]').val('');
            // APIパラメータ生成
            var homenG = [];
            var homen = [];
            var city = [];
            var year = $form.find('select.year').val();
            var month = $form.find('select.month').val();
            var date = $form.find('select.date').val();
            var theme = $form.find('select.theme').val();
            var homen1 = $form.find('select.homen1').val();
            var homen2 = $form.find('select.homen2').val();
            var city1 = $form.find('select.city1').val();
            var city2 = $form.find('select.city2').val();
            var only = $form.find('input.only').prop('checked');
            if( month ){
                if( date ) $form.find('[name="year"]').val( year + month + date );
                else $form.find('[name="year"]').val( year + month );
            }
            if( theme ){
                var kv = theme.split('=');
                if( kv.length > 1 ) $form.find('[name="'+ kv[0] +'"]').val( kv[1] );
            }
            if( homen1 ){
                homenG.push( default_group );
                homen.push( homen1 );
                if( city1 ) city.push( city1 );
            }
            if( homen2 ) {
                homenG.push( default_group );
                homen.push( homen2 );
                if( city2 ) city.push( city2 );
            }
            if( homenG.length ){
                $form.find('[name="homenG"]').val( homenG.join(',') );
                $form.find('[name="homen"]').val( homen.join(',') );
                $form.find('[name="city"]').val( city.join(',') );
                if( homenG.length > 1 ){
                    // 目的地２つ
                    // multicity=1  選択した方面・都市だけを周遊するツアー
                    // multicity=2  選択した方面・都市プラスアルファの都市を周遊するツアー
                    if( only ) $form.find('[name="multicity"]').val(1);
                    else $form.find('[name="multicity"]').val(2);
                }
                else{
                    // 目的地１つ
                    if( only ) $form.find('[name="only"]').val(1);
                }
            }
            // <form action= にハッシュ(#)があると submit() がうまく動かないので自力URL生成
            var url = $('#sp_header').is(':visible') ? $(this).data('spUrl') : $(this).data('url');
            var query = [];
            $form.find('[name]').each(function(){
                if( this.value.length ) query.push(this.name +'='+ this.value);
            });
            this.href = url + query.join('&');
        });
    });
    return this;
};

// --------------------------------------------------------------------
// インスタグラム
// --------------------------------------------------------------------
jQuery.fn.stwInstagram = function(){
    this.each(function(){
        var $box = $(this);
        $.get($box.data('url'), function(html){
            $box.html(html).removeClass('loading');
            // iframe挙動検知
            $box.stwInstagramEvent({
                // 独自スタイルシート注入
                // TODO:クロスドメインでは動かない
                iframeLoad: function( $iframe ){
                    //var dirUrl = location.protocol + '//'+ location.host + location.pathname.replace(/[^/]+$/,'');
                    //var tag = '<link rel="stylesheet" href="'+ dirUrl +'css/instagram-iframe.css" type="text/css">';
                    //console.log(tag);
                    //$iframe.contents().find('head').append(tag);
                },
                // ボックス高さ変わったらMasonry
                iframeResize: function(){
                    setTimeout(function(){ $(window).trigger('load.masonry'); },0);
                }
            });
        });
    });
    return this;
};
// インスタグラム公式埋め込みボックスの高さ変化を検知するjQueryプラグイン。
// JS(embeds.js)でiframeが生成されて動的に高さが変わるので、その後にMasonryやり直さなければならない。
// ・DOMSubtreeModifiedイベントでifameが生成されたことを検知できるが、最終的な高さが決まるheight属性の変更を検知できない。
// ・DOMAttrModifiedイベントで検知できそうだが、なぜかうまく動かず断念。
// ・Element.prototype.setAttributeを差し替えてみたが、有効値が取れない。
// 　恐らくsetAttributeを使わずheightプロパティに代入して値セットしてるのかな。
// ・MutationObserverでやっとheight変更を検知できた。
// ・しかしMutationObserverはIE11からしか動かないらしい。。
// 　IE10以下は・・・やりたくないがsetIntervalで検査するしかないのだろうか・・・
jQuery.fn.stwInstagramEvent = function( arg ){
    this.each(function(){
        var $box = $(this);
        // <iframe>検知
        $box.on('DOMSubtreeModified', function(){
            $box.children('iframe').each(function(){
                var $iframe = $(this);
                if( $iframe.data('stwObserver') ) return;
                // iframe読み込み完了
                $iframe.on('load', function(){ arg.iframeLoad($iframe); });
                // iframe高さ変更検知
                if( window.MutationObserver ){
                    var observer = new MutationObserver(function(){ arg.iframeResize(); });
                    observer.observe(this,{
                        attributes: true,
                        attributeFilter: ['height']
                    });
                    arg.iframeResize();
                }
                else{
                    // MutationObserver使えない場合(IE10以下)setInterval監視
                    // 10秒くらい変化なければ監視終了
                    var prevHeight = 0;
                    var noChange = 0;
                    var checker = function(){
                        //console.log('監視しています');
                        if( prevHeight === $iframe.height() ){
                            if( ++noChange > 20 ){
                                //console.log('監視終了');
                                return;
                            }
                        }
                        else{
                            //console.log('変更検出');
                            arg.iframeResize();
                            prevHeight = $iframe.height();
                            noChange = 0;
                        }
                        setTimeout(checker, 350);
                    };
                    checker();
                }
                $iframe.data('stwObserver', true);
            });
        });
    });
    return this;
};

// --------------------------------------------------------------------
// 天気・現地時間・為替
// --------------------------------------------------------------------
jQuery.fn.stwVarietyInfo = function(){
    var $info = this;
    // 天気
    var $cities = $info.children('.city_box');
    $cities.each(function(){
        var $city = $(this);
        $.get($city.data('url'), function(data){
            var icon = data.weather.weather[0].icon;
            if( icon ){
                $city.find('.jsWeather').attr('src','top/images/weather/'+ icon +'.png');
            }
            var humidity = data.weather.main.humidity;
            if( humidity !== undefined ){
                $city.find('.jsHumidity').text( humidity );
            }
            var temp = data.temp.list[0].temp;
            if( temp.min ){
                var temp_min = Math.floor( temp.min - 273.15 );
                $city.find('.jsTempMin').text( temp_min + '℃' );
            }
            if( temp.max ){
                var temp_max = Math.floor( temp.max - 273.15 );
                $city.find('.jsTempMax').text( temp_max + '℃' );
            }
        });
    });
    // 現地時間／PHPでタイムゾーンオフセット（秒）取得
    var $localtime = $info.find('.jsLocalTime');
    var query = [];
    $localtime.each(function(){
        query.push('zone[]='+ encodeURIComponent($(this).data('timezone')));
    });
    var url = 'top/api/timezone_offset.php?'+ query.join('&');
    $.get(url, function( offsets ){
        // 時刻表示を定期更新 ※更新中にサマータイムの切り替えは行われない
        setInterval(function(){
            var now = new Date();
            $localtime.each(function(){
                var offset = offsets[$(this).data('timezone')];
                var utc = now.getTime() + (now.getTimezoneOffset() * 60000);
                var ldt = new Date(utc + (1000 * offset));
                var localDateTime =  ldt.getHours() + ":" + ("0" + ldt.getMinutes()).slice(-2);
                $(this).text( localDateTime );
            });
        }, 1000 );
    });
    // EU為替レート
    $.get($info.data('rateUrl'), function(data){
        var rateEUR = data.rates.JPY / data.rates.EUR;
        var rateGBP = data.rates.JPY / data.rates.GBP;
        $info.find('.jsRateEUR').text( rateEUR.toFixed(2) );
        $info.find('.jsRateGBP').text( rateGBP.toFixed(2) );
    });
    return this;
};

// --------------------------------------------------------------------
// SPページトップ
// --------------------------------------------------------------------
jQuery.fn.stwPageTop = function(){
    this.each(function(){
        var $btn = $(this).click(function(){
            // スクロールしてトップ
            //$('body,html').animate({ scrollTop: 0 }, 700);
            TweenLite.to(window, 0.7, { scrollTo: 0 });
            return false;
        });
        // スクロールが200に達したらボタン表示
        $(window).scroll(function(){
            if( $(this).scrollTop() > 200 ) $btn.addClass('show');
            else $btn.removeClass('show');
        });
    });
    return this;
};

// --------------------------------------------------------------------
// アンカー
// --------------------------------------------------------------------
jQuery.fn.stwAnchor = function(){
    this.click(function(){
        var top = $($(this).attr('href')).offset().top;
        if( $('#sp_header').is(':visible') ) top -= $('#sp_header').outerHeight();
        //$('body,html').animate({ scrollTop: top }, 700);
        TweenLite.to(window, 0.7, { scrollTo: top });
        return false;
    });
    return this;
};

// --------------------------------------------------------------------
// Masonry
// --------------------------------------------------------------------
jQuery.fn.stwMasonry = function(){
    var $elements = this;
    var isMobile = function(){
        var agent = navigator.userAgent;
        if ( agent.indexOf('iPhone') > 0 ) return true;
        if ( agent.indexOf('iPod') > 0 ) return true;
        if ( agent.indexOf('Android') > 0 && agent.indexOf('Mobile') > 0 ) return true;
        return false;
    };
    $(window).on('load.masonry', function(){
        if( !isMobile() ){
            $elements.masonry({
                itemSelector: '.sec_box',
                isAnimated: true,
                isFitWidth: true
            });
        }
    });
    return this;
};

// --------------------------------------------------------------------
// ここがすごい
// --------------------------------------------------------------------
jQuery.fn.stwStrengths = function(){
    if( $('#sp_header').is(':visible') ){
        this.each(function(){
            var $this = $(this);
            $this.bxSlider({
                infiniteLoop: false,
                slideMargin: 10,
                hideControlOnEnd: true,
                pager: false
            });
            // 高さ揃え
            var H = 0;
            $this.children().each(function(){
                H = Math.max(H, $(this).outerHeight());
            }).height(H);

        });
    }
    return this;
};

// --------------------------------------------------------------------
// ピックアップ特集スライダー
// --------------------------------------------------------------------
jQuery.fn.pickupSlider = function(){
    this.each(function(){
        var $this = $(this);
        // 5枚以下だとprev/next出ないので複製を増やす
        if( $this.children().length < 6 ){
            $this.append($this.children().clone());
        }
        $this.slick({
            infinite: true,
            dots: false,
            slidesToShow: 5,
            slidesToScroll: 1,
            responsive: [
                {
                    breakpoint: 640,
                    settings: {
                        slidesToShow: 2
                    }
                }
            ]
        });
    });
    return this;
};

// --------------------------------------------------------------------
// document ready
// --------------------------------------------------------------------
$(function(){
    // ここがすごい
    $('#container .strengths ol').stwStrengths();
    // ピックアップ特集スライダー
    $('.pickup_banners ul').pickupSlider();
    // Masonry
    $('#mas_box').stwMasonry();
    // 人気・周遊ツアー
    $('#mas_box > .sec_box.tours').stwPickupTours();
    // ツアー検索フォーム
    $('#mas_box > .sec_box.tour_search form').stwTourSearchForm();
    // インスタグラム
    $('#mas_box > .sec_box.instagram').stwInstagram();
    // 天気・現地時間
    $('.variety_info').stwVarietyInfo();
    // SPページトップ
    $('.sp_pagetop').stwPageTop();
    // アンカー
    $('.this_menu a[href^="#"]').stwAnchor();
});