<div class="col-sm-12 subsection-head">
    <div class="subsection-head">
        <h1>Featured Projects</h1>
        <br/>
    </div>
</div>

<div id="work-nav">
    <div id="work-nav-inner">

    <div class="worklogo"><a class="square <?= ($navOn == 'sensi' ? ' on' : '') ?>" id="sen" href="/work/sensi"></a></div>
    <div class="worklogo"><a class="square <?= ($navOn == 'tac' ? ' on' : '') ?>" id="tac" href="/work/total_archery_challenge"></a></div>
    <div class="worklogo"><a class="square <?= ($navOn == 'know' ? ' on' : '') ?>" id="kno" href="/work/knowtifi"></a></div>

    <div class="worklogo"><a class="square <?= ($navOn == 'scoobi' ? ' on' : '') ?>" id="sco" href="/work/scoobi"></a></div>
    <div class="worklogo"><a class="square <?= ($navOn == 'ins' ? ' on' : '') ?>" id="ins" href="/work/insulwise"></a></div>
    <div class="worklogo"><a class="square <?= ($navOn == 'swarovski' ? ' on' : '') ?>" id="swa" href="/work/swarovski"></a></div>

    <div class="worklogo"><a class="square <?= ($navOn == 'ade' ? ' on' : '') ?>" id="ade" href="/work/accomods"></a></div>
    <div class="worklogo"><a class="square <?= ($navOn == 'wdbd' ? ' on' : '') ?>" id="wdbd" href="/work/woodbed"></a></div>
    <div class="worklogo"><a class="square <?= ($navOn == 'bpt' ? ' on' : '') ?>" id="bpt" href="/work/baptist_standard"></a></div>

    <div class="worklogo"><a class="square <?= ($navOn == 'adp' ? ' on' : '') ?>" id="adp" href="/work/adp"></a></div>
    <div class="worklogo"><a class="square <?= ($navOn == 'ten' ? ' on' : '') ?>" id="ten" href="/work/ten"></a></div>
    <div class="worklogo"><a class="square <?= ($navOn == 'wvmn' ? ' on' : '') ?>" id="wvmn" href="/work/wv_metronews"></a></div>

    <div class="worklogo"><a class="square <?= ($navOn == 'upmc' ? ' on' : '') ?>" id="thy" href="/work/upmc"></a></div>
    <div class="worklogo"><a class="square <?= ($navOn == 'wc' ? ' on' : '') ?>" id="wht" href="/work/whittakercountry"></a></div>
    <div class="worklogo"><a class="square <?= ($navOn == 'huffy' ? ' on' : '') ?>" id="huf" href="/work/huffy"></a></div>

    <div class="worklogo"><a class="square <?= ($navOn == 'block292' ? ' on' : '') ?>" id="b29" href="/work/block292"></a></div>
    <div class="worklogo"><a class="square <?= ($navOn == 'scmc' ? ' on' : '') ?>" id="scm" href="/work/scmc"></a></div>
    <div class="worklogo"><a class="square <?= ($navOn == 'genco' ? ' on' : '') ?>" id="gen" href="/work/genco"></a></div>

    <div class="worklogo"><a class="square <?= ($navOn == 'blackbox' ? ' on' : '') ?>" id="bbx" href="/work/blackbox"></a></div>
        <div class="worklogo"><a class="square <?= ($navOn == 'ia' ? ' on' : '') ?>" id="iaw" href="/work/iaw"></a></div>
    <div class="worklogo"><a class="square <?= ($navOn == 'carnegie' ? ' on' : '') ?>" id="car" href="/work/carnegie"></a></div>

        <!--    <div class="worklogo"><a class="square --><?php //= ($navOn == 'bone' ? ' on' : '') ?><!--" id="bon" href="/work/bonecollector"></a></div>-->

        <!--    <div class="worklogo"><a class="square --><?php //= ($navOn == 'commet' ? ' on' : '') ?><!--" id="cmt" href="/work/commet"></a></div>-->


    </div>
</div>

<?php
    $scrollTo = 0;
    switch ($navOn) {
        case 'scoobi' : $scrollTo = 0; break;
        case 'ins' : $scrollTo = 120; break;
        case 'swarovski' : $scrollTo = 240; break;
        case 'ade' : $scrollTo = 360; break;
        case 'wdbd' : $scrollTo = 480; break;
        case 'bpt' : $scrollTo = 600; break;
        case 'adp' : $scrollTo = 720; break;
        case 'ten' : $scrollTo = 840; break;
        case 'wvmn' : $scrollTo = 960; break;
        case 'upmc' : $scrollTo = 1080; break;
        case 'wc' : $scrollTo = 1200; break;
        case 'huffy' : $scrollTo = 1320; break;
        case 'block292' : $scrollTo = 1440; break;
        case 'scmc' : $scrollTo = 1560; break;
        case 'genco' : $scrollTo = 1680; break;
        case 'blackbox' : $scrollTo = 1800; break;
        case 'bone' : $scrollTo = 1920; break;
        case 'carnegie' : $scrollTo = 2040; break;
        case 'ia' : $scrollTo = 2160; break;
        case 'commet' : $scrollTo = 2280; break;
    }
?>

<script>
    $(document).ready(function() {
        const w = $( window ).width();
        const inner = $('#work-nav').width();
        const left = <?=($scrollTo)?> - (inner/2) + 60 ;
        if (w < 991) {
            $('#work-nav').scrollLeft(left);
        }
    });
</script>

<?php
/*
    <div class=" col-sm-6 col-md-4 small-pad">
        <a class="square <?= ($navOn == 'kah' ? ' on' : '') ?>" id="kah" href="/work/kahamilton"></a>
    </div>
 */