<?php
  //  ini_set("display_errors", 1);
    include_once(PATH_TO_ROOT."/webcati/_plugins/vertical_slider/class/class.vertical.slider.plugin.php");
    $data = new VerticalSliderPlugin($db);
    $data->load($projectId, $q->id);
  /*  print "<pre>";
    var_dump($fieldsValues);
    var_dump($ansArr);
    print "</pre>";*/
    
?>
<style>
        table.slider {
            margin: 0px;
            border-collapse: collapse !important;
            border-spacing: 0px;
            margin-left: 40px;
            margin-top: 10px;
            padding: 100px;
         }
        .sliderTd{
            border: 2px solid #fbb900;
            width: <?php echo $data->getVal('box_width'); ?>px;
        }
        table.slider tr{
            height: <?php echo $data->getVal('box_height'); ?>px;
            
        }
        
        table.slider td{
            vertical-align:bottom;
            text-align:center;
        }
        
        </style>
    <script>
        $(function()
        {
            var getId = function(element)
            {
                return element.id.split('_')[1];
            }
            
            var getColorById = function(id)
            {
                return $('#color_' + id);
            }
            
            var setValue = function(id)
            {
                <?php
                if ($q->tip_sql == 3)
                {
                    ?>
                    $('#<?php echo $q->q_name;?>_' + id).val(id);
                    <?php
                    
                }else
                {
                     ?>
                    $('#singlevar').val(id);
                    <?php      
                }
                ?>
            }
            
            var unsetValue = function(id)
            {
                <?php
                if ($q->tip_sql == 3)
                {
                    ?>
                    $('#<?php echo $q->q_name;?>_' + id).val(null);
                    <?php
                    
                }else
                {
                     ?>
                    $('#singlevar').val(0);
                    <?php      
                }
                ?>
            }
            
            // tukaj nastavimo privzete vrednosti oz vrednosti ki so bile že odgovorjene
            
            <?php 
                
            foreach($fieldsValues as $key=>$value){
                foreach ($ansArr as $ar) {
                    if($value == $ar[0] ) {?>
                         $('#ct_<?php echo $value; ?>').prop('checked', true);
                        <?php }?>
            <?php } 
            } ?>
                        
            
            $('.slider td[id^=\"td_\"]').each(function(index, element){
                var id = getId($(element)[0]);
                if($('#ct_' + id).prop('checked'))
                {
                    $(element).css('background-color', getColorById(id).val());
                    setValue(id);
                }
            });
            
                
            $('.slider tr').click(function(event)
            {
                var currentElement = $(event.target);
                var currentId = getId($(currentElement)[0]);
                var currentColor = getColorById(currentId);
                var currentState = $('#ct_' + currentId).prop('checked');

                var i = 0;
                $('.slider td[id^=\"td_\"]').each(function(index, element){
                    
                    var id = getId($(element)[0]);
                    unsetValue(id);
                    $(element).css('background-color', '');
                    if($('#ct_' + id).prop('checked'))
                        i++;
                    $('#ct_' + id).prop('checked', false);
                });
                
                    
                if(!currentState)
                {
                    /*currentElement.css('background-color', '');
                    $('#ct_' + currentId).prop('checked', false);*/
                    currentElement.css('background-color', currentColor.val());
                    $('#ct_' + currentId).prop('checked', true);
                    setValue(currentId);
                }
                <?php
                
                if ($q->tip_sql == 3)
                { ?>
                var trArray = currentElement.parent().nextAll('tr');
                trArray.each(function(index, element){
                          var id = getId($(element)[0]);
                          $('#ct_' + id).prop('checked', true);
                          $('#td_' + id).css('background-color', getColorById(id).val());
                          setValue(id);
                      
                    });
                <?php } ?>
            });
        

        });
        
    </script>
    <?php
    $labelsPositions = explode(';',$data->getVal('labels_position'));
    $html .=" 
      <table class='slider' cellspacing='0'>
      
           <tr>
              <td colspan='3' align='center'>" . $data->getVal('end_text') ."</td>
          </tr>
          
          ";
    foreach ($ansArr as $ar) {
        if($data->getVal('show_labels') == '1')
        {
            $leftLabel = "";
            $rightLabel = "";
            if(current($labelsPositions) == 'left')
                $leftLabel = $ar[1];
            else// if(current($labelsPositions) == 'right')
                $rightLabel = $ar[1];
            next($labelsPositions);
        }    
        $html .= "<tr id='tr_" . $ar[0] ."' value='" . $ar[0] ."'>
               <td>" . $leftLabel . "</td>
              <td class='sliderTd' id='td_". $ar[0] ."'>
                  <input type='checkbox' id='ct_". $ar[0] ."' style='display:none'>
              </td>";
              
              $html .= "<td>" . $rightLabel . "</td>
          </tr>";
          
         
    }
    
    $html .= "<tr>
                <td colspan='3' style='vertical-align:bottom;'>" . $data->getVal('start_text') ."</td>
            </tr>
        </table>";
        
     $colorsList = explode(';', $data->getVal('colors_list'));
     foreach ($ansArr as $ar) {
         $html .= "<input type='hidden' value='" . current($colorsList) . "' id='color_" . $ar[0] ."'>";
         next($colorsList);
     }
 /*$html .= "
          <tr id='tr_1'>
              <td class='sliderTd' id='td_1'>
                  <input type='checkbox' id='ct_1' style='display:none'>
              </td>
              <td>to je neki tekst</td>
          </tr>
          <tr id='tr_2'>
              <td class='sliderTd' id='td_2'>
                  <input type='checkbox' id='ct_2' style='display:none'>
              </td>
              <td>to je neki tekst</td>
          </tr>
          <tr id='tr_3'>
              <td class='sliderTd' id='td_3'>
                  <input type='checkbox' id='ct_3' style='display:none'>
              </td>
          </tr>
          <tr>
              <td>to je neki tekst</td>
          </tr>
      </table>
      ";*/
      
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].'">';
        $pluginMustCondition[] = '$' . $q->q_name . '_' . $i .' > 0 ';
        
    }
} else { // singleresponse
        $html .= '<input type="hidden" name="answers['.$q->q_name.']" value="0" id="singlevar">';
        $pluginMustCondition[] = '$' . $q->q_name .' > 0 ';
}

if ($q->must_answer &&  $pluginMustCondition) $_SESSION['mustAnswerCondition'] = implode(" OR ",$pluginMustCondition);
?>