/* socials consts */
const WEBSITE = "website";
const FEDI = "fedi";
const BSKY = "bsky";
const THREADS = "threads";
const INSTA = "insta";
const FB = "fb";

/*
  {
    name: "",
    imgSrc: "",
    imgAlt: "",
    blurb: "",
    socials: {
      website: "",
      fedi: "",
      bsky: "",
      threads: "",
      insta: "",
      fb: ""
    }
  },
*/

let artists = [
  {
    name: "Abigail",
    imgSrc:
      "/img/abigail.jpg",
    imgAlt:
      "old photo of the artists hiding behind their hair, it has been digitally edited to be green and embossed with leaf like veins running across it.",
    blurb:
      "<p>offering several pride flag inspired mandala phone backgrounds</p>",
    socials: {
      website: "https://linktr.ee/alien_sunset",
      fedi: "https://dice.camp/@Alien_Sunset",
    },
  },
  {
    name: "Acin Fals",
    blurb: "<p>Pixel art with theme of 'fly together'.</p>",
    imgSrc: "",
    imgAlt: "A pixel art self portrait with light skin, dark hair, and a Pride-themed medical mask for a better future."
  },
  {
    name: "Alex T. Dragonson",
    imgSrc:
      "/img/alex-t-dragonson.png",
    imgAlt: "A pair of hand-knitted gloves with spiral stripes",
    blurb:
      "<p>Hand-knitted scarves to keep you warm in our Northern Hemisphere winter of discontent.</p>",
    socials: {
      website: "https://wizardofdocs.neocities.org/obscure-joys",
      fedi: "https://wandering.shop/@wizardofdocs",
    },
  },
  {
    name: "Amata",
    imgSrc:
      "/img/amata.jpg",
    imgAlt:
      "Selfie style photo taken at a cave entrance with nb white person with blue eyes. Hair does not show. Wearing a purple shirt and teal caving helmet with a mounted professional headlamp which is turned on. There is rope rigged in the background which disappears into the dark hole (the cave).",
    blurb:
      "<p>I am a cave scientist & photographer. While I am willing to offer any images you see on my website, of focus will be a square image with a shadowed figure outlined holding a progress pride flag in a cave near a waterfall.</p>",
    socials: {
      website: "www.sunguramy.com",
      fedi: "https://flipping.rocks/@sunguramy",
    },
  },
  {
    name: "Anaïs Faë",
    imgSrc:
      "/img/anais-fae.jpg",
    imgAlt: "watercolor portrait of a tabby cat",
    blurb:
      "<p>a design for the sticker sheet, plus eventually some small prints or postcards</p>",
    socials: {
      website: "https://anaisfae.art",
      fedi: "https://mastodon.art/@anaisfae",
      bsky: "https://bsky.app/profile/anaisfae.art",
      insta: "https://www.instagram.com/anaisfae.art/",
    },
  },
  {
    name: "Arina Grace",
    imgSrc:
      "/img/arina-grace.png",
    imgAlt: "white trans woman wearing a black dress sitting on a blue couch",
    blurb:
      "<p>The fun part about photography is you aren't really sure what you're going to be able to offer until you get it.</p>",
    socials: {
      fedi: "https://mastodon.art/@SynthGal",
    },
  },
  {
    name: "Cassowary",
    imgSrc:
      "/img/cassowary.png",
    imgAlt:
      "A synthwave gradient sun with a superimposed drawing of a cassowary head and neck.",
    blurb:
      "<p>I will provide a small abstract physical artwork (around 5x7 inches, pen on paper) and a sticker design.</p>",
    socials: {
      website: "https://aldercone.studio",
      fedi: "https://mastodon.art/@aldercone",
    },
  },
  {
    name: "Colin Knowles",
    imgSrc:
      "/img/colin-knowles.jpeg",
    imgAlt:
      "Photo shows Colin wearing a red shirt with lil flamingoes all over it",
    blurb: "<p>Digital landscape drawing of scenery in pride flag colors.</p>",
    socials: {
      insta: "https://www.instagram.com/cadmium.rust/",
    },
  },
  {
    name: "Emmett",
    imgSrc:
      "/img/emmett.jpeg",
    imgAlt:
      "a high contrast photo of a daisy that has had many of its petals eaten. Over the flower text reads protean art",
    blurb:
      "<p>A twelve inch circle canvas acrylic painting. A free form background made of trans pride colors, main subject to be determined.</p>",
    socials: {
      website: "https://proteanart.xyz",
      insta: "https://www.instagram.com/_proteanart_/",
    },
  },
  {
    name: "erosdiscordia",
    imgSrc:
      "/img/erosdiscordia.jpg",
    imgAlt:
      "Depicts a tall green electrical box on a sidewalk in New Orleans. The top of the box is graffiti saying 'Live A Great Story' in a white circle. The base of the box is covered in 'Homo Riot' flyers. The background is a very old red brick wall.",
    blurb:
      "<p>I create art postcards, collaged from vintage magazines and decorated with a variety of materials. I'll offer a pack of five from an assortment to choose from.</p>",
    socials: {
      website: "https://erosdiscordia.nekoweb.org",
      fedi: "https://onycha.monster/@erosdiscordia",
    },
  },
  {
    name: "Ezra Wu",
    imgSrc:
      "/img/ezra-wu.jpg",
    imgAlt:
      "A simple watercolor of a person holding their hands over their ears, their hair grown over with blue-purple flowers.",
    blurb:
      "<p>The original gouache painting of 'testosterone gave me my anger back' originally published in 'T the Zine', 3x8 inch</p>",
    socials: {
      website: "https://nebulos.space/",
      fedi: "https://comicscamp.club/@nebulos",
    },
  },
  {
    name: "Intransitive Lie",
    imgSrc:
      "/img/intransitive-lie.jpg",
    imgAlt:
      "A cartoon drawing of an elephant wearing a brown suit jacket holding up a sign which reads, 'Rise up.'",
    blurb:
      "<p>An abstract digital work derived from an image or images which relate to the theme of the trans experience and escape from tyranny, though I'll be honest, my art tends to be fairly open to interpretation</p>",
    socials: {
      website: "https://linktr.ee/intransitivelie",
      fedi: "https://beige.party/@intransitivelie",
      bsky: "https://bsky.app/profile/intransitivelie.bsky.social",
      threads: "https://www.threads.net/@intransitivelie",
      insta: "https://www.instagram.com/intransitivelie",
    },
  },
  {
    name: "Kite",
    imgSrc:
      "/img/kite.png",
    imgAlt:
      "A pixel art image of a green anthro bird, with an orange beak, wearing eyeglasses and a cadet-style hat. They are in front of a nonbinary pride flag.",
    blurb:
      '<p>A 12x12 custom art composition using melty-beads (Perler/Hama/Artkal). Or a custom furry art badge made of melty-beads. <a href="https://drive.google.com/drive/folders/1RvCtn6KMUEj_K2NHYQ6HvD0Q4s_rY3ou?usp=sharing">Examples</a></p>',
    socials: {
      fedi: "https://mastoart.social/@Kite",
    },
  },
  {
    name: "laen",
    imgSrc:
      "/img/laen.jpg",
    imgAlt:
      "a cute green kodama kami sculpture sitting on a grey pebble-dashed stone wall. the kodama has sweet little arms, one of which is raised to its mouth, and it has a gentle, innocent face. behind it are some out-of-focus green leaves.",
    blurb:
      "<p>a cute raku ceramic sculpture of some kind, probably in trans or rainbow pride-flag colours. if the glaze agrees!</p>",
    socials: {
      website: "https://www.driftingspirits.art",
      fedi: "https://sunny.garden/@moonrabbit",
    },
  },
  {
    name: "lee",
    imgSrc:
      "/img/lee.jpg",
    imgAlt:
      "A white person standing behind fluffy yellow flowers on slender branches, face framed by the flowers. Ze is looking slightly down and to the side and smiling slightly. Ze has curly light brown hair with a side shave, octagonal glasses, and cyan-and-orange eyeshadow.",
    blurb: "<p>collaborative sticker sheet(s)! and this whole site</p>",
    socials: {
      website: "https://leecat.art",
      fedi: "https://strangeobject.space/@inherentlee",
    },
  },
  {
    name: "Liam Woodard",
    imgSrc:
      "/img/liam-woodard.png",
    imgAlt:
      "A man in a button down shirt and an n95 mask. His arms are outstretched against a sky that runs a white to blue gradient. He is held in the air above his acrobatics partner's head, the back of which is visible.",
    blurb:
      "<p>A run of linocut trans anarchy symbols printed onto rainbow gelprinted backgrounds.</p>",
    socials: {
      website: "https://socialgaff.whirling.top",
      fedi: "https://cathode.church/@SocialGaff",
    },
  },
  {
    name: "Lili",
    imgSrc:
      "/img/lili.jpg",
    imgAlt:
      "paper cut showing person with a mohawk sprawled sideways in a wheelie chair",
    blurb:
      "<p>Ink sketch of a mashup of gods from two different pantheons - Athena/Minerva the Greek/Roman goddess of wisdom, olives, battle strategy and Guan Yu (關羽) a deified military general known as a loyal protector with a legendary beard. In my imagination they are a harmoniously multifaceted trans god of strategy and protection with awesome armor.</p>",
    socials: {
      insta: "https://www.instagram.com/other_hsu_studios/",
    },
  },
  {
    name: "mari",
    imgSrc:
      "/img/mari.png",
    imgAlt:
      "A flat vector illustration of a chubby round cartoony hippo type creature - a Moomin - with a shock of green hair between two stand-up ears. One ear has a blue earring hoop. The hair flops down towards happy closed eyes. They're raising a mug in greeting in one hand or paw - white mug with a purple heart and yellow tea bag label hanging out. The black outlines complete the non-binary flag colors hee hee. On the medium-tan colored Moomin is a grey sleeveless shirt with the word plantifa (plants plus antifa) in brown letters over three green sprigs mimicking the Iron Front anti-fascist arrows.",
    blurb:
      "<p>some sort of fun, hopeful, nature-inspired collage piece(s) - most likely postcard-size.</p>",
    socials: {
      fedi: "https://spanner.works/@bouncinglime",
    },
  },
  {
    name: "Nicky Roscoe-Calvert",
    imgSrc:
      "/img/nicky-roscoe-calvert.jpg",
    imgAlt:
      "Head and shoulders of a white person with short, wavy, deep blue hair. They wear a gold headband in the shape of leaves, teardrop shaped earrings, a thin black scarf and a dark red shawl. They have lip and nose rings, and are wearing heavy, smoky purple eyeshadow. They are looking to the side, smiling at something unseen.",
    blurb:
      "<p>An A3 original mixed media piece, probably involving painting and drawing, probably of mushrooms.</p>",
    socials: {
      fedi: "https://mastodon.art/@SpellsAgainstCivilisation",
      insta: "https://www.instagram.com/spells_against_civilisation/",
    },
  },
  {
    name: "Rainbow",
    imgSrc:
      "/img/rainbow.JPG",
    imgAlt:
      "A photo of a person in a wheelchair holding a cat",
    blurb:
      "<p>Tiny knitted animals in the colors of the trans flag - we're thinking turtles, maybe opossums, maybe more</p>",
    socials: {
      fedi: "https://cathode.church/@rainbow_phoenix",
      bsky: "https://bsky.app/profile/rainbowravels.bsky.social",
      website: "https://artisans.coop/pages/seller-profile/rainbow-ravels",
      insta: "https://www.instagram.com/rainbow_olmstead/"
    }
  },
  {
    name: "RAPIDPUNCHES",
    imgSrc:
      "/img/rapidpunches.jpg",
    imgAlt:
      "Close up of a red crocodile with yellow eyes in a high blue collar wearing a green fish hat.",
    blurb:
      "<p>5x7 inch matte 215gsm exclusive prints of digitally illustrated shark athletes. Additional runner illustration for sticker sheet.</p>",
    socials: {
      fedi: "https://mastodon.art/@rapidpunches",
      bsky: "https://bsky.app/profile/rapidpunches.bsky.social",
      insta: "https://www.instagram.com/rapid.punches",
    },
  },
  {
    name: "Roarke",
    imgSrc:
      "/img/roarke.png",
    imgAlt: "My original character/mascot Ciaran with cat-ear headphones",
    blurb:
      "<p>I'll be offering one digital illustration made for the exhibit + a sticker sheet design for printing</p>",
    socials: {
      website: "http://lavenderincubus.art",
      fedi: "https://mastodon.art/@LavenderIncubus",
      bsky: "https://bsky.app/profile/lavenderincubus.bsky.social",
    },
  },
  {
    name: "Russ Sharek",
    imgSrc:
      "/img/russ-sharek.png",
    imgAlt:
      "A cartoon version of myself saying 'yes' which was created by prahou of #unix_surrealism",
    blurb:
      "<p>A run of linocut prints of the phrase 'o pana e kon' rendered in sitelen sitelen glyphs.</p><p>Translated from toki pona, this essentially means 'breathe' or 'exhale'.</p><p>These are things you can only really do when you feel safe.</p>",
    socials: {
      website: "https://russ.whirling.top",
      fedi: "https://mastodon.art/@RussSharek",
    },
  },
  {
    name: "Ryn",
    imgSrc:
      "/img/ryn.jpg",
    imgAlt:
      "In the forefront is a tan anthropomorphic cocker spaniel dog face, their teeth bared in a toothy grin. The dog has a gauge in their ear, as well as another ear stud piercing, a nose piercing, dark blue hair, three white spots in their right cheek fur, and a white diamond on their forehead fur. In the background is the non binary flag in four vertical descending stripes: yellow, white, purple, black.",
    blurb: "<p>A Posca painting on canvas</p>",
    socials: {
      website: "https://rynufe.carrd.co",
      fedi: "https://meemu.org/@Ryntastic",
    },
  },
  {
    name: "Sylvan (Daphne) Mir",
    imgSrc:
      "/img/sylvan-daphne-mir.jpeg",
    imgAlt:
      "white person with blue hair with side shaves and dark dark blue eyes wears a black KN95 mask outside of a glass building",
    blurb:
      "<p>Sylvan makes art inspired by vibrant choices in light and color. Trained as a lighting designer, fae uses faer knowledge of light to create unusual, multi-disciplinary artworks including ink illustrations of nature and wildlife, creative photography, and small ceramics.</p>",
    socials: {
      website: "https://daphnemir.com",
      fedi: "https://kind.social/@moss",
    },
  },
  {
    name: "Teresa Knezek",
    imgSrc:
      "/img/teresa-knezek.jpeg",
    imgAlt:
      "A woman, wearing chunky clear eyeglasses and a dark knit hat, peeks over the top of a print of a raven perched in a winter birch forest.",
    blurb: "<p>A phoenix rising from trans pride flag-colored flames.</p>",
    socials: {
      website: "https://knezek.art",
      fedi: "https://mivox.net/@mivox",
      insta: "https://instagram.com/knezek.art",
      fb: "https://facebook.com/knezek.art",
    },
  },
  {
    name: "Vee Friday",
    imgSrc:
      "/img/vee-friday.jpg",
    imgAlt:
      "A head and shoulders photo of a middle-aged white person, looking to one side. They are wearing glasses and  have the sides of their head shaved. There is a bone anchored hearing aid visible attached to their head.",
    blurb:
      "<p>Hi, I'm Vee. I am a disabled trans non-binary person who loves art in all its forms. I enjoy making what I call #BadArt by which is how I give my self permission to make art, any art, just because I like it.</p><p>It doesn't have to be 'good' or 'real art' , it just needs to something that gives me joy to make. The fact that other people enjoy it too makes me happy, but that's a bonus, if you see what I mean.</p>",
    socials: {
      fedi: "https://rage.love/@hag",
    },
  },
  {
    name: "Wetdryvac",
    imgSrc:
      "/img/wetdryvac.jpg",
    imgAlt:
      "A telegraph pole with two-tone orange stripes separated by the wires.",
    blurb:
      "<p>Transtract - 0023 - O-Sa: An abstract from the Transtract series, folding assigned and self identities.</p>",
    socials: {
      website: "https://www.wetdryvac.net",
      fedi: "https://mastodon.art/@wetdryvac",
      bsky: "https://bsky.app/profile/wetdryvac.bsky.social",
    },
  },
];

function openCorrespondingDetail(event) {
  let img = event.target;
  let details = img.nextElementSibling;
  if (details.open) details.removeAttribute("open");
  else details.setAttribute("open", true);
}

function makeSocial(socialType, socialLink) {
  let iconHTML;
  switch (socialType) {
    case WEBSITE:
      iconHTML = '<i aria-hidden="true" class="fa-solid fa-house-user"></i>';
      break;
    case FEDI:
      iconHTML = '<i aria-hidden="true" class="fa-brands fa-mastodon"></i>';
      break;
    case BSKY:
      iconHTML = '<i aria-hidden="true" class="fa-brands fa-bluesky"></i>';
      break;
    case THREADS:
      iconHTML = '<i aria-hidden="true" class="fa-brands fa-threads"></i>';
      break;
    case INSTA:
      iconHTML = '<i aria-hidden="true" class="fa-brands fa-instagram"></i>';
      break;
    case FB:
      iconHTML = '<i aria-hidden="true" class="fa-brands fa-facebook"></i>';
      break;
    default:
      return;
  }

  let social = document.createElement("div");
  social.className = "social";

  let link = document.createElement("a");
  link.href = socialLink;
  link.innerHTML = iconHTML;
  link.ariaLabel = socialType;
  social.appendChild(link);

  return social;
}

function makeArtist({ name, imgSrc, imgAlt, blurb, socials }) {
  let artist = document.createElement("div");
  artist.className = "artist";

  let img = document.createElement("img");
  img.src = imgSrc;
  img.alt = imgAlt;
  img.addEventListener("click", openCorrespondingDetail);
  artist.appendChild(img);

  let details = document.createElement("details");

  let summary = document.createElement("summary");
  summary.textContent = name;
  details.appendChild(summary);

  details.insertAdjacentHTML("beforeend", blurb);

  let socialDiv = document.createElement("div");
  socialDiv.className = "social-grid";

  for (const key in socials) {
    socialDiv.appendChild(makeSocial(key, socials[key]));
  }

  details.appendChild(socialDiv);
  artist.appendChild(details);

  return artist;
}

let artistGrid = document.getElementById("artist-grid");

for (let i = 0; i < artists.length; i++) {
  artistGrid.appendChild(makeArtist(artists[i]));
}
