function bunload(){
    return "Als u naar een andere pagina gaat, moet u opnieuw beginnen met de prijsvraag.";
}

var prijsvraag = new Class
({
  canvas: null,
  questions: new Array(),
  answers: new Array(),
  fullTextAnswers: new Array(),
  currentQuestion: -1,

  initialize: function( canvasId, questionsArray )
  {
    canvas = $(canvasId);
    questions = questionsArray;
    window.addEvent('domready', function(){ this.boot(); }.bind(this));
  },
  
  clear: function ()
  {
    canvas.removeChild( canvas.getElement( 'h1' ) );
    canvas.removeChild( canvas.getElement( 'ul.answers' ) );
  },
  
  handleAnswer: function ( index, link )
  {
    this.saveAnswer( index, link );
    this.saveFullTextAnswer( index, link );
    var counterId = 'questionTag['+ this.currentQuestion +']';
    $(counterId).addClass( 'done' );
    this.next();
  },
  
  setCurrentCounter: function ()
  {
    var previous = $E('li.current');
    if ( previous ) { 
      previous.removeClass( 'current' );
    }
    var counterId = 'questionTag['+ this.currentQuestion +']';
    $(counterId).removeClass( 'wieler' );
    $(counterId).removeClass( 'cultuur' );
    $(counterId).addClass( 'current' );
  },
  
  saveAnswer: function ( index, link )
  {
    this.answers[this.currentQuestion] = index;
  },
  
  saveFullTextAnswer: function ( index, link )
  {
    var question = canvas.getElement( 'h1' );  
    this.fullTextAnswers[this.currentQuestion] = { quesion: question.getText(), answer: link.getText() };
  },
  
  next: function ()
  {
    this.clear();
    if( this.isLastQuestion( this.currentQuestion ) ) {
      this.paintForm();
    } else {
      this.currentQuestion++;
      this.paintQuestion();
      this.setCurrentCounter();
    }
  },
  
  paintQuestion: function()
  {
    if(window.onbeforeunload != bunload) window.onbeforeunload = bunload;
    var question = questions[this.currentQuestion];
    var title = new Element( 'h1' ).setHTML( question.question );
    var ul = new Element( 'ul' );
    ul.addClass( 'answers' );
    question.options.each( function( option, key ) {
      ul.appendChild( this.paintOption( key, option ) );
    }.bind(this) );
    canvas.appendChild( title );
    canvas.appendChild( ul );
  },
  
  paintOption: function ( key, option )
  {
    var li = new Element( 'li' );
    var a = new Element( 'a' );
    var myInstance = this;
    key += 1;
    a.addEvent( 'click', function () { myInstance.handleAnswer( key, this ) } );
    a.href = '#';
    a.setHTML( option );
    switch( key ) {
      case 1: li.addClass( 'one' ); break;
      case 2: li.addClass( 'two' ); break;
      case 3: li.addClass( 'three' ); break;
    }
    li.appendChild( a );
    return li;
  },
  
  paintCounter: function ()
  {
    var q;
    var container = new Element( 'ul' );
    container.addClass( 'counterContainer' );
    for ( var i = 0 ; i < questions.length ; i++ ) {
      q = new Element( 'li' );
      q.setText( i+1 );
      q.addClass( questions[i]['class'] );
      q.setProperty( 'id', 'questionTag['+ i +']' );
      container.appendChild( q );
    }
    canvas.appendChild( container );
    this.setCurrentCounter();
  },

  paintIntro: function ()
  {
    var intro = new Element( 'div' );

    var text = new Element( 'div' );
    var intro_text  = "<h1>Doe mee met de prijsvraag over Het Groene Hart en win een van onderstaande prijzen!</h1>";
        intro_text += "U kunt de antwoorden on-line invullen en insturen. ";
        intro_text += "Sluitingsdatum van inzenden is <u>28 februari 2010 om 24:00 uur</u>. ";
        intro_text += "De prijzen worden onder de beste inzenders verloot. ";
        intro_text += "U maakt, ongeacht het tijdstip waarop u de prijsvraag invult, als het maar voor ";
        intro_text += "28 februari is, altijd kans op een van onderstaande prijzen. ";
        intro_text += "De uitslag wordt voor 21 maart op deze website gepubliceerd.<br /><br />";
        intro_text += "Er zijn 26 vragen totaal. ";
        intro_text += "De eerste 13 vragen betreffen, cultuur, wonen, werken en recreëren in Het Groene Hart, ";
        intro_text += "de overige 13 vragen betreffen de (wieler)sport in Het Groene Hart. Wie de meeste vragen ";
        intro_text += "goed heeft komt in aanmerking voor de prijzen. Het prijzenpakket zal de komende maanden ";
        intro_text += "worden aangevuld. Kijk dus regelmatig!<br /><br />";
        intro_text += "<b>U kunt maximaal 3x meedoen. Meerdere inzendingen van &eacute;&eacute;n adres of emailadres worden uitgesloten. ";
        intro_text += "U kunt slechts &eacute;&eacute;n prijs winnen per inzending of adres/emailadres.</b><br /><br />";
        intro_text += "Wilt u, voordat u de prijsvraag digitaal gaat invullen, eerst alle vragen goed bestuderen?<br /><a href='/content/prijsvraag_voorbereiden.html'>Dan kunt u hier de vragenlijst bekijken</a><br /><br />";
        intro_text += "<i>De prijsvraag staat onder toezicht van Notaris Wille te Apeldoorn.</i>";
    text.setHTML( intro_text );
    intro.appendChild( text );
/* Prijsvraag uit
    var next_button = new Element( 'input' );
    next_button.setProperties({ 'type' : 'button', 'value' : 'Begin' });

    next_button.addEvent('click', function(){
      canvas.removeChild( intro );
      this.currentQuestion++;
      this.paintCounter();
      this.paintQuestion();
    }.bind(this));
    intro.appendChild( next_button );
*/
    canvas.appendChild( intro );
  },

  isLastQuestion: function ( counter )
  {
    if( counter+1 >= questions.length ) {
      return true;
    } else {
      return false;
    }
  },
  
  paintForm: function ()
  {
    var title = new Element( 'h1' ).setHTML( 'Vul uw gegevens in om kans te maken op een van de prijzen.' );

    var userdetails = new Element( 'form' );
    userdetails.setProperties({ 'action' : '/?module=prijsvraag&action=store', 'method' : 'POST', 'id' : 'formulier' });

    var antwoorden = new Element( 'input' );
    antwoorden.setProperties({ 'type' : 'hidden', 'name' : 'antwoorden', 'value' : this.answers });
    userdetails.appendChild( antwoorden );

    $each({'naam' : 'Naam', 'telefoon' : 'Telefoon'}, function( value, name ) {
      var row = new Element( 'div' );
      userdetails.appendChild( row );

      var div_label = new Element( 'div' );
      div_label.addClass( 'label' );
      row.appendChild( div_label );

      var label = new Element( 'label' );
      label.setProperty('for', name );
      label.setHTML( value );
      div_label.appendChild( label );

      var div_input = new Element( 'div' );
      div_input.addClass( 'input' );
      row.appendChild( div_input );

      var input = new Element( 'input' );
      input.addClass( 'fValidate[\'required\']' )
      input.setProperties({ 'type' : 'text', 'name' : name, 'id' : name });
      div_input.appendChild( input );

      var div = new Element( 'div' );
      div.addClass( 'clear' )
      userdetails.appendChild( div );
    });

    var row = new Element( 'div' );
    userdetails.appendChild( row );

    var div_label = new Element( 'div' );
    div_label.addClass( 'label' );
    row.appendChild( div_label );

    var label = new Element( 'label' );
    label.setProperty('for', 'email' );
    label.setHTML( 'Email' );
    div_label.appendChild( label );

    var div_input = new Element( 'div' );
    div_input.addClass( 'input' );
    row.appendChild( div_input );

    var input = new Element( 'input' );
    input.addClass( 'fValidate[\'email\']' )
    input.setProperties({ 'type' : 'text', 'name' : 'email', 'id' : 'email' });
    div_input.appendChild( input );

    var div = new Element( 'div' );
    div.addClass( 'clear' )
    userdetails.appendChild( div );
    
    $each({'straat' : 'Straat', 'postcode' : 'Postcode', 'woonplaats' : 'Woonplaats'}, function( value, name ) {
      var row = new Element( 'div' );
      userdetails.appendChild( row );

      var div_label = new Element( 'div' );
      div_label.addClass( 'label' );
      row.appendChild( div_label );

      var label = new Element( 'label' );
      label.setProperty('for', name );
      label.setHTML( value );
      div_label.appendChild( label );

      var div_input = new Element( 'div' );
      div_input.addClass( 'input' );
      row.appendChild( div_input );

      var input = new Element( 'input' );
      input.addClass( 'fValidate[\'required\']' )
      input.setProperties({ 'type' : 'text', 'name' : name, 'id' : name });
      div_input.appendChild( input );

      var div = new Element( 'div' );
      div.addClass( 'clear' )
      userdetails.appendChild( div );
    });

    var clear = new Element( 'div' );
    clear.addClass( 'clear' );
    userdetails.appendChild( clear );

    var submit = new Element( 'input' );
    submit.setProperties({ 'type' : 'submit', 'value' : 'Verzenden', 'id' : 'submit' });
    userdetails.appendChild( submit );
                  
    canvas.appendChild( title );
    canvas.appendChild( userdetails );

    var myValidator = new fValidator( 'formulier' );
  },

  boot: function ()
  {
  	if( this.currentQuestion == -1 ) {
      this.paintIntro();
    } else {
      this.currentQuestion++;
      this.paintCounter();
      this.paintQuestion();
    }
  }
});