jQuery(document).ready(function(){

  // get handle to the API upon initialization 
	var root = jQuery("#quiz").scrollable({size: 1, clickable: false }); 
	var api = root.scrollable();	
	
	jQuery("#quiz button.next").hide();
	jQuery("#quiz input:submit").hide();
	
	// validation logic is done inside the onBeforeSeek callback 
	api.onBeforeSeek(function(event, i) { 
 
    // we are going 1 step backwards so no need for validation 
    if (api.getIndex() < i) { 
 
        // 1. get current page
        
        var page = root.find(".page"+api.getIndex()).eq(api.getIndex()), 
 
             // 2. .. and all required fields inside the page 
             inputs = page.find(".required :input").removeClass("error"), 
 
             // 3. .. which are empty 
             empty = inputs.filter(function() { 
                return $(this).val().replace(/\s*/g, '') == ''; 
             }); 
 
         // if there are empty fields, then 
        if (empty.length) { 
 
            // add a CSS class name "error" for empty & required fields 
            empty.addClass("error"); 
 
            // cancel seeking of the scrollable by returning false 
            return false; 
 
        // everything is good 
        } else {
        
        		jQuery("#quiz button.next").hide();
        		jQuery("#quiz button.checkAnswer").show();        } 
 
    }
  });
  
  api.onSeek(function (event, i){  	
  	//Prevent default button submission of the form
  	event.preventDefault();
  });
  
	
	jQuery("#quiz button.checkAnswer").click(function(e){
		var root = jQuery("#quiz");
		var api = root.scrollable();
		
		var index = api.getIndex();
		
		var correctAnswer = answers[api.getIndex()];
		
		var page = root.find(".page"+api.getIndex());
		var selectedAnswer = page.find(":checked").val();
		
		var correctAnswer = answers[index];
		
		if (selectedAnswer == correctAnswer){
			//Display congrats
			page.find('.success-graphic').show();
		} else{
			//display wrong graphic
			page.find('.fail-graphic').show();
			
			var questionID = index+1;
			questionID = '#' + questionID + '-' + correctAnswer;
			
			//alert(questionID);
			
			//var label = page.find(questionID + ' + label');
			//alert(label.text());
			//page.find('.correct-answer').text(label.text());
			
		}
		
		//display explaination
		page.find('.question-explaination').show();		
		
		//Handle navigation logic
    if (api.getIndex()+1 == api.getPageAmount()-1){
						jQuery("#quiz button.next").hide();
        		jQuery("#quiz button.checkAnswer").hide();
        		jQuery("#quiz input:submit").show();

		} else{
			jQuery("#quiz button.next").show();
  		jQuery("#quiz button.checkAnswer").hide();
		}
		
		//prevent default action
		e.preventDefault();
		
	});

 });