<?php

    include_once(PATH_TO_ROOT."/webcati/_plugins/multi_card/class/class.multi-card.php");
    $data = new MultiCard($db);
    $data->Load($projectId, $q->id);
  
?>    
    <style>
      #feedback { font-size: 1.2em; }
      #vprasanje{font-size:1.2em;width:635px;}
      #selectable .ui-selecting { background: #cbd4e1;border: 0px;}
      #selectable .ui-selected{border:0px solid black; background: #bfcada; color: black;}
      #selectable
      {
        list-style-type: none;
        margin: 0;
        padding: 0;
        width: 660px;
      }
      #selectable li {
          margin: 3px;
          padding: 1px;
          float: left;
          width:200px;
          height:200px;
          font-size: 1.5em;
          text-align: center;
          border: 1px;
          
        /*  background-color:#19A3A3;*/
          
          color:#000000;
          background:#bfcada;
          background-color:#19A3A3;
          padding:5px 5px 5px 5px;
      }
      div.hr 
      {
        height: 5px;
        background: #19A3A3;
        margin:10px;
      }
      .odgovor
      {
        font-size:1.5em;

      }
  </style>
  <script>
$(document).ready(function(){ 
//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
        <?php echo $data->getButtonBackgroundNormal(); ?>,
        "border-image-width" : "3px",
      //  "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%",
        <?php echo $data->getButtonSize();?>
        
        "text-align":"center",//Nastavimo pozicijo teksta
        //"line-height": "1px"//Tukaj je pointa pozicioniranja(sedaj je na polovici kvadrata)
  });
    
    // Začetek: nastavimo hover efekt in cursor, ko se z mi۫o 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
  
  //$(".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');
                    var item = $(".ui-state-default[value='<?php echo $value?>']");
                    item.css({
                //Nastavimo barvo ozadja za izbran gumb
                 <?php echo $data->getButtonBackgroundSelected(); ?>
                });
                item.children().css({
                //Nastavimo barvo ozadja za izbran gumb (ozadje teksta)
                <?php echo $data->getButtonTextBackgroundSelected(); ?>
                       
                });
                if(item.hasClass('processing')){
                  return;
                }
                item.addClass('processing');
                $('#' + item.attr("name") ).val( item.attr("value") ) 
                item.find('input').prop('checked', true);        
                    <?php }?>
        <?php } 
        } ?>
    //});
  });
  
  
  
  var tipGumba = <?php echo $q->tip_sql; ?>;
  var selectedFunc = function(item){
               // var item = $(ui.selected);
                item.css({
                //Nastavimo barvo ozadja za izbran gumb
                 <?php echo $data->getButtonBackgroundSelected(); ?>
                });
                item.children().css({
                //Nastavimo barvo ozadja za izbran gumb (ozadje teksta)
                <?php echo $data->getButtonTextBackgroundSelected(); ?>
                       
                });
                if(item.hasClass('processing')){
                  return;
                }
                item.addClass('processing');
                $('#' + item.attr("name") ).val( item.attr("value") ) 
                //item.find('input').prop('checked', true);          
        };
        
   var unselectedFunc = function(item) {
                //var item = $(ui.unselected);
                //Nastavimo privzeto barvo boxa
                item.css({
                    <?php echo $data->getButtonBackgroundNormal(); ?>
                });
                item.children().css({
                //Nastavimo barvo ozadja za izbran gumb
                    <?php echo $data->getButtonTextBackgroundNormal(); ?>
                });
                
                
                $('#' + item.attr("name") ).val( null );
                item.removeClass('processing');
                //item.find('input').prop('checked', false);    
            } ;
  
  $(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){
                
                selectedFunc($(ui.selected));
                $(ui.selected).find('input').prop('checked', true);  
            },
            unselected:function(event,ui){
                unselectedFunc($(ui.unselected));
                $(ui.unselected).find('input').prop('checked', false);  
            }
        });
        
        $("input[type=checkbox]").bind('click', function (e, b,c) {
                e.metaKey = true;   
                if($("input[type=checkbox]").is(':checked'))
                {
                   selectedFunc($('li[name=' + this.name + ']'));
                }
                else
                {
                    
                     unselectedFunc($('li[name=' + this.name + ']'));
                }
        })
        
    }
    else if(tipGumba==1){
        
        $('#selectable').selectable({
        
                selected: function(event,ui){
                    //console.log("tip2");
                    var item = $(ui.selected);
                    item.css({
                        //Nastavimo barvo ozadja za izbran gumb
                        <?php echo $data->getButtonBackgroundSelected(); ?>
                    });
                    item.children().css({
                        //Nastavimo barvo ozadja za izbran gumb
                       <?php echo $data->getButtonTextBackgroundSelected(); ?>
                    });
                    if(item.hasClass('processing')){
                      return;
                    }
                    item.find('input').prop('checked', true);  
                    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:5px"> ';
$i = 0;
    $html .= '<ol id="selectable">';
     foreach($ansArr as $ar){ $i++; 
    
        $html .= '<li style="margin:' . $data->getMargine() . 'px;border:' . $data->getBorderWidth() . 'px;border-style: solid;" class="ui-state-default" value="'.$ar[0].'" name = "'.$q->q_name.'_'.$ar[0].'" >
            ';
          if($data->getShowText() == 1)   
            $html .=   '<p style="margin:' . $data->getMargine() . 'px;"   class="odgovor" style="border:0px solid; display:block">'. $ar[1] .' <br />';
          
          if($data->getCheckbox() == 1)
                $html .= '<input type="checkbox" name="'.$q->q_name.'_'.$ar[0].'" id="radio_'.$q->q_name.'_'.$ar[0].'" />';
          
          if($data->getShowText() == 1)   
            $html .= '</p>';
        
       $html .='</li> ';
          
 }
     
 $html .= '</ol>';
 
/* var_dump($ansArr);
 var_dump($q->getAnswerArray());
 */
// multiresponse
if ($q->tip_sql == 3) {
    foreach ($ansArr as $ar) {
        $i = array_search($ar, $ansArr) + 1;
        
        $value = $fieldsValues[$q->q_name.'_'. $i];
        $html .= '<input type="hidden" name="answers['.$q->q_name.'_'. $i .']" value="'. $value . '" id="'.$q->q_name.'_'.$ar[0].'">';
    }
} else { // singleresponse
        $html .= '<input type="hidden" name="answers['.$q->q_name.']" value="0" id="singlevar">';
} 
 
 ?>  