var oldStructure = '<tr><td id="survey"></td><td id="survey_submit"><img id="submit" style="cursor:pointer;" src="img/bnextlow.gif" border="0" alt="Weiter"></td></tr>';
var selectedAnswer;
var returnContent = new Array(5);

// Die Ergebnisse zu den jeweiligen Antworten. Bei Anpassung immer darauf achten, einen Backslash bei einem Zeilenumbruch innerhalb der Variable zu setzen
returnContent[1] = '\
    <p style="display:none;">Sie haben Antwort 1 gewaehlt</p>';

returnContent[2] = '\
    <p style="display:none;">Sie haben Antwort 2 gewaehlt</p>';

returnContent[3] = '\
    <p style="display:none;">Sie haben Antwort 3 gewaehlt</p>';

returnContent[4] = '\
    <p style="display:none;">Sie haben Antwort 4 gewaehlt</p>';

returnContent[5] = '\
    <p style="display:none;">Sie haben Antwort 5 gewaehlt</p>';

// Die einzelnen Fragen
var questions = '\
    <table>\
    <tr><td><input type="radio" class="survey" name="choice" value="1" /></td><td>Ich war noch nie Selbständig, und möchte ein Unternehmen gründen. Dann gehöre ich zu den 400.000 Neugründungen in Deutschland (im Jahr).</td></tr>\
    <tr><td><input type="radio" class="survey" name="choice" value="2" /></td><td>Ich bin bereits Selbständig und möchte wissen ob ich zu den 500.000 von der Pleite bedrohten Unternehmen in Deutschland (im Jahr) gehöre.</td></tr>\
    <tr><td><input type="radio" class="survey" name="choice" value="3" /></td><td>Ich bin bereits „pleite“ und gehöre zu den 46.000 Pleiten in Deutschland (im Jahr).</td></tr>\
    <tr><td><input type="radio" class="survey" name="choice" value="4" /></td><td>Ich werde Insolvenz für meine Firma anmelden.</td></tr>\
    <tr><td><input type="radio" class="survey" name="choice" value="5" /></td><td>Ich habe bereits Insolvenz für meine Firma angemeldet.</td></tr>\
    </table>';

var highestResult;

function getStats(element) {
    $.get("api.php", { action: "getHighestResult" }, function(data) {
        highestResult = data;
        var maxWidth = "100"; // maximale Breite
        var steps = maxWidth / highestResult; // wieviele Pixel pro Antwort

        // in results die einzelnen Ergebnisse einlesen
        // aus der fertigen Variable results die Balken bauen und ausgeben

        $.getJSON("api.php", { action: "getResultsJSON" }, function(json) {
            var widths = new Array(5);
            widths[1] = json.answer1 * steps;
            widths[2] = json.answer2 * steps;
            widths[3] = json.answer3 * steps;
            widths[4] = json.answer4 * steps;
            widths[5] = json.answer5 * steps;
            
            var answersCount = parseInt(json.answer1)+parseInt(json.answer2)+parseInt(json.answer3)+parseInt(json.answer4)+parseInt(json.answer5);
            var answersPercent = new Array(5);
            answersPercent[1] = Math.round((json.answer1 * 100) / answersCount);
            answersPercent[2] = Math.round((json.answer2 * 100) / answersCount);
            answersPercent[3] = Math.round((json.answer3 * 100) / answersCount);
            answersPercent[4] = Math.round((json.answer4 * 100) / answersCount);
            answersPercent[5] = Math.round((json.answer5 * 100) / answersCount);
            
            var score = '\
                <style type="text/css">\
                <!--\
                    table#score td { font-size:8pt; }\
                -->\
                </style>\
                <table id="score" style="display:none;">\
                    <tr>\
                        <td align="right">Gr&uuml;nder</td>\
                        <td><img src="img/balken.gif" style="background-color:transparent;height:10px; width: '+widths[1]+'px;" /> '+answersPercent[1]+'%\
                    </tr>\
                    <tr>\
                        <td align="right">Pleite bedroht</td>\
                        <td><img src="img/balken.gif" style="background-color:transparent;height:10px; width: '+widths[2]+'px;" /> '+answersPercent[2]+'%\
                    </tr>\
                    <tr>\
                        <td align="right">Pleite</td>\
                        <td><img src="img/balken.gif" style="background-color:transparent;height:10px; width: '+widths[3]+'px;" /> '+answersPercent[3]+'%\
                    </tr>\
                    <tr>\
                        <td align="right">Insolvenz noch nicht angemeldet</td>\
                        <td><img src="img/balken.gif" style="background-color:transparent;height:10px; width: '+widths[4]+'px;" /> '+answersPercent[4]+'%\
                    </tr>\
                    <tr>\
                        <td align="right">Insolvenz angemeldet</td>\
                        <td><img src="img/balken.gif" style="background-color:transparent;height:10px; width: '+widths[5]+'px;" /> '+answersPercent[5]+'%\
                    </tr>\
                </div>\
                ';
            $(element).html(score);
            $("table#score").fadeIn(500);
        });
    });
    
}

function registerBackButton(answerToDecrement) {
    var BackButton = '<a href="" id="backbutton">Korrigieren</a>';
    $("td#newStructureRight").append(BackButton);
    
    $("#backbutton").click( function() {
        $.get("api.php", { action: "decrementAnswer", answer: answerToDecrement }, function() {
            $("table#survey_table").fadeOut(500, function() {
                showFirstPage();
            });
        });
        return false;
    });
}

function showFirstPage() {
    $("table#survey_table").empty();
    $("table#survey_table").append(oldStructure);
	$("td#survey").append(questions);
    $("table#survey_table").fadeIn(500);
    
    $("img#submit").click( function() {
        submitAnswer();
    });
    
}

function submitAnswer() {
    // todo: abfrage ob ein radio-button selektiert wurde, ggfs. abfangen
    
    if ( $('input[@name="choice"]:checked').val() < 1 ) {
        alert("Es muss eine Antwort angeklickt werden!");
        return false;
    }
    
    selectedAnswer = $('input[@name="choice"]:checked').val();
    $("#survey_table").fadeOut(500, function() { 

        // die Tabelle leeren, damit eine neue Struktur rein kommen kann fuer das Ergebnis
        $("table#survey_table").empty();
        
        // die neue Struktur einfuegen
        var newStructure = '<tr><td id="newStructureLeft" style="display:none;width:50%; vertical-align:top;"></td><td id="newStructureRight" style="display:none; width:50%; vertical-align:top;"></td></tr>';
        $("table#survey_table").append(newStructure);
        
        $.get("api.php", { action: "incrementAnswer", answer: selectedAnswer }, function() {
            getStats("td#newStructureLeft"); // Statistik einfuegen
            $("td#newStructureRight").append(returnContent[selectedAnswer]); // Ergebnis-Text einfuegen
            registerBackButton(selectedAnswer);
            $("#newStructureLeft").show();
            $("#newStructureRight").show();
            $("#newStructureRight > p").show();
            $("table#survey_table").fadeIn(500); // wieder einblenden

        });
        
    });
}

$(document).ready( function() {
    showFirstPage();
});