Netflix Resize Div Logic

by Eric Blanchette

HTML

<div class="netflix-player-wrapper">
    <div id="netflix-player">
        <div class="image image-1">Photo?</div>
        <div class="image image-2">Photo?</div>
        <div id="player-sizing"></div>
        <div id="ten-percent-height">
            <p>Text</p>
        </div>
    </div>
</div>

CSS

.netflix-player-wrapper {
    font-size: 16px;
}
#netflix-player {
    position: absolute;
    width: 90%;
    height: 90%;
    left: 5%;
    top: 5%;
    overflow: hidden;
    background: #ccc;
    font-size: 1em;
    background-image: url('http://fc06.deviantart.net/fs18/i/2007/146/9/3/Beach_Sunset_by_wusk.jpg');
    background-size: cover;
}
#netflix-player {
    position: absolute;
    width: 90%;
    height: 90%;
    left: 5%;
    top: 5%;
    overflow: hidden;
    background: #ccc;
    font-size: 1em;
}
.image {
    background-size: cover;
    width:100%;
    height:100%;
}
.image-1 {
    background-image: url('http://fc06.deviantart.net/fs18/i/2007/146/9/3/Beach_Sunset_by_wusk.jpg');
}
.image-2 {
    background-image: url('http://salmanshaheen.com/wp-content/uploads/2013/01/Sunset.jpg');
}
#player-sizing {
    position: absolute;
    width: 1em;
    height: 1em;
    visibility: hidden;
    font-size: 1em;
}
#ten-percent-height {
    position: absolute;
    width: 80%;
    height: 10em;
    left: 10%;
    bottom: 8em;
    background: #000;
    display: flex;
}
#ten-percent-height > p {
    display: block;
    margin: 1em;
    font-size: 2em;
    color: #fff;
}

JavaScript

(function () {
    var sizingEl = document.getElementById("player-sizing"),
        controlWrapperEl = document.getElementById('netflix-player'),
        currentEmSize = 1.0;

    function resize() {
        var wrapperHeight = controlWrapperEl.getBoundingClientRect().height,
            sizingHeight = sizingEl.getBoundingClientRect().height,
            wrapperOnePercentHeight = wrapperHeight / 100,
            offsetSize;

        if (sizingHeight > wrapperOnePercentHeight) {
            offsetSize = sizingHeight / wrapperOnePercentHeight;
            currentEmSize = currentEmSize / offsetSize;
        } else if (wrapperOnePercentHeight > sizingHeight) {
            offsetSize = wrapperOnePercentHeight / sizingHeight;
            currentEmSize = currentEmSize * offsetSize;
        }
        controlWrapperEl.style.fontSize = currentEmSize + "em";
    }

    window.addEventListener("resize", resize, false);

    $(".image").on("click", function () {
        var $this = $(this);
        alert('click');
        $this.animate({
            "margin-left": $this.width() + "px"
        }, "fast");
    });

    resize();
})();