var appName = 'Ask iTuffy';
var headerTextColor = '#000';

var frameURL = 'https://ituffy-webappservice.yanaimpl.com/';
var frameWidth = '400px';
var frameHeight = '575px';

var bottomButtonColor = '#EB7500';
var bottomButtonHeight = '35px';
var bottomButtonWidth = '131px';

var topButtonColor = '#EB7500';
var topButtonHeight = '32px';
var topButtonWidth = frameWidth;
var topBackgroundColor = '#EB7500';
var closeButtonColor = '#100303';
var isInitialLoad = true;
function init() {
    var yanaBlock = document.querySelector('body');
    var yanaApp = document.createElement('div');
    yanaApp.setAttribute('id', 'yana-wrapper');
    yanaApp.style.position = 'fixed';
    yanaApp.style.bottom = '0';
    yanaApp.style.right = '110px';
    yanaApp.style.width = frameWidth;
    yanaApp.style.borderRadius = '4px 4px 0 0';
    yanaApp.style.zIndex = '9999999999';

    var yanaHeader = document.createElement('div');
    yanaHeader.setAttribute('id', 'yana-app-header');
    yanaHeader.style.display = 'block';
    yanaHeader.style.position = 'relative';
    yanaHeader.style.height = '35px';
    yanaHeader.style.width = '131px';
    yanaHeader.style.right = '-175px';
    yanaHeader.style.borderRadius = '4px 4px 0 0';
    yanaHeader.style.backgroundColor = topBackgroundColor;
    yanaHeader.style.zIndex = '9999999999';

    yanaApp.appendChild(yanaHeader);
    var headerText = document.createElement('p');
    headerText.setAttribute('id', 'yana-top-paragraph');
    headerText.style.position = 'relative';
    headerText.style.padding = '8px';
    headerText.style.textAlign = 'center';
    headerText.style.color = headerTextColor;
    headerText.style.fontWeight = 700;
    headerText.addEventListener('click', openClose);
    yanaApp.appendChild(headerText);

    var leftText = document.createElement('span');
    leftText.setAttribute('id', 'yana-left-text');
    leftText.innerHTML = appName;
    leftText.style.cursor = 'pointer';
    leftText.style.display = 'block';
    headerText.appendChild(leftText);

    var rightText = document.createElement('span');
    rightText.setAttribute('id', 'yana-right-text');
    rightText.innerHTML = '-';
    rightText.style.display = 'none';
    rightText.style.cursor = 'pointer';
    rightText.style.position = 'absolute';
    rightText.style.right = '10px';
    rightText.style.top = '0px';
    rightText.style.fontSize = '35px';
    rightText.style.lineHeight = '5px';
    rightText.style.padding = '5px';
    rightText.onmousemove = function () {
        this.style.backgroundColor = closeButtonColor;
        this.style.borderRadius = '2px';
    };
    rightText.onmouseout = function () {
        this.style.backgroundColor = '';
    };
    headerText.appendChild(rightText);
    yanaHeader.appendChild(headerText);

    var yanaFrame = document.createElement('iframe');
    yanaFrame.setAttribute('id', 'yana-app-wrapper');
    yanaFrame.setAttribute('title', 'iTuffy');
    if (!isInitialLoad) {
        yanaFrame.setAttribute('src', frameURL);
    }
    yanaFrame.style.display = 'none';
    yanaFrame.style.position = 'relative';
    yanaFrame.style.height = frameHeight;
    yanaFrame.style.width = frameWidth;
    yanaFrame.style.borderStyle = 'none';
    yanaFrame.style.transition = 'visibility 3s, opacity 0.5s linear';
    yanaApp.appendChild(yanaFrame);

    yanaBlock.appendChild(yanaApp);
}

if (document.readyState !== 'loading') {
    init();
} else {
    document.addEventListener('DOMContentLoaded', function () {
        init();
    });
}

function openClose() {
    if (window.screen.width < 1025) {
        window.open(frameURL, '_blank');
    } else {
        var yanaApp = document.getElementById('yana-wrapper');
        var appHeader = document.getElementById('yana-app-header');
        var leftText = document.getElementById('yana-left-text');
        var rightText = document.getElementById('yana-right-text');
        var iframe = document.getElementById('yana-app-wrapper');
        var headerText = document.getElementById('yana-top-paragraph');
        if (iframe.style.display === 'none') {
            if (isInitialLoad)
                iframe.setAttribute('src', frameURL);
            isInitialLoad = false;
            iframe.style.display = 'block';
            appHeader.style.width = topButtonWidth;
            appHeader.style.right = '0px';
            appHeader.style.height = topButtonHeight;
            appHeader.style.backgroundColor = topButtonColor;
            leftText.style.display = 'block';
            headerText.style.paddingLeft = '18px';
            headerText.style.textAlign = 'left';
            rightText.style.display = 'block';
        } else {
            iframe.style.display = 'none';
            appHeader.style.width = bottomButtonWidth;
            appHeader.style.right = '-175px';
            appHeader.style.height = bottomButtonHeight;
            appHeader.style.backgroundColor = bottomButtonColor;
            leftText.style.display = 'block';
            rightText.style.display = 'none';
            headerText.style.textAlign = 'center';
            headerText.style.paddingLeft = '0px';
        }
    }
}