7.js

let archive_images = [
    "COIMBATORE_9A_CROWN STUDIO_2016_00001.png",
    "COIMBATORE_9A_THE CITY PHOTO WORKS STUDIO_2015_00001.png",
    "KARAIKUDI_3A_R DASEN STUDIO_2016_00024.png",
    "MADURAI_1D_NEW STUDIO_2015_00001.png",
    "MISCELLANEOUS_M8_2015_00008.png",
    "MISCELLANEOUS_M8_2015_00011.nef copy 2.jpg.png",
    "MISCELLANEOUS_M8_2015_00012.nef copy.jpg.png",
    "MISCELLANEOUS_M9_2015_00191.nef copy 3.jpg.png",
    "mom.png",
    "image62.jpg.png",
    "image_44.png"
]
let ogtext = "<h1>Close-up portrait of a woman</h1><p>Composite of 11 photographs from Crown Studio and The City Photo Works Studio in Coimbatore, R. Dasen Studio in Karaikudi, New Studio in Madurai, Guhan Studio in Chennai, and other unidentified studios. Three of the images are from the artist's family archive, the rest are from stars.archive.<br><br>“I was struck by the scarcity of images in comparison with its sibling cluster of close-up portraits of men. Two images in this cluster are ID photos of my mom and one is what we believe to be either a school portrait or portrait used in matchmaking of my grandmother. It also seems as if a few of these images may have originally been group photos where the individual was isolated using a photo manipulation technique called vignetting. In these close-up portraits, you can also really see details like nose rings, flowers, textile patterns, ties, or the presence/absence of a bindi. For example, I know my grandmother's portrait was taken before marriage because she is missing a special type of necklace (Mangala Sutra) worn by hindu women after marriage.” </p>"
let text = [
    "<h1>Close-up portrait of a woman</h1><p>Composite of 11 photographs from Crown Studio and The City Photo Works Studio in Coimbatore, R. Dasen Studio in Karaikudi, New Studio in Madurai, Guhan Studio in Chennai, and other unidentified studios. Three of the images are from the artist's family archive, the rest are from stars.archive.<br><br>“I was struck by the scarcity of images in comparison with its sibling cluster of close-up portraits of men. Two images in this cluster are ID photos of my mom and one is what we believe to be either a school portrait or portrait used in matchmaking of my grandmother. It also seems as if a few of these images may have originally been group photos where the individual was isolated using a photo manipulation technique called vignetting. In these close-up portraits, you can also really see details like nose rings, flowers, textile patterns, ties, or the presence/absence of a bindi. For example, I know my grandmother's portrait was taken before marriage because she is missing a special type of necklace (Mangala Sutra) worn by hindu women after marriage.” </p><h1>Crown Studio</h1><p>Coimbatore, Tamil Nadu.<br>This image looks like it maybe was created using a technique called vignetting where black or white paper is cut around a subject to isolate them and then a new print is made. It also appears to be painted over partially.</p>",
    "<h1>Close-up portrait of a woman</h1><p>Composite of 11 photographs from Crown Studio and The City Photo Works Studio in Coimbatore, R. Dasen Studio in Karaikudi, New Studio in Madurai, Guhan Studio in Chennai, and other unidentified studios. Three of the images are from the artist's family archive, the rest are from stars.archive.<br><br>“I was struck by the scarcity of images in comparison with its sibling cluster of close-up portraits of men. Two images in this cluster are ID photos of my mom and one is what we believe to be either a school portrait or portrait used in matchmaking of my grandmother. It also seems as if a few of these images may have originally been group photos where the individual was isolated using a photo manipulation technique called vignetting. In these close-up portraits, you can also really see details like nose rings, flowers, textile patterns, ties, or the presence/absence of a bindi. For example, I know my grandmother's portrait was taken before marriage because she is missing a special type of necklace (Mangala Sutra) worn by hindu women after marriage.” </p><h1>The City Photo Works Studio</h1><p>Coimbatore, Tamil Nadu.<br>This image looks like it maybe was created using a technique called vignetting where black or white paper is cut around a subject to isolate them and then a new print is made. It also appears to be painted over partially.</p>",
    "<h1>Close-up portrait of a woman</h1><p>Composite of 11 photographs from Crown Studio and The City Photo Works Studio in Coimbatore, R. Dasen Studio in Karaikudi, New Studio in Madurai, Guhan Studio in Chennai, and other unidentified studios. Three of the images are from the artist's family archive, the rest are from stars.archive.<br><br>“I was struck by the scarcity of images in comparison with its sibling cluster of close-up portraits of men. Two images in this cluster are ID photos of my mom and one is what we believe to be either a school portrait or portrait used in matchmaking of my grandmother. It also seems as if a few of these images may have originally been group photos where the individual was isolated using a photo manipulation technique called vignetting. In these close-up portraits, you can also really see details like nose rings, flowers, textile patterns, ties, or the presence/absence of a bindi. For example, I know my grandmother's portrait was taken before marriage because she is missing a special type of necklace (Mangala Sutra) worn by hindu women after marriage.” </p><h1>R. Dasen Studio</h1><p>Karaikudi, Tamil Nadu.</p>",
    "<h1>Close-up portrait of a woman</h1><p>Composite of 11 photographs from Crown Studio and The City Photo Works Studio in Coimbatore, R. Dasen Studio in Karaikudi, New Studio in Madurai, Guhan Studio in Chennai, and other unidentified studios. Three of the images are from the artist's family archive, the rest are from stars.archive.<br><br>“I was struck by the scarcity of images in comparison with its sibling cluster of close-up portraits of men. Two images in this cluster are ID photos of my mom and one is what we believe to be either a school portrait or portrait used in matchmaking of my grandmother. It also seems as if a few of these images may have originally been group photos where the individual was isolated using a photo manipulation technique called vignetting. In these close-up portraits, you can also really see details like nose rings, flowers, textile patterns, ties, or the presence/absence of a bindi. For example, I know my grandmother's portrait was taken before marriage because she is missing a special type of necklace (Mangala Sutra) worn by hindu women after marriage.” </p><h1>New Studio</h1><p>Madurai, Tamil Nadu.</p>",
    "<h1>Close-up portrait of a woman</h1><p>Composite of 11 photographs from Crown Studio and The City Photo Works Studio in Coimbatore, R. Dasen Studio in Karaikudi, New Studio in Madurai, Guhan Studio in Chennai, and other unidentified studios. Three of the images are from the artist's family archive, the rest are from stars.archive.<br><br>“I was struck by the scarcity of images in comparison with its sibling cluster of close-up portraits of men. Two images in this cluster are ID photos of my mom and one is what we believe to be either a school portrait or portrait used in matchmaking of my grandmother. It also seems as if a few of these images may have originally been group photos where the individual was isolated using a photo manipulation technique called vignetting. In these close-up portraits, you can also really see details like nose rings, flowers, textile patterns, ties, or the presence/absence of a bindi. For example, I know my grandmother's portrait was taken before marriage because she is missing a special type of necklace (Mangala Sutra) worn by hindu women after marriage.” </p><h1>Unknown Studio</h1><p>Unknown location, Tamil Nadu</p>",
    "<h1>Close-up portrait of a woman</h1><p>Composite of 11 photographs from Crown Studio and The City Photo Works Studio in Coimbatore, R. Dasen Studio in Karaikudi, New Studio in Madurai, Guhan Studio in Chennai, and other unidentified studios. Three of the images are from the artist's family archive, the rest are from stars.archive.<br><br>“I was struck by the scarcity of images in comparison with its sibling cluster of close-up portraits of men. Two images in this cluster are ID photos of my mom and one is what we believe to be either a school portrait or portrait used in matchmaking of my grandmother. It also seems as if a few of these images may have originally been group photos where the individual was isolated using a photo manipulation technique called vignetting. In these close-up portraits, you can also really see details like nose rings, flowers, textile patterns, ties, or the presence/absence of a bindi. For example, I know my grandmother's portrait was taken before marriage because she is missing a special type of necklace (Mangala Sutra) worn by hindu women after marriage.” </p><h1>Unknown Studio</h1><p>Unknown location, Tamil Nadu<br><br>I believe this woman is christian and that she is holding The Bible.</p>",
    "<h1>Close-up portrait of a woman</h1><p>Composite of 11 photographs from Crown Studio and The City Photo Works Studio in Coimbatore, R. Dasen Studio in Karaikudi, New Studio in Madurai, Guhan Studio in Chennai, and other unidentified studios. Three of the images are from the artist's family archive, the rest are from stars.archive.<br><br>“I was struck by the scarcity of images in comparison with its sibling cluster of close-up portraits of men. Two images in this cluster are ID photos of my mom and one is what we believe to be either a school portrait or portrait used in matchmaking of my grandmother. It also seems as if a few of these images may have originally been group photos where the individual was isolated using a photo manipulation technique called vignetting. In these close-up portraits, you can also really see details like nose rings, flowers, textile patterns, ties, or the presence/absence of a bindi. For example, I know my grandmother's portrait was taken before marriage because she is missing a special type of necklace (Mangala Sutra) worn by hindu women after marriage.” </p><h1>Unknown Studio</h1><p>Unknown location, Tamil Nadu</p>",
    "<h1>Close-up portrait of a woman</h1><p>Composite of 11 photographs from Crown Studio and The City Photo Works Studio in Coimbatore, R. Dasen Studio in Karaikudi, New Studio in Madurai, Guhan Studio in Chennai, and other unidentified studios. Three of the images are from the artist's family archive, the rest are from stars.archive.<br><br>“I was struck by the scarcity of images in comparison with its sibling cluster of close-up portraits of men. Two images in this cluster are ID photos of my mom and one is what we believe to be either a school portrait or portrait used in matchmaking of my grandmother. It also seems as if a few of these images may have originally been group photos where the individual was isolated using a photo manipulation technique called vignetting. In these close-up portraits, you can also really see details like nose rings, flowers, textile patterns, ties, or the presence/absence of a bindi. For example, I know my grandmother's portrait was taken before marriage because she is missing a special type of necklace (Mangala Sutra) worn by hindu women after marriage.” </p><h1>Unknown Studio</h1><p>Unknown location, Tamil Nadu<br>I believe the sunglasses in this photo are cut from cardboard or some kind of paper.</p>",
    "<h1>Close-up portrait of a woman</h1><p>Composite of 11 photographs from Crown Studio and The City Photo Works Studio in Coimbatore, R. Dasen Studio in Karaikudi, New Studio in Madurai, Guhan Studio in Chennai, and other unidentified studios. Three of the images are from the artist's family archive, the rest are from stars.archive.<br><br>“I was struck by the scarcity of images in comparison with its sibling cluster of close-up portraits of men. Two images in this cluster are ID photos of my mom and one is what we believe to be either a school portrait or portrait used in matchmaking of my grandmother. It also seems as if a few of these images may have originally been group photos where the individual was isolated using a photo manipulation technique called vignetting. In these close-up portraits, you can also really see details like nose rings, flowers, textile patterns, ties, or the presence/absence of a bindi. For example, I know my grandmother's portrait was taken before marriage because she is missing a special type of necklace (Mangala Sutra) worn by hindu women after marriage.” </p><h1>Guhan Studio</h1><p>Chennai, Tamil Nadu.<br><br>This is a photograph of my mother (Sudha Akkapeddi) originally taken for use in an application or form but this particular image is of a copy kept for personal/sentimental use.</p>",
    "<h1>Close-up portrait of a woman</h1><p>Composite of 11 photographs from Crown Studio and The City Photo Works Studio in Coimbatore, R. Dasen Studio in Karaikudi, New Studio in Madurai, Guhan Studio in Chennai, and other unidentified studios. Three of the images are from the artist's family archive, the rest are from stars.archive.<br><br>“I was struck by the scarcity of images in comparison with its sibling cluster of close-up portraits of men. Two images in this cluster are ID photos of my mom and one is what we believe to be either a school portrait or portrait used in matchmaking of my grandmother. It also seems as if a few of these images may have originally been group photos where the individual was isolated using a photo manipulation technique called vignetting. In these close-up portraits, you can also really see details like nose rings, flowers, textile patterns, ties, or the presence/absence of a bindi. For example, I know my grandmother's portrait was taken before marriage because she is missing a special type of necklace (Mangala Sutra) worn by hindu women after marriage.” </p><h1>Unknown Studio</h1><p>Maybe Chidambaram, Tamil Nadu. <br> This is a photograph of my mother's mother, Suseela Ramavarapu (neé Vyasarayani). This is probably either a school portrait or taken for matchmaking purposes. I know she is unmarried because she isn't wearing a type of necklace (Mangala Sutra) that hindu women wear after marriage. </p>",
    "<h1>Close-up portrait of a woman</h1><p>Composite of 11 photographs from Crown Studio and The City Photo Works Studio in Coimbatore, R. Dasen Studio in Karaikudi, New Studio in Madurai, Guhan Studio in Chennai, and other unidentified studios. Three of the images are from the artist's family archive, the rest are from stars.archive.<br><br>“I was struck by the scarcity of images in comparison with its sibling cluster of close-up portraits of men. Two images in this cluster are ID photos of my mom and one is what we believe to be either a school portrait or portrait used in matchmaking of my grandmother. It also seems as if a few of these images may have originally been group photos where the individual was isolated using a photo manipulation technique called vignetting. In these close-up portraits, you can also really see details like nose rings, flowers, textile patterns, ties, or the presence/absence of a bindi. For example, I know my grandmother's portrait was taken before marriage because she is missing a special type of necklace (Mangala Sutra) worn by hindu women after marriage.” </p><h1>Guhan Studio</h1><p>Chennai, Tamil Nadu.<br><br>This is a photograph of my mother (Sudha Akkapeddi) used probably in an application or form for Stanley Medical College in Chennai.</p>"
]

let loader = document.getElementById("loader")
for(let i = 0; i < archive_images.length; i ++){
    let img = document.createElement("img");
    img.src = "assets/7/"+archive_images[i];
    img.id = "id-"+i;
    let referenceNode = document.querySelector('#wrapper');
    dragElement(img);
    referenceNode.appendChild(img)
    if(i == archive_images.length - 1){
      img.onload = function(){
        loader.classList.remove('on');
      }
    }
}

function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  var clicked = false;
  if (document.getElementById(elmnt.id + "header")) {
    // if present, the header is where you move the DIV from:
    document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
  } else {
    // otherwise, move the DIV from anywhere inside the DIV:
    elmnt.onmousedown = dragMouseDown;
  }

  function dragMouseDown(e) {
    if(clicked){
      closeDragElement(e);
    }else{
      clicked = true;
      e = e || window.event;
      e.preventDefault();
      // get the mouse cursor position at startup:
      pos3 = e.clientX;
      pos4 = e.clientY;
      e.target.classList.add('on')

      document.querySelector("#text").innerHTML = text[parseInt(e.target.id.split("-")[1])];
      
      // call a function whenever the cursor moves:
      document.onmousemove = elementDrag; 
    }
  
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    let els = document.querySelectorAll("#history img");
    for(let i = 0; i < els.length; i ++){
      els[i].classList.remove("on")
    }
    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    // set the element's new position:
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  }

  function closeDragElement(e) {
    // stop moving when mouse button is released:
    document.onmouseup = null;
    document.onmousemove = null;
    e.target.classList.remove('on')
    let hist = document.querySelector("#history-icons");
    let newDiv = document.createElement("div");
    if(e.target.src){
      let newEl = document.createElement('img')
      let rest = e.target.src.substring(0, e.target.src.lastIndexOf("/") + 1);
      let last = e.target.src.substring(e.target.src.lastIndexOf("/") + 1, e.target.src.length);
      newEl.src = rest + "small/" + last
      newEl.id = "icon"+e.target.id
      hist.insertBefore(newEl,hist.firstChild)
      newEl.addEventListener("click", function(){
        if(this.classList.contains("on")){
          this.classList.remove("on")
          document.querySelector("#text").innerHTML = ogtext;
        }else{
          let els = document.querySelectorAll("#history img");
          for(let i = 0; i < els.length; i ++){
            els[i].classList.remove("on")
          }
          this.classList.add("on")
          document.querySelector("#text").innerHTML = text[parseInt(this.id.split("-")[1])];
        }
      })
      let label = document.querySelector("#hist-label");
      label.classList.add('on')
    }
    document.querySelector("#text").innerHTML = ogtext;
    e.target.classList.add('moved');
    let imgs = document.querySelectorAll("img");
    let count = 0;
    for(let i = 0; i < imgs.length; i ++){
        if(imgs[i].classList.contains("moved")){
            count = count + 1;
        }
    }
    if(count == imgs.length){
        document.querySelector("#over").classList.add('on')
    }
  }
}