const persons = [
  
  {
    name: "Ressie Luck-Brimmer",
    photo:
      "https://plandanville.org/wp-content/uploads/2023/03/Karice_Ressie_Luck-Brimmer_1-transformednew.jpg",
    title: "Lead Ambassador",
    bio:
      "<p>Karice Luck-Brimmer is currently a Community Initiatives program associate for Virginia Humanities responsible for supporting the History United Advisory Council in southern Virginia and the General Assembly African American Cultural Resources Task Force. Working primarily in the Dan River/Danville region, Karice collaborates with local community members to sustain a strong network of cultural organizations committed to positive change. Karice is a public historian and genealogist who has done extensive genealogical research on the Pittsylvania County area, specializing in community based family history. She is the founding president of the Danville/Pittsylvania County Chapter of the Afro-American Historical & Genealogical Society (AAHGS). Karice is also a panelist on the genealogy web show BlackprogenLIVE. In 2019, she was appointed by Governor Northam to serve on the Virginia Board of Historic Resources.</p>",
    social: {
      facebook: "https://www.facebook.com/profile.php?id=100089953976523",
      twitter: "https://www.instagram.com/plandanville",
      linkedin: "https://www.linkedin.com/company/plan-danville"
   }
  },
  {
    name: "Shay Richardson",
    photo:
      "https://plandanville.org/wp-content/uploads/2023/03/Shay-Richardson-2new.jpg",
    title: "Area 3 | Area 4",
    bio:
      "<p>I am a gatekeeper.<br>A protector of the many transitions that life brings.<br>A birth worker.<br>  vessel of divine grace.<br>And I didn't choose this work. This work chose me. <br>A calling that literally wakes me from my sleep. (IYKYK) <br><br>I am a mother, a writer , a doula, lead chair of the first Maternal Health Task Force in Danville, VA, a WIC Breastfeeding Peer Counselor for Danville & Pittsylvania County, a Childbirth Educator, a Placenta Specialist & a future Midwife. I spend my days (and nights) planting seeds & cultivating the space for mamas to bloom into who they are destined to be. I am, simply put, the gardener, but it is you, my dear and my community who blossoms. I am kindly inviting you to help me pollinate.</p>",
    social: {
      facebook: "https://www.facebook.com/profile.php?id=100089953976523",
      twitter: "https://www.instagram.com/plandanville",
      linkedin: "https://www.linkedin.com/company/plan-danville"
    }
  },
  {
    name: "Amyia Totten",
    photo:
      "https://plandanville.org/wp-content/uploads/2023/03/Amyia-Totten-1new.jpg",
    title: "Area 1",
    bio:
      "<p>My name is Amyia Totten I am a Danville native. I am currently enrolled at Radford University in pursuing a Master’s in Clinical Mental Health Counseling. I am also an intern as a counselor in training at Family of Hands here in Danville. I am pleased to have been offered this opportunity as community ambassador because one of my goals for this year was to be more involved in the community and connect with people.</p>",
    social: {
      facebook: "https://www.facebook.com/profile.php?id=100089953976523",
      twitter: "https://www.instagram.com/plandanville",
      linkedin: "https://www.linkedin.com/company/plan-danville"
    }
  },
  {
    name: "James Reynolds",
    photo:
      "https://plandanville.org/wp-content/uploads/2023/03/Bernard-Reynolds.jpg",
    title: "Area 2",
    bio:
      "<p>My name is James Reynolds. I am the Executive Director of Men for Change/Stop the Violence/Community Outreach Organization. Our mission for this organization/outreach is to help restore, reconcile, and encourage the healing process in our families and communities. It is my desire to build communities up with love and to stop the unnecessary violence amongst us.</p>",
    social: {
      facebook: "https://www.facebook.com/profile.php?id=100089953976523",
      twitter: "https://www.instagram.com/plandanville",
      linkedin: "https://www.linkedin.com/company/plan-danville"
    }
  },
  {
    name: "Felice McWilliams",
    photo:
      "https://plandanville.org/wp-content/uploads/2023/03/Felice-McWilliams.jpg",
    title: "Area 6",
    bio:
      "<p>Felice McWilliams has had extensive experience supporting the communities where she has lived. Prior to coming to Danville she served as the recording secretary of the African American Mental Health Coalition in San Bernardino.  Additionally she served with the Westside Nubians as the 2nd Vice President, the President’s Personal Assistant and secretary.  In this role, she served as a resource  to the organization and the community. <br><br>From Felice -   ''I have had blessed opportunities to travel as a Missionary, to many places in the world, sharing my gifts of Worship.  Training musicians and vocalist to become a team, coaching vocals, using guitars and keyboards.  Worked in India, Singapore, Japan, 4 time zones in Russia, and Mexico.''</p>",
    social: {
      facebook: "https://www.facebook.com/profile.php?id=100089953976523",
      twitter: "https://www.instagram.com/plandanville",
      linkedin: "https://www.linkedin.com/company/plan-danville"
    }
  },
  {
    name: "Sonya Wolen",
    photo:
      "https://plandanville.org/wp-content/uploads/2023/03/sony-transformednwew.png",
    title: "Area 5",
    bio:
      "<p>The majority of my career was spent in various aspects of education, primarily science education. As an informal science educator and administrator, I led programs and projects in four museums – two in Indiana and two in Virginia. I was also involved as a grant writer and education contractor in the Danville community. As an outgrowth of my paid positions, I have served on community boards and statewide councils. I am currently an active volunteer and board member of the Dan River Basin Association, and do volunteer work with Virginia Master Naturalists and the City of Danville. <br><br>''Never doubt that a small group of thoughtful, committed citizens can change the world: indeed, it’s the only thing that ever has.'' - Margaret Mead</p>",
    social: {
      facebook: "https://www.facebook.com/profile.php?id=100089953976523",
      twitter: "https://www.instagram.com/plandanville",
      linkedin: "https://www.linkedin.com/company/plan-danville"
    }
  }
];

const app = new Vue({
  el: "#app",
  data() {
    return {
      persons: persons,
      selectedPersonIndex: null,
      isSelected: false,
      selectedPerson: null,
      inlineStyles: null,
      isReady: false,
      isOk: false,
      selectedPersonData: {
        name: null,
        title: null,
        photo: null,
        social: {
          facebook: null,
          twitter: null,
          linkedin: null
        }
      }
    };
  },
  methods: {
    selectPerson(index, el) {
      if (!this.isOk) {
        this.selectedPersonIndex = index;
        this.isSelected = true;
        el.target.parentElement.className == "person-details"
          ? (this.selectedPerson = el.target.parentElement.parentElement)
          : (this.selectedPerson = el.target.parentElement);

        this.selectedPerson.classList.add("person-selected");
        this.selectedPerson.setAttribute(
          "style",
          `width:${this.selectedPerson.offsetWidth}px;`
        );
        this.selectedPersonData = this.persons[index];
        window.setTimeout(() => {
          this.inlineStyles = `width:${this.selectedPerson.offsetWidth}px;height:${this.selectedPerson.offsetHeight}px;left:${this.selectedPerson.offsetLeft}px;top:${this.selectedPerson.offsetTop}px;position:fixed`;
          this.selectedPerson.setAttribute("style", this.inlineStyles);
        }, 400);
        window.setTimeout(() => {
          this.isReady = true;
          this.isOk = true;
        }, 420);
      } else {
        this.reset();
      }
    },
    reset() {
      this.isReady = false;
      window.setTimeout(() => {
        this.selectedPerson.classList.add("person-back");
      }, 280);
      window.setTimeout(() => {
        this.selectedPerson.setAttribute("style", "");
      }, 340);
      window.setTimeout(() => {
        this.isSelected = false;
        this.selectedPerson.classList.remove("person-back", "person-selected");
        this.isOk = false;
      }, 400);
    }
  }
});