<?php 

class ImageCapture  {
  private $scope;
  private $scopeId;
  private $rowList;
  private $cardinals;
  private $control;
  private $label;

  public function __construct($entry) {

  $prop = (object)array(
              "scope"     => "time_taken",
              "label"     => "Time",
              "hourRange" => "00,23",
              "iterator"  => "selectimage_divisions",
              "format"    => "time",              
              "minList"   => "00,15,30,45"
 	            );

      $photoTime = new MultiHourMin($prop);
      $this->photoTimeLayout = $photoTime->outputLayout();
      $this->photoTimeScript = $photoTime->outputScript();

    

    if (isset($entry)) {
      $this->scope   = $entry->scope;
      $this->scopeId = $entry->scopeId;
      $this->label   = $entry->label;
      $this->rowList = $entry->rowList;
//$cnt = count($entry->rowList);
//print_r ("cnt:$cnt");     
      $cardinals = "<option value=0>Direction</option>";
      foreach ($entry->cardinalsList as $option) {
        $candinals .= "<option value=$option->id>$option->text</option>";
      }

      $groupings = "<option value=0>Grouping</option>";
//      foreach ($entry->grpList as $option) {
//        $groupings .= "<option value=$option->id>$option->text</option>";
//      }

      $this->control = "
      <tr id='template$this->scope' style='border:1px solid grey;height:80px'>
        <td style='width:5%;margin-bottom:0px;'>
          <input id=0 type='checkbox' class='img-summ$this->scope'>
          <div id=0 class='upd-sub$this->scope'></div> 
        </td>          
        <td style='margin-bottom:0px;'>
          <button id='realButton' type='button' class='btn btn-default' style='width:110px;height:85px;position:relative;'>
            <span style='font-size:3.0em;position:absolute;right:10;bottom:0;' class='glyphicon glyphicon-camera'></span>
            <input id='upload$this->scope' type='file' id='files' visbility='hidden'
            style='width:100%;height:100%;opacity:0;'/>
          </button>
        </td>
        
        <td valign='top' style='width:15%;margin-bottom:0px;'>        
     $this->photoTimeLayout<br>
          <select class='image$this->scope' name='cardinal_id' style='margin:0px;height:26px'>
            $cardinals
          </select>
          <div id=filename style='height:12px;font-size:12px;font-weight:700;'></div>
        </td>
        <td valign='top' style='width:15%;margin-bottom:0px;'>        
          <label style='margin-bottom:0px;'>Location</label><br>   
          <input type='text' class='image$this->scope' name='location'>          
          <select class='image$this->scope' name='phototag_id' style='margin:0px;height:26px'>
            $groupings
          </select>
        </td>
        <td valign='top' colspan='3' style='width:45%;margin-bottom:0px;'> 
          <label style='margin-bottom:0px;'>Notes</label>        
          <textarea class='image$this->scope' name='note' rows='3'></textarea>
        </td>
        <td style=width:5%;margin-bottom:0px;>
          <button id=0 class='btn btn-inverse commit$this->scope' name='commit$this->scope'>Commit</button>
        </td>
      </tr>
    ";
    }
  }
  
  public function outputLayout() {

    $layout = "
<label for='$this->scope' style='margin-bottom:0px;'>$this->label</label><br>
<div style='border:1px solid #ccc;height:30em;overflow-x:auto;'>

  <table class='list$this->scope' style='float:right;'>
    <tbody id='list$this->scope'>
    ";    
    
    foreach ($this->rowList as $row) {

      $layout .= "
    $this->control
      "; 
    }
                      
    $layout .= "
      <tr>
        <td colspan='6'>
          <button class='btn btn-inverse' id='delete$this->scope' style='width:150px;'>Delete</button>
        </td>
      </tr>  
    </tbody>
  </table>
</div>
   ";
    return $layout;
  }	

  public function outputScript() {

	  $script = "
    
$this->photoTimeScript
    
// IMAGE-CAPTURE
var current$this->scope = 0;
var rowid$this->scope = 0;
$(document).on('click', '.commit$this->scope', function (e) {
  var rowid  = $(this).prop('id'); // selected row id
  put$this->scope (rowid);
});

$(document).on('click', '#delete$this->scope', function (e) {
alert (rowid$this->scope);  
  putdel$this->scope (rowid$this->scope);
});

$(document).on('change', '#upload$this->scope', function(e) {
  var photoToUpload = $(this).prop('files')[0];
 
  var now = new Date();  
  var hours = now.getHours();
  var minutes = now.getMinutes();
  var m = (((minutes + 7.5)/15 | 0) * 15) % 60;
  var h = ((((minutes/105) + .5) | 0) + hours) % 24;
  taken = addZero(h) + ':' + addZero(m);

  putadd$this->scope (photoToUpload, taken)  
  
});

$(document).on('click', '.img-summ$this->scope', function (e) {
  
  if (!$(this).prop('checked')) {
    $('#delete$this->scope').prop('disabled', false);
    var rowid$this->scope = 0;
  }
  else {  
    $('.img-summ$this->scope').prop('checked', false);
    $(this).prop('checked', true);
    $('#delete$this->scope').prop('disabled', false);
    var rowid$this->scope = $(this).prop('id');
  }	
});

function addZero(i) {
  if (i < 10) {
    i = '0' + i;
  }
  return i;
}


function notify$this->scope (messageId) {
  current$this->scope = messageId;
  get$this->scope (messageId);
}

function gen$this->scope(rows) {

  $('.listrow$this->scope').each (function () {
    $(this).remove();
  });    
  
  for (var i=0; i<rows.length; i++) {

    var rowid       = rows[i].id;
    var filePath    = rows[i].filename;
    var fileName    = filePath.substring(filePath.lastIndexOf('/')+1);
    var cardinal_id = rows[i].cardinal_id;
    var phototag_id = rows[i].phototag_id;
    var note        = rows[i].note;
    var location    = rows[i].location;
    var taken       = rows[i].time_taken;
    var note        = rows[i].note;
 
    $('#template$this->scope').clone().appendTo('#list$this->scope');
    $('#template$this->scope td:eq(1)').html('<div class=thumbs><div class=thumb><img src=\"'+filePath+'\"/></div></div>');

    $('#template$this->scope').prop('class', 'listrow$this->scope');
    $('#template$this->scope').prop('id', rowid);
    $('#template$this->scope').prependTo('#list$this->scope');
    $('#'+rowid+'.listrow$this->scope .img-summ$this->scope').prop('id',rowid);
    $('#'+rowid+'.listrow$this->scope .upd-sub$this->scope').prop('id',rowid);

    
    
    $('#'+rowid+'.listrow$this->scope input[name='+'time_taken'+']').prop('id',rowid);
    $('#'+rowid+'.listrow$this->scope select[name='+'hour_taken'+']').prop('id', rowid);
    $('#'+rowid+'.listrow$this->scope select[name='+'min_taken'+']').prop('id',rowid);
    $('#'+rowid+'.listrow$this->scope input[name='+'time_taken'+']').prop('value',
      taken).trigger('chgselectimage_divisions', [rowid]);

    $('#'+rowid+'.listrow$this->scope input[name='+'location'+']').prop('value',location);
    $('#'+rowid+'.listrow$this->scope textarea[name='+'note'+']').prop('value', note);

    $('#'+rowid+'.listrow$this->scope div[id='+'filename'+']').html(fileName);

    $('#'+rowid+'.listrow$this->scope select[name='+'cardinal_id'+']').find('option[value='+cardinal_id+']').prop('selected', true);
    $('#'+rowid+'.listrow$this->scope select[name='+'phototag_id'+']').find('option[value='+phototag_id+']').prop('selected', true);
    $('#'+rowid+'.listrow$this->scope button[name='+'commit$this->scope'+']').prop('id',rowid);

    }  
} 

function get$this->scope (id) {

  var params = 'currid=' + id;
  
  var xhr = new XMLHttpRequest();
  xhr.open('POST', 'ajax/get$this->scope.php', true);
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  xhr.onreadystatechange = function() {//Call a function when the state changes.
    if (xhr.readyState == 4 && xhr.status == 200) {
      var response = JSON.parse(xhr.responseText)
      gen$this->scope(response);
   }
  }  
  xhr.send(params);
}

function putadd$this->scope (photoFile, time) {

  var params = 'taken=' + time + '&' + 'currid=' + current$this->scope + '&' + 'scopeid=$this->scopeId';
  var xhr = new XMLHttpRequest();
  xhr.open('POST', 'ajax/putadd$this->scope.php', true);
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  xhr.onreadystatechange = function() {//Call a function when the state changes.
    if (xhr.readyState == 4 && xhr.status == 200) {
      var response = JSON.parse(xhr.responseText);
      var fd = new FormData();
      fd.append('fileToUpload', photoFile);
      fd.append('photo_id', response[0]);
      fd.append('fileName', response[1]);
      fd.append('dirName', response[2]);
      fd.append('pathName', response[3]);
      fd.append('timeTaken', response[4]);
      upload$this->scope (fd);
    }
  }  
  xhr.send(params);
}

function put$this->scope (rowid) {
  
  var params = 'rowid=' + rowid + '&';
  params += 'time_taken=' + $('#'+rowid+'.listrow$this->scope input[name='+'time_taken'+']').val() + '&';
  params += 'cardinal_id=' + $('#'+rowid+'.listrow$this->scope select[name='+'cardinal_id'+']').val() + '&';
  params += 'location=' + $('#'+rowid+'.listrow$this->scope input[name='+'location'+']').val() + '&';
  params += 'phototag_id=' + $('#'+rowid+'.listrow$this->scope select[name='+'phototag_id'+']').val() + '&';
  params += 'note=' + $('#'+rowid+'.listrow$this->scope textarea[name='+'note'+']').val();

  var xhr = new XMLHttpRequest();
  xhr.open('POST', 'ajax/put$this->scope.php', true);
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  xhr.onreadystatechange = function() {//Call a function when the state changes.
    if (xhr.readyState == 4 && xhr.status == 200) {
      var response = JSON.parse(xhr.responseText)
    }
  }  
  xhr.send(params);
}

function putdel$this->scope (id) {

  var params = 'rowid=' + id;
  
  var xhr = new XMLHttpRequest();
  xhr.open('POST', 'ajax/putdel$this->scope.php', true);
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  xhr.onreadystatechange = function() {//Call a function when the state changes.
    if (xhr.readyState == 4 && xhr.status == 200) {
      var response = JSON.parse(xhr.responseText)
      get$this->scope (current$this->scope);
    }
  }  
  xhr.send(params);
}

function upload$this->scope (formData) {

  var xhr = new XMLHttpRequest();
  xhr.open('POST', 'ajax/upload$this->scope.php', true);
  xhr.onload = function() {//Call a function when the state changes.
    var response = JSON.parse(xhr.responseText);
    var filePath = response[3] + '/' + response[1];
    var button = 'button';
    var rowid = response[0]; 
      
    $('#template$this->scope').clone().appendTo('#list$this->scope');
    $('#template$this->scope td:eq(1)').html('<div class=thumbs><div class=thumb><img src=\"'+filePath+'\"/></div></div>');
    $('#template$this->scope').prop('class', 'listrow$this->scope');
    $('#template$this->scope').prop('id', rowid);
    $('#template$this->scope').prependTo('#list$this->scope');
    $('#'+rowid+'.listrow$this->scope input[name='+'time_taken'+']').prop('id',rowid);
    $('#'+rowid+'.listrow$this->scope input[name='+'time_taken'+']').prop('id',rowid);
    $('#'+rowid+'.listrow$this->scope select[name='+'hour_taken'+']').prop('id', rowid);
    $('#'+rowid+'.listrow$this->scope select[name='+'min_taken'+']').prop('id',rowid);
    $('#'+rowid+'.listrow$this->scope input[name='+'time_taken'+']').prop('value',
      response[4]).trigger('chgselectimage_divisions', [rowid]);
    $('#'+rowid+'.listrow$this->scope button[name='+'commit$this->scope'+']').prop('id',rowid);

  }  
  xhr.send(formData);
}

function up$this->scope(form_data) {
  $.ajax({
    url: 'ajax/upload$this->scope.php', // point to server-side PHP script 
    dataType: 'text',  // what to expect back from the PHP script, if anything
    cache: false,
    contentType: false,
    processData: false,
    data: form_data,                         
    type: 'post',
    success: function(php_script_response){
      return(php_script_response);
    }
  });
}

    "; 
    return $script;
  }
}

?>