var spinner;
var currentPage = 0;
var questionsAnswered = 0;
var totalQuestionsCount = 0;
var lastChatId = 0;
var lastData = new Array;
var pageCount = 0;
var showPromoteSendByEmail = true;
var forceGoToQuestions = false;
var myName = '';
var iDontKnowAnswerCount = 0;
var IDONTKNOW_LIMIT_PER_PAGE = 3;
var resultData;
var targetData;

var enableDrawPolygon = true;
var enableDrawOriginalPolygon = true;

// Tooltips
var tooltipForResultCircleShowed = false;
var tooltipForAreaCanvasShowed = false;
var addParticipantBalloon;

document.addEventListener('DOMContentLoaded', function () {
    loadQuestions(0);
    loadChat(lastChatId);

    document.getElementById('buttonBack').addEventListener("click", movePrevious);
    document.getElementById('buttonNext').addEventListener("click", moveNext);
    document.getElementById('conversationNewCommentInput').addEventListener("focus", clearTextAndItalicFormatting);
    document.getElementById('conversationNewCommentInput').addEventListener("keypress", handleKeyInput);
    document.getElementById('conversationNewCommentSubmit').addEventListener("click", submitNewComment);
    document.getElementById('addParticipant').addEventListener("click", showAddParticipant);
    document.getElementById('participantLinkSend').addEventListener("click", addNewParticipant);
    document.getElementById('inputSendResults').addEventListener("focus", clearTextAndItalicFormatting);
    document.getElementById('buttonSendResults').addEventListener("click", saveTargetsAndAskContacts);
    document.getElementById('buttonStart').addEventListener("click", startTheShow);
    document.getElementById('divImprovementsClose').addEventListener("click", closeImprovements);
    document.getElementById('divPersonRegister').addEventListener("click", openPersonRegisterFrame);
    document.getElementById('divCookies').addEventListener("click", openCookiesFrame);
    document.getElementById('divPersonRegisterLayerClose').addEventListener("click", closeRegister);
    document.getElementById('divCookiesLayerClose').addEventListener("click", closeCookies);
    document.getElementById('buttonGetResults').addEventListener("click", openResults);
    document.getElementById('buttonSendByEmail').addEventListener("click", sendByEmail);
    document.getElementById('divCloseContacts').addEventListener("click", closeContacts);
    document.getElementById('divFeedback').addEventListener("click", openFeedback);
    document.getElementById('buttonSendFeedback').addEventListener("click", sendFeedback);
    document.getElementById('divFeedbackFormClose').addEventListener("click", closeFeedback);
    document.getElementById('divCloseInstructions').addEventListener("click", closeInstructions);

    document.getElementById('btnSubscribeNewsletter').addEventListener("click", subscribeNewsletter);
    document.getElementById('inputNewsletter').addEventListener("focus", clearTextAndItalicFormatting);
    
    document.onscroll = onScroll;

    document.getElementById('circle1').addEventListener("mousedown", function(){ drag(this, event); }, false);
    document.getElementById('circle2').addEventListener("mousedown", function(){ drag(this, event); }, false);
    document.getElementById('circle3').addEventListener("mousedown", function(){ drag(this, event); }, false);
    document.getElementById('circle4').addEventListener("mousedown", function(){ drag(this, event); }, false);

    document.getElementById('circle1').addEventListener("touchstart", function(){ drag(this, event); }, false);
    document.getElementById('circle2').addEventListener("touchstart", function(){ drag(this, event); }, false);
    document.getElementById('circle3').addEventListener("touchstart", function(){ drag(this, event); }, false);
    document.getElementById('circle4').addEventListener("touchstart", function(){ drag(this, event); }, false);

    document.getElementById('circle1').addEventListener("click", function(){ circleClick(this, event); }, false);
    document.getElementById('circle2').addEventListener("click", function(){ circleClick(this, event); }, false);
    document.getElementById('circle3').addEventListener("click", function(){ circleClick(this, event); }, false);
    document.getElementById('circle4').addEventListener("click", function(){ circleClick(this, event); }, false);


    addParticipantBalloon = new Opentip("div#divHelpIcon", { target: "div#divAddParticipant",
                                    tipJoint: "bottom left",
                                    hideTriggers: [ "closeButton" ],
                                    closeButtonCrossColor: '#d2195b'
                                });
    addParticipantBalloon.setContent("Välittämällä kysely voit osallistaa johtoryhmän ja avainhenkilöt keskusteluun. Lopuksi on mahdollista vertailla vastaushajontaa");

    
    // inspectlet
    window.__insp = window.__insp || [];
    __insp.push(['wid', 757277400]);
    (function () {
        function ldinsp() { if (typeof window.__inspld != "undefined") return; window.__inspld = 1; var insp = document.createElement('script'); insp.type = 'text/javascript'; insp.async = true; insp.id = "inspsync"; insp.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://cdn.inspectlet.com/inspectlet.js'; var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(insp, x); };
        setTimeout(ldinsp, 500); document.readyState != "complete" ? (window.attachEvent ? window.attachEvent('onload', ldinsp) : window.addEventListener('load', ldinsp, false)) : ldinsp();
    })();
    
    (function (i, s, o, g, r, a, m) {
        i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
            (i[r].q = i[r].q || []).push(arguments)
        }, i[r].l = 1 * new Date(); a = s.createElement(o),
m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
    })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');

    ga('create', 'UA-73810341-1', 'auto');
    ga('send', 'pageview');
    

});

function onScroll() {
  var list = document.querySelectorAll("[x-sticky]");

  for (var i = 0, item; item = list[i]; i++) {
    var bound = getBoundary(item);
    var edge = bound.getBoundingClientRect().bottom;
    var nextItem = findNextInBoundary(list, i, bound);

    if (nextItem) {
      if(nextItem.parentNode.hasAttribute("x-sticky-placeholder")) {
        nextItem = nextItem.parentNode;
      }

      edge = nextItem.getBoundingClientRect().top;
    }

    // check if the current sticky is already inside a placeholder
    var hasHolder = item.parentNode.hasAttribute("x-sticky-placeholder");
    var rect = item.getBoundingClientRect();
    var height = rect.bottom - rect.top; // get the height and width
    var width = rect.right - rect.left;
    var top = hasHolder ? item.parentNode.getBoundingClientRect().top : rect.top;

    if (top < 0) {
      if(edge > height) {
        item.style.position = "fixed";
        item.style.top = "0px";
      } else {
        item.style.position = "relative";
        item.style.top = -((top - edge) + height) + "px";
      }

      if (!hasHolder) {  //create the placeholder
        var d = document.createElement("div");

        d.setAttribute("x-sticky-placeholder", "");
        d.style.height = height + "px";  //set the height and width
        d.style.width = width + "px";
        item.parentNode.insertBefore(d, item);
        d.appendChild(item);
      }
    } else {
      item.style.position = "relative";
      item.style.top = "auto";

      if (hasHolder) {  //remove the placeholder
        item = item.parentNode;
        item.parentNode.insertBefore(item.firstChild, item);
        item.parentNode.removeChild(item);
      }
    }
  }
}

function findNextInBoundary(arr, i, boundary) {
  i++;

  for (var item; item = arr[i]; i++) {
    if (getBoundary(item) == boundary) {
      return item;
    }
  }
}

function getBoundary(n) {
  while (n = n.parentNode) {
    if (n.hasAttribute("x-sticky-boundary")) {
      return n;
    }
  }

  return document.body || document.documentElement;
}

function loadQuestions(currentPage)
{
    var targetUrl = "questionnairehandler.aspx?method=getQuestions&uniqueidentifier=" + encodeURIComponent(document.getElementById('uniqueidentifier').value) + "&page=" + encodeURIComponent(currentPage);
    var xhttp = new XMLHttpRequest();

    drawSpinner();

    xhttp.onreadystatechange = function () {
        if (xhttp.readyState == 4) {
            if (xhttp.status == 200) {
                spinner.stop();
                processQuestions(JSON.parse(xhttp.responseText));
            }
            else {
                document.getElementById('divQuestions').innerHTML = 'Virhe ladattaessa tietoja. Yritä myöhemmin uudelleen';
            }
        }
    };
    xhttp.open("GET", targetUrl, true);
    xhttp.send();
}

function drawSpinner() {

    var opts = {
        lines: 13,
        length: 28,
        width: 14,
        radius: 42,
        scale: 1,
        corners: 1,
        color: '#000',
        opacity: 0.25,
        rotate: 0,
        direction: 1,
        speed: 1,
        trail: 60,
        fps: 20,
        zIndex: 2e9,
        className: 'spinner',
        top: '50%',
        left: '50%',
        shadow: false,
        hwaccel: false,
        position: 'absolute'
    }

    var target = document.getElementById('divSpinner')
    spinner = new Spinner(opts).spin(target);
}

function startTheShow()
{
    document.getElementById('divPromoteWindowOverlay').style.display = 'none';

    if (!areWeOnMobile()) {
        setTimeout(function() {
            addParticipantBalloon.show();
        }, 3000);
    }
}


function processQuestions(data)
{
    var questionDiv = document.getElementById('divQuestions');
    var newContent = '';

    questionsAnswered = data.TotalAnswers;
    totalQuestionsCount = data.TotalCount;
    pageCount = data.PageCount;

    updatePercentage();

    if (questionsAnswered == totalQuestionsCount && !forceGoToQuestions) {
        loadResultPage(0);
        return;
    }

    questionDiv.style.display = 'block';
    document.getElementById('divResults').style.display = 'none';

    var firstQuestion = true;

    for (var questionIndex in data.Questions) {

        var answeredBalloonClassName = 'divQuestionBalloon';

        if (data.Questions[questionIndex].CurrentValue) {
            answeredBalloonClassName = 'divQuestionBalloonOk';
        }

        newContent += "<table border=0 width='100%'><tr><td align=left>";
        newContent += "<div id='divQuestiontitle'>" + HtmlEncode(data.Questions[questionIndex].Question) + "</div></td>";
        newContent += "<td align=right><div class='" + HtmlEncode(answeredBalloonClassName) + "' id='divQuestionBalloon_" + HtmlEncode(data.Questions[questionIndex].ID) + "'>&#10003;</div></td></tr></table>";

        if (data.Questions[questionIndex].Forwarded == '1') {
            newContent += "<div id='divQuestionForwardedInformation'>" + HtmlEncode('Tämä kysymys on välitetty vastattavaksi ja vastaus tallentuu myös lähettäjälle') + "</div>";
        }

        lastData[data.Questions[questionIndex].ID] = data.Questions[questionIndex].CurrentValue;

        switch (data.Questions[questionIndex].DataType) {
            case 1:
                break;

            case 2:
                newContent += "<select class='selectInput' id='selectInput_" + HtmlEncode(data.Questions[questionIndex].ID) + "'>";
                newContent += "<option value=''>- Valitse -</option>";
                for (var answerIndex in data.Questions[questionIndex].Values) {
                    newContent += "<option value='" + HtmlEncode(data.Questions[questionIndex].Values[answerIndex].Key) + "' ";

                    if (data.Questions[questionIndex].CurrentValue == data.Questions[questionIndex].Values[answerIndex].Key) {
                        newContent += " selected ";
                    }

                    newContent += ">" + HtmlEncode(data.Questions[questionIndex].Values[answerIndex].Value) + "</option>";
                }
                newContent += "</select>";
                break;

            case 3:

                var tooltip = new Array();
                tooltip[0] = 'Täysin eri mieltä';
                tooltip[1] = 'Hieman eri mieltä';
                tooltip[2] = 'En eri enkä samaa mieltä';
                tooltip[3] = 'Hieman samaa mieltä';
                tooltip[4] = 'Täysin samaa mieltä';
                tooltip[5] = 'En osaa sanoa tai ohitan kysymyksen';

                newContent += "<div id='divAnswerTitlebarLeft'>ERI MIELTÄ</div>";
                newContent += "<div id='divAnswerTitlebarLeft'></div>";
                newContent += "<div id='divAnswerTitlebarCenter'></div>";
                newContent += "<div id='divAnswerTitlebarLeft'></div>";
                newContent += "<div id='divAnswerTitlebarRight'>SAMAA MIELTÄ</div>";
                newContent += "<div id='divAnswerTitlebarIDontKnow'>EN TIEDÄ / OHITA</div>";

                for (var answerIndex = 1; answerIndex <= 5; answerIndex++) {

                    var currentStyleClassName = 'answerBar';
                    if (data.Questions[questionIndex].CurrentValue == answerIndex) {
                        currentStyleClassName = 'answerBarSelected';
                    }

                    newContent += "<div title='" + tooltip[answerIndex - 1] + "' class='" + HtmlEncode(currentStyleClassName) + "' id='divAnswerbar_" + answerIndex + "_" + HtmlEncode(data.Questions[questionIndex].ID) + "'>&nbsp;</div>";
                }

                var iDontKnowClassName = 'answerBarIdontKnow';
                if (data.Questions[questionIndex].CurrentValue == '0') {
                    iDontKnowClassName = 'answerBarIdontKnowSelected';
                    iDontKnowAnswerCount += 1;
                }

                newContent += "<div title='" + tooltip[5] + "' class='" + HtmlEncode(iDontKnowClassName) + "' id='divAnswerbar_0_" + HtmlEncode(data.Questions[questionIndex].ID) + "'>&nbsp;</div>";

                var defaultName = 'Matti Möttönen';

                if (myName.length > 0) {
                    defaultName = myName;
                    showLoginBalloon();
                }

                newContent += "<div class='answerForwardToSomeone' id='divAnswerForwardToSomeone_" + HtmlEncode(data.Questions[questionIndex].ID) + "'>";
                newContent += "Kutsu kollega vastaamaan:&nbsp;&nbsp;<input class='answerForwardToSomeoneInput' value='esim. etunimi.sukunimi@yritys.fi' type='text' id='divAnswerForwardInput_" + HtmlEncode(data.Questions[questionIndex].ID) + "'>";
                newContent += "&nbsp;&nbsp;lähettäjä: <input type='text' class='answerForwardToSomeoneMyNameInput' value='" + defaultName + "' id='divAnswerForwardNameInput_" + HtmlEncode(data.Questions[questionIndex].ID) + "'>";
                newContent += "&nbsp;&nbsp;<a id='answerForwardToSomeOneLink_" + HtmlEncode(data.Questions[questionIndex].ID) + "'>lähetä</a>";
                newContent += "</div>";

                newContent += "<br />";
                newContent += "<div class='comparisonAreaHidden' id='divComparisonArea_" + HtmlEncode(data.Questions[questionIndex].ID) + "'>";
                newContent += "<div class='comprarisonPlacementBar' id='divComparisonAreaBar_" + HtmlEncode(data.Questions[questionIndex].ID) + "'></div>";

                if (firstQuestion) {
                    newContent += "<br />Vertailu vastausten keskiarvoon";
                    firstQuestion = false;
                }

                newContent += "</div>";

                break;

            default:
                break;
        }

        newContent += "<br /><br />";
    }

    document.getElementById('divGroupTitle').innerText = data.GroupName;

    questionDiv.innerHTML = newContent;
    hookUpEventsToAnswerBoxes(data.MaxQuestionId);

    document.getElementById('buttonNext').style.display = 'block';

    window.scrollTo(0, 0);
}

function hookUpEventsToAnswerBoxes(maxQuestionId)
{
    for (var startQuestionIndex = 0; startQuestionIndex <= 4; startQuestionIndex++) {
        var questionItem = document.getElementById('selectInput_s' + startQuestionIndex);

        if (questionItem) {
            questionItem.addEventListener("change", onSelectAnswerItem);
        }
    }

    for (var questionIndex = 0; questionIndex <= maxQuestionId; questionIndex++) {
        for (var answerIndex = 0; answerIndex <= 5; answerIndex++) {
            var questionItem = document.getElementById('divAnswerbar_' + answerIndex + '_' + questionIndex);

            if (questionItem) {
                questionItem.addEventListener("click", onClickAnswerBox);
            }
        }

        var forwardLink = document.getElementById('answerForwardToSomeOneLink_' + questionIndex);
        if (forwardLink) {
            forwardLink.addEventListener("click", forwardOnClick);
        }

        var recipientEmailInput = document.getElementById('divAnswerForwardInput_' + questionIndex);
        if (recipientEmailInput) {
            recipientEmailInput.addEventListener("focus", clearTextAndItalicFormatting);
        }

        var recipientEmailNameInput = document.getElementById('divAnswerForwardNameInput_' + questionIndex);
        if (recipientEmailNameInput) {
            recipientEmailNameInput.addEventListener("focus", clearTextAndItalicFormatting);
        }
    }
}

function clearTextAndItalicFormatting()
{
    this.value = '';
    this.style.fontStyle = 'normal';
}

function forwardOnClick()
{
    var answerForwardItem = "" + this.id;
    var selectedQuestionIndex = answerForwardItem.substring(27);
    var forwardEmail = document.getElementById('divAnswerForwardInput_' + selectedQuestionIndex).value;
    var fromUser = document.getElementById('divAnswerForwardNameInput_' + selectedQuestionIndex).value;
    var targetUrl = "questionnairehandler.aspx?method=forwardQuestion&uniqueidentifier=" + encodeURIComponent(document.getElementById('uniqueidentifier').value) + "&questionid=" + encodeURIComponent(selectedQuestionIndex) + "&from=" + encodeURIComponent(fromUser) + "&to=" + encodeURIComponent(forwardEmail);
    var xhttp = new XMLHttpRequest();

    if (myName.length == 0) {
        myName = fromUser;
        showLoginBalloon();
    }

    xhttp.onreadystatechange = function () {
        if (xhttp.readyState == 4) {
            if (xhttp.status == 200) {
                loadChat(lastChatId);

                document.getElementById('divAnswerForwardToSomeone_' + selectedQuestionIndex).innerHTML = 'Viesti lähetetty: ' + HtmlEncode(forwardEmail);
                document.getElementById('divAnswerForwardToSomeone_' + selectedQuestionIndex).style.color = 'green';

                setTimeout(function () {
                    document.getElementById('divAnswerForwardToSomeone_' + selectedQuestionIndex).style.display = 'none';
                }, 3000);
            }
            else {
                document.getElementById('divAnswerForwardInput_' + selectedQuestionIndex).style.backgroundColor = 'red';
                document.getElementById('divAnswerForwardInput_' + selectedQuestionIndex).style.color = 'white';
                document.getElementById('divAnswerForwardInput_' + selectedQuestionIndex).value = 'Virheellinen syöte, yritä uudelleen';
                setTimeout(function () {
                    document.getElementById('divAnswerForwardInput_' + selectedQuestionIndex).style.backgroundColor = 'white';
                    document.getElementById('divAnswerForwardInput_' + selectedQuestionIndex).style.color = 'black';
                    document.getElementById('divAnswerForwardInput_' + selectedQuestionIndex).value = '';
                }, 5000);
            }
        }
    };

    xhttp.open("GET", targetUrl, true);
    xhttp.send();
}

function onSelectAnswerItem()
{
    var answerSelectItem = this.id;
    var selectedAnswerIndex = answerSelectItem.substring(12);
    var selectedValue = document.getElementById(answerSelectItem).value;

    if (!isEmpty(selectedValue)) {
        if (isEmpty(lastData[selectedAnswerIndex])) {
            questionsAnswered += 1;
            document.getElementById('divQuestionBalloon_' + selectedAnswerIndex).className = 'divQuestionBalloonOk';
        }
    }
    else {
        questionsAnswered -= 1;
        document.getElementById('divQuestionBalloon_' + selectedAnswerIndex).className = 'divQuestionBalloon';
    }

    lastData[selectedAnswerIndex] = selectedValue;
    updatePercentage();
    saveAnswer(selectedAnswerIndex, selectedValue, !isEmpty(selectedValue))
}

function onClickAnswerBox()
{
    var answerBarId = "" + this.id;
    var selectedAnswerIndex = answerBarId.substring(13, 14);
    var selectedQuestionIndex = answerBarId.substring(15);
    var isOn = false;

    for (var answerIndex = 0; answerIndex <= 5; answerIndex++) {
        if (answerIndex != selectedAnswerIndex) {
            var questionItem = document.getElementById('divAnswerbar_' + answerIndex + '_' + selectedQuestionIndex);

            if (questionItem) {
                if (questionItem.className == 'answerBarSelected') {
                    questionItem.className = 'answerBar';
                    questionsAnswered -= 1;
                }
                else if (questionItem.className == 'answerBarIdontKnowSelected') {
                    questionItem.className = 'answerBarIdontKnow';
                    questionsAnswered -= 1;
                    iDontKnowAnswerCount -= 1;
                }
            }
        }
    }

    if (this.className == 'answerBarSelected') {
        this.className = 'answerBar';
        questionsAnswered -= 1;
    }
    else if (this.className == 'answerBar') {
        this.className = 'answerBarSelected';
        questionsAnswered += 1;
        isOn = true;
    }
    else if (this.className == 'answerBarIdontKnow') {
        this.className = 'answerBarIdontKnowSelected';
        questionsAnswered += 1;
        iDontKnowAnswerCount += 1;
        isOn = true;
    }
    else if (this.className == 'answerBarIdontKnowSelected') {
        this.className = 'answerBarIdontKnow';
        questionsAnswered -= 1;
        iDontKnowAnswerCount -= 1;
    }

    if (selectedAnswerIndex == 0) {
        if (this.className == 'answerBarIdontKnowSelected') {
            document.getElementById('divAnswerForwardToSomeone_' + selectedQuestionIndex).style.display = 'inline-block';
        }
        else {
            document.getElementById('divAnswerForwardToSomeone_' + selectedQuestionIndex).style.display = 'none';
        }
    }
    else {
        document.getElementById('divAnswerForwardToSomeone_' + selectedQuestionIndex).style.display = 'none';
    }

    saveAnswer(selectedQuestionIndex, selectedAnswerIndex, isOn);

    if (isOn) {
        document.getElementById('divQuestionBalloon_' + selectedQuestionIndex).className = 'divQuestionBalloonOk';
    }
    else {
        document.getElementById('divQuestionBalloon_' + selectedQuestionIndex).className = 'divQuestionBalloon';
    }

    updatePercentage();
}

function saveAnswer(questionId, answer, isOn)
{
    var targetUrl = "";

    if (isOn) {
        targetUrl = "questionnairehandler.aspx?method=saveAnswer&uniqueidentifier=" + encodeURIComponent(document.getElementById('uniqueidentifier').value) + "&questionid=" + encodeURIComponent(questionId) + "&answer=" + encodeURIComponent(answer);
    }
    else {
        targetUrl = "questionnairehandler.aspx?method=saveAnswer&uniqueidentifier=" + encodeURIComponent(document.getElementById('uniqueidentifier').value) + "&questionid=" + encodeURIComponent(questionId);
    }

    var xhttp = new XMLHttpRequest();

    xhttp.onreadystatechange = function () {
        if (xhttp.readyState == 4) {
            if (xhttp.status == 200) {
                if (isOn && !areWeOnMobile()) {
                    var comparisonArea = document.getElementById('divComparisonArea_' + questionId);
                    var comparisonAreaBar = document.getElementById('divComparisonAreaBar_' + questionId);

                    comparisonArea.className = 'comparisonAreaVisible';

                    var leftPosition = 27 + ((parseFloat(xhttp.responseText.replace(",", ".")) - 1) * 105);
                    comparisonAreaBar.style.marginLeft = leftPosition + 'px';
                }
            }
            else  {
                // Ignore. At this point there is nothing we can do
                // Hopefully the user will try again
            }
        }
    };
    xhttp.open("GET", targetUrl, true);
    xhttp.send();
}

function updatePercentage()
{
    var newPercentage = parseInt(questionsAnswered / totalQuestionsCount * 100);
    document.getElementById('divProgressBarContent').style.width = newPercentage + '%';
    document.getElementById('divProgressAreaPercent').innerText = newPercentage + '% (' + questionsAnswered + ' / ' + totalQuestionsCount + ')';
    document.getElementById('divMobileProgressText').innerText = newPercentage + '% (' + questionsAnswered + ' / ' + totalQuestionsCount + ')';
}

function movePrevious()
{
    if (questionsAnswered == totalQuestionsCount) {
        forceGoToQuestions = true;
    }

    if (currentPage > 0) {
        currentPage -= 1;
    }

    // canvas messes up our questionnaire so remove it
    var canvas = document.getElementById('2d');
    if (canvas) {
        canvas.outerHTML = "";
    }

    loadQuestions(currentPage);
}

function checkIsEverythingAnswered() {

    var divs = document.getElementsByTagName("div");
    var allDone = true;

    for (var i = 0; i < divs.length; i++) {
        if (divs[i].id != null) {
            if (divs[i].id.indexOf('divQuestionBalloon_') > -1) {
                if (divs[i].className == 'divQuestionBalloon') {
                    allDone = false;
                }
            }
        }
    }

    return allDone;
}

var tipNotAllAnswered;
var tipTooManyIdontKnows;

function moveNext()
{
    if (!checkIsEverythingAnswered()) {

        tipNotAllAnswered = new Opentip("div#divHelpIcon", { target: "input#buttonNext",
                                     tipJoint: "bottom left",
                                     hideTriggers: [ "closeButton" ],
                                     closeButtonCrossColor: '#d2195b'
                                    });
        tipNotAllAnswered.setContent("Osa sivun kysymyksistä on vastaamatta");
        tipNotAllAnswered.show();

        return;
    }

    if (iDontKnowAnswerCount > IDONTKNOW_LIMIT_PER_PAGE) {

        tipTooManyIdontKnows = new Opentip("a", { target: "input#buttonNext",
                                     tipJoint: "bottom right",
                                     hideTriggers: [ "closeButton" ],
                                     closeButtonCrossColor: '#d2195b'
                                    });
        tipTooManyIdontKnows.setContent("Sivulla on liian monta ohitettua vastausta. Sallittu määrä on " + IDONTKNOW_LIMIT_PER_PAGE);
        tipTooManyIdontKnows.show();

        return;
    }

    if (tipNotAllAnswered) {
        tipNotAllAnswered.deactivate();
    }

    if (tipTooManyIdontKnows) {
        tipTooManyIdontKnows.deactivate();
    }

    if (currentPage + 1 < pageCount) {
        currentPage += 1;

        loadQuestions(currentPage);
    }
    else {
        if (questionsAnswered == totalQuestionsCount) {
            forceGoToQuestions = false;
            loadResultPage(0);
            loadChat(0);
            return;
        }
    }
}

function loadResultPage(responseId)
{
    var divQuestions = document.getElementById('divQuestions');
    var newContent = '';

    if (showPromoteSendByEmail) {
        document.getElementById('divPromoteSendByEmail').style.display = 'block';
    }

    window.scrollTo(0, 0);
    drawSpinner();

    document.getElementById('divGroupTitle').innerText = 'Analyysin tulos sekä aluekohtainen tavoiteasetanta';

    document.getElementById('buttonNext').style.display = 'none';
    document.getElementById('divResults').style.display = 'block';
    document.getElementById('divQuestions').style.display = 'none';

    var targetUrl = "questionnairehandler.aspx?method=getResults&uniqueidentifier=" + encodeURIComponent(document.getElementById('uniqueidentifier').value) + "&target=" + responseId;
    var xhttp = new XMLHttpRequest();

    xhttp.onreadystatechange = function () {
        if (xhttp.readyState == 4) {
            if (xhttp.status == 200) {
                spinner.stop();
                drawResults(JSON.parse(xhttp.responseText));
            }
            else {
                document.getElementById('divQuestions').innerHTML = 'Virhe ladattaessa tietoja. Yritä myöhemmin uudelleen';
            }
        }
    };
    xhttp.open("GET", targetUrl, true);
    xhttp.send();

}


var WIDTH_HEIGHT_SIZE = 275;

function drawResults(data)
{
    var counter = 1;

    resultData = data;
    targetData = resultData;
            
    for (var indexResult in data) {

        var maxX = data[indexResult].xMax;
        var maxY = data[indexResult].yMax;

        var xRelative = data[indexResult].x / maxX;
        var yRelative = data[indexResult].y / maxY;

        var resultX, resultY;
        var xAxisX, xAxisY, yAxisX, yAxisY;
        var xAlignment = '';
        var yAlignment = '';

        if (counter == 1) {
            resultX = WIDTH_HEIGHT_SIZE - parseInt(xRelative * WIDTH_HEIGHT_SIZE);
            resultY = WIDTH_HEIGHT_SIZE - parseInt(yRelative * WIDTH_HEIGHT_SIZE);
            xAxisX = 3;
            xAxisY = WIDTH_HEIGHT_SIZE + 10;
            yAxisX = WIDTH_HEIGHT_SIZE - 80;
            yAxisY = 3;
            xAlignment = 'left';
            yAlignment = 'right';
        }
        else if (counter == 2) {
            resultX = parseInt(xRelative * WIDTH_HEIGHT_SIZE);
            resultY = WIDTH_HEIGHT_SIZE - parseInt(yRelative * WIDTH_HEIGHT_SIZE);
            xAxisX = WIDTH_HEIGHT_SIZE - 80;
            xAxisY = WIDTH_HEIGHT_SIZE + 10;
            yAxisX = 3;
            yAxisY = 3;
            xAlignment = 'right';
            yAlignment = 'left';
        }
        else if (counter == 3) {
            resultX = parseInt(xRelative * WIDTH_HEIGHT_SIZE);
            resultY = parseInt(yRelative * WIDTH_HEIGHT_SIZE);
            xAxisX = WIDTH_HEIGHT_SIZE - 80;
            xAxisY = 3;
            yAxisX = 3;
            yAxisY = WIDTH_HEIGHT_SIZE + 10;
            xAlignment = 'right';
            yAlignment = 'left';
        }
        else if (counter == 4) {
            resultX = WIDTH_HEIGHT_SIZE - parseInt(xRelative * WIDTH_HEIGHT_SIZE);
            resultY = parseInt(yRelative * WIDTH_HEIGHT_SIZE);
            xAxisX = 3;
            xAxisY = 3;
            yAxisX = WIDTH_HEIGHT_SIZE - 80;
            yAxisY = WIDTH_HEIGHT_SIZE + 10;
            xAlignment = 'left';
            yAlignment = 'right';
        }

        var title = document.getElementById('area' + counter + 'title');
        title.innerText = data[indexResult].name;

        // axis descriptions
        var axisDiv = document.getElementById('divAxis' + counter + 'xTitle');
        axisDiv.innerText = data[indexResult].xAxisDescription;
        axisDiv.style.position = 'absolute';
        axisDiv.style.display = 'block';
        axisDiv.zIndex = 1980;
        axisDiv.style.left = getPosition('graybox' + counter).left + xAxisX + 'px';
        axisDiv.style.top = getPosition('graybox' + counter).top + xAxisY + 'px';
        axisDiv.style.fontWeight = 'bold';
        axisDiv.style.fontSize = '10px';
        axisDiv.style.width = '100px';
        axisDiv.style.textAlign = xAlignment;

        axisDiv = document.getElementById('divAxis' + counter + 'yTitle');
        axisDiv.innerText = data[indexResult].yAxisDescription;
        axisDiv.style.position = 'absolute';
        axisDiv.style.display = 'block';
        axisDiv.zIndex = 1980;
        axisDiv.style.left = getPosition('graybox' + counter).left + yAxisX + 'px';
        axisDiv.style.top = getPosition('graybox' + counter).top + yAxisY + 'px';
        axisDiv.style.fontWeight = 'bold';
        axisDiv.style.fontSize = '10px';
        axisDiv.style.width = '100px';
        axisDiv.style.textAlign = yAlignment;

        var circle = document.getElementById('circle' + counter);
        circle.style.position = 'relative';
        circle.style.display = 'block';
        circle.style.left = resultX + 'px';
        circle.style.top = resultY + 'px';
        circle.className += " fade-in zero";

        var position = document.getElementById('divCirclePosition' + counter);
        position.style.position = 'relative';
        position.style.display = 'block';
        position.style.left = (resultX - 140) + 'px';
        position.style.top = resultY + 10 + 'px';
        position.className += " fade-in zero";
        position.innerHTML = data[indexResult].xAxisDescription + ': ' + data[indexResult].xDescription + '<br />' +
                            data[indexResult].yAxisDescription + ': ' + data[indexResult].yDescription;

        counter += 1;
    }


    setTimeout(function() {
        drawPolygon(false);
    }, 4 * 1000);

    setTimeout(function() {
        drawOriginalresultsPolygon();
    }, 5 * 1000);

    if (!tooltipForResultCircleShowed) {
        setTimeout(function() {
            document.getElementById('divInstructionsForResults').style.display = 'block';
            document.getElementById('divInstructionsForResults').style.left = getPosition('tableResults').left + 'px';
            document.getElementById('divInstructionsForResults').style.top = getPosition('tableResults').top + 'px';

            tooltipForResultCircleShowed = true;
        }, 6 * 1000);
    }
}

var originalCircle1x = 0, originalCircle1y = 0;
var originalCircle2x = 0, originalCircle2y = 0;
var originalCircle3x = 0, originalCircle3y = 0;
var originalCircle4x = 0, originalCircle4y = 0;

function drawPolygon(drawOriginalAlso)
{
    var tableX = getPosition('tableResults').left;
    var tableY = getPosition('tableResults').top;

    var existingCanvas = document.getElementById('2d');
    if (existingCanvas) {
        existingCanvas.outerHTML = "";
    }

    var canvas = document.createElement('canvas');
    canvas.id = "2d";
    canvas.width = 600;
    canvas.height = 648;
    canvas.style.zIndex = 1;
    canvas.style.left = tableX + 'px';
    canvas.style.top = tableY + 'px';
    canvas.style.position = "absolute";
    canvas.style.opacity = 0.6;
    canvas.style.pointerEvents = 'none';

    document.body.appendChild(canvas);

    var c = document.getElementById("2d");

    if (enableDrawPolygon) {
        var ctx = c.getContext("2d");

        ctx.fillStyle = '#f8f8f8';
        ctx.beginPath();

        x = getPosition('circle1').left - tableX + 20;
        y = getPosition('circle1').top - tableY + 20;

        if (originalCircle1x == 0) {
            originalCircle1x = x;
            originalCircle1y = y;
        }

        ctx.moveTo(x, y);

        x = getPosition('circle2').left - tableX;
        y = getPosition('circle2').top - tableY + 20;

        if (originalCircle2x == 0) {
            originalCircle2x = x;
            originalCircle2y = y;
        }

        ctx.lineTo(x, y);

        x = getPosition('circle3').left - tableX;
        y = getPosition('circle3').top - tableY;

        if (originalCircle3x == 0) {
            originalCircle3x = x;
            originalCircle3y = y;
        }

        ctx.lineTo(x, y);

        x = getPosition('circle4').left - tableX + 20;
        y = getPosition('circle4').top - tableY;

        if (originalCircle4x == 0) {
            originalCircle4x = x;
            originalCircle4y = y;
        }

        ctx.lineTo(x, y);

        ctx.closePath();
        ctx.stroke();
    }

    drawArrow(302, 324, 0, 324, c);
    drawArrow(302, 324, 600, 324, c);
    drawArrow(302, 324, 302, 0, c);
    drawArrow(302, 324, 302, 648, c);

    if (drawOriginalAlso) {
        drawOriginalresultsPolygon();
    }
}

function drawArrow(fromx, fromy, tox, toy, drawTo)
{

    var ctx = drawTo.getContext("2d");
    var headlen = 10;

    var angle = Math.atan2(toy-fromy,tox-fromx);

    //starting path of the arrow from the start square to the end square and drawing the stroke
    ctx.beginPath();
    ctx.moveTo(fromx, fromy);
    ctx.lineTo(tox, toy);
    ctx.lineWidth = 1;
    ctx.stroke();

    //starting a new path from the head of the arrow to one of the sides of the point
    ctx.beginPath();
    ctx.moveTo(tox, toy);
    ctx.lineTo(tox-headlen*Math.cos(angle-Math.PI/7),toy-headlen*Math.sin(angle-Math.PI/7));

    //path from the side point of the arrow, to the other side point
    ctx.lineTo(tox-headlen*Math.cos(angle+Math.PI/7),toy-headlen*Math.sin(angle+Math.PI/7));

    //path from the side point back to the tip of the arrow, and then again to the opposite side point
    ctx.lineTo(tox, toy);
    ctx.lineTo(tox-headlen*Math.cos(angle-Math.PI/7),toy-headlen*Math.sin(angle-Math.PI/7));

    //draws the paths created above
    ctx.lineWidth = 1;
    ctx.stroke();
    ctx.fillStyle = "#cc0000";
    ctx.fill();
}

function drawOriginalresultsPolygon()
{
    var c = document.getElementById("2d");
    var originalCtx = c.getContext("2d");
    originalCtx.fillStyle = '#000000';
    originalCtx.setLineDash([1,5]);
    originalCtx.beginPath();
    originalCtx.moveTo(originalCircle1x, originalCircle1y);
    originalCtx.lineTo(originalCircle2x, originalCircle2y);
    originalCtx.lineTo(originalCircle3x, originalCircle3y);
    originalCtx.lineTo(originalCircle4x, originalCircle4y);
    originalCtx.closePath();
    originalCtx.stroke();
}

function getPosition(elementId)
{
    var elem = document.getElementById(elementId);
    var box = elem.getBoundingClientRect();

    var body = document.body;
    var docElem = document.documentElement;

    var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop;
    var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;

    var clientTop = docElem.clientTop;
    var clientLeft = docElem.clientLeft;


    var top = box.top + scrollTop - clientTop;
    var left = box.left + scrollLeft - clientLeft;
    var bottom = top + (box.bottom - box.top);
    var right = left + (box.right - box.left);

    return {
        top: Math.round(top),
        left: Math.round(left),
    }
}

function closeImprovements()
{
    document.getElementById('divImprovements').style.display = 'none';
}

function closeRegister()
{
    document.getElementById('divPersonRegisterLayer').style.display = 'none';
}

function closeCookies()
{
    document.getElementById('divCookiesLayer').style.display = 'none';
}

function circleClick(object, e)
{
    if (!e) e = window.event; //  IE Event Model

    var origX = object.style.left.replace("px", "");
    var origY = object.style.top.replace("px", "");
    var deltaX = event.clientX - origX, deltaY = event.clientY - origY;

    resultData[0].Questions = shuffleArray(resultData[0].Questions);
    resultData[1].Questions = shuffleArray(resultData[1].Questions);
    resultData[2].Questions = shuffleArray(resultData[2].Questions);
    resultData[3].Questions = shuffleArray(resultData[3].Questions);

    showImprovementBox(object, e.clientX + window.scrollX, e.clientY + window.scrollY);
    showImprovements(object, e.clientX - deltaX, e.clientY - deltaY);
}

//
//  Drag.js:    drag absolutely positioned HTML elements.
//
//  This module defines a single drag() function that is designed to be called
//  from an onmousedown event handler. Subsequent mousemove event will
//  move the specified element. A mouseup event will terminate the drag.
//  If the element is dragged off the screen, the window does not scroll.
//  This implementation works with both the DOM Level 2 event model and the
//  IE event model.
//
//  Arguments:
//
//      elementToDrag: the element that received the mousedown event or
//          some containing element. It must be absolutely positioned. Its
//          style.left and style.top values will be changed based on the user's
//          drag.
//
//      event: ethe Event object for the mousedown event.
//
//  Author: David Flanagan; Javascript: The Definitive Guide (O'Reilly)
//  Page: 422
//


    function drag(elementToDrag, event)
    {
        var startX = event.clientX || event.targetTouches[0].pageX;
        var startY = event.clientY || event.targetTouches[0].pageY;
        var origX = elementToDrag.style.left.replace("px", "");
        var origY = elementToDrag.style.top.replace("px", "");

        // Even though the coordinates are computed in different
        // coordinate systems, we can still compute the difference between them
        // and use it in the moveHandler() function. This works because
        // the scrollbar positoin never changes during the drag.
        var deltaX = startX - origX, deltaY = startY - origY;

        // Register the event handlers that will respond to the mousemove events
        // and the mouseup event that follow this mousedown event.
        if (document.addEventListener) //DOM Level 2 event model
        {
            // Register capturing event handlers
            document.addEventListener("mousemove", moveHandler, true);
            document.addEventListener("mouseup", upHandler, true);

            document.addEventListener("touchmove", moveHandler, true);
            document.addEventListener("touchend", upHandler, true);
        }

        // We've handled this event. Don't let anybody else see it.
        if (event.stopPropagation) event.stopPropagation();    //  DOM Level 2
        else event.cancelBubble = true;                        //  IE

        // Now prevent any default action.
        if (event.preventDefault) event.preventDefault();      //  DOM Level 2
        else event.returnValue = false;                        //  IE

        /**
        * This is the handler that captures mousemove events when an element
        * is being dragged. It is responsible for moving the element.
        **/
        function moveHandler(e)
        {
            if (!e) e = window.event; //  IE Event Model

            // Move the element to the current mouse position, adjusted as
            // necessary by the offset of the initial mouse-click.
            elementToDrag.style.left = ((e.clientX || event.targetTouches[0].pageX) - deltaX) + "px";
            elementToDrag.style.top = ((e.clientY || event.targetTouches[0].pageY) - deltaY) + "px";

            // And don't let anyone else see this event.
            if (e.stopPropagation) e.stopPropagation();       // DOM Level 2
            else e.cancelBubble = true;                       // IE

            showImprovementBox(elementToDrag, (e.clientX || event.targetTouches[0].pageX) + window.scrollX, (e.clientY || event.targetTouches[0].pageY) + window.scrollY);

            drawPolygon(enableDrawOriginalPolygon);
            showImprovements(elementToDrag, ((e.clientX || event.targetTouches[0].pageX) - deltaX), ((e.clientY || event.targetTouches[0].pageY) - deltaY));
        }

        /**
        * This is the handler that captures the final mouseup event that
        * occurs at the end of a drag.
        **/
        function upHandler(e)
        {
            if (!e) e = window.event;    //IE Event Model

            // Unregister the capturing event handlers.
            if (document.removeEventListener) // DOM event model
            {
                document.removeEventListener("mouseup", upHandler, true);
                document.removeEventListener("mousemove", moveHandler, true);

                document.removeEventListener("touchmove", moveHandler, true);
                document.removeEventListener("touchend", upHandler, true);
            }

            //  And don't let the event propagate any further.
            if (e.stopPropagation) e.stopPropagation(); //DOM Level 2
            else e.cancelBubble = true;                 //IE

            if (elementToDrag.style.left.replace("px", "") <= 0) {
                elementToDrag.style.left = '0px';
            }

            if (elementToDrag.style.top.replace("px", "") <= 0) {
                elementToDrag.style.top = '0px';
            }

            if (elementToDrag.style.left.replace("px", "") >= WIDTH_HEIGHT_SIZE) {
                elementToDrag.style.left = WIDTH_HEIGHT_SIZE + 'px';
            }

            if (elementToDrag.style.top.replace("px", "") >= WIDTH_HEIGHT_SIZE) {
                elementToDrag.style.top = WIDTH_HEIGHT_SIZE + 'px';
            }

            drawPolygon(enableDrawOriginalPolygon);

        }
    }

    function showImprovementBox(object, x, y)
    {

        var w = window,
            d = document,
            e = d.documentElement,
            g = d.getElementsByTagName('body')[0],
            window_x = w.innerWidth || e.clientWidth || g.clientWidth,
            window_y = w.innerHeight|| e.clientHeight|| g.clientHeight;

        var positionX, positionY;

        if (areWeOnMobile()) {
            switch (object.id) {
                case 'circle1':
                case 'circle4':
                    positionX = getPosition('graybox2').left;
                    positionY = getPosition('graybox2').top;
                    break;

                case 'circle2':
                case 'circle3':
                    positionX = getPosition('graybox1').left;
                    positionY = getPosition('graybox1').top;
                    break;
            }
        }
        else  {
            // decide the best place to be
            if (window_x >= 1000 + (WIDTH_HEIGHT_SIZE * 2)) {
                positionX = getPosition('graybox1').left - WIDTH_HEIGHT_SIZE - 60;
                positionY = getPosition('graybox1').top;
            }
            else {
                positionX = getPosition('divInformationAndConversation').left - 20;
                positionY = getPosition('graybox1').top;
            }
        }

        improvements = document.getElementById('divImprovements');
        improvements.style.position = 'absolute';
        improvements.style.display = 'block';
        improvements.style.left = positionX - 21 + 'px';
        improvements.style.top = positionY - 21 + 'px';
        improvements.style.width = (WIDTH_HEIGHT_SIZE + 22) + 'px';
        improvements.style.height = ((WIDTH_HEIGHT_SIZE + 40) * 2) + 'px';

    }

    function showImprovements(elementToDrag, x, y)
    {
        var improvements = document.getElementById('divImprovementsContents');
        var circleNumber = elementToDrag.id.substring(6) - 1;
        var newContent = '';

        document.getElementById('graybox1').style.border = '1px solid #dedede';
        document.getElementById('graybox2').style.border = '1px solid #dedede';
        document.getElementById('graybox3').style.border = '1px solid #dedede';
        document.getElementById('graybox4').style.border = '1px solid #dedede';
        document.getElementById('graybox' + (circleNumber + 1)).style.border = '1px solid black';

        var xCompareValue = 0;
        var yCompareValue = 0;

        switch (circleNumber) {
            case 0:
                xCompareValue = WIDTH_HEIGHT_SIZE - x;
                yCompareValue = WIDTH_HEIGHT_SIZE - y;
                break;

            case 1:
                xCompareValue = x;
                yCompareValue = WIDTH_HEIGHT_SIZE - y;
                break;

            case 2:
                xCompareValue = x;
                yCompareValue = y;
                break;

            case 3:
                xCompareValue = WIDTH_HEIGHT_SIZE - x;
                yCompareValue = y;
                break;
        }

        var relativeXPosition = parseInt(xCompareValue / WIDTH_HEIGHT_SIZE * 100);
        var relativeYPosition = parseInt(yCompareValue / WIDTH_HEIGHT_SIZE * 100);

        targetData[circleNumber].xTarget = relativeXPosition;
        targetData[circleNumber].yTarget = relativeYPosition;

        var relativeCurrentXPosition = parseInt(resultData[circleNumber].x / resultData[circleNumber].xMax * 100);
        var relativeCurrentYPosition = parseInt(resultData[circleNumber].y / resultData[circleNumber].yMax * 100);

        var xGoalState = '';
        var yGoalState = '';

        for (var indexAxisValue in resultData[circleNumber].AxisValues) {
            if (resultData[circleNumber].AxisValues[indexAxisValue].AxisDirection == 'x') {

                if (relativeXPosition >= resultData[circleNumber].AxisValues[indexAxisValue].ScaleStart &&
                    relativeXPosition <= resultData[circleNumber].AxisValues[indexAxisValue].ScaleEnd) {
                        xGoalState = resultData[circleNumber].AxisValues[indexAxisValue].Description;
                }
            }
        }

        newContent = '';
        newContent += "<b>" + resultData[circleNumber].name + "</b><br /><br />";
        newContent += resultData[circleNumber].Introduction + "<br /><br />";

        newContent += "<b>" + resultData[circleNumber].xAxisDescription + '</b><br>';

        newContent += "<table border=0>";
        newContent += "<tr>";
        newContent += "<td width='20%'>Nykytila</td>";
        newContent += "<td width='45%'><div class='progressBarPlaceholder' id='divProgressBarXCurrent'><div class='progressBarContent magenta' id='divProgressBarXCurrentContent'></div></div></td>";
        newContent += "<td width='35%' align='center'>" + resultData[circleNumber].xDescription + "</td>";
        newContent += "</tr>";
        newContent += "<tr>";
        newContent += "<td width='20%'>Tavoitetila</td>";
        newContent += "<td width='45%'><div class='progressBarPlaceholder' id='divProgressBarXGoal'><div class='progressBarContent green' id='divProgressBarXGoalContent'></div></div></td>";
        newContent += "<td width='35%' align='center'>" + xGoalState + "</td>";
        newContent += "</tr>";
        newContent += "</table>";


        for (var indexAxisValue in resultData[circleNumber].AxisValues) {
            if (resultData[circleNumber].AxisValues[indexAxisValue].AxisDirection == 'y') {

                if (relativeYPosition >= resultData[circleNumber].AxisValues[indexAxisValue].ScaleStart &&
                    relativeYPosition <= resultData[circleNumber].AxisValues[indexAxisValue].ScaleEnd) {
                        yGoalState = resultData[circleNumber].AxisValues[indexAxisValue].Description;
                }
            }
        }

        newContent += "<br />";
        newContent += "<b>" + resultData[circleNumber].yAxisDescription + '</b><br>';

        newContent += "<table border=0>";
        newContent += "<tr>";
        newContent += "<td width='20%'>Nykytila</td>";
        newContent += "<td width='45%'><div class='progressBarPlaceholder' id='divProgressBarYCurrent'><div class='progressBarContent magenta' id='divProgressBarYCurrentContent'></div></div></td>";
        newContent += "<td width='35%' align='center'>" + resultData[circleNumber].yDescription + "</td>";
        newContent += "</tr>";
        newContent += "<tr>";
        newContent += "<td width='20%'>Tavoitetila</td>";
        newContent += "<td width='45%'><div class='progressBarPlaceholder' id='divProgressBarYGoal'><div class='progressBarContent green' id='divProgressBarYGoalContent'></div></div></td>";
        newContent += "<td width='35%' align='center'>" + yGoalState + "</td>";
        newContent += "</tr>";
        newContent += "</table>";


        var position = document.getElementById('divCirclePosition' + (circleNumber + 1));
        position.style.position = 'relative';
        position.style.display = 'block';
        position.style.left = (x - 140) + 'px';
        position.style.top = y + 10 + 'px';
        position.innerHTML = resultData[circleNumber].xAxisDescription + ': ' + xGoalState + '<br />' +
                            resultData[circleNumber].yAxisDescription + ': ' + yGoalState;


        newContent += '<br />';
        newContent += "<b>Tärkeimmät parannusehdotukset</b><br />";

        newContent += "<div class='divImprovementCommentsBox'>";

        for (var indexImprovement in resultData[circleNumber].Questions) {
            if (resultData[circleNumber].Questions[indexImprovement].AxisDirection == 'x') {
                var relativeResponse = resultData[circleNumber].Questions[indexImprovement].ResponseValue / 5;

                if (relativeResponse < relativeXPosition) {
                    newContent += '- ' + resultData[circleNumber].Questions[indexImprovement].AreaName +
                    ': ' + resultData[circleNumber].Questions[indexImprovement].ImprovementSuggestion + '<br>';
                }
            }

            if (indexImprovement > 3) {
                break;
            }
        }

        for (var indexImprovement in resultData[circleNumber].Questions) {
            if (resultData[circleNumber].Questions[indexImprovement].AxisDirection == 'y') {
                var relativeResponse = resultData[circleNumber].Questions[indexImprovement].ResponseValue / 5;

                if (relativeResponse < relativeYPosition) {
                newContent += '- ' + resultData[circleNumber].Questions[indexImprovement].AreaName +
                    ': ' + resultData[circleNumber].Questions[indexImprovement].ImprovementSuggestion + '<br>';
                }
            }

            if (indexImprovement > 3) {
                break;
            }
        }

        newContent += "</div>";
        newContent += "<br />";
        newContent += "<input type='button' id='buttonImprovementSendResults' value='Jatka kattavaan raporttiin' />";
        
        improvements.innerHTML = newContent;

        document.getElementById('divProgressBarXCurrentContent').style.width = relativeCurrentXPosition + '%';
        document.getElementById('divProgressBarYCurrentContent').style.width = relativeCurrentYPosition + '%';

        document.getElementById('divProgressBarXGoalContent').style.width = relativeXPosition + '%';
        document.getElementById('divProgressBarYGoalContent').style.width = relativeYPosition + '%';

        document.getElementById('buttonImprovementSendResults').addEventListener("click", saveTargetsAndAskContacts);

    }

    function shuffleArray(array) {
        for (var i = array.length - 1; i > 0; i--) {
            var j = Math.floor(Math.random() * (i + 1));
            var temp = array[i];
            array[i] = array[j];
            array[j] = temp;
        }
        return array;
    }

    function closeMe(elementToClose)
    {
        elementToClose.innerHTML = '';
        elementToClose.style.display = 'none';
    }

    function minimizeMe(elementToMin, maxElement)
    {
        elementToMin.style.display = 'none';
    }




function loadChat(lastMaxId)
{
    var targetUrl = "questionnairehandler.aspx?method=getConversation&uniqueidentifier=" + encodeURIComponent(document.getElementById('uniqueidentifier').value) + "&lastMaxId=" + encodeURIComponent(lastMaxId);
    var xhttp = new XMLHttpRequest();

    xhttp.onreadystatechange = function () {
        if (xhttp.readyState == 4) {
            if (xhttp.status == 200) {
                processChat(JSON.parse(xhttp.responseText));
            }
            else {
                document.getElementById('divConversationArea').innerText = 'Virhe ladattaessa tietoja. Yritä myöhemmin uudelleen';
            }
        }
    };
    xhttp.open("GET", targetUrl, true);
    xhttp.send();
}

function processChat(data)
{
    var participantDiv = document.getElementById('divOtherParticipants');
    var participantData = '';
    var participantCount = 0;
    var someOneDone = false;

    participantData += "<table border=0 cellpadding=0 cellspacing=0 width=100%>";
    participantData += "<tr>";
    participantData += "<td class='border_bottom'><b>Kyselyn osallistujat</b></td>";
    participantData += "<td class='border_bottom' align=center><b>Tulos</b></td>";
    participantData += "</tr>";

    var arrayDrillableResults = new Array();

    
    var myResultClassName = 'divResultImageNotDone';
    

    participantData += "<tr>";
    participantData += "<td><div id='divCurrentParticipant'>&nbsp;</div> Minä</td>";
    participantData += "<td align=center><div id='divResults_0' class='" + myResultClassName + "'></div></td>";
    participantData += "</tr>";

    for (var participantIndex in data.Participants) {
        
        var styleActiveOrNot = 'divInactiveParticipant';
        if (data.Participants[participantIndex].Active > 1) {
            styleActiveOrNot = 'divActiveParticipant';
        }
        
        var person = data.Participants[participantIndex].Person;

        if (person.length > 25)  {
            person = person.substring(0, 25) + "..";
        }

        var resultClassName = 'divResultImageNotDone';

        if (data.Participants[participantIndex].Active == 4) {
            resultClassName = 'divResultImageDone';
            someOneDone = true;

            arrayDrillableResults.push(data.Participants[participantIndex].ID);
        }

        participantData += "<tr>";
        participantData += "<td>";
        participantData += "<div id='" + styleActiveOrNot + "'></div> <div id='divParticipantEmail' title='Aloitettu " +
                            HtmlEncode(data.Participants[participantIndex].Started) + "'>" +
                            HtmlEncode(person) + "</div>";
        participantData += "</td>";
        participantData += "<td align=center><div id='divResults_" + data.Participants[participantIndex].ID + "' class='" + resultClassName + "'></div></td>";
        participantData += "</tr>";

        participantCount += 1;
    }

    //if (participantCount > 0) {
    //
    //    var averageResultClassName = 'divResultImageNotDone';
    //
    //    if (someOneDone) {
    //        averageResultClassName = 'divResultImageDone';
    //        arrayDrillableResults.push(-1);
    //    }
    //
    //    participantData += "<tr>";
    //    participantData += "<td class='border_top'><b>Yrityksen keskiarvo</b></td>";
    //    participantData += "<td align=center><div id='divResults_-1' class='" + averageResultClassName + "'></div></td>";
    //    participantData += "</tr>";
    //}

    participantData += "</table>";

    if (participantCount > 0) {
        document.getElementById('divConversation').style.display = 'block';
        document.getElementById('divParticipantCount').innerText = participantCount + 1;
    }

    participantDiv.innerHTML = participantData;

    for (var indexDrill in arrayDrillableResults) {
        document.getElementById('divResults_' + arrayDrillableResults[indexDrill]).addEventListener("click", clickOnResults);
    }


    var questionDiv = document.getElementById('divConversationArea');

    for (var chatIndex in data.Conversation) {

        var fromWhom = data.Conversation[chatIndex].From;
        if (fromWhom == null) {2
            fromWhom = 'Minä';
        }
        else if (fromWhom.length == 0) {
            fromWhom = 'Minä';
        }

        questionDiv.innerHTML += "<div id='divConversationAreaComment'><b>" + HtmlEncode(fromWhom) + "</b><br>" + HtmlEncode(data.Conversation[chatIndex].Comment) + "</div>";

        if (data.Conversation[chatIndex].ID >= lastChatId) {
            lastChatId = data.Conversation[chatIndex].ID;
        }
    }

    questionDiv.scrollTop = 0;

    if (participantCount > 0) {
        setTimeout(function () {
            loadChat(lastChatId);
        }, 15000);
    }
}

function areWeOnMobile()
{
    var check = false;
    (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera);
    return check;
}

function submitNewComment()
{
    var targetUrl = "questionnairehandler.aspx?method=newComment&uniqueidentifier=" + encodeURIComponent(document.getElementById('uniqueidentifier').value) + "&comment=" + encodeURIComponent(document.getElementById('conversationNewCommentInput').value);
    var xhttp = new XMLHttpRequest();

    xhttp.onreadystatechange = function () {
        if (xhttp.readyState == 4) {
            if (xhttp.status == 200) {
                loadChat(lastChatId);
            }
            else {
                document.getElementById('conversationNewCommentInput').style.backgroundColor = 'red';
                document.getElementById('conversationNewCommentInput').style.color = 'white';
                document.getElementById('conversationNewCommentInput').value = 'Virheellinen syöte, yritä uudelleen';
                setTimeout(function () {
                    document.getElementById('conversationNewCommentInput').style.backgroundColor = 'white';
                    document.getElementById('conversationNewCommentInput').style.color = 'black';
                    document.getElementById('conversationNewCommentInput').value = '';
                }, 5000);
            }
        }
    };
    xhttp.open("GET", targetUrl, true);
    xhttp.send();

    document.getElementById('conversationNewCommentInput').value = '';
}

function clickOnResults()
{
    var responseId = this.id.substring(11);

    loadResultPage(responseId);
}

function handleKeyInput(event)
{
    if (event.keyCode == 13) {
        submitNewComment();
    }
}

function showAddParticipant()
{
    if (document.getElementById('divAddParticipantForm').style.display == 'block') {
        document.getElementById('divAddParticipantForm').style.display = 'none';
    }
    else {
        document.getElementById('divAddParticipantForm').style.display = 'block';
        document.getElementById('participantInputTo').focus();
    }

    if (myName.length > 0) {
        document.getElementById('participantInputFrom').value = myName;
    }
}

function addNewParticipant()
{
    var forwardEmail = document.getElementById('participantInputTo').value;
    var fromUser = document.getElementById('participantInputFrom').value;
    var targetLanguage = document.getElementById('participantLanguage').value;
    var targetUrl = "questionnairehandler.aspx?method=addParticipant&uniqueidentifier=" + encodeURIComponent(document.getElementById('uniqueidentifier').value) + "&from=" + encodeURIComponent(fromUser) + "&to=" + encodeURIComponent(forwardEmail) + "&language=" + encodeURIComponent(targetLanguage);
    var xhttp = new XMLHttpRequest();

    if (myName.length == 0) {
        myName = fromUser;
        showLoginBalloon();
    }

    xhttp.onreadystatechange = function () {
        if (xhttp.readyState == 4) {
            if (xhttp.status == 200) {
                document.getElementById('divAddParticipantForm').style.display = 'none';
                loadChat(lastChatId);
            }
            else {
                document.getElementById('participantInputTo').style.backgroundColor = 'red';
                document.getElementById('participantInputTo').style.color = 'white';
                document.getElementById('participantInputTo').value = 'Virheellinen syöte, yritä uudelleen';
                setTimeout(function () {
                    document.getElementById('participantInputTo').style.backgroundColor = 'white';
                    document.getElementById('participantInputTo').style.color = 'black';
                    document.getElementById('participantInputTo').value = '';
                }, 5000);
            }
        }
    };

    xhttp.open("GET", targetUrl, true);
    xhttp.send();

    document.getElementById('participantInputTo').value = '';
    document.getElementById('participantInputFrom').value = '';
}

function isEmpty(str)
{
    return (!str || 0 === str.length);
}

function closeResultsByEmail()
{
    document.getElementById('divPromoteSendByEmail').style.display = 'none';
}

function closeContacts()
{
    document.getElementById('divAskForContacts').style.display = 'none';
}

function saveTargetsAndAskContacts()
{
    drawSpinner();

    var targetUrl = "questionnairehandler.aspx?method=saveTargets&uniqueidentifier=" +
                    encodeURIComponent(document.getElementById('uniqueidentifier').value);

    for (var indexResult in resultData) {

        var maxX = resultData[indexResult].xMax;
        var maxY = resultData[indexResult].yMax;

        var xRelative = parseInt(resultData[indexResult].x / maxX * 100);
        var yRelative = parseInt(resultData[indexResult].y / maxY * 100);

        var xTarget = targetData[indexResult].xTarget
        var yTarget = targetData[indexResult].yTarget

        if (isEmpty(xTarget)) {
            xTarget = xRelative;
        }

        if (isEmpty(yTarget)) {
            yTarget = yRelative;
        }

        targetUrl += "&g" + indexResult + "=" + resultData[indexResult].ID;

        targetUrl += "&x" + indexResult + "=" + xRelative;
        targetUrl += "&y" + indexResult + "=" + yRelative;

        targetUrl += "&xt" + indexResult + "=" + xTarget;
        targetUrl += "&yt" + indexResult + "=" + yTarget;
    }

    var xhttp = new XMLHttpRequest();

    xhttp.onreadystatechange = function () {
        if (xhttp.readyState == 4) {
            if (xhttp.status == 200) {
                spinner.stop();
                document.getElementById('divAskForContacts').style.display = 'block';
            }
            else {
                alert('Virheellinen syöte, yritä uudelleen');
            }
        }
    };

    xhttp.open("GET", targetUrl, true);
    xhttp.send();
}

function sendByEmail()
{
    handleResults('email');
}

function openResults()
{
    handleResults('resultstoscreen');
}

function handleResults(method)
{
    var resultsToEmail = document.getElementById('inputSendResults').value;
    var name = '';
    var organization = '';
    var phone = '';

    //var name = document.getElementById('inputContactName').value;
    //var organization = document.getElementById('inputContactOrganization').value;
    //var phone = document.getElementById('inputContactPhone').value;

    if (isEmpty(resultsToEmail)) {

        Opentip.lastZIndex = 50000;
        
        var tip = new Opentip("a", { target: "input#buttonGetResults",
                                tipJoint: "bottom left",
                                hideTriggers: [ "closeButton" ],
                                closeButtonCrossColor: '#d2195b'
                            });
        tip.setContent("Osa yhteystiedoista puuttuu. Yhteystiedot ovat pakolliset raporttia varten");
        tip.show();

        Opentip.lastZIndex = 1000;

        return;
    }

    if (method == 'email') {
        handleSendByEmail(resultsToEmail, name, organization, phone);
    }
    else {
        var targetUrl = "generatereport.aspx?" +
                "to=" + encodeURIComponent(resultsToEmail) +
                "&name=" + encodeURIComponent(name) +
                "&organization=" + encodeURIComponent(organization) +
                "&phone=" + encodeURIComponent(phone);

        var win = window.open(targetUrl, '_blank');
        win.focus();
    }
}

function subscribeNewsletter()
{
    var targetUrl = "questionnairehandler.aspx?method=subscribeNewsletter&uniqueidentifier=" + encodeURIComponent(document.getElementById('uniqueidentifier').value) + "&email=" + encodeURIComponent(document.getElementById('inputNewsletter').value);
    var xhttp = new XMLHttpRequest();

    xhttp.onreadystatechange = function () {
        if (xhttp.readyState == 4) {
            if (xhttp.status == 200) {
                document.getElementById('btnSubscribeNewsletter').value = 'Lähetetty';
                document.getElementById('btnSubscribeNewsletter').style.backgroundColor = 'green';
            }
            else {
                document.getElementById('inputNewsletter').style.backgroundColor = 'red';
                document.getElementById('inputNewsletter').style.color = 'white';
                document.getElementById('inputNewsletter').value = 'Virheellinen syöte, yritä uudelleen';
                setTimeout(function () {
                    document.getElementById('inputNewsletter').style.backgroundColor = 'white';
                    document.getElementById('inputNewsletter').style.color = 'black';
                    document.getElementById('inputNewsletter').value = '';
                }, 5000);
            }
        }
    };
    xhttp.open("GET", targetUrl, true);
    xhttp.send();
}

function sendFeedback()
{
    var targetUrl = "questionnairehandler.aspx?method=sendFeedback&uniqueidentifier=" + encodeURIComponent(document.getElementById('uniqueidentifier').value) + "&comment=" + encodeURIComponent(document.getElementById('textFeedback').value);
    var xhttp = new XMLHttpRequest();

    xhttp.onreadystatechange = function () {
        if (xhttp.readyState == 4) {
            if (xhttp.status == 200) {
                document.getElementById('buttonSendFeedback').value = 'Lähetetty';
                document.getElementById('buttonSendFeedback').style.backgroundColor = 'green';

                setTimeout(function () {
                    document.getElementById('divFeedbackForm').style.display = 'none';
                }, 3000);
            }
            else {
                document.getElementById('textFeedback').style.backgroundColor = 'red';
                document.getElementById('textFeedback').style.color = 'white';
                document.getElementById('textFeedback').value = 'Virheellinen syöte, yritä uudelleen';
                setTimeout(function () {
                    document.getElementById('textFeedback').style.backgroundColor = 'white';
                    document.getElementById('textFeedback').style.color = 'black';
                    document.getElementById('textFeedback').value = '';
                }, 5000);
            }
        }
    };
    xhttp.open("GET", targetUrl, true);
    xhttp.send();
}

function closeResults()
{
    document.getElementById('divResultsPdf').style.display = 'none';
}

function handleSendByEmail(resultsToEmail, name, organization, phone)
{
    var targetUrl = "questionnairehandler.aspx?method=sendResults&uniqueidentifier=" +
            encodeURIComponent(document.getElementById('uniqueidentifier').value) +
            "&to=" + encodeURIComponent(resultsToEmail) +
            "&name=" + encodeURIComponent(name) +
            "&organization=" + encodeURIComponent(organization) +
            "&phone=" + encodeURIComponent(phone);
    var xhttp = new XMLHttpRequest();

    if (myName.length == 0) {
        myName = name;
        showLoginBalloon();
    }

    document.getElementById('buttonSendByEmail').value = 'Lähetetään..';

    xhttp.onreadystatechange = function () {
        if (xhttp.readyState == 4) {
            if (xhttp.status == 200) {
                document.getElementById('buttonSendByEmail').value = 'Lähetetty';
                document.getElementById('buttonSendByEmail').style.backgroundColor = 'green';

                setTimeout(function () {
                    document.getElementById('divAskForContacts').style.display = 'none';
                }, 3000);
            }
            else {
                document.getElementById('inputSendResults').style.backgroundColor = 'red';
                document.getElementById('inputSendResults').style.color = 'white';
                document.getElementById('inputSendResults').value = 'Virheellinen syöte, yritä uudelleen';
                setTimeout(function () {
                    document.getElementById('inputSendResults').style.backgroundColor = 'white';
                    document.getElementById('inputSendResults').style.color = 'black';
                    document.getElementById('inputSendResults').value = '';
                }, 5000);
            }
        }
    };

    xhttp.open("GET", targetUrl, true);
    xhttp.send();
}


function openPersonRegisterFrame()
{
    document.getElementById('divPersonRegisterLayer').style.display = 'block';
}

function openCookiesFrame()
{
    document.getElementById('divCookiesLayer').style.display = 'block';
}

function openFeedback()
{
    document.getElementById('divFeedbackForm').style.display = 'block';
}

function closeFeedback()
{
    document.getElementById('divFeedbackForm').style.display = 'none';
}

function closeInstructions()
{
    document.getElementById('divInstructionsForResults').style.display = 'none';
}

function showLoginBalloon()
{
    if (myName.length > 0) {

        var abbreviation = myName.substring(0, 1);
        var balloon = document.getElementById('divLoginBalloon');
        var balloonText = document.getElementById('divLoginBalloonText');

        balloon.innerText = abbreviation;
        balloon.style.display = 'block';
        balloon.style.left = (getPosition('tableMain').left + 930) + 'px';
        balloon.style.top = (getPosition('tableMain').top - 35) + 'px';

        balloonText.innerText = myName;
        balloonText.style.display = 'block';
        balloonText.style.left = (getPosition('tableMain').left + 900) + 'px';
        balloonText.style.top = (getPosition('tableMain').top) + 'px';

    }
}