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

    include_once(PATH_TO_ROOT."/webcati/_plugins/moj_plugin2/class/class.moj-plugin2.php");
    $data = new MojPlugin2($db);
    $data->Load($projectId, $q->id);
  
?>
<style>
      #feedback { font-size: 1.2em; }
      #vprasanje{font-size:1.6em;width:600px;}
      #selectable .ui-selecting { background: #cbd4e1; }
      #selectable .ui-selected{
        border:0px solid black;
        background-size: 100% 100%;
        //NOVO
     //  background-color:#19A3A3;
       <?php echo $data->getButtonBackgroundSelected(); ?>
     <?php echo $data->getSelectedImageCss(); ?>
        
        }
      #selectable { 
            list-style-type: none; 
            margin: 0px 0px 0px 0px;
            //padding: 0; 
            width: 905px;
            //background : green;
            margin-top:20px;
      }
      #selectable li {
            border-radius:15px; 
            margin: 0px 10px 15px 10px;
            padding: 0px; 
            float: left; 
            width: 110px; 
            height: 110; 
            font-size: 1.5em; 
            text-align: center; 
            
            color:#000000;
            background:#bfcada;
           // <?php echo $data->getButtonBackgroundSelected(); ?>
            padding:5px 5px 5px 5px;
            
            
            
      }
      
      #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*/
           /*preliv */
          /*  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--*/

        }
      
      .divTekst
        {
        border:5px solid #19A3A3;
        border-radius:15px;
        margin:0px;
        float:left;
        <?php echo $data->getAnswerBoxSize(); ?>
        backgroundColor: white;
        padding:10px;
        
        }
    
        .odgovor{
            font-size:1.1em;
        }
        
        div.hr {
            height: 5px;
            background: #19A3A3;
            margin:10px;
            width: 905px;
        }
  </style>
  <script>
 $(document).ready(function(){
    // Za�etek: nastavimo hover efekt in cursor, ko se z mi�ko 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 });
  // Konec nastavitev za hover efekt in cursor
 
    $(".divTekst").css({
    backgroundColor: "white",
    padding:"10px",
    border:"1px solid #19A3A3",
    "background-image": "none"
    
    });
    $("#selectable li").css({
        //kadar ni izbran
        //Nastavimo barvo ozadja gumba
        //"background-color":"#19A3A3",
        <?php echo $data->getButtonBackgroundNormal(); ?>
        <?php echo $data->getButtonSize();?>
    });
    
    $(".ui-state-default").each(function() {
    
        <?php foreach($fieldsValues as $key=>$value){
            foreach ($ansArr as $ar) {
                if($value == $ar[0] ) {?>
                    $(".ui-state-default[value='<?php echo $value?>']").addClass('ui-selected');
                    <?php }?>
        <?php } 
        } ?>
    });
    
    
    
 });
  
  var tipGumba = <?php echo $q->tip_sql; ?>;
  
  

  $(function() {
  //tip je vhodni podatek, kar predstavlja tip ankete
    if(tipGumba == 3){
        

        // CheckBox izbira (multi response)
        $("#selectable").bind('mousedown', function (e) {
                e.metaKey = true;   
        }).selectable({
            
            selected: function(event,ui){
               
                var item = $(ui.selected);
                item.css({
                    //kadar je izbran
                    //Nastavimo sliko za izbran gumb in barvo ozadja
                  //  "background-image": "url(http://suvendugiri.files.wordpress.com/2012/02/checkbox.png)",
                  <?php echo $data->getSelectedImage(); ?>,
                    "background-size": "100% 100%",
                    <?php echo $data->getButtonBackgroundNormal(); ?>
                    //Nastavimo debelino obrobe in barvo
                    "border":"0px solid #cccccc"
                });
                //Ohranimo vrednosti
                $(".odgovor").css({
                    "background-image": "none",
                    "background-color":"#fffff"
                    
                });
                $(".divTekst").css({
                    "background-image": "none",
                    "background-color":"#fffff",
                    "border":"1px solid #19A3A3"
                    
                  });
                if(item.hasClass('processing')){
                  return;
                }
                item.addClass('processing');
                $('#' + item.attr("name") ).val( item.attr("value") )           
            },
            
            unselected: function( event, ui ) {
                var item = $(ui.unselected);
                $('#' + item.attr("name") ).val( null );
                item.removeClass('processing');
                $(ui.unselected).css({
                    "background-image": "none",
                    "border":"0px"
                });
                //Ohranimo vrednosti
                $(".divTekst").css({
                    "background-image": "none",
                    "border":"1px solid #19A3A3"
                    
                  });
                
            }   
            
        });
        
    }
    else if(tipGumba==1){
        
        $('#selectable').selectable({
        
                selected: function(event,ui){
                    var item = $(ui.selected);
                    item.css({
                    //Nastavimo sliko za izbran gumb in barvo ozadja
                  //  "background-image": "url(http://suvendugiri.files.wordpress.com/2012/02/checkbox.png)",
                    "background-size": "100% 100%",
                    <?php echo $data->getSelectedImage(); ?>,
                    "background-color":"#19A3A3",
                    //Nastavimo debelino obrobe in barvo
                    "border":"0px solid #cccccc"
                    });
                    //Ohranimo vrednosti
                    $(".odgovor").css({
                        "background-image": "none",
                        "background-color":"#fffff"
                        
                    });
                    $(".divTekst").css({
                        "background-image": "none",
                        "background-color":"#fffff",
                        "border":"1px solid #19A3A3"
                        
                      });
                    if(item.hasClass('processing')){
                      return;
                    }                  
                    item.addClass('processing');
                    $('#singlevar').val( item.attr("value") );
                    // v primeru da zelimo takoj po izbiri potrditi odgovor pozenemo spodnjo funkcijo
                    <?php if  ($q->autoSubmit )  echo "SingleResponseAutoSubmit();"; ?>
                }
        }); 

    }
    
  });
  </script>
<?php 

$html .= ' <div id="main" style="margin:20px;20px;20px;padding:auto;width:100%;border:1px"> ';
$i = 0;
    $html .= '<ol id="selectable">';
    foreach ($ansArr as $ar) {
    
        $html .= '<div class="divTekst" style="border:1px solid; background: #ffffff">
                    <p class="odgovor" style="border: solid 0px;background: #ffffff; background-image: none" >'. $ar[1].'</p>
                </div>
                <li class="ui-state-default"  value="'.$ar[0].'" name = "'.$q->q_name.'_'.$ar[0].'" ></li> ';
        
         } 
    $html .= '</ol>';
$html .= '</div>';  
// multiresponse
if ($q->tip_sql == 3) {
    foreach ($q->getAnswerArray() as $ar) {
        $html .= '<input type="hidden" name="answers['.$q->q_name.'_'.$ar[0].']" value="0" id="'.$q->q_name.'_'.$ar[0].'">';
    }
} else { // singleresponse
        $html .= '<input type="hidden" name="answers['.$q->q_name.']" value="0" id="singlevar">';
}
 ?>