<?php
include('config/config.php');
include('includes/classes/class.Vote.php');

$objVote=new Vote();
?>
<!doctype html>  
<html dir="ltr" lang="en-US">
	
	<head>
		<title>Voting Advice Application</title>
		<!-- generic demo style -->
		<link rel="stylesheet" href="./css/reset.css" />
		<link rel="stylesheet" href="./css/demo.css" />
		<!-- jqPagination styles -->
		<link rel="stylesheet" href="./css/jqpagination.css" />
		<!-- scripts -->
		<script src="./js/jquery-1.7.2.min.js"></script>
		<script src="./js/jquery.jqpagination.js"></script>
		<script src="./js/scripts.js"></script>
		<!-- shiv me up baby! -->
		<!--[if lt IE 9]>
			<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
	    
		<script>
		function saveRecord(val)
		{
			var questionId=$("#questionId").val();
			$('#loading').css('visibility','visible');
			$.ajax({
				type: 'POST',
				url: 'includes/ajax/vote.php',
				data: {'questionId': questionId, 'answer': val},
				success: function(msg){
					$('#loading').css('visibility','hidden');
					if(msg=="finish")
					{
						window.location="rate_questions.php";
					}
					else
					{
					 $("#firstQuestionArea").hide();
					 $("#questionArea").html(msg);
					}
				}
			});
		}
		</script>
        
        		<style>
			html{
				width:100%;
				height:100%;
			}
			
			body{
				width:100%;
				height:100%;
			}
			
			#header{
				width:100%;
			}
			
			
			#container
			{
			  width:100%;
			  height:75%;	
			}
			
			#footer{
				width:100%;
			}
        </style>
	
	   
	</head>	
    <body>
   
		<div id="header">
			<div id="header-wrapper">
				<h1>Voting Advice Application</h1>
				<h2>A Voting Advice Application</h2>
			</div>
			<div class="gradient">&nbsp;</div>
		</div>
		<div id="container">
		<div id="wrapper">

			<span id="questionArea">
		    </span>
			
			<span id="firstQuestionArea">
			<h2 id="introduction">Question # <?php echo $_SESSION['TotalQuestion']-sizeof($_SESSION['QuestionLeft'])+1;?>/<?php echo $_SESSION['TotalQuestion'];?></h2>
            <?php
              $questionId=$_SESSION['QuestionLeft'][0];
              $objVote->question=$questionId;
              $questionData=$objVote->getQuestionData();
			?>
            <p><?php echo $questionData[0]->Heading;?></p>
            <div id="question">
            <?php 
              echo $questionData[0]->Question;
             ?>
            </div>
	      	<input type="hidden" id="questionId" value="<?php echo $_SESSION['QuestionLeft'][0];?>"/>
			</span>
			
			<p>
			  <a href="#" class="large blue button next" data-action="next" id="A" onClick="saveRecord(this.id)">Agree</a> 
			  <a href="#" class="large blue button" id="N" onClick="saveRecord(this.id)">Neutral</a>
			  <a href="#" class="large blue button" id="D" onClick="saveRecord(this.id)">Disagree</a>
			  <a href="#" class="blue button" id="S" onClick="saveRecord(this.id)" style="float:right;">Skip</a>
			 </p>
             <img src="images/loaders/2d_1.gif" id="loading" alt="loading..." style="visibility:hidden;"/>
			
			<div class="gigantic pagination abc">
			    <!--
				<a href="#" class="first" data-action="first" title="First Question">&laquo;</a>
			    <a href="#" class="previous" data-action="previous" title="Previous Question">&lsaquo;</a>
			    <input type="text"  readonly/>
			    <a href="#" class="next" data-action="next" title="Next Question">&rsaquo;</a>
			    <a href="#" class="last" data-action="last" title="Last Question">&raquo;</a>
			    -->
			</div>
			
			<div class="clearfix"></div>
	    </div>
        </div>
		
		<div id="footer">
			<div class="gradient">&nbsp;</div>
			<div id="footer-wrapper">
			<p>&copy; <a href="https://klaus-uwe.me">Klaus-Uwe Mitterer</a> 2014</p>
			</div>
		</div>

	</body>
</html>
