<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Templata SINGLE</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <style>
	  #feedback { font-size: 1.2em; }
	  #vprasanje{font-size:1.2em;width:600px;}
	  #selectable .ui-selecting { background: #cbd4e1; }
	  #selectable .ui-selected{border:1px solid black; background: #bfcada; color: black;}
	  #selectable { list-style-type: none; margin: 0; padding: 0; width: 635px;}
	  #selectable li {border-radius:15px; margin: 3px; padding: 1px; float: left; width: 200px; height: 200px; font-size: 1.5em; text-align: center; }
	  #selectable li{background:#bfcada;}
	  div.hr {height: 5px; background: #19A3A3;width:600px}

  </style>
  <script>
   /*
	Naslednjo vprašanje izberemo z gumbom naprej ali z izbrano vrednostjo...
		- če je radioButton odgovor  ne potrebujemo dodatnega gumba za naprej
		- če je checkbox odgovor potrebujemo dodaten gumb za naprej

	-Nastavitev pri radiobutton za gumb
	- Pri mouse over prikazati sliko ali barvo možno nastavljivo
	- Polniti hidden variable
	- Na klik pri checkboxu prenesti
	- Pri radiobuttnu submit na izbrano vrednost
	- 
   */
   
  //Pridobimo lastnosti iz baze in jih nastavimo
  var vrednostiAnkete = new Array();
  var index = -1;
  var sirinaTekstSlika = 500;
  var visinaTekstSlika = 300;
  var visinaOkvirja = 100;
  var sirinaOkvirja =150;
  var jeSlika = true;
  var barvaPisave = "#000000";
  var urlSlike="http://upload.wikimedia.org/wikipedia/commons/1/1e/Stonehenge.jpg";
  var barvaIzbranegaOkvirja = "#19A3A3";
  $(document).ready(function(){
  $("#selectable").width(1000).height(700).css({
	//Nastavimo stile
  });
  
  $(".divTekst").height(50).width(200).css({
	margin:"-10px 20px 20px 180px",
	padding:"10px 10px 10px 10px",
	border:"1px solid",
    backgroundColor: "white"
	
  });
  $("#selectable li").height(visinaOkvirja).width(sirinaOkvirja).css({
	
	margin:"-60px 340px 50px -20px",
	"color":barvaPisave,
	"background-color":barvaIzbranegaOkvirja,
	//"background-image": "url(http://upload.wikimedia.org/wikipedia/commons/1/1e/Stonehenge.jpg)", 
	"background-size": "100% 100%"
  });
   
	if(jeSlika==1){
		$(".divSlikaTekst").height(visinaTekstSlika).width(sirinaTekstSlika).css({
			margin:"20px 20px 20px 20px",
			padding:"10px 10px 10px 10px",
			//cursor: "auto",
			border:"1px solid",
			backgroundColor: "white",
			"background-image": "url("+urlSlike+")", 
			"background-size": "100% 100%"
		});
	}else{
		$(".divSlikaTekst").height(visinaTekstSlika).width(sirinaTekstSlika).css({
		margin:"20px 20px 20px 20px",
		padding:"10px 10px 10px 10px",
		//cursor: "auto",
		border:"1px solid",
		backgroundColor: "white",
		});
		$(".divSlikaTekst").html("Tukaj sledi vprasanje, ki je sestavljeno iz dva dela. Sledi vprasanje. Tukaj Sledi vprasanje. Tukaj sledi vprasanje, ki je sestavljeno iz dva dela. Sledi vprasanje. Tukaj Sledi vprasanje.");
	}
});
  $(function() {
  
	//radioButton (SingleResponse)
	$('#selectable').selectable({
	stop:function(event, ui){
		$(event.target).children('.ui-selected').not(':first').removeClass('ui-selected');
		$("input[type=hidden]",this).val();
		 $( ".ui-selected", this ).each(function() {
			$("input[type=hidden]",this).val("1000");
			/*if($("input[id=skrito1]",this).val())
				{ alert('aaaa');}*/
				
				var vrednostiOdgovorov = $("input[type=hidden]",this).val();
				console.log(vrednostiOdgovorov);
		 });
	}
	});
	
  });
  </script>
</head>
<body>
<div id="main" style="margin:20px;20px;20px;padding:auto;width:100%;border:1px">
<p id="vprasanje">
	Tukaj sledi vprasanje tukaj sledi vprasanje.
	Tukaj sledi vprasanje tukaj sledi vprasanje. Tukaj sledi vprasanje tukaj sledi vprasanje. 
	Tukaj sledi vprasanje tukaj sledi vprasanje. Tukaj sledi vprasanje tukaj sledi vprasanje. 
	Tukaj sledi vprasanje tukaj sledi vprasanje?</p>
	<div class="hr"><hr /></div>
	<ol id="selectable">
				<div class="divSlikaTekst">
						
				</div>
				<div class="divTekst">
						<p style="text-align:center">TEKST</p>

				</div>
				
				<li class="ui-state-default" >
					<input type="hidden" value ="" id="skrito1"name="skritoPolje2"/>
					<p>Agree</p>
				
				</li>
				<li class="ui-state-default">
					<input type="hidden" value ="" id="skrito2"name="skritoPolje2"/>
					<p>Disagree</p>
				
				</li>
				
				
				
				
	  
	</ol>
</div>
</body>
</html>