Apply JS Code by SPL for Optimizely Extension

hero_change_template.js

var utils = window.optimizely.get('utils');
var cityDropdownText = '.styledComboBox label:first';
var selectedCity = '#SelectedCityId option:contains(' + extension.default_city + ')';
var heroImage = '.imageRotatorImg';
var headline = '.imageRotatorText';
var subtext = '.MediumHeroText';
var headlineLeftPos = extension.HL_LR + 'px';
var headlineTopPos = extension.HL_UD + 'px';
var subtextLeftPos = extension.ST_LR + 'px';
var suntextTopPos = extension.ST_UD + 'px';
var buttonBorderWidth = extension.border_width + 'px';
var buttonLeftPos = extension.BT_LR + 'px';
var buttonTopPos = extension.BT_UD + 'px';
var buttonTextSize = extension.BT_TS + 'px';


if (extension.default_city !== '') {
    utils.waitForElement(cityDropdownText).then(function(element) {
        $(element).text(extension.default_city);
    });
    $(selectedCity).attr("selected", "selected");
    window.$("select[id='SelectedCityId']").change();
}
if (extension.hero_image !== '') {
    utils.waitForElement(heroImage).then(function(element) {
        $(element).attr('src', extension.hero_image);
    });
}
if (extension.headline !== '') {
    utils.waitForElement(headline).then(function(element) {
        $(element).text(extension.headline);
    });
}
if (extension.subtext !== '') {
    utils.waitForElement(subtext).then(function(element) {
        $(element).text(extension.subtext);
    });
}
utils.waitForElement(headline).then(function() {
    if (extension.HL_LR !== '') {
        $('.imageRotatorTextDiv').css({
            'left': headlineLeftPos
        });
    }
    if (extension.HL_UD !== '') {
        $('.imageRotatorTextDiv').css({
            'top': headlineTopPos
        });
    }
    if (extension.ST_LR !== '') {
        $('.imageRotatorSubText').css({
            'left': subtextLeftPos
        });
    }
    if (extension.ST_UD !== '') {
        $('.imageRotatorSubText').css({
            'top': suntextTopPos
        });
    }

    if (extension.subtext_show_hide === 'b') {
        $('.imageRotatorSubText').hide();
    }
    if (extension.subtext_show_hide === 'a') {
        $('.imageRotatorSubText').show();
    }

    if (extension.show_button === 'a') {
        if ($('.ghost-button').length > 0 && ($('.ghost-button').text() !== extension.button_text || $('.ghost-button').css('font-weight') !== extension.font_weight) || $('.ghost-button').attr('href') !== extension.BT_URL) {
            $('.ghost-button').remove();
        }


        $('<a class="ghost-button" style="height: auto; width: auto; padding: 8px; position: absolute;  top: 175px; left: 19px; text-align: center; border: solid; outline: none; text-decoration: none; visibility: visible; display: inline-block" href="' + extension.BT_URL + '">' + extension.button_text + '</a>').insertAfter('.imageRotatorSubText');
        $('.ghost-button').css('zIndex', '9999');
        $('.ghost-button').css('font-weight', extension.font_weight);
        $('.ghost-button').css('color', extension.text_color);
        $('.ghost-button').css('border-width', buttonBorderWidth);
        $('.ghost-button').css('border-color', extension.border_color);
        $('.ghost-button').css('background-color', extension.background_color);
        $('.ghost-button').css('top', buttonTopPos);
        $('.ghost-button').css('left', buttonLeftPos);
        $('.ghost-button').css('font-size', buttonTextSize);

        utils.waitForElement('.ghost-button').then(function() {
            $('.ghost-button').hover(function() {
                $('.ghost-button').css('background-color', extension.background_color_mo);
                $('.ghost-button').css('color', extension.text_color_mo);
                $('.ghost-button').css('border-color', extension.border_color_mo);
            }, function() {
                $('.ghost-button').css('background-color', extension.background_color);
                $('.ghost-button').css('color', extension.text_color);
                $('.ghost-button').css('border-color', extension.border_color);
            });
        });
    }

    if (extension.show_button === 'b' && $('.ghost-button').length > 0) {
        $('.ghost-button').remove();
    }

});