Chaser Menu - demo Kallyas HTML

/*
 * Creates and updates the chaser menu depending on the loaded header
 * @wpk
 */
(function($){

    //TODO: IMPORTANT! UPDATE BEFORE DEPLOYMENT
    var SITE_URL = 'http://localhost/bogdan/kallyas_html/';

    // whether or not the chaser is visible
    var visible = false;

    // Enable Chaser menu 1 - Yes / 0 - No
    var hasChaser = 1;

//<editor-fold dec=">>> KT_CHASER">
    var KT_Chaser = {

        update: function( $header, headerStyleNumber )
        {
            if(headerStyleNumber < 1){
                console.warn('[KT_Chaser::update] Error: Invalid header style number provided.');
                return;
            }

            // Clone needed elements from $header depending on the headerStyleNumber and generate chaser menu
            this._createChaserByHeaderStyle( $header, headerStyleNumber );
        },

        // Clone needed elements from $header depending on the headerStyleNumber and generate chaser menu
        _createChaserByHeaderStyle: function( $header, headerStyleNumber )
        {
            // Show top bar when headerStyleNumber = [1,2,3]
            var populateTopBar = ($.inArray(parseInt(headerStyleNumber,10), [1,2,3]));

            // Update chaser's content
            this._updateChaserHtml( $header, populateTopBar );
        },

        // Update the chaser menu's content
        _updateChaserHtml: function( $header, populateTopBar ){
            populateTopBar = (populateTopBar > -1);

            // Create new html structure
            var chaserMenu = $('body .chaser');
            if( ! chaserMenu){
                return;
            }

            // Create chaser menu
            $('#chaserMenuRow').html('')
                .append('<div class="col-sm-2 col-md-2" id="left-container"></div>')
                .append('<div class="col-sm-10 col-md-10" id="right-container"></div>');

            // Add logo
            $('#left-container').html($('.logo-container', $header).clone(true));

            // Add the content in the right area
            var rightContainer = $('#right-container');
            rightContainer.
                // Adding top bar
                append('<div id="_wpk-custom-bar" class="col-sm-12 col-md-12"></div>')
                // add main menu
                .append('<div id="wpk-main-menu" class="col-sm-11 col-md-11"></div>')
                // Add cta button
                .append('<div id="_wpk-cta-button" class="col-sm-1 col-md-1"></div>');

            // Add content in the newly created sections
            if(populateTopBar) {
                if($header.attr('data-header-style') == '2'){
                    $('#_wpk-custom-bar').html( $('<div style="height:40px;"></div>') );
                }
                else if($header.attr('data-header-style') == '3'){
                    $('#_wpk-custom-bar').html( $('.kl-top-header').clone(true) );
                }
                else {
                    $('#_wpk-custom-bar').html( $('.kl-top-header').clone(true) );
                }
            }
            else {
                $('#_wpk-custom-bar').html( $('<div style="height:40px;"></div>') );
            }

            $('#_wpk-cta-button').html($('#ctabutton', $header).clone(true));

            $('#wpk-main-menu').html($('#menu-main-menu', $header).clone(true));
        }
    };
//</editor-fold dec=">>> KT_CHASER">


    if(hasChaser)
    {
//<editor-fold desc=">>> ON LOAD">
        $(function(){
                // the reference to the default header element
            var _header = $('#header'),
                // Default value for chaser's visibility
                forch = 300;

            // ENABLE HEADER STYLE CHANGING (the dropdown in options)
            var header_style_option = _header.attr('data-header-style') || '1';

            // Setup references
            var docMainMenu = $('#main-menu > ul');
            if(docMainMenu)
            {
                // Set the default style for header
                _header.attr('data-header-style', header_style_option);

                // Create chaser menu
                $('<div id="chaserMenuRow" class="row"></div>')
                    .appendTo(document.body)
                    .wrap('<div class="chaser"><div class="container"></div></div>');

                // Update the forch depending on the position of #content
                var _content = $('.hg_section').first();
                if(_content && _content.length > 0) {
                    forch = _content.first().offset().top;
                }

                // Set the chaser's visibility
                var scrolled = $(window).scrollTop(),
                // Get the reference to the chaser menu
                    _chaser = $('body .chaser');
                if(scrolled > forch) {
                    _chaser.addClass('visible');
                    visible = true;
                }
            }
            // END if(docMainMenu)

            // OnScroll
            $(window).scroll(function() {
                var scrolled = $(window).scrollTop(),
                    forch = 300,
                    _content = $('.hg_section').first(),
                    _chaser = $('body .chaser');

                if(_content) {
                    forch = _content.first().offset().top;
                }
                if ( !visible && scrolled >= forch ) {
                    _chaser.addClass('visible');
                    visible = true;
                    KT_Chaser.update( _header,  _header.attr('data-header-style'));
                }
                else if (visible && scrolled >= forch){
                    _chaser.addClass('visible');
                    visible = true;
                    KT_Chaser.update( _header,  _header.attr('data-header-style'));
                }
                else if ( visible && scrolled < forch ) {
                    _chaser.removeClass('visible');
                    visible = false;
                }
                else {
                    // Triggered when the chaser menu is visible but doesn't have content.
                    // Only happens when the window is scrolled and then the page is refreshed.
                    if(_chaser.hasClass('visible') && $('#chaserMenuRow').html().trim() == ''){
                        _chaser.addClass('visible');
                        visible = true;
                        KT_Chaser.update( _header,  _header.attr('data-header-style'));
                    }
                }
            });
            // END onScroll
        });
//</editor-fold desc=">>> ON LOAD">
    }
    // END if(hasChaser)
})(jQuery);