function AppViewModel () {

    // content identifiers
    var contents = [
        "home",
        "contact",
        "links"
    ]


    // methods
    function toggleMenuButton(){
        if (!$('.menuButton').hasClass('menuButtonOpen')) {
            $('.shade').toggle(0).animate({'opacity': '0.1'}, 300);
            $('#menuButtonIcon').children('i').removeClass('fa-bars')
                .addClass('fa-times');
        } else {
            $('.shade').css('opacity', '0').toggle(0);
            $('#menuButtonIcon').children('i').removeClass('fa-times')
                .addClass('fa-bars');
        }
        $('.menuButton').toggleClass('menuButtonOpen');
        $('div.menuBox').toggle(300);
    }

    // handling of menu button
    $('.menuButton').click(function(){
        toggleMenuButton();
    });
    $('.shade').click(function(){
        if($('.menuButton').hasClass('menuButtonOpen')){
            toggleMenuButton();
        }
    });
    $('html').keypress(function(event){
        if (event.key === "Escape" && $('.menuButton').hasClass('menuButtonOpen')) {
            toggleMenuButton();
        }
    });
    $('.menuItem').click(function(){
        toggleMenuButton();
    })

    // handling of special links
    $('.specialLink').on('mouseenter',function(){
        console.log('!');
        $(this).removeClass('specialLinkAnimationReverse').addClass('specialLinkAnimation');
    });
    $('.specialLink').on('animationend', function(){
        if ($(this).hasClass('specialLinkAnimation')){
            $(this).addClass('specialLinkFill')
            .removeClass('specialLinkAnimation');
        } else {
            $(this).removeClass('specialLinkAnimationReverse');
        }
    });
    $('.specialLink').on('mouseleave',function(){
        $(this).removeClass('specialLinkFill')
            .removeClass('specialLinkAnimation')
            .addClass('specialLinkAnimationReverse'); 
    });
    

    // client side routes
    Sammy(function(){
        this.get('#:route', function(){
            var route = this.params.route;
            if (contents.includes(route)) {
                for (var i = 0; i < contents.length; i++){
                    $('#' + contents[i]).hide(0);
                }
                $('#' + route).fadeIn(200);
            } else {
                this.app.runRoute('get', '#home');
            }
        });
        this.get('', function() {
            this.app.runRoute('get', '#home')
        });
    }).run();
    
    // reoccuring animations
    setInterval(function(){
        $('.cursor').toggle(0, 'default');
    }, 600);


}

ko.applyBindings(new AppViewModel());