RESTORE_FE/js/OA.js

var link = thisUrlParams.link;

console.log(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); });

queryIcon = prefixes + (queryManager['querySchedaOpera']['queryIconclass']).replace('{URI}', link);
doJsonQuery(queryIcon).done(function(data) { handle_Iconclass(data); });

var img_pic = [];
var img_cat = [];
var img_sc = [];
var img_g1858 = [];
var img_g1888 = [];
var img_p1912 = [];
var img_m1956 = [];

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 conn_subject = "";
        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')) {
          $("#SGTI_C").css("display", "flex");
          var givenName = value['personName']['value'];
          var surname = value['personSurname']['value'];
          var patronymic = value['personPatronymic']['value'];
          var name = givenName + " " + patronymic + " " + titleCase(surname);
          conn_subject = "<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'>PERSON</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 subjects = document.getElementsByClassName("subject");

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

        createHeaderButtons(uri);

        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("connected_subject").innerHTML = conn_subject;
        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 = [];
  var provenienza = "";
  var licenza = "";

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

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

        if (value.hasOwnProperty('provenienza')) {
          $("#IMG_PRO").css("display", "flex");
          provenienza = '<a href="' + value['provenienza']['value'] + '">' + value['note']['value'] + '</a>';
          
        }

        if (value.hasOwnProperty('license')) {
          $("#CC_OA").css("display", "flex");
          licenza = '<img src="' + value['license']['value'] + '" width="100" height="auto">';
        }

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

        src_picture = value['picture']['value'];

        img_pic.push({
          type: "image",
          url: "http://iperion.vm.fedcloud.eu/img/mpp_img/" + src_picture 
        });

        
      });

      runOpenseadragon(img_pic);
      document.getElementById("imageInstitute").innerHTML = provenienza;
      document.getElementById("license").innerHTML = licenza;

}


function get_dataset_name(graph) {
  var string = "Artwork";
  if (graph == "http://147.213.76.182:8890/mpp/martini") {
    string = string + " / Martini";
  }
  else if (graph == "http://147.213.76.182:8890/mpp/ospedale") {
    string = string + " / Ospedale";
  }
  else if (graph == "http://147.213.76.182:8890/mpp/datini") {
    string = string + " / 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'>PERSON</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 = "";
  var g1858Cit = "";
  var g1888Cit = "";
  var p1912Cit = "";
  const bibArray = [];
  var catImg = "";
  var g1858Img = "";
  var g1888Img = "";
  var p1912Img = "";
  var n_cat = 0;
  var n_g1858 = 0;
  var n_g1888 = 0;
  var n_p1912 = 0;
  var provenienzaCat = "";
  var provenienzaG1858 = "";
  var provenienzaG1888 = "";
  var provenienzaP1912 = "";
  var licenzaCat = "";
  var licenzaG1858 = "";
  var licenzaG1888 = "";
  var licenzaP1912 = "";

  $.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')) {
          var type = "";
          if (value.hasOwnProperty('type')) {
            type = value['type']['value'];
          }

          if (type == "Guida Marchini 1958") {
            bibCit = value['bibliography']['value'] + " " + pages;
            cc = value['catalog']['value'];
            cat = cc.split(", ");
            for (i in cat) {
                n_cat+=1;
                var marchini = cat[i].replace(".jpg", " (1).jpg");
                var img_catalogo = "img/MPP_marchini_stampa/" + marchini;

                img_cat.push({
                  type: "image",
                  url: "http://iperion.vm.fedcloud.eu/" + img_catalogo
                });

            }
            if (value.hasOwnProperty('provenienza')) {
              $("#CAT_PRO").css("display", "flex");
              provenienzaCat = '<a href="' + value['provenienza']['value'] + '">' + value['note']['value'] + '</a>';
          
            }
    
            if (value.hasOwnProperty('license')) {
              $("#CC_CAT").css("display", "flex");
              licenzaCat = '<img src="' + value['license']['value'] + '" width="100" height="auto">';
            }
          }
          

          if (type == "Guida Guasti 1858") {
            g1858Cit = value['bibliography']['value'] + " " + pages;
            cc1858 = value['catalog']['value'];
            cat1858 = cc1858.split(", ");
            for (i in cat1858) {
                n_g1858+=1;
                var guasti1858 = cat1858[i];
                var img_guasti1858 = "img/MPP_Guasti_1858/" + guasti1858;

                img_g1858.push({
                  type: "image",
                  url: "http://iperion.vm.fedcloud.eu/" + img_guasti1858 
                });

            }
            if (value.hasOwnProperty('provenienza')) {
              $("#G1_PRO").css("display", "flex");
              provenienzaG1858 = '<a href="' + value['provenienza']['value'] + '">' + value['note']['value'] + '</a>';
          
            }
    
            if (value.hasOwnProperty('license')) {
              $("#CC_G1").css("display", "flex");
              licenzaG1858 = '<img src="' + value['license']['value'] + '" width="100" height="auto">';
            }
          }

          if (type == "Guida Guasti 1888") {
            g1888Cit = value['bibliography']['value'] + " " + pages;
            cc1888 = value['catalog']['value'];
            cat1888 = cc1888.split(", ");
            for (i in cat1888) {
                n_g1888+=1;
                var guasti1888 = cat1888[i];
                var img_guasti1888 = "img/MPP_Guasti_1888/" + guasti1888;

                img_g1888.push({
                  type: "image",
                  url: "http://iperion.vm.fedcloud.eu/" + img_guasti1888 
                });
            }
            if (value.hasOwnProperty('provenienza')) {
              $("#G2_PRO").css("display", "flex");
              provenienzaG1888 = '<a href="' + value['provenienza']['value'] + '">' + value['note']['value'] + '</a>';
          
            }
    
            if (value.hasOwnProperty('license')) {
              $("#CC_G2").css("display", "flex");
              licenzaG1888 = '<img src="' + value['license']['value'] + '" width="100" height="auto">';
            }
          }

          if (type == "Catalogo Papini 1912") {
            p1912Cit = value['bibliography']['value'] + " " + pages;
            cc1912 = value['catalog']['value'];
            cat1912 = cc1912.split(", ");
            for (i in cat1912) {
                n_p1912+=1;
                var papini1912 = cat1912[i];
                img_papini1912 = "img/MPP_Papini_1912/" + papini1912;

                img_p1912.push({
                  type: "image",
                  url: "http://iperion.vm.fedcloud.eu/" + img_papini1912 
                });

            }
            if (value.hasOwnProperty('provenienza')) {
              $("#PAP_PRO").css("display", "flex");
              provenienzaP1912 = '<a href="' + value['provenienza']['value'] + '">' + value['note']['value'] + '</a>';
            }
    
            if (value.hasOwnProperty('license')) {
              $("#CC_PAP").css("display", "flex");
              licenzaP1912 = '<img src="' + value['license']['value'] + '" width="100" height="auto">';
            }
          }

        }

        
        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;
      document.getElementById("guasti1858_description").innerHTML = g1858Cit;
      document.getElementById("guasti1888_description").innerHTML = g1888Cit;
      document.getElementById("papini1912_description").innerHTML = p1912Cit;

      document.getElementById("catalogueInstitute").innerHTML = provenienzaCat;
      document.getElementById("guasti1Institute").innerHTML = provenienzaG1858;
      document.getElementById("guasti2Institute").innerHTML = provenienzaG1858;
      document.getElementById("papiniInstitute").innerHTML = provenienzaP1912;

      document.getElementById("license_cat").innerHTML = licenzaCat;
      document.getElementById("license_g1").innerHTML = licenzaG1858;
      document.getElementById("license_g2").innerHTML = licenzaG1888;
      document.getElementById("license_pap").innerHTML = licenzaP1912;

      if (n_cat == 0) {
        $("#btn_catalogo").css("display", "none");
      } 
      if (n_g1858 == 0) {
        $("#btn_guasti1858").css("display", "none");
      } 
      if (n_g1888 == 0) {
        $("#btn_guasti1888").css("display", "none");
      } 
      if (n_p1912 == 0) {
        $("#btn_papini1912").css("display", "none");
      } 
  
}

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

  var Icon = "";

  $.each(
      json['results']['bindings'],
      function (index, value) {
        var uri_icon = value['uri_iconclass']['value'];
        var sigla_icon = value['iconclass']['value'];
        
        Icon += '<a href="' + uri_icon + '">' + sigla_icon + '</a><br />';
        
      });
  
  document.getElementById("iconclass").innerHTML = Icon;


  if (Icon != "") {
    $("#ICON").css("display", "flex");
  } 
}

function handle_SchedeStoriche(json) {

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

  const schede = [];
  var m1956Img = "";
  var n_m1956 = 0;
  var provenienzaScheda = "";
  var provenienzaM1956 = "";
  var licenzaScheda = "";
  var licenzaM1956 = "";

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

  $.each(
      json['results']['bindings'],
      function (index, value) {

        var type = value['type']['value'];
        var scheda = value['scheda']['value'];

        console.log([type, scheda]);

        if (type == "Scheda Storica") {
          var sc = scheda.replace(".jpg", "");
          schede.push(scheda); 

          //img_sc = "img/schedeStoriche/" + sc + "/0.jpg";;

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

          if (value.hasOwnProperty('provenienza')) {
            $("#CAT_SC").css("display", "flex");
            provenienzaScheda = '<a href="' + value['provenienza']['value'] + '">' + value['note']['value'] + '</a>';
          }
  
          if (value.hasOwnProperty('license')) {
            $("#CC_SC").css("display", "flex");
            licenzaScheda = '<img src="' + value['license']['value'] + '" width="100" height="auto">';
          }
        }

       /* 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 (type == "Marchini 1956") {
          cc1956 = scheda;
          cat1956 = cc1956.split(", ");
          for (i in cat1956) {
              n_m1956 = n_m1956 + 1;
              var marchini1956 = cat1956[i];
              var img_marchini1956 = "img/MPP_Marchini_1956/" + marchini1956;

              img_m1956.push({
                type: "image",
                url: "http://iperion.vm.fedcloud.eu/" + img_marchini1956 
              });
          }
          if (value.hasOwnProperty('provenienza')) {
            $("#M2_PRO").css("display", "flex");
            provenienzaM1956 = '<a href="' + value['provenienza']['value'] + '">' + value['note']['value'] + '</a>';
          }
  
          if (value.hasOwnProperty('license')) {
            $("#CC_M2").css("display", "flex");
            licenzaM1956 = '<img src="' + value['license']['value'] + '" width="100" height="auto">';
          }
        }
        
      });

  document.getElementById("cardInstitute").innerHTML = provenienzaScheda;
  document.getElementById("marchini2Institute").innerHTML = provenienzaM1956;
  document.getElementById("license_card").innerHTML = licenzaScheda;
  document.getElementById("license_m2").innerHTML = licenzaM1956;

  if (schede.length = 0) {
    $("#btn_schedastorica").css("display", "none");
  }

  console.log(n_m1956);
  if (n_m1956 == 0) {
    $("#btn_marchini1956").css("display", "none");
  } 
  
}

function createScheda(image) {
  checkIfSchedaExists(image, (exists) => {
    if (exists) {
      var ImageScheda = '<div class="row"> \
      <img class="minImage viewImage" src="' + image + '" onclick="expandImg(this);"> \
      </div>';
      img_sc.push({
        type: "image",
        url: "http://iperion.vm.fedcloud.eu/" + image 
      });
    } else {
      console.error('Image does not exists.')
    }
  });
}

function checkIfSchedaExists(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("guasti1858_info").style.display = "none";
  document.getElementById("guasti1888_info").style.display = "none";
  document.getElementById("papini1912_info").style.display = "none";
  document.getElementById("marchini1956_info").style.display = "none";
  document.getElementById("img_title").innerHTML = "Opera";
  clearViewer();
  runOpenseadragon(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("guasti1858_info").style.display = "none";
  document.getElementById("guasti1888_info").style.display = "none";
  document.getElementById("papini1912_info").style.display = "none";
  document.getElementById("marchini1956_info").style.display = "none";
  document.getElementById("img_title").innerHTML = "Guida 1958";
  clearViewer();
  runOpenseadragon(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("guasti1858_info").style.display = "none";
  document.getElementById("guasti1888_info").style.display = "none";
  document.getElementById("papini1912_info").style.display = "none";
  document.getElementById("marchini1956_info").style.display = "none";
  document.getElementById("img_title").innerHTML = "Scheda Storica";
  clearViewer();
  runOpenseadragon(img_sc);
}

function show_G1858(){
  document.getElementById("OA_info").style.display = "none";
  document.getElementById("catalogo_info").style.display = "none";
  document.getElementById("scheda_info").style.display = "none";
  document.getElementById("guasti1858_info").style.display = "block";
  document.getElementById("guasti1888_info").style.display = "none";
  document.getElementById("papini1912_info").style.display = "none";
  document.getElementById("marchini1956_info").style.display = "none";
  document.getElementById("img_title").innerHTML = "Guida 1858";
  clearViewer();
  runOpenseadragon(img_g1858);
}

function show_G1888(){
  document.getElementById("OA_info").style.display = "none";
  document.getElementById("catalogo_info").style.display = "none";
  document.getElementById("scheda_info").style.display = "none";
  document.getElementById("guasti1858_info").style.display = "none";
  document.getElementById("guasti1888_info").style.display = "block";
  document.getElementById("papini1912_info").style.display = "none";
  document.getElementById("marchini1956_info").style.display = "none";
  document.getElementById("img_title").innerHTML = "Guida 1888";
  clearViewer();
  runOpenseadragon(img_g1888);
}

function show_P1912(){
  document.getElementById("OA_info").style.display = "none";
  document.getElementById("catalogo_info").style.display = "none";
  document.getElementById("scheda_info").style.display = "none";
  document.getElementById("guasti1858_info").style.display = "none";
  document.getElementById("guasti1888_info").style.display = "none";
  document.getElementById("papini1912_info").style.display = "block";
  document.getElementById("marchini1956_info").style.display = "none";
  document.getElementById("img_title").innerHTML = "Guida 1912";
  clearViewer();
  runOpenseadragon(img_p1912);
}

function show_M1956(){
  document.getElementById("OA_info").style.display = "none";
  document.getElementById("catalogo_info").style.display = "none";
  document.getElementById("scheda_info").style.display = "none";
  document.getElementById("guasti1858_info").style.display = "none";
  document.getElementById("guasti1888_info").style.display = "none";
  document.getElementById("papini1912_info").style.display = "none";
  document.getElementById("marchini1956_info").style.display = "block";
  document.getElementById("img_title").innerHTML = "Inventario 1956";
  clearViewer();
  runOpenseadragon(img_m1956);
  //document.getElementById("expandedImg").src = img_m1956;
}


let magnifierInterval;
function createMagnifier(imgID, zoom){
    magnify(imgID, zoom);
    let glass = document.getElementById('glass');
    let img = document.getElementById(imgID);
    magnifierInterval = setInterval(
        function(){
            // console.log('LOOP in corso');
            glass.style.backgroundImage = "url('" + img.src + "')";
        },
        500
    )
}
function destroyMagnifier(){
    clearInterval(magnifierInterval);
    const element = document.getElementById('glass');
    element.remove();
}

function magnify(imgID, zoom) {
  var img, glass, w, h, bw;
  img = document.getElementById(imgID);
  /*create magnifier glass:*/
  glass = document.createElement("DIV");
  glass.setAttribute("class", "img-magnifier-glass");
  glass.setAttribute("id", "glass");
  /*insert magnifier glass:*/
  img.parentElement.insertBefore(glass, img);
  /*set background properties for the magnifier glass:*/
  glass.style.backgroundImage = "url('" + img.src + "')";
  glass.style.backgroundRepeat = "no-repeat";
  glass.style.backgroundSize = (img.width * zoom) + "px " + (img.height * zoom) + "px";
  bw = 3;
  w = glass.offsetWidth / 2;
  h = glass.offsetHeight / 2;
  /*execute a function when someone moves the magnifier glass over the image:*/
  glass.addEventListener("mousemove", moveMagnifier);
  img.addEventListener("mousemove", moveMagnifier);
  /*and also for touch screens:*/
  glass.addEventListener("touchmove", moveMagnifier);
  img.addEventListener("touchmove", moveMagnifier);
  function moveMagnifier(e) {
    var pos, x, y;
    /*prevent any other actions that may occur when moving over the image*/
    e.preventDefault();
    /*get the cursor's x and y positions:*/
    pos = getCursorPos(e);
    x = pos.x;
    y = pos.y;
    /*prevent the magnifier glass from being positioned outside the image:*/
    if (x > img.width - (w / zoom)) {x = img.width - (w / zoom);}
    if (x < w / zoom) {x = w / zoom;}
    if (y > img.height - (h / zoom)) {y = img.height - (h / zoom);}
    if (y < h / zoom) {y = h / zoom;}
    /*set the position of the magnifier glass:*/
    glass.style.left = (x - w) + "px";
    glass.style.top = (y - h) + "px";
    /*display what the magnifier glass "sees":*/
    glass.style.backgroundPosition = "-" + ((x * zoom) - w + bw) + "px -" + ((y * zoom) - h + bw) + "px";
  }
  function getCursorPos(e) {
    var a, x = 0, y = 0;
    e = e || window.event;
    /*get the x and y positions of the image:*/
    a = img.getBoundingClientRect();
    /*calculate the cursor's x and y coordinates, relative to the image:*/
    x = e.pageX - a.left;
    y = e.pageY - a.top;
    /*consider any page scrolling:*/
    x = x - window.pageXOffset;
    y = y - window.pageYOffset;
    return {x : x, y : y};
  }
}

function clearViewer() {
  var div = document.getElementById("contentDiv");
    
  while(div.firstChild) {
      div.removeChild(div.firstChild);
  }
}