$(function() {
//  alert("hi");
  $('#filterForm').submit(function(e) {
    e.preventDefault();
    var formData = $(this).serializeArray();
    $('#submitFilter').val("Loading...").attr("disabled", "disabled");
    $('#previewPane').empty();
    $.post("files/json_list", formData, function(data) {
      $('#submitFilter').val("Submit").removeAttr("disabled");
//      MAAKICHUT = response;
      var files = data.files;
//      console.log(files);
      $('#fileList').empty();
      $('#noOfPages').text(data.noOfPages);
      $('#noOfResults').text(data.noOfResults);
      $('#currentPageNo').text($('#page_no').val());
      for (var i=0; i<files.length; i++) {
//        console.log(files[i]);
        var $file = getJQ(files[i]);
        $('#fileList').append($file);
      }
    }, "json");
  });

  $('#prevBtn').click(function() {
    var $page_no = $('#page_no');
    var currPage = parseInt($page_no.val());
    if (currPage > 1) {
      $page_no.val(currPage - 1);
      $('#filterForm').submit();
    }
  });

  $('#nextBtn').click(function() {
    var $page_no = $('#page_no');
    var currPage = parseInt($page_no.val());
    $page_no.val(currPage + 1);
    $('#filterForm').submit();
  });

});

function getJQ(f) {
  var jq = getListElement(f);
//  var jq = $("<div />").data("data", f).addClass("fileItem").text(f.type + ": " + f.title);
  jq.click(function() {
    var $this = $(this);
    $('.selectedItem').removeClass("selectedItem");
    $this.addClass("selectedItem");
    var d = $this.data("data");
    var $pane = $('<div />').addClass("previewPane");
    var $previewObj = $('<div />').addClass("previewObject").appendTo($pane);
    var html = '';
    switch (d.type) {
      case "image":
        html += "<img width='400' src='" + d.thumbnail + "' />";
        break;
      case "video":
        html += "<video controls='controls' width='400' src='" + d.url + "' />";
        break;
      case "audio":
        html += "<audio controls='controls' width='400' src='" + d.url + "' />";
        break;
      default:
        html += "";
        break;    
    };
    html += "<br />";
    html += "<a href='" + d.url + "' target='_blank'>Click to View Original File</a>"; 
    $previewObj.html(html);
    $itemForm = getItemForm(f);
    $itemForm.appendTo($pane);
    $('#previewPane').empty();
    $('#previewPane').append($pane);
  });
  return jq;
}

function getItemForm(f) {
  var $form = $('<div />').addClass("itemForm");
  var $titleP = $('<p />').appendTo($form);
  var $titleLabel = $('<span />').addClass("itemFormLabel").text("Title: ").appendTo($titleP);
  var $titleInput = $('<input />').val(f.title).appendTo($titleP);
  var $descriptionP = $('<p />').appendTo($form);
  var $descriptionLabel = $('<span />').addClass("itemFormLabel").text("Description: ").appendTo($descriptionP);
  var $descriptionInput = $('<textarea />').val(f.description).appendTo($descriptionP);
  var $submitP = $('<p />').appendTo($form);
  var $submit = $('<input />').addClass("submitItem").attr("type", "submit").val("Submit").appendTo($submitP);
  return $form; 
}

function getListElement(f) {
//  console.log(f);
  var $item = $('<div />').addClass("fileItem").data("data", f);
  var $checkbox = $('<input />').attr("type", "checkbox").addClass("fileCheckbox").appendTo($item);
  var $icon = $('<img />').addClass("fileIcon").attr("src", "/static/images/icons2/" + f.type.toLowerCase() + ".jpg").appendTo($item); 
  var $study = $('<span />').addClass("fileStudy").text(f.studies[0].name + ": ").appendTo($item);
  var $title = $('<span />').addClass("fileTitle").text(f.title).appendTo($item);  
  return $item;
}
