

$(document).ready(function() {

   $(document).scroll(function(){
       didScroll = true;
       if ($(document).scrollTop() > 50) {
           $('.menu_box').addClass('fixed-top bg-light');
           $('.menu_box').css({
               boxShadow: '0px 0px 2px #000'
           });
           $('.logo_icon a img:nth-child(1)').addClass('ch');
           $('.logo_icon a img:nth-child(2)').removeClass('ch');
           menuBar.css({
                border: '2px solid #000'
           });
           $('.phone_box a').css({
               color: '#000'
           });
       }else {
           $('.menu_box').removeClass('fixed-top bg-light');
           $('.menu_box').css({
            boxShadow: '0px 0px 0px #000'
           });
           $('.logo_icon a img:nth-child(1)').removeClass('ch');
           $('.logo_icon a img:nth-child(2)').addClass('ch');
           menuBar.css({
            border: '2px solid #fff'
           });
           $('.phone_box a').css({
            color: '#fff'
        });
       }
   });


    // close button
    const close = $('#close');
    const menu = $('.menu');
    const overLay = $('.overlay');
    close.click(function(e){
        e.preventDefault();
        menu.css({
            left: '-300px'
        });
        overLay.css({
            width: '0px'
        });
        menuBtn.css({
            float: 'left'
        })
    });

    // menu btn
    const menuBar = $('.menu_bar');
    const menuBtn = $('.menu_btn');
    menuBar.click(function(e){
        menu.css({
            left: '0px'
        });
        overLay.css({
            width: '100%'
        });
        menuBtn.css({
            float: 'right'
        });
    });

    // overlay click
    overLay.click(function(e){
        menu.css({
            left: '-300px'
        });
        overLay.css({
            width: '0px'
        });
        menuBtn.css({
            float: 'left'
        });
    });

    // gallery
    $('.gb_1,.gb_2,.gb_3,.gb_4').magnificPopup({
        items: [
            {
                src: '../project/imgs/garbage-disposal.jpg'
            },
            {
                src: '../project/imgs/leak.jpg'
            },
            {
                src: '../project/imgs/toilet-repair.jpg'
            },
            {
                src: '../project/imgs/water-heater.jpg'
            }
        ],
        gallery: {
          enabled: true
        },
        type: 'image' // this is a default type
    });


    // coupons 
    $('.cp').on("click", function(e){
        e.preventDefault()
    })
    $('.cp').magnificPopup({
        items: [
            {
                src: '../project/imgs/coupons/$25.jpg'
            },
            {
                src: '../project/imgs/coupons/$50.jpg'
            },
            {
                src: '../project/imgs/coupons/$100.jpg'
            },
            {
                src: '../project/imgs/coupons/$40.jpg'
            }
        ],
        gallery: {
          enabled: true
        },
        type: 'image' // this is a default type
    });

    // video
    $('.play-btn').magnificPopup({
        items: [
          {
            src: 'https://www.youtube.com/watch?v=ToN67IQiYVo',
            type: 'iframe' // this overrides default type
          }
        ],
        type: 'image' // this is a default type
    });

        // content box 
    // build scene
    $('.content_box > h1, .content_box > p, .content_box > a').css({
        opacity: '1',
        transform: 'translateY(0px)'
    });
});

    // animation document
    var controller = new ScrollMagic.Controller();
    // icons animation
    // build scene
    var box = document.querySelectorAll('.icons_box > div');
    for(var i = 0; i < box.length; i++) {
        var scene =	new ScrollMagic.Scene({
                        triggerElement: box[i], // start trigger
                        triggerHook: 0.5
                    })
                    .setClassToggle(box[i], "show-icon") 
                    // .addIndicators()
                    .addTo(controller);
    }
    // gallery animation
    // build scene
    var box2 = document.querySelectorAll('.g_box_1 > div');
    for(var i = 0; i < box2.length; i++) {
        var scene =	new ScrollMagic.Scene({
                        triggerElement: box2[i], // start trigger
                        triggerHook: 0.9
                    })
                    .setClassToggle(box2[i], "show-image") 
                    // .addIndicators()
                    .addTo(controller);
    }
 

    // coupon animation
    // build scene
    var cbox = document.querySelectorAll('.cb_2_box');
        var scene =	new ScrollMagic.Scene({
                        triggerElement: ".cb_2", // start trigger
                        triggerHook: 0.9
                    })
                    .setClassToggle(cbox, "show-box") 
                    // .addIndicators()
                    .addTo(controller);
                    
    // git animation
    // build scene
    var git = document.querySelectorAll('.fb_2 > h2');
        var scene =	new ScrollMagic.Scene({
                        triggerElement: ".git", // start trigger
                        triggerHook: 0.7
                    })
                    .setClassToggle(git, "show-git") 
                    // .addIndicators()
                    .addTo(controller);

    var form = document.querySelectorAll('.fb_2 > form');
        var scene =	new ScrollMagic.Scene({
                        triggerElement: form, // start trigger
                        triggerHook: 0.9
                    })
                    .setClassToggle(form, "show-form") 
                    // .addIndicators()
                    .addTo(controller);

   var info = document.querySelectorAll('.cInfo > div');
    for(var i = 0; i < info.length; i++) {
        var scene =	new ScrollMagic.Scene({
                        triggerElement: info[i], // start trigger
                        triggerHook: 0.8
                    })
                    .setClassToggle(info[i], "show-info") 
                    // .addIndicators()
                    .addTo(controller);
    }                    