$slideInOffset = 580;
$currentQuestion = 0
$pastContainer = false;
$nextContainer = false;
$endQuestion = 5;
$answerList = new Array();

$(document).ready(function(){
    $slideContainer = $("#slideContainer");
    slideIn($currentQuestion);
});

function startPage(){
    $slideContainer.append('<div class="innerContainer" id="qStart">スタートページ、<a href="javascript:next();">次</a></div>');
    $currentContainer = $('#qStart');
    $currentContainer.css({
        left: $slideInOffset + "px"
    });
    $currentContainer.animate({
        left: "0px"
    }, "slow");
    $pastContainer = $currentContainer;
}

//------------------------------------------------------------------------------------//
//	validate
//------------------------------------------------------------------------------------//
function validate(){
    if ($("input[name='data[Form][Answer]']:checked").val() == undefined) {
    } else {
        $answerList.push($("input[name='data[Form][Answer]']:checked").val());
        next();
    }
}

//------------------------------------------------------------------------------------//
//	next
//------------------------------------------------------------------------------------//
function next(){
    if ($pastContainer) {
        var tmp = $pastContainer;
        $pastContainer.animate({
            left: -$slideInOffset + "px"
        }, "slow", function(){
            tmp.remove();
        });
    }
    ++$currentQuestion;
    if ($currentQuestion > $endQuestion) {
    
    } else {
        slideIn($currentQuestion);
    }
}

//------------------------------------------------------------------------------------//
//	slideIn
//------------------------------------------------------------------------------------//
function slideIn(q){
    $slideContainer.append('<div class="innerContainer" id="q' + q + '"></div>');
    $currentContainer = $('#q' + q);
    $currentContainer.css({
        left: $slideInOffset + "px"
    });
    appendQuestionAndTitle($currentContainer, q);
    $("input[name='data[Form][Answer]']").attr('checked', false);
    $currentContainer.animate({
        left: "0px"
    }, "slow");
    $pastContainer = $currentContainer;
}

function appendQuestionAndTitle2(){
    appendValue = '<h2><img src="img/shindanbox_title_q1.png" width="460" height="101" alt="Q1 あなたの肌タイプは？" /></h2><ul class="clearfix"><li><input type="radio" id="FormAnswer1" name="a" /> <span> <label for="FormAnswer1">AAAA</label> </span></li><li><input type="radio" id="FormAnswer2" name="a" /> <span> <label for="FormAnswer2"> </label> </span></li><li><input type="radio" id="FormAnswer3" name="a" /> <span> <label for="FormAnswer3"> </label> </span></li></ul><p class="button"><input type="image" src="img/shindanbox_btn_next.png" alt="次へ" title="次へ" onmouseover="this.src=';
    appendValue += "'img/shindanbox_btn_next_on.png'\" onmouseout=\"this.src='img/shindanbox_btn_next.png'";
    appendValue += '" /></p>';
    $currentContainer.append(appendValue);
}

function appendQuestionAndTitle($currentContainer, q){
    var array = getTitleAndChoices($answerList);
    var appendValue = '<h2 class="questionTitleFix">' + array[0] + '</h2>';
    if ($currentQuestion >= 4) {
        appendValue += '<form id="IndexForm" method="post" action="result/"><fieldset style="display:none;"><input type="hidden" name="_method" value="POST" /></fieldset>' +
        '<input type="hidden" name="data[Form][AnswerTotal]" id="total"/>' +
        '<input type="hidden" name="data[Form][Answer]" id="FormAnswer_" value="" />';
    }
    if ($currentQuestion == 3) {
        appendValue += '<ul class="clearfix q4">';
	} else if($currentQuestion == 4){
	    appendValue += '<ul class="clearfix q5">';
    } else {
        appendValue += '<ul class="clearfix">';
    }
    for (var i = 0; i < array[1].length; i++) {
        appendValue += '<li><input type="radio" name="data[Form][Answer]" id="FormAnswer' + (i + 1) + '" class="formRadio" value="' + (i + 1) + '" /><span><label for="FormAnswer' + (i + 1) + '">' + array[1][i] + '</label></span></li>';
    }
    appendValue += '</ul>';
    if ($currentQuestion >= 4) {
        appendValue += '<p class="button"><input type="image" src="img/shindanbox_btn_next.png" alt="次へ" title="次へ" onmouseover="this.src=\'img/shindanbox_btn_next_on.png\'" onmouseout="this.src=\'img/shindanbox_btn_next.png\'" /></p>';
        appendValue += '</form>';
    } else {
        appendValue += '<p class="button"><a href="javascript:validate();"><img src="img/shindanbox_btn_next.png" alt="次へ" title="次へ" onmouseover="this.src=\'img/shindanbox_btn_next_on.png\'" onmouseout="this.src=\'img/shindanbox_btn_next.png\'" /></a></p>';
    }
    $currentContainer.append(appendValue);
	$('.questionTitleFix').pngFix();
    if ($currentQuestion >= 4) {
        $("form").bind("submit", function(event){
            if ($("input[name='data[Form][Answer]']:checked").val() == undefined) {
                event.preventDefault();
            } else {
                $answerList.push($("input[name='data[Form][Answer]']:checked").val());
                $("#total").val($answerList.join(','));
            }
        });
    }
}