<?php
    ini_set("display_errors","1");

    include_once(PATH_TO_ROOT."/webcati/_plugins/moj_plugin/class/class.moj-plugin.php");
    $data = new MojPlugin($db);
    $data->Load(5,5);
?>
<style>
	  #feedback { font-size: 1.2em; }
	  #vprasanje{font-size:1.2em;width:600px;}
	  #selectable .ui-selecting { background: #cbd4e1; }
	  #selectable .ui-selected{border:0px solid black; background: #bfcada; color: black;}
	  #selectable { 
			list-style-type: none; 
			margin: 0; 
			padding: 0; 
			width: 100%;
			height: 300px;
	  }
	  
	  
	  #selectable li {
	  	border-radius:30px; 
	  	margin: 3px; 
	  	padding: 1px; 
	  	float: left; 
	  	width: 150px; 
	  	height: 150px; 
	  	font-size: 1.5em; 
		color:white;
	  	background:#19A3A3;
		//margin:-60px 340px 50px -20px;
	  }
	  #selectable li{
			background-color: transparent;
			border: 1px solid #189e90;
			-moz-border-radius: 12px;
			-webkit-border-radius: 12px;
			border-radius: 12px;
			/*IE 7 AND 8 DO NOT SUPPORT BORDER RADIUS*/
			-moz-box-shadow: 0px 0px 1px #000000;
			-webkit-box-shadow: 0px 0px 1px #000000;
			box-shadow: 0px 0px 1px #000000;
			/*IE 7 AND 8 DO NOT SUPPORT BLUR PROPERTY OF SHADOWS*/
			filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#52bdbe', endColorstr = '#53918e');
			/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
			/*Element must have a height (not auto)*/
			/*All filters must be placed together*/
			-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#52bdbe', endColorstr = '#53918e')";
			/*Element must have a height (not auto)*/
			/*All filters must be placed together*/
			background-image: -moz-linear-gradient(top, #52bdbe, #53918e);
			background-image: -ms-linear-gradient(top, #52bdbe, #53918e);
			background-image: -o-linear-gradient(top, #52bdbe, #53918e);
			background-image: -webkit-gradient(linear, center top, center bottom, from(#52bdbe), to(#53918e));
			background-image: -webkit-linear-gradient(top, #52bdbe, #53918e);
			background-image: linear-gradient(top, #52bdbe, #53918e);
			-moz-background-clip: padding;
			-webkit-background-clip: padding-box;
			background-clip: padding-box;
			/*Use "background-clip: padding-box" when using rounded corners to avoid the gradient bleeding through the corners*/
			/*--IE9 WILL PLACE THE FILTER ON TOP OF THE ROUNDED CORNERS--*/

		}
	  .odgovor{
			font-size:1.1em;
	  }
	  
	  div.hr {height: 5px; background: #19A3A3;width:600px}
		
		.divSlika{
		border:0px solid black;
		}
	  .divTekst {
	  	margin: 0 auto;
	  	padding:10px 10px 10px 10px;
		border: 1px solid;
   		/*backgroundColor: white;*/
   		height: 500px;
   		width: 230;
   		font-size: 26px;
   		font-weight: bolder;
	  }
  </style>
  <script>
  $(document).ready(function(){
  
	
  
	//Nastavimo hover efekt in cursor, ko se z mi۫sko pomaknemo gor
	 $('.ui-state-default').hover(
		function() {
		  $(this).stop().animate({ "opacity": .7 },{ duration: 100 });
		  $(this).css('cursor', 'pointer');
		}, 
		function() {
		  $(this).stop().animate({ "opacity": 1 },{ duration: 150 });
		}
	  );
  $('.ui-state-default').animate({"opacity": 1 },{ duration: 0 }); 
  //Tukaj bi potem prišla vejitev, če je slika==1
  //nastavimo stile za sliko drugače nastavimo samo barvo
  $("#selectable li").css({
		//Nastavimo barvo ozadja gumba ali sliko
		"background-color":"#ff0000",
		//"background-image": "url(http://openclipart.org/image/800px/svg_to_png/65623/button.png)",
		//"background-image": "url(http://www.clker.com/cliparts/4/8/d/d/11949847561597560220button-seagreen_benji_pa_01.svg)",
		"background-size": "100% 100%",
		"text-align":"center",//Nastavimo pozicijo teksta
		"line-height": "120px"//Tukaj je pointa pozicioniranja(sedaj je na polovici kvadrata)
  });
	$(".ui-state-default").each(function() {
	
		<?php foreach($fieldsValues as $key=>$value){
				if($value== $ansArr[1][0] ) {?>
				//var value = $(this).attr("value");
					$(".ui-state-default[value='<?php echo $value ?>']").addClass('ui-selected');
		<?php } else if($value == $ansArr[0][0]){?>
					$(".ui-state-default[value='<?php echo $value ?>']").addClass('ui-selected');//({
					//"background-color":"#ccccc",
					//"border":"2px solid #000000"
					//});
				<?php }	
		} ?>
	});
  });
  
 
  $(function() {
  		
  		$('#selectable').selectable({
		
				selected: function(event,ui){
	                var item = $(ui.selected);
					
					item.css({
						//Nastavimo barvo ozadja za izbran gumb in border
						//"background-color": "#004F4F",
						"border":"0px solid"
					});
					//Ohranimo privzeto
					item.children().css({
						"background": "none",
						"border":"0px solid"
					});
	       			$('#singlevar').val( item.attr("value") );
	       			// v primeru da zelimo takoj po izbiri potrditi odgovor pozenemo spodnjo funkcijo
	       			<?php if  ($q->autoSubmit )  echo "SingleResponseAutoSubmit();"; ?>
				},
				unselected: function( event, ui ) {
					var item = $(ui.unselected);
					//Nastavimo privzeto barvo box-a
					$(ui.unselected).css({
						//"background": "#19A3A3",
						"border":"0px solid"
					});
                
			}	
		}); 
	
  });
  </script>
<?php 

$html .= '

<div id="main" style="margin:0 auto; width:600px;border:1px">
	<div style="height:320px; text-align:center;" class="divSlika">
		<img src="' . $data->getImage() . ' " height=300>
	</div>
	<div class="divTekst">
		<p style="text-align:center">'.$q->nav_sql .'</p>
	</div>
	<ol id="selectable">
				
				
				<li class="ui-state-default" value='.$ansArr[0][0].' style="float:left;">
					<p class="odgovor">'.$ansArr[0][1] .'</p>
				</li>
				<li class="ui-state-default" value='.$ansArr[1][0].' style="float:right;">
					<p class="odgovor">'.$ansArr[1][1].'</p>
				</li>
	</ol>
</div><input  id="singlevar" type="hidden" value="0" name="answers[q1]">';