RESTORE_FE/js/OA.js

var link = thisUrlParams.link;

prefixes = queryManager['prefixes']['all'];

queryURL = prefixes + (queryManager['querySchedaOpera']['queryInfo']).replace('{URI}', link);
doJsonQuery(queryURL).done(function(data) { handle_OAdata(data); });

queryPro = prefixes + (queryManager['querySchedaOpera']['queryProduction']).replace('{URI}', link);
doJsonQuery(queryPro).done(function(data) { handle_Production(data); });

queryBib = prefixes + (queryManager['querySchedaOpera']['queryBibliography']).replace('{URI}', link);
doJsonQuery(queryBib).done(function(data) { handle_Bibliography(data); });

queryPic = prefixes + (queryManager['querySchedaOpera']['queryPicture']).replace('{URI}', link);
doJsonQuery(queryPic).done(function(data) { handle_Picture(data); });

querySc = prefixes + (queryManager['querySchedaOpera']['querySchedeStoriche']).replace('{URI}', link);
doJsonQuery(querySc).done(function(data) { handle_SchedeStoriche(data); });

var img_pic = "";
var img_cat = "";
var img_sc = "";

function handle_OAdata(json) {

  console.log(json['results']['bindings']);

  $.each(
      json['results']['bindings'],
      function (index, value) {
        var graph = value['graph']['value'];
        var label = value['label']['value'];
        var uri = value['uri']['value'];
        var title = "";
        var type = "";
        var current_owner = "";
        var current_location = "";
        var subject = "";
        var dimensions = "";
        var materials = "";
        var condition = "";
        var note = "";
        var identifier = "";
        var unit = "";
        var inscription = "";
        var src_picture = "";
        var picture = "";

        var dataset = get_dataset_name(graph);
        

        if (value.hasOwnProperty('title')) {
          $("#SGTT").css("display", "flex");
          title = value['title']['value'];
        }
        if (value.hasOwnProperty('identifier')) {
          $("#NCT").css("display", "flex");
          identifier = value['identifier']['value'];
        }
        if (value.hasOwnProperty('type')) {
          $("#OGTD").css("display", "flex");
          type = "<div class='d-flex'><div class='mr-3'><a href='" + value['uriType']['value'] + "'>" +
                  value['type']['value'] + "</a></div></div>";
        }
        if (value.hasOwnProperty('current_owner')) {
          $("#LDCN").css("display", "flex");
          current_owner = "<div class='d-flex'><div class='mr-3'><a href='" + value['uriOwner']['value'] + "'>" +
                            value['current_owner']['value'] + "</a></div></div>";
        }
        if (value.hasOwnProperty('current_location')) {
          $("#LDCS").css("display", "flex");
          current_location = value['current_location']['value'];
        }
        if (value.hasOwnProperty('unit')) {
          unit = value['unit']['value'];
        }
        if (value.hasOwnProperty('subject')) {
          $("#SGTI").css("display", "flex");
          subject = value['subject']['value'];
        }
        if (value.hasOwnProperty('dimensions')) {
          if (value['dimensions']['value'] != "") {
            $("#MIS").css("display", "flex");
            dimensions = value['dimensions']['value'];
          }
        }
        if (value.hasOwnProperty('condition')) {
          $("#STCC").css("display", "flex");
          condition = value['condition']['value'];
        }
        if (value.hasOwnProperty('note')) {
          $("#NSC").css("display", "flex");
          note = value['note']['value'];
        }
        if (value.hasOwnProperty('iscrizione')) {
          $("#ISCR").css("display", "flex");
          inscription = value['iscrizione']['value'];
        }
        if (value.hasOwnProperty('uriSubjectPer')) {
          var givenName = value['personName']['value'];
          var surname = value['personSurname']['value'];
          var patronymic = value['personPatronymic']['value'];
          var name = givenName + " " + patronymic + " " + titleCase(surname);
          subject += "<br /><div class='d-flex'><div class='mr-3'><a href='" + value['uriSubjectPer']['value'] + "'>" +
          name + "</a></div><div class='d-flex ml-auto'><div class='persona btn-icon' style='cursor:pointer' id='" +
          value['uriSubjectPer']['value'] + "'><i class='fa fa-user'></i><p class='btn-text'>PERSONA</p></div></div></div></div>";
          
        }
        if (value.hasOwnProperty('Materials')) {
          if (value['Materials']['value'] != "") {
            $("#MTC").css("display", "flex");
            mm = value['Materials']['value'];
            mat = mm.split("<br />");
            for (i in mat) {
                slice = mat[i].split("; ");
                /*materials += "<a href='" + slice[0] + "'>" + slice[1] + "</a><br />";*/

                materials += "<div class='d-flex'><div class='mr-3'><a href='" + slice[0] + "'>" +
                slice[1] + "</a></div>";
            }
          }
        }

        var Buttons = '<button title="Apri risorsa originale" class="btn btn-default" type="button" onclick="schedaASPO(\'' + uri + '\')"> \
        <i class="fas fa-external-link-alt" aria-hidden="true"></i></button> \
        <button title="Citazione" type="button" value="artwork" id="' + uri + '" class="cit btn btn-default" alt="scheda" title="Citazione"><i class="fa fa-quote-right"></i></button> \
        <button title="Permalink" type="button" value="artwork" id="' + uri + '" class="hyp btn btn-default" alt="scheda" title="Hyperlink"><i class="fa fa-link"></i></button> \
        <a href="http://dev.restore.ovi.cnr.it/lodlive/?' + uri + '" target="_blank"><button type="button" title="Naviga il grafo" class="btn btn-default info" alt="LOD" title="LodLive"><i class="fa fa-share-alt"></i></button></a></div></div>';

        var subjects = document.getElementsByClassName("subject");

        for (i in subjects) {
          subjects[i].innerHTML = subject;
        }

        document.getElementById("grafo").innerHTML = dataset;
        document.getElementById("nome_oggetto").innerHTML = label;
        document.getElementById("identifier").innerHTML = identifier;
        document.getElementById("type").innerHTML = type;
        document.getElementById("owner").innerHTML = current_owner;
        document.getElementById("dimensions").innerHTML = dimensions + unit;
        document.getElementById("materials").innerHTML = materials;
        document.getElementById("condition").innerHTML = condition;
        document.getElementById("description").innerHTML = note;
        document.getElementById("inscription").innerHTML = inscription;
        document.getElementById("link_buttons").innerHTML = Buttons;

        
      });
  
}

function handle_Picture(json) {

  console.log(json['results']['bindings']);

  var picture = "";
  const tavole = [];

  $.each(
      json['results']['bindings'],
      function (index, value) {
        var src_picture = value['picture']['value'];
        var tipo = "";  

        if (value.hasOwnProperty('type')) {
          tipo = value['type']['value'];
        }

        let tv = [src_picture, tipo];
        tavole.push(tv);

        src_picture = value['picture']['value'];
        picture += '<div class="row"> \
                           <img class="viewImage" src="img/mpp_img/' + src_picture + '" onclick="expandImg(this);" /> \
                    </div>';

        
      });

      var front_pic = "";

      if (tavole.length > 1) {
        for (i in tavole) {
            if (tavole[i][1] == "Tavola d'insieme") {
              front_pic = tavole[i][0];
            }
        }
      } else {
        front_pic = tavole[0][0];
      }

      img_pic = "img/mpp_img/" + front_pic;

      document.getElementById("image_artwork_min").innerHTML = picture;
      document.getElementById("expandedImg").src = "img/mpp_img/" + front_pic;

}


function get_dataset_name(graph) {
  var string = "Scheda Opera d'Arte";
  if (graph == "http://dev.restore.ovi.cnr.it:8890/mpp/martini") {
    string = string + " / Collezione Martini";
  }
  else if (graph == "http://dev.restore.ovi.cnr.it:8890/mpp/ospedale") {
    string = string + " / Collezione Ospedale";
  }
  else if (graph == "http://dev.restore.ovi.cnr.it:8890/mpp/datini") {
    string = string + " / Collezione Datini";
  }
  else {
    string = string;
  }
  return (string);
}


function handle_Production(json) {

  console.log(json['results']['bindings']);

  $.each(
      json['results']['bindings'],
      function (index, value) {
        var partecipants = "";
        var teche = "";
        var time = "";
        var client = "";
        var artist = "";
        var artist_name = "";
        

        if (value.hasOwnProperty('techniques')) {
          if (value['techniques']['value'] != "") {
            $("#MTC").css("display", "flex");
            tt = value['techniques']['value'];
            tec = tt.split("<br />");
            for (i in tec) {
                slice = tec[i].split("; ");
                /*teche += "<a href='" + slice[0] + "'>" + slice[1] + "</a><br />";*/

                teche += "<div class='d-flex'><div class='mr-3'><a href='" + slice[0] + "'>" +
                          slice[1] + "</a></div>";
            }
          }
        }
        if (value.hasOwnProperty('Partecipants')) {
          pp = value['Partecipants']['value'];
          people = pp.split("<br />");
          for (i in people) {
              slice = people[i].split("; ");
              if (slice[2] == "Committente") {
                $("#CMM").css("display", "flex");
                client += slice[1];
              } else {
                $("#AUT").css("display", "flex");
                artist_name += slice[1];
                artist += "<div class='d-flex'><div class='mr-3'><a href='" + slice[0] + "'>" +
                          slice[1] + "</a></div><div class='d-flex ml-auto'><div class='persona btn-icon' style='cursor:pointer' id='" +
                          slice[0] + "'><i class='fa fa-user'></i><p class='btn-text'>PERSONA</p></div></div></div></div>";
              }
          }
        }
        
        if (value.hasOwnProperty('time') && (value['time']['value'] != "")) {
          $("#DT").css("display", "flex");
          time = value['time']['value'];
        }

        var authors = document.getElementsByClassName("author");

        for (i in authors) {
          authors[i].innerHTML = artist;
        }

        var dates = document.getElementsByClassName("date");

        for (i in dates) {
          dates[i].innerHTML = time;
        }
        
        
        document.getElementById("technique").innerHTML = teche;
        document.getElementById("client").innerHTML = client;
        
      });
  
}

function handle_Bibliography(json) {

  console.log(json['results']['bindings']);

  var Biblio = "";
  var bibCit = "";
  const bibArray = [];
  var catImg = "";

  $.each(
      json['results']['bindings'],
      function (index, value) {
        var bib = value['bibliography']['value'];
        var pages = "";  

        if (value.hasOwnProperty('pages')) {
          pages = value['pages']['value'];
        }

        if (value.hasOwnProperty('catalog')) {
          if (value['catalog']['value'] != "") {
            bibCit = value['bibliography']['value'];
            cc = value['catalog']['value'];
            cat = cc.split(", ");
            for (i in cat) {
                var marchini = cat[i].replace(".jpg", " (1).jpg");
                img_cat = "img/MPP_marchini_stampa/" + marchini;
                catImg += '<div class="row"> \
                              <img class="viewImage" src="img/MPP_marchini_stampa/' + marchini + '" onclick="expandImg(this);" /> \
                          </div>';
            }
          }
        }

        
        var book = bib + " " + pages;
        bibArray.push(book);
        
      });

      console.log(catImg);

      bibArray.sort();

      for (k in bibArray) {
        Biblio += '<li>' + bibArray[k] + '</li>';
      }

      document.getElementById("bibliography").innerHTML = Biblio;
      document.getElementById("catalog_description").innerHTML = bibCit;
      if (catImg == "") {
        $("#btn_catalogo").css("display", "none");
      } else {
        document.getElementById("image_catalog_min").innerHTML = catImg;
      }
  
}

function handle_SchedeStoriche(json) {

  console.log(json['results']['bindings']);

  const schede = [];

  let suffix = ["0", "1", "2", "3", "4", "5"];

  $.each(
      json['results']['bindings'],
      function (index, value) {
        var scheda = value['scheda']['value'];
        scheda.replace(".jpg", "");
        schede.push(scheda);

        for (i in suffix) {
          ss = suffix[i];
          var image_scheda = "img/schedeStoriche/" + scheda + "/" + ss + ".jpg";
          createImage(image_scheda);
        }

       /* img_sc = "img/mpp_img/" + scheda;
        schede += '<div class="row"> \
                      <img class="viewImage" src="img/mpp_img/' + scheda + '" onclick="expandImg(this);" /> \
                    </div>';

        var dir = "img/schedeStoriche/" + scheda + "/";
        console.log(files);*/
        
      });

  if (schede.length = 0) {
    $("#btn_schedastorica").css("display", "none");
  }/* else {
    document.getElementById("image_scheda_min").innerHTML = schede;
  }*/
  
}

function createImage(image) {
  checkIfImageExists(image, (exists) => {
    if (exists) {
      console.log(image);
      var Image = '<div class="row"> \
      <img class="viewImage" src="' + image + '" onclick="expandImg(this);"> \
      </div>';
      console.log(Image);
      $('#image_scheda_min').append(Image);
    } else {
      console.error('Image does not exists.')
    }
  });
}

function checkIfImageExists(url, callback) {
  const img = new Image();
  img.src = url;
  
  if (img.complete) {
    callback(true);
  } else {
    img.onload = () => {
      callback(true);
    };
    
    img.onerror = () => {
      callback(false);
    };
  }
}

function show_OA(){
  document.getElementById("OA_info").style.display = "block";
  document.getElementById("catalogo_info").style.display = "none";
  document.getElementById("scheda_info").style.display = "none";
  document.getElementById("image_artwork_min").style.display = "block";
  document.getElementById("image_catalog_min").style.display = "none";
  document.getElementById("image_scheda_min").style.display = "none";
  document.getElementById("img_title").innerHTML = "Opera";
  document.getElementById("expandedImg").src = img_pic;
}

function show_CAT(){
  document.getElementById("OA_info").style.display = "none";
  document.getElementById("catalogo_info").style.display = "block";
  document.getElementById("scheda_info").style.display = "none";
  document.getElementById("image_artwork_min").style.display = "none";
  document.getElementById("image_catalog_min").style.display = "block";
  document.getElementById("image_scheda_min").style.display = "none";
  document.getElementById("img_title").innerHTML = "Catalogo";
  document.getElementById("expandedImg").src = img_cat;
}

function show_INV(){
  document.getElementById("OA_info").style.display = "none";
  document.getElementById("catalogo_info").style.display = "none";
  document.getElementById("scheda_info").style.display = "block";
  document.getElementById("image_artwork_min").style.display = "none";
  document.getElementById("image_catalog_min").style.display = "none";
  document.getElementById("image_scheda_min").style.display = "block";
  document.getElementById("img_title").innerHTML = "Scheda Storica";
  document.getElementById("expandedImg").src = img_sc;
}

var $loupe = $(".loupe"),
    loupeWidth = $loupe.width(),
    loupeHeight = $loupe.height();

$(document).on("mouseenter", ".image", function (e) {
    var $currImage = $(this),
        $img = $('<img/>')
        .attr('src', $('img', this).attr("src"))
        .css({ 'width': $currImage.width() * 2, 'height': $currImage.height() * 2 });

    $loupe.html($img).fadeIn(100);
    
    $(document).on("mousemove",moveHandler);
                   
    function moveHandler(e) {
        var imageOffset = $currImage.offset(),
            fx = imageOffset.left - loupeWidth / 2,
            fy = imageOffset.top - loupeHeight / 2,
            fh = imageOffset.top + $currImage.height() + loupeHeight / 2,
            fw = imageOffset.left + $currImage.width() + loupeWidth / 2;
        
        $loupe.css({
            'left': e.pageX - 75,
            'top': e.pageY - 75
        });

        var loupeOffset = $loupe.offset(),
            lx = loupeOffset.left,
            ly = loupeOffset.top,
            lw = lx + loupeWidth,
            lh = ly + loupeHeight,
            bigy = (ly - loupeHeight / 4 - fy) * 2,
            bigx = (lx - loupeWidth / 4 - fx) * 2;

        $img.css({ 'left': -bigx, 'top': -bigy });

        if (lx < fx || lh > fh || ly < fy || lw > fw) {
            $img.remove();
            $(document).off("mousemove",moveHandler);
            $loupe.fadeOut(100);
        }
    }
});