/*
	this is the myjQuery plug in for the frontend module tests
	relies on the "UserProxy" cfajax proxy to exist
	This JS file has dependencies on:
	/travel/_tnz/view/site/templates/trade/modules/module/includes/dsp_moduletest.cfm 
*/
(function(myjQuery)
{
	
	var __questions	= [];
	
	var __getQuestionHTML	= function( question , questionNo )
	{

		//building the quesiton...this is not the real thing, so will need to be reworked!
		var sUserAnswer	= question.useranswer;

		var rootDiv	= myjQuery("<div></div>");
		
		var answersDiv	= myjQuery("<div></div>");
		answersDiv.attr("style","float:right;");
		var optionUL	= myjQuery("<ul></ul>");
		//option A
		var optionAli	= myjQuery("<li></li>");
		optionAli.attr("style","float:left;padding-left:2em;padding-right:2em");
		var optionAanswer	= myjQuery('<input type="radio" name="questionAnswer" value="optiona" />');
		optionAanswer.attr("onclick","$.moduletest.answerQuestion( " + questionNo + " ,  'optiona');");
		if( sUserAnswer == "optiona" ) optionAanswer.attr("checked","checked");
		optionAli.append( optionAanswer );
		
		optionAli.append( "Option A: <br/>" );
		optionAli.append( question.optiona.text + "<br />" );
		if( question.optiona.image.length != 0) optionAli.append( '<img src="' + question.optiona.image + '" height="70" />' );
		optionUL.append( optionAli );
		
		//option B
		var optionBli	= myjQuery("<li></li>");
		optionBli.attr("style","float:left;padding-left:2em;padding-right:2em");
		var optionBanswer	= myjQuery('<input type="radio" name="questionAnswer" value="optionb" />');
		optionBanswer.attr("onclick","$.moduletest.answerQuestion( " + questionNo + " ,  'optionb');");
		if( sUserAnswer == "optionb" ) optionBanswer.attr("checked","checked");
		optionBli.append( optionBanswer );
		
		optionBli.append( "Option B: <br/>" );
		optionBli.append( question.optionb.text + "<br />" );
		if( question.optionb.image.length != 0) optionBli.append( '<img src="' + question.optionb.image + '" height="70" />' );
		optionUL.append( optionBli );

		//option C
		var optionCli	= myjQuery("<li></li>");
		optionCli.attr("style","float:left;padding-left:2em;padding-right:2em");
		var optionCanswer	= myjQuery('<input type="radio" name="questionAnswer" value="optionc" />');
		optionCanswer.attr("onclick","$.moduletest.answerQuestion( " + questionNo + " ,  'optionc');");
		if( sUserAnswer == "optionc" ) optionCanswer.attr("checked","checked");
		optionCli.append( optionCanswer );
		
		optionCli.append( "Option C: <br/>" );
		optionCli.append( question.optionc.text + "<br />" );
		if( question.optionc.image.length != 0) optionCli.append( '<img src="' + question.optionc.image + '" height="70" />' );
		optionUL.append( optionCli );

		//option D
		var optionDli	= myjQuery("<li></li>");
		optionDli.attr("style","float:left;padding-left:2em;padding-right:2em");
		var optionDanswer	= myjQuery('<input type="radio" name="questionAnswer" value="optiond" />');
		optionDanswer.attr("onclick","$.moduletest.answerQuestion( " + questionNo + " ,  'optiond');");
		if( sUserAnswer == "optiond" ) optionDanswer.attr("checked","checked");
		optionDli.append( optionDanswer );
		
		optionDli.append( "Option D: <br/>" );
		optionDli.append( question.optionc.text + "<br />" );
		if( question.optiond.image.length != 0) optionDli.append( '<img src="' + question.optiond.image + '" height="70" />' );
		optionUL.append( optionDli );
	
		answersDiv.append( optionUL );
		
		rootDiv.append( answersDiv );
		
		var questionDiv	= myjQuery("<div></div>");
		questionDiv.attr("style","float:left;width:25%;");
		questionDiv.append("Question: " + questionNo );
		questionDiv.append("<h3>" + question.question + "</h3>");
		questionDiv.append("<em>Hint: " + question.hint + "</em>");
		
		rootDiv.append( questionDiv );
		
		var imageDiv	= myjQuery("<div></div>");		
		if( question.image.length != 0)	imageDiv.append('<img src="' + question.image + '" height="70" />');
		
		rootDiv.append( imageDiv );
		return rootDiv;

	}

	var __setQuestionHighLightStyleClass	= function( questionNo )
	{
		
		//clear it first
		myjQuery( "#moduletest-info-bar-questionlink" + questionNo ).removeAttr("class");
		
		//if it the currentquestion, lets highlight it
		if( questionNo ==  myjQuery.testconfig.currentQuestion() )
		{
			
			myjQuery( "#moduletest-info-bar-questionlink" + questionNo ).attr("class","selected");
			
		}
		else//it's not the selected one, so lets work out what class
		{
			
			//get the question
			var thisQuestion = myjQuery.moduletest.getQuestion( questionNo );
			
			if( thisQuestion && thisQuestion.useranswer.length != 0 )
			{
				
				myjQuery( "#moduletest-info-bar-questionlink" + questionNo ).attr("class","answered");
			
			}
			
		}
		
	}

	myjQuery.extend
	({
		moduletest	:
		{ 
		//methods
		  toggleTest : function()
		  {
			
			myjQuery("#moduletest-question-container").slideToggle(
				"slow"
				, function()
				{
					 if( myjQuery('#moduletest-question-container').is(':visible') )
					 {
					 	 myjQuery('#moduletest-hideshowtest-button').html('Hide');
					 	 myjQuery.testconfig.testVisible( true );
					 }
					 else
					 {
					 	 myjQuery('#moduletest-hideshowtest-button').html('Show');			 	
					 	 myjQuery.testconfig.testVisible( false );
					 }
				}
			
			);	
		  }
		, hideTest	: function(){ if( myjQuery('#moduletest-question-container').is(':visible') ) myjQuery.moduletest.toggleTest(); }
		, showTest	: function(){ if( myjQuery('#moduletest-question-container').is(':hidden') ) myjQuery.moduletest.toggleTest(); }
		, showLogin : function(){ myjQuery("#moduletest-login-body").show("slow"); }
		, loginUser : function( email , password , elem )
		  {
		  	
		  	myjQuery( elem ).attr("disabled","disabled");
			myjQuery("#moduletest-login-status").hide();	
		  	
		  	$.TNZCFC.invoke({
				  component 			: "travel._tnz.object.shift.trade.Proxy.UserAjaxProxy"
				, method 				: "attemptLogin"		
				, args					: { email : email , password : password }		
				, resultHandler 		: function(result)
											{
												if( result.success )
												{
													//if they loggin in ok, load their test
													myjQuery.testconfig.userUUID( result.userUUID );
													myjQuery.moduletest.loadUserTestQuestions();
													myjQuery("#moduletest-logout-button").fadeIn("slow");
													
												}
												else
												{
													myjQuery("#moduletest-login-status").html( result.message );
													myjQuery("#moduletest-login-status").slideDown("slow");	
												}
												myjQuery( elem ).removeAttr("disabled");
												
											}
				, errorResultHandler 	: function(statusCode, statusMsg)
										    {
										        alert('ERROR!: ' + statusCode + ', ' + statusMsg);
												myjQuery( elem ).removeAttr("disabled");
										    }
				, dataType				: "json"
				, type					: "POST"
			});		
		  }
		, logOutUser : function( elem )
		  {
		  	myjQuery( elem ).attr("disabled","disabled");
		  	//change to TNZCFC
		  	$.TNZCFC.invoke({
				  component 			: "travel._tnz.object.shift.trade.Proxy.UserAjaxProxy"
				, method 				: "logOut"				
				, resultHandler 		: function(result)
										{

											if( result.success )
											{
												myjQuery.testconfig.userUUID( -1 );
												myjQuery("#moduletest-question-container").html( result.loginformHTML );
												myjQuery("#moduletest-logout-button").fadeOut("slow");
												myjQuery("#moduletest-info-bar-question-container").fadeOut("slow", function(){
													myjQuery("#moduletest-info-bar-question-container").html("");													
												});
												__questions	= [];
											}
											else
											{
												alert(result.message);
											}
											myjQuery( elem ).removeAttr("disabled");
											
										}
				, errorResultHandler 	: function(statusCode, statusMsg)
									    {
									        alert('ERROR!: ' + statusCode + ', ' + statusMsg);
											myjQuery( elem ).removeAttr("disabled");
									    }
				, dataType				: "json"
			});		  
		  }
		  , loadUserTestQuestions	: function()//this method will load the test questions and then update the display
		    {
				myjQuery("#moduletest-question-container").html('<img src="/travel/_tnz/view/site/assets/trade/modules/ajax-loader.gif"/><span class="loadingTest">Loading</span>');
		    	myjQuery.moduletest.getUserTestQuestions(
		    		function()
		    		{
						//doing this so the values are different and the question will load
						var questionToDisplay = myjQuery.testconfig.currentQuestion();
						myjQuery.testconfig.currentQuestion( -1 );
						
						myjQuery.moduletest.displayQuestion( questionToDisplay );//set the current question
						myjQuery.moduletest.setQuestionStatusBar();		
		    		}
		    	);
		    }
		  , getUserTestQuestions : function( callback )
		    {
		    	$.TNZCFC.invoke
		    	({
					  component 			: "travel._tnz.object.shift.trade.Proxy.ModuleTest"
					, method 				: "getUserTestQuestions"
					, resultHandler 		: function(result)
												{
													
													__questions	= result;
												
													//call the callback
													if( callback ) callback();
								
												}
					, errorResultHandler 	: function(statusCode, statusMsg)
										    {
										        alert('ERROR!: ' + statusCode + ', ' + statusMsg);
										    }
					, dataType				: "json"
					, args					: { moduleUUID : myjQuery.testconfig.moduleUUID() }
				});		  
		    }
		  , displayQuestion	: function( questionNo )
		    {

				myjQuery.moduletest.showTest();

		    	if( questionNo != myjQuery.testconfig.currentQuestion() )
		    	{
		    		
		    		var prevQuestion = myjQuery.testconfig.currentQuestion();
		    		

		    		myjQuery.testconfig.currentQuestion( questionNo );//set testconfig client side
		    		__setQuestionHighLightStyleClass( prevQuestion );//clear the current link
		    		__setQuestionHighLightStyleClass( questionNo );//update the new link
		    		
		    		myjQuery.testconfig.currentQuestion( questionNo );//set testconfig client side
		    		//only do this if the questions are loaded
			    	if( __questions.length != 0 )
			    	{
			    		//fade it out
			    		myjQuery("#moduletest-question-container").fadeOut(
			    			200
			    			, function(){	
			    				//get the question
			    				myjQuery("#moduletest-question-container").html( __getQuestionHTML( myjQuery.moduletest.getQuestion( questionNo ) , questionNo ) );
			    				//Fadein
			    				myjQuery("#moduletest-question-container").fadeIn( 200 );
			    			}
					    );
			    	}
		    	}		    	
		    }
		  , setQuestionStatusBar	: function()
		  	{
		  		
		  		//loop over the questions
		  		for( i = 0 ; i < __questions.length ; i ++)
		  		{
		  			var span = myjQuery( '<span onclick="$.moduletest.displayQuestion(' + ( i + 1 ) +')"></span>' );
		  			span.attr("id" , "moduletest-info-bar-questionlink" + ( i + 1) );
		  			
		  			//work out the style
		  			if( (i + 1) == myjQuery.testconfig.currentQuestion() )
		  			{
			  			span.attr("class" , "selected");
		  			}
		  			else if( __questions[ i ].useranswer.length != 0 )
		  			{
			  			span.attr("class" , "answered");
		  			}
		  			span.html( ( i + 1 ) );
			  		myjQuery("#moduletest-info-bar-question-container").append( span );
		  			
		  		}
		  		myjQuery("#moduletest-info-bar-question-container").fadeIn("slow");
		  	}
		 , answerQuestion			: function(questionNo , option )
		   {
		    
		    	myjQuery.moduletest.getQuestion( questionNo ).useranswer = option;
		    	//save the answer to the server
		    	$.TNZCFC.invoke
		    	({
					  component 			: "travel._tnz.object.shift.trade.Proxy.ModuleTest"
					, method 				: "saveAnswer"
					, resultHandler 		: null
					, errorResultHandler 	: function(statusCode, statusMsg)
										    {
										        alert('ERROR!: ' + statusCode + ', ' + statusMsg);
										    }
					, args					: { moduleUUID : myjQuery.testconfig.moduleUUID() , questionNo : questionNo , answer : option }
				});		  
		    	
		    
		   }
		 , submitCompleteTest		: function()
		   {
		   	
		   		if( myjQuery.moduletest.testComplete() )
		   		{
		   			alert("I am going to submit the compelted test!");
		   		
		   		}
		   		else
		   		{
		   			
		   			alert("You need to complete the test before you can submit it!");
		   			
		   		}
		   	
		   }
		  	
		  	
		  //GETTERS 
		  , getQuestion				: function( questionNo )
		  	{
		  		
		  		return __questions[ questionNo - 1 ];
		  		
		  	}
		  , testComplete			: function()
		  	{
		  		var returnValue	= true;
		  		
		  		if( __questions.length == 0 )
		  		{
		  			returnValue	= false;//return false I guess
		  		}
		  		else
		  		{
		  			
		  			for( i = 0 ; i < __questions.length ; i++ )
		  			{
		  				
		  				returnValue	= ( __questions[ i ].useranswer.length != 0 );
		  				
		  				if( !returnValue ) break;//jump out of this loop, as if on question is not answered, the test isn't completed
		  						  				
		  			}
		  			
		  		}
		  		
		  		return returnValue;
		  	}
		}
	})
	
})(jQuery);