<?php
    //ini_set("display_errors", 1);
    include_once(PATH_TO_ROOT."/webcati/_plugins/gallery/class/class.gallery.plugin.php");
    $data = new GalleryPlugin($db);
    $data->load($projectId, $q->id);
    
	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">';
    }
    
?>      

<!doctype html>
<head>
  <style>
    /* Prevents slides from flashing */
    #slides {
      display:none;
    }
    .container {
      margin: 0 auto;
      width: <?php echo $data->getVal('image_width'); ?>px;
      height: <?php echo $data->getVal('image_height'); ?>px
    }
    
    #slides {
      display: none
    }

    #slides .slidesjs-navigation {
      margin-top:5px;
    }

    a.slidesjs-next,
    a.slidesjs-previous,
    a.slidesjs-play,
    a.slidesjs-stop {
      background-repeat: no-repeat;
      display:block;
      width:12px;
      height:18px;
      overflow: hidden;
      text-indent: -9999px;
      float: left;
      margin-right:5px;
    }

    a.slidesjs-next {
      margin-right:10px;
      background-image: url(<?php echo strlen($data->getVal('next_button_image')) > 0?$data->getVal('next_button_image'):PATH_TO_ROOT."/webcati/_plugins/gallery/web/_icons/next.png";?>);
    }

    a:hover.slidesjs-next {
      background-image: url(<?php echo strlen($data->getVal('next_mouseover_button_image')) > 0?$data->getVal('next_mouseover_button_image'):PATH_TO_ROOT."/webcati/_plugins/gallery/web/_icons/next-mouseover.png";?>);
    }

    a.slidesjs-previous {
      background-image: url(<?php echo strlen($data->getVal('prev_button_image')) > 0?$data->getVal('prev_button_image'):PATH_TO_ROOT."/webcati/_plugins/gallery/web/_icons/prev.png";?>);
    }

    a:hover.slidesjs-previous {
      background-image: url(<?php echo strlen($data->getVal('prev_mouseover_button_image')) > 0?$data->getVal('prev_mouseover_button_image'):PATH_TO_ROOT."/webcati/_plugins/gallery/web/_icons/prev-mouseover.png";?>);
    }

    a.slidesjs-play {
      width:15px;
      background-image: url(<?php echo strlen($data->getVal('play_button_image')) > 0?$data->getVal('play_button_image'):PATH_TO_ROOT."/webcati/_plugins/gallery/web/_icons/play.png";?>);
    }

    a:hover.slidesjs-play {
      background-image: url(<?php echo strlen($data->getVal('play_mouseover_button_image')) > 0?$data->getVal('stop_mouseover_button_image'):PATH_TO_ROOT."/webcati/_plugins/gallery/web/_icons/play-mouseover.png";?>);
    }

    a.slidesjs-stop {
      width:18px;
      background-image: url(<?php echo strlen($data->getVal('stop_button_image')) > 0?$data->getVal('stop_button_image'):PATH_TO_ROOT."/webcati/_plugins/gallery/web/_icons/pause.png";?>);
    }

    a:hover.slidesjs-stop {
       background-image: url(<?php echo strlen($data->getVal('stop_mouseover_button_image')) > 0?$data->getVal('stop_mouseover_button_image'):PATH_TO_ROOT."/webcati/_plugins/gallery/web/_icons/pause-mouseover.png";?>);
    }

    .slidesjs-pagination {
      margin: 7px 0 0;
      float: right;
      list-style: none;
    }

    .slidesjs-pagination li {
      float: left;
      margin: 0 1px;
    }

    .slidesjs-pagination li a {
      display: block;
      width: 13px;
      height: 0;
      padding-top: 13px;
      background-position: 0 0;
      float: left;
      overflow: hidden;
    }

    .slidesjs-pagination li a.active,
    .slidesjs-pagination li a:hover.active {
      background-position: 0 -13px
    }

    .slidesjs-pagination li a:hover {
      background-position: 0 -26px
    }

    #slides a:link,
    #slides a:visited {
      color: #333
    }

    #slides a:hover,
    #slides a:active {
      color: #9e2020
    }

    .navbar {
      overflow: hidden
    }
  </style>

  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script src="<?php echo PATH_TO_ROOT."/webcati/_plugins/gallery/web";?>/_js/jquery.slides.min.js"></script>

  <script>
    $(function(){
      $("#slides").slidesjs({
        navigation: false,
        width: <?php echo $data->getVal('image_width'); ?>,
        height: <?php echo $data->getVal('image_height'); ?>,
        pagination: {
          active: <?php echo $data->getVal('pagination'); ?>,
        },
        navigation: {
          active: <?php echo $data->getVal('show_navigation'); ?>,
            // [boolean] Generates next and previous buttons.
            // You can set to false and use your own buttons.
            // User defined buttons must have the following:
            // previous button: class="slidesjs-previous slidesjs-navigation"
            // next button: class="slidesjs-next slidesjs-navigation"
          effect: "slide"
            // [string] Can be either "slide" or "fade".
        },
        play: {
          active: <?php echo $data->getVal('show_buttons'); ?>,
            // [boolean] Generate the play and stop buttons.
            // You cannot use your own buttons. Sorry.
          effect: "slide",
            // [string] Can be either "slide" or "fade".
          interval: <?php echo $data->getVal('sliding_interval'); ?>,
            // [number] Time spent on each slide in milliseconds.
          auto: <?php echo $data->getVal('auto_play');?>,
            // [boolean] Start playing the slideshow on load.
          swap: true,
            // [boolean] show/hide stop and play buttons
          pauseOnHover: false,
            // [boolean] pause a playing slideshow on hover
          restartDelay: 2500
            // [number] restart delay on inactive slideshow
        }
      });
    });
  </script>
</head>
<body>
  <div class="container">
      <div id="slides">
          <?php foreach($data->getImageArray() as $image)
          {?>
              <img width="<?php echo $data->getVal('image_width'); ?>" height="<?php echo $data->getVal('image_height'); ?>" src="<?php echo $image; ?>" />
    <?php } ?>
    
      </div>
  </div>
</body>