<header class="header container">
    <h1 class="pen__heading">Custom Dot Cursor</h1>
    <h4 class="pen__subheading">By: <a href="http://kylebrumm.com" target="_blank">Kyle Brumm</a></h4>
</header>

<div class="cursor-dot-outline"></div>
<div class="cursor-dot"></div>

// Colors
$primary: #52A3B6;
$primary-ultralight: mix(white, $primary, 80%);
$primary-light: mix(white, $primary, 25%);
$primary-dark: mix(black, $primary, 25%);
$primary-ultradark: mix(black, $primary, 80%);
$black: #333333;
$white: #eeeeee;

// Fonts
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400|Raleway:300);
$open-sans: 'Open Sans', Helvetica, arial, sans-serif;
$raleway: 'Raleway', 'Open Sans', sans-serif;

// Misc
$max-width: 800px;


// ------------------------------------------------------


*,
*:before,
*:after {
    box-sizing: border-box;
}

html {
    font-family: $open-sans;
    color: $primary;
    background-color: $black;
}

h1, h2, h3,
h4, h5, h6 {
    font-family: $raleway;
    text-align: center;
}

a {
    color: $black;
    text-decoration: none;
}

img {
    max-width: 100%;
}

.header {
    position: relative;
    overflow: visible;
    
    &:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 50px;
        height: 2px;
        background-color: $primary;
        transform: translateX(-50%);
    }
}

.pen__heading {}

.pen__subheading {
    margin-bottom: 0;
    
    a {
        color: $primary;
        
        &:hover,
        &:focus {
            color: $primary-light;
        }
    }
}

.container {
    overflow: hidden;
    width: 100%;
    max-width: $max-width;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.col {
    padding: 1rem;
    
    @media (min-width: $max-width) {
        width: 50%;
        float: left;

        &:nth-of-type(2n+1) {
            clear: left;
        }        
    }
    
    &.col--full {
        width: 100%;
    }
}


// ------------------------------------------------------


html,
body {
    &,
    * {
        cursor: none;        
    }
}

.cursor-dot,
.cursor-dot-outline {
    pointer-events: none;
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    opacity: 0;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s ease-in-out,
                transform 0.3s ease-in-out;
}

.cursor-dot {
    $size: 8px;
    width: $size;
    height: $size;
    background-color: $primary;
}

.cursor-dot-outline {
    $size: 40px;
    width: $size;
    height: $size;
    background-color: rgba($primary-light, 0.5);
}

var cursor = {
    delay: 8,
    _x: 0,
    _y: 0,
    endX: (window.innerWidth / 2),
    endY: (window.innerHeight / 2),
    cursorVisible: true,
    cursorEnlarged: false,
    $dot: document.querySelector('.cursor-dot'),
    $outline: document.querySelector('.cursor-dot-outline'),
    
    init: function() {
        // Set up element sizes
        this.dotSize = this.$dot.offsetWidth;
        this.outlineSize = this.$outline.offsetWidth;
        
        this.setupEventListeners();
        this.animateDotOutline();
    },
    
//     updateCursor: function(e) {
//         var self = this;
        
//         console.log(e)
        
//         // Show the cursor
//         self.cursorVisible = true;
//         self.toggleCursorVisibility();

//         // Position the dot
//         self.endX = e.pageX;
//         self.endY = e.pageY;
//         self.$dot.style.top = self.endY + 'px';
//         self.$dot.style.left = self.endX + 'px';
//     },
    
    setupEventListeners: function() {
        var self = this;
        
        // Anchor hovering
        document.querySelectorAll('a').forEach(function(el) {
            el.addEventListener('mouseover', function() {
                self.cursorEnlarged = true;
                self.toggleCursorSize();
            });
            el.addEventListener('mouseout', function() {
                self.cursorEnlarged = false;
                self.toggleCursorSize();
            });
        });
        
        // Click events
        document.addEventListener('mousedown', function() {
            self.cursorEnlarged = true;
            self.toggleCursorSize();
        });
        document.addEventListener('mouseup', function() {
            self.cursorEnlarged = false;
            self.toggleCursorSize();
        });
  
  
        document.addEventListener('mousemove', function(e) {
            // Show the cursor
            self.cursorVisible = true;
            self.toggleCursorVisibility();

            // Position the dot
            self.endX = e.pageX;
            self.endY = e.pageY;
            self.$dot.style.top = self.endY + 'px';
            self.$dot.style.left = self.endX + 'px';
        });
        
        // Hide/show cursor
        document.addEventListener('mouseenter', function(e) {
            self.cursorVisible = true;
            self.toggleCursorVisibility();
            self.$dot.style.opacity = 1;
            self.$outline.style.opacity = 1;
        });
        
        document.addEventListener('mouseleave', function(e) {
            self.cursorVisible = true;
            self.toggleCursorVisibility();
            self.$dot.style.opacity = 0;
            self.$outline.style.opacity = 0;
        });
    },
    
    animateDotOutline: function() {
        var self = this;
        
        self._x += (self.endX - self._x) / self.delay;
        self._y += (self.endY - self._y) / self.delay;
        self.$outline.style.top = self._y + 'px';
        self.$outline.style.left = self._x + 'px';
        
        requestAnimationFrame(this.animateDotOutline.bind(self));
    },
    
    toggleCursorSize: function() {
        var self = this;
        
        if (self.cursorEnlarged) {
            self.$dot.style.transform = 'translate(-50%, -50%) scale(0.75)';
            self.$outline.style.transform = 'translate(-50%, -50%) scale(1.5)';
        } else {
            self.$dot.style.transform = 'translate(-50%, -50%) scale(1)';
            self.$outline.style.transform = 'translate(-50%, -50%) scale(1)';
        }
    },
    
    toggleCursorVisibility: function() {
        var self = this;
        
        if (self.cursorVisible) {
            self.$dot.style.opacity = 1;
            self.$outline.style.opacity = 1;
        } else {
            self.$dot.style.opacity = 0;
            self.$outline.style.opacity = 0;
        }
    }
}

cursor.init();