(function(){
    'use strict';

    var ua = navigator.userAgent;
    var sp_flg;
    if(ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0){
        sp_flg=1;
    }else{
        sp_flg=0;
    }

    window.addEventListener('DOMContentLoaded',function(e){

        var anime_scroll_target = document.getElementsByClassName('anime_scroll_target')
        var anime_scroll_left_target = document.getElementsByClassName('anime_scroll_left_target')
        var anime_scroll_right_target = document.getElementsByClassName('anime_scroll_right_target')
        var anime_opacity_target = document.getElementsByClassName('anime_opacity_target')
        var message_main = document.getElementsByClassName('message_main')
        var message_anime_run=false;

        var anime_scroll = function(target,type){

            for (var i = 0; i < target.length; i++) {
                // console.log('i',i)
                var t_height = target[i].offsetHeight
                var t_classN = target[i].className
            
                // get target-position => distance from screen-top-position
                var offsetY = target[i].getBoundingClientRect().top
            
                // screen-height
                var screenHeight = window.outerHeight
            
                // judge of target-position in or out
                var t_position = offsetY - screenHeight
            
            
            //   console.log('target = ', target)         : ターゲット一覧
            //   console.log('t_height = ', t_height)     : ターゲットの高さ
            //   console.log('offsetY = ', offsetY)       : スクリーン上部からターゲットまでの距離
            //   console.log('t_position = ', t_position) : スクリーン下部からターゲットまでの距離
            
            
                /*
                * 1. -screenHeight <= (t_position + t_height ) : スクリーン上部とターゲットの下部までの距離
                *    ※マイナスなのは、スクリーン内に入るとt_positionはマイナスになるため
                *    
                * 2. t_position < 0 : スクリーン下部からターゲットまでの距離が、0未満 => スクリーン内に到達
                * 　
                */
                if((-screenHeight<=(t_position　+　t_height) && t_position<0)||sp_flg) { // 画面内
                    if(t_classN.indexOf('content_scroll') == -1) { // content_scrollなし

                        // 代表者挨拶のページだけ
                        if(!message_anime_run){
                            message_anime_run=true;
                            var message_i=0;
                            (function message_main_ani(){
                                if(message_i<message_main.length){
                                    message_main[message_i].classList.add('content_scroll');
                                    setTimeout(function(){
                                        message_main_ani(message_main[message_i])
                                    },500);
                                }
                                message_i++;
                            })();
                        }

                        // 全ページ共通
                        switch(type){
                            case 'up' :
                                target[i].classList.add('content_scroll');
                                break;
                            case 'left':
                                target[i].classList.add('content_scroll_left');
                                break;
                            case 'right':
                                target[i].classList.add('content_scroll_right');
                                break;
                            case 'opacity':
                                target[i].classList.add('content_scroll_opacity');
                                break;
                    }

                }
                }
            }
        }

        window.addEventListener('scroll',function(e){
            anime_scroll(anime_scroll_target,'up');
            anime_scroll(anime_scroll_left_target,'left');
            anime_scroll(anime_scroll_right_target,'right');
            anime_scroll(anime_opacity_target,'opacity');
        });

        // メインメニュー
        document.getElementById('main_menu_btn').addEventListener('click',function(e){
            e.preventDefault();
            e.stopPropagation();
            document.getElementById('mainmenu').classList.add('mainmenu_trigger');
            document.querySelector('#mainmenu .menubox').classList.add('mainmenu_judge');
            return;
        },false);

        var mainmenu_flg;
        var judge_parent = function(elm){
            if(elm.tagName === 'HTML'){
                mainmenu_flg=true;
                return;
            }
            if(elm.classList.contains('mainmenu_judge')){
                mainmenu_flg=false;
                return;
            }
            judge_parent(elm.parentNode)
        };

        document.addEventListener('click',function(e){
            if(document.getElementById('mainmenu').classList.contains('mainmenu_trigger')){
                e.stopPropagation();

                judge_parent(e.target);
                var opacity=0.7;
                if(mainmenu_flg){
                    (function mainmenu_fadeout(){
                        if(opacity >= 0){
                            document.getElementById('mainmenu').style.opacity=opacity;
                            opacity-=0.1;
                            setTimeout(mainmenu_fadeout,100);
                        }else{
                            document.getElementById('mainmenu').classList.remove('mainmenu_trigger');
                            document.querySelector('#mainmenu .menubox').classList.remove('mainmenu_judge');
                            document.getElementById('mainmenu').style.opacity='';
                        }
                    })();
                }
            }
        },false);

            // ヘッダー
            var canvas_sub_header = document.getElementById("sub_header");
            if (!canvas_sub_header || !canvas_sub_header.getContext) return;

            var canvas_sub_header_w = document.getElementById('sub_header').clientWidth;
            var canvas_sub_header_h = document.getElementById('sub_header').clientHeight;

            canvas_sub_header.setAttribute('width',canvas_sub_header_w);
            canvas_sub_header.setAttribute('height',canvas_sub_header_h);

            var sub_img01 = new Image();
            var sub_ctx01 = canvas_sub_header.getContext('2d');
            sub_ctx01.globalAlpha=0.5;
            sub_img01.src = 'https://verdec-s.com/wp-content/themes/VerdecLightgreen/img/header/header_sub01.png';
            sub_img01.addEventListener('load',function() {
                sub_ctx01.drawImage(this,0,0,(1200/6)*7,700);
            });

            // メイン
            var canvas_sub_main = document.getElementById("canvas_sub_main");
            if (!canvas_sub_main || !canvas_sub_main.getContext) return;

            // var canvas_wrap_sub_main_w = document.querySelector('main').clientWidth;
            // var canvas_wrap_sub_main_h = document.querySelector('main').clientHeight;
            var canvas_wrap_sub_main_w = document.body.clientWidth;
            var canvas_wrap_sub_main_h = 800;
   
            canvas_sub_main.setAttribute('width',canvas_wrap_sub_main_w);
            canvas_sub_main.setAttribute('height',canvas_wrap_sub_main_h);
            var ctx_sub_main = canvas_sub_main.getContext('2d');

            // 丸を左右に動かす
            var circle_arr=[];
            var color;
            for(var i=0;i<100;i++){
                switch(Math.floor(Math.random()*3)){
                    case 0:
                        color = 'rgba(192, 255,185, .5)';
                        break;
                    case 1:
                        color = 'rgba(98,171,255, .3)';
                        break;
                    case 2:
                        color = 'rgba(255, 255,255, .7)';
                        break;
                }
                var main_sub_x = Math.floor(Math.random()*canvas_wrap_sub_main_w+100)-50;
                var main_sub_y = (Math.floor(Math.random()*390))+200;
                var size = Math.floor((Math.random()*60)+20);
                circle_arr.push({
                    x:main_sub_x,
                    y:main_sub_y,
                    s:size,
                    c:color,
                    a_x:Math.floor(Math.random()*2), // 0:左方向、1:右方向
                });
            }

            (function canvas_sub_main_circle(){
                ctx_sub_main.clearRect(0,0,canvas_wrap_sub_main_w,canvas_wrap_sub_main_h);
                ctx_sub_main.save();
                for(var i=0;i<circle_arr.length;i++){
                    ctx_sub_main.beginPath();
                    ctx_sub_main.fillStyle = circle_arr[i].c;
                    ctx_sub_main.arc(circle_arr[i].x,circle_arr[i].y,circle_arr[i].s, 0, Math.PI*2, false);
                    ctx_sub_main.fill();
                    ctx_sub_main.closePath();

                    circle_arr[i].x += (circle_arr[i].a_x ? 1 : -1);
                    if(circle_arr[i].x<(0-circle_arr[i].s)){
                        circle_arr[i].x = canvas_wrap_sub_main_w+circle_arr[i].s;
                    }
                    if(circle_arr[i].x>(canvas_wrap_sub_main_w+circle_arr[i].s)){
                        circle_arr[i].x = 0-circle_arr[i].s;
                    }
                }
                ctx_sub_main.restore();
                setTimeout(canvas_sub_main_circle,50);
            })();


        // sidebar
        var canvas_sidebar = document.getElementById("canvas_sidebar");
        if (!canvas_sidebar || !canvas_sidebar.getContext) return;
    
        var canvas_wrap_sidebar_w = document.getElementById('canvas_wrap_sidebar').clientWidth;
        var canvas_wrap_sidebar_h = document.getElementById('canvas_wrap_sidebar').clientHeight;
        canvas_sidebar.setAttribute('width',canvas_wrap_sidebar_w);
        canvas_sidebar.setAttribute('height',canvas_wrap_sidebar_h);
        var ctx_sidebar = canvas_sidebar.getContext('2d');

        var img_sidebar01 = new Image();
        img_sidebar01.src = 'https://verdec-s.com/wp-content/themes/VerdecLightgreen/img/sidebar/ses.jpg';
        img_sidebar01.addEventListener('load',function() {
            ctx_sidebar.save();
            ctx_sidebar.beginPath();
            ctx_sidebar.arc(350,470,200, 0, Math.PI*2, false);
            ctx_sidebar.closePath();
            ctx_sidebar.clip();
            ctx_sidebar.drawImage(this,0,270,550,400);
            ctx_sidebar.restore();
        });
        var img_sidebar02 = new Image();
        img_sidebar02.src = 'https://verdec-s.com/wp-content/themes/VerdecLightgreen/img/sidebar/order.jpg';
        img_sidebar02.addEventListener('load',function() {
            ctx_sidebar.save();
            ctx_sidebar.beginPath();
            ctx_sidebar.arc(canvas_wrap_sidebar_w-350,400,200,0, Math.PI*2, false);
            ctx_sidebar.closePath();
            ctx_sidebar.clip();
            ctx_sidebar.drawImage(this,canvas_wrap_sidebar_w-600,200,600,400);
            ctx_sidebar.restore();
        });
        var img_sidebar04 = new Image();
        img_sidebar04.src = 'https://verdec-s.com/wp-content/themes/VerdecLightgreen/img/sidebar/web.jpg';
        img_sidebar04.addEventListener('load',function() {
            ctx_sidebar.save();
            ctx_sidebar.beginPath();
            ctx_sidebar.arc(canvas_wrap_sidebar_w-510,820,200,0, Math.PI*2, false);
            ctx_sidebar.closePath();
            ctx_sidebar.clip();
            ctx_sidebar.drawImage(this,canvas_wrap_sidebar_w-710,620,450,450);
            ctx_sidebar.restore();
        });
        var img_sidebar05 = new Image();
        img_sidebar05.src = 'https://verdec-s.com/wp-content/themes/VerdecLightgreen/img/sidebar/recruit.jpg';
        img_sidebar05.addEventListener('load',function() {
            ctx_sidebar.save();
            ctx_sidebar.beginPath();
            ctx_sidebar.arc(350,1100,200, 0, Math.PI*2, false);
            ctx_sidebar.closePath();
            ctx_sidebar.clip();
            ctx_sidebar.drawImage(img_sidebar05,70,900);
            ctx_sidebar.restore();
        });
        var img_sidebar06 = new Image();
        img_sidebar06.src = 'https://verdec-s.com/wp-content/themes/VerdecLightgreen/img/sidebar/sis.jpg';
        img_sidebar06.addEventListener('load',function() {
            ctx_sidebar.save();
            ctx_sidebar.beginPath();
            ctx_sidebar.arc(canvas_wrap_sidebar_w-350,1250,200,0, Math.PI*2, false);
            ctx_sidebar.closePath();
            ctx_sidebar.clip();
            ctx_sidebar.drawImage(img_sidebar06,canvas_wrap_sidebar_w-550,1050,420,420);
            ctx_sidebar.restore();
        });

        // footer
        var canvas_footer = document.getElementById("canvas_footer");
        if (!canvas_footer || !canvas_footer.getContext) return;
    
        var canvas_wrap_footer_w = document.getElementById('canvas_wrap_footer').clientWidth;
        var canvas_wrap_footer_h = document.getElementById('canvas_wrap_footer').clientHeight;
        canvas_footer.setAttribute('width',canvas_wrap_footer_w);
        canvas_footer.setAttribute('height',canvas_wrap_footer_h);
        var ctx_footer = canvas_footer.getContext('2d');

        ctx_footer.beginPath();
        ctx_footer.moveTo(0,350);
        ctx_footer.lineTo(canvas_wrap_footer_w,0);
        ctx_footer.lineTo(canvas_wrap_footer_w,canvas_wrap_footer_h);
        ctx_footer.lineTo(0,canvas_wrap_footer_h);
        ctx_footer.closePath();
        ctx_footer.clip();
        ctx_footer.globalAlpha = 0.5;
        var img_footer = new Image();
        img_footer.src = 'https://verdec-s.com/wp-content/themes/VerdecLightgreen/img/footer/footer_back.jpg';
        img_footer.addEventListener('load',function() {
            ctx_footer.drawImage(this,0,0,canvas_wrap_footer_w,canvas_wrap_footer_h);
        });

    });
})();