Cacher is the code snippet organizer for pro developers

'use strict';

function changeSource(){
    var graphic = document.getElementsByClassName('header__graphic')[0];
    var url = graphic.getAttribute('data');

    if (Modernizr.mq('(max-width: 800px)')) {
        if(url == "img/header-graphic-mobile.svg") return;
        else {
            graphic.setAttribute('data', 'img/header-graphic-mobile.svg');
            // maybe show/hide something else related to it here
        }
    }
    else {
        if(url == "img/header-graphic.svg") return;
        else {
            graphic.setAttribute('data', 'img/header-graphic.svg');
            // maybe show/hide something else related to it here
        }
    }
}
/*
 *  Scroll-triggered animations: http://joshbroton.com/hooking-up-to-the-window-onscroll-event-without-killing-your-performance/
 */

window.onload = setupDom;

window.onresize = resizeDom;

window.onscroll = doOnScroll;

changeSource();

function setupDom() {

    setTimeout(function() {
        var headerGraphic = document.getElementsByClassName('header__graphic')[0];
        var headerDoc = headerGraphic.contentDocument;
        if (Modernizr.mq('(min-width: 800px)')) {
            var salem = headerDoc.getElementById('title');
            var moon = headerDoc.getElementById('moon');
            var subTitle = headerDoc.getElementById('sub-title');
            var hill = headerDoc.getElementById('hill');
            var treeLeft = headerDoc.getElementById('tree--left');
            var treeRight = headerDoc.getElementById('tree--right');
            var bats = headerDoc.querySelectorAll('#bat');

            TweenMax.from(salem, 1.5, {y: 25, delay: 1});
            TweenMax.from(moon, 1.5, {y: 100,delay: 1});
            TweenMax.from(hill, 1.5, {y: -50, delay: 1});
            TweenMax.from(treeLeft, 2, {x: 50, scale: .95, delay: 1});
            TweenMax.from(treeRight, 2, {x: -50, scale: .95, delay: 1});
            TweenMax.staggerFrom(bats, .5, {y: 150, scale: 0, delay: 3}, .05);
        } else {
            var salem = headerDoc.getElementById('title');
            var moon = headerDoc.getElementById('moon');
            var subTitle = headerDoc.getElementById('sub-title');
            var hill = headerDoc.getElementById('hill');
            var bats = headerDoc.querySelectorAll('#bat');

            TweenMax.from(salem, 1.5, {y: 25, delay: 1});
            TweenMax.from(moon, 1.5, {y: 100,delay: 1});
            TweenMax.from(hill, 1.5, {y: -50, delay: 1});
            TweenMax.staggerFrom(bats, .5, {y: 35, scale: 0, delay: 2.5}, .05);
        }
    }, 300);


    // Get all elements that need animation
    var elements = document.querySelectorAll('.location, .tour-stops__stop, .bat-box'),
    // This is a holder for each element object.
        element = {};

    // Loop through NodeList elements and add each element to an object, figure out how far from top of document
    // and add to elements array
    for(var i = 0, len = elements.length; i < len; i++) {
        element = {
            element: elements[i],
            top: getDistanceFromTop(elements[i])
        };
        animations.elements.push(element);
    }

    // Run doOnScroll once in case some elements are in viewport onload
    setTimeout(function() { doOnScroll(); }, 1000);

}

function resizeDom() {
    changeSource();

    // Refigure offsets when window is resized
    animations.elements.forEach(function(element, index, array) {
        element.top = getDistanceFromTop(element.element);
    });
}

function doOnScroll() {
    animations.testScroll();
}

var animations = {
    iconOffset: 0,
    elements: [],
    testScroll: function () {
        // Determine how far the user has scrolled
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

        // Add window height to it, and minus how far from bottom of viewport an element must be
        // before the animation begins
        scrollTop = scrollTop + window.innerHeight - 200;

        // Loop through array of elements and test each one to see if it's within viewport
        // If so, animate
        this.elements.forEach(function(element, index, array) {
            if(element.top < scrollTop) {

                // Main Graphic Animations
                if(element.element.className.indexOf('location') > -1) {
                    var graphic = element.element.getElementsByClassName('graphic')[0];
                    var contentDoc = graphic.contentDocument;

                    if (graphic.hasClass('graphic--hocus-pocus')) {
                        var mob = contentDoc.getElementById('mob');
                        var villager = contentDoc.querySelectorAll('#villager');
                        console.log(villager);

                        TweenMax.to(mob, 20, {x: -500});

                        var tl = new TimelineMax({repeat: 20});
                        tl.staggerTo(villager, .2, {y: -2}, .1)
                        .staggerTo(villager, .1, {y: 0}, .1);
                    }
                    if (graphic.hasClass('graphic--bewitched')) {
                        var moon = contentDoc.getElementById('moon');
                        var window = contentDoc.querySelectorAll('#window');

                        TweenMax.fromTo(moon, 2, {y: 100}, {y: 0, opacity: 1});
                        var windowFlicker = new TimelineMax({repeat: 10});
                        windowFlicker.to(window, .4, {opacity: .75})
                        .to(window, .2, {opacity: .8})
                        .to(window, .3, {opacity: .75})
                        .to(window, .2, {opacity: .8})
                        .to(window, .4, {opacity: .75})
                        .to(window, .3, {opacity: .8});

                        var masterTl = new TimelineMax();
                        masterTl.to(window, .75, {fill: '#bfc45c'})
                        .add(windowFlicker)
                        .to(window, .75, {fill: '#241715'});
                    }

                    if (graphic.hasClass('graphic--witch-walk')) {
                        var light = contentDoc.getElementById('light');

                        var lightFlicker = new TimelineMax({repeat: 8});
                        lightFlicker.to(light, .4, {opacity: .65})
                            .to(light, .2, {opacity: .8})
                            .to(light, .3, {opacity: .60})
                            .to(light, .2, {opacity: .8})
                            .to(light, .4, {opacity: .7})
                            .to(light, .3, {opacity: .8});

                        var masterTl = new TimelineMax({delay: .5});
                        masterTl.to(light, .75, {opacity: .8})
                            .add(lightFlicker)
                            .to(light, .75, {opacity: 0});
                    }

                    if (graphic.hasClass('graphic--spellbound')) {
                        var ghost = contentDoc.getElementById('ghost');
                        var door = contentDoc.getElementById('door');
                        var leftLightning = contentDoc.getElementById('lightning--left');
                        var rightLightning = contentDoc.getElementById('lightning--right');
                        var middleLightning = contentDoc.getElementById('lightning--middle');
                        var window = contentDoc.querySelectorAll('#window');

                        var tl = new TimelineMax({repeat: 2, delay: 1});

                        tl.to(leftLightning, .1, {opacity: 1}, '+=2')
                        .to(leftLightning, .4, {opacity: 0})
                        .to(leftLightning, .1, {opacity: 1})
                        .to(leftLightning, .1, {opacity: 0})
                        .to(leftLightning, .1, {opacity: 1})
                        .to(leftLightning, .1, {opacity: 0})
                        .to(leftLightning, .1, {opacity: 1}, '+=1')
                        .to(leftLightning, .1, {opacity: 0});

                        var tl = new TimelineMax({repeat: 2, delay: .5});

                        tl.to(rightLightning, .1, {opacity: 1}, '+=1')
                        .to(rightLightning, .1, {opacity: 0})
                        .to(rightLightning, .1, {opacity: 1}, '+=2')
                        .to(rightLightning, .4, {opacity: 0})
                        .to(rightLightning, .1, {opacity: 1})
                        .to(rightLightning, .1, {opacity: 0})
                        .to(rightLightning, .1, {opacity: 1})
                        .to(rightLightning, .1, {opacity: 0});

                        var tl = new TimelineMax({repeat: 2, delay: 1.5});

                        tl.to(middleLightning, .1, {opacity: 1}, '+=1')
                        .to(middleLightning, .1, {opacity: 0})
                        .to(middleLightning, .1, {opacity: 1}, '+=2')
                        .to(middleLightning, .4, {opacity: 0})
                        .to(middleLightning, .1, {opacity: 1})
                        .to(middleLightning, .1, {opacity: 0})
                        .to(middleLightning, .1, {opacity: 1})
                        .to(middleLightning, .1, {opacity: 0});

                        var tl = new TimelineMax({delay: 2});

                        tl.to(ghost, 1, {opacity: .8})
                        .to(ghost, 1, {opacity: 0}, '+=2');

                        var tl = new TimelineMax({delay: 3});

                        tl.to(window, .01, {fill: '#bfc45c'})
                        .to(window, .01, {fill: '#241715'}, '+=4');

                        var tl = new TimelineMax({delay: 4});

                        tl.to(door, 2, {transformOrigin: '100% 50%', scaleX: .3})
                        .to(door, 2, {scaleX: 1}, '+=3');
                    }
                }

                // Icon Graphic Animations
                if(element.element.className.indexOf('tour-stops__stop') > -1) {
                    var graphic = element.element.getElementsByClassName('stop__graphic')[0];
                    var contentDoc = graphic.contentDocument;

                    if (graphic.hasClass('graphic--burying-ground')) {
                        var tombstone = contentDoc.getElementById('tombstone');

                        TweenMax.fromTo(tombstone, .5, {y: 200}, {y: 0, opacity: 1});
                    }

                    if (graphic.hasClass('graphic--salem-jail')) {
                        var bars = contentDoc.getElementById('bars');
                        var lock = contentDoc.getElementById('lock');

                        TweenMax.fromTo(bars, 1, {x:-500}, {x: 0, opacity: 1});
                        var tl = new TimelineMax();
                        tl.to(lock, .5, {transformOrigin: '100% 90%', rotation: 50})
                        .to(lock, .3, {rotation: 45})
                        .to(lock, .3, {rotation: 50})
                        .to(lock, .2, {rotation: 0});
                    }

                    if (graphic.hasClass('graphic--harmony-grove')) {
                        var gate = contentDoc.getElementById('gate');
                        var tl = new TimelineMax();
                        tl.to(gate, 1, {transformOrigin: '100% 50%', scaleX: .2})
                        .to(gate, .5, {scaleX: .3})
                        .to(gate, .5, {scaleX: .2})
                        .to(gate, .1, {scaleX: 1});
                    }

                    if (graphic.hasClass('graphic--apple-orchard')) {
                        var skin = contentDoc.getElementById('skin');

                        var tl = new TimelineMax();
                        tl.to(skin, 1.5, {fill: '#c42222'})
                        .to(skin, 1.5, {fill: '#405a42'});
                    }

                    if (graphic.hasClass('graphic--witch-house')) {
                        var steam = contentDoc.getElementById('steam');

                        var tl = new TimelineMax({repeat: -1});
                        tl.to(steam, 2, {opacity: 1})
                        tl.to(steam, 2, {opacity: 0});
                    }

                    if (graphic.hasClass('graphic--witch-museum')) {
                        var hat = contentDoc.getElementById('hat');

                        TweenMax.fromTo(hat, 1, {x: 200, y:-200}, {x: 0, y: 0, opacity: 1});
                    }

                    if (graphic.hasClass('graphic--witch-dungeon')) {
                        var bars = contentDoc.getElementById('bars');
                        var ballChain = contentDoc.getElementById('ball--chain');

                        TweenMax.fromTo(bars, 1, {x: -300}, {x: 0, opacity: 1});

                        var tl = new TimelineMax({delay: 1});
                        tl.fromTo(ballChain, .3, {y: -200}, {y: 0, opacity: 1})
                        .to(ballChain, .1, {y: -2})
                        .to(ballChain, .05, {y: 0});
                    }

                    if (graphic.hasClass('graphic--ward-house')) {
                        var eyes = contentDoc.querySelectorAll('#eye');

                        TweenMax.to(eyes, 1, {fill: '#c42222', delay: 1});
                    }
                }

                if(element.element.className.indexOf('bat-box') > -1) {
                    var graphic = element.element.getElementsByClassName('footer__bats')[0];
                    var contentDoc = graphic.contentDocument;

                    if (graphic.hasClass('footer__bats')) {
                        var bats = contentDoc.querySelectorAll('#bat');

                        TweenMax.staggerFromTo(bats, .5, {y: 50, scale: 0}, {y: 0, scale: 1, opacity: 1}, .05);
                    }
                }
                // Remove animated element from array, so not tested after it's been animated once
                array.splice(index, 1);
            }
        });
    }
};


//Loops through all parent nodes of an element to get it's distance from the top of the document
function getDistanceFromTop(element) {
    var yPos = 0;

    while(element) {
        yPos += (element.offsetTop);
        element = element.offsetParent;
    }

    return yPos;
}
/*
 *  These and other non-jquery functions at https://github.com/joshbroton/you-dont-need-jquery/blob/master/demo/js/not-jquery.js
 *  Let's not use jQuery if at all possible. Thanks!
 */

Element.prototype.listen = function(event, callback) {
    if(this.attachEvent) {
        this.attachEvent("on" + event, function() {callback.call(this);});
    } else if(this.addEventListener) {
        this.addEventListener(event, callback, false);
    }
};

Element.prototype.addClass = function(className) {
    if(this.hasClass(className) == false) {
        this.className += ' ' + className;
    }

}

Element.prototype.removeClass = function(className) {
    if(this.hasClass(className)) {
        var rx = new RegExp('(\\s|^)' + className + '(\\s|$)', 'g');
        this.className = this.className.replace(rx, ' ');
    }
}

Element.prototype.hasClass = function(className) {
    var rx = new RegExp('(\\s|^)' + className + '(\\s|$)');

    if(this.className.match(rx)) {
        return true;
    }

    return false;
}

Element.prototype.toggleClass = function(className) {
    if(this.hasClass(className)) {
        this.removeClass(className);
    } else {
        this.addClass(className);
    }
}

function getById(id) {
    return document.getElementById(id);
}

/*
 *  Code for opening and closing sources drawer at the bottom of the page
 */
(function() {
    getById('sourcesToggle').listen('click', toggleSources);
    getById('shareToggle').listen('click', toggleShare);
    getById('staticEmbed').listen('click', showStatic);
    getById('interactiveEmbed').listen('click', showInteractive);

    function toggleSources() {
        getById('sources').removeClass('share-active');
        getById('sources').toggleClass('sources-active');
    }

    function toggleShare() {
        getById('sources').removeClass('sources-active');
        getById('sources').toggleClass('share-active');

        var embedCode = document.getElementById('embedCode');
        embedCode.style.height = (embedCode.scrollHeight + 2) + 'px';
    }

    function showStatic() {
        document.getElementById('embedCodeWrapper').style.display = 'none';
        document.getElementById('staticEmbedCodeWrapper').style.display = 'block';

        var embedCode = document.getElementById('staticEmbedCode');
        embedCode.style.height = (embedCode.scrollHeight + 2) + 'px';
    }

    function showInteractive() {
        document.getElementById('embedCodeWrapper').style.display = 'block';
        document.getElementById('staticEmbedCodeWrapper').style.display = 'none';

        var embedCode = document.getElementById('embedCode');
        embedCode.style.height = (embedCode.scrollHeight + 2) + 'px';
    }

    var embedCode = document.getElementById('embedCode');
    embedCode.style.height = (embedCode.scrollHeight + 2) + 'px';
})();