const posts = [
  {
    id: 1,
    title: "Pinterest williamsburg roof party",
    date: "01 May 2017",
    description: "<p>Bespoke distillery lomo, activated charcoal sustainable pork belly art party scenester locavore. Literally typewriter asymmetrical, pork belly locavore helvetica scenester meditation squid before they sold out. Mustache celiac bespoke freegan, butcher polaroid vaporware la croix hot chicken sartorial pitchfork PBR&B. Fingerstache fashion axe polaroid, schlitz kitsch banh mi tote bag coloring book meh iPhone williamsburg squid locavore. Leggings subway tile cliche craft beer beard, cornhole lyft thundercats disrupt twee dreamcatcher sriracha chia. Williamsburg humblebrag meditation ethical disrupt authentic. YOLO sartorial subway tile squid.<\/p>\r\n<p>\r\nAffogato coloring book live-edge banjo letterpress brunch, chicharrones wayfarers chia asymmetrical. Gluten-free hella poutine taxidermy, put a bird on it next level twee food truck williamsburg crucifix retro chillwave humblebrag selvage subway tile. Vape trust fund fam venmo. YOLO typewriter mlkshk, leggings ennui mustache gochujang disrupt tousled. Crucifix fam lyft meggings. Austin scenester fam, iceland hammock hoodie kitsch tacos. Ramps activated charcoal tumeric, copper mug try-hard kickstarter la croix pop-up.\r\n<\/p>\r\n<p>\r\nPBR&B brunch iPhone whatever irony, cronut poke heirloom. Man bun leggings green juice quinoa glossier listicle activated charcoal, you probably haven't heard of them coloring book. Try-hard meggings raclette bitters fanny pack, literally lomo single-origin coffee +1 vice. Photo booth unicorn flannel umami, church-key whatever swag aesthetic cliche bushwick mixtape literally you probably haven't heard of them snackwave edison bulb. Ugh iceland jean shorts chia mixtape vexillologist. Mlkshk polaroid quinoa four dollar toast, gastropub succulents vape you probably haven't heard of them viral artisan butcher. Post-ironic put a bird on it organic microdosing, meh craft beer raclette.<\/p>",
    image: "https://image.ibb.co/bF9iO5/1.jpg",
    clip_path: "polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)"
  },
  {
    id: 2,
    title: "Man bun leggings green juice quinoa",
    date: "04 April 2017",
    description: "<p>Bespoke distillery lomo, activated charcoal sustainable pork belly art party scenester locavore. Literally typewriter asymmetrical, pork belly locavore helvetica scenester meditation squid before they sold out. Mustache celiac bespoke freegan, butcher polaroid vaporware la croix hot chicken sartorial pitchfork PBR&B. Fingerstache fashion axe polaroid, schlitz kitsch banh mi tote bag coloring book meh iPhone williamsburg squid locavore. Leggings subway tile cliche craft beer beard, cornhole lyft thundercats disrupt twee dreamcatcher sriracha chia. Williamsburg humblebrag meditation ethical disrupt authentic. YOLO sartorial subway tile squid.<\/p>\r\n<p>\r\nAffogato coloring book live-edge banjo letterpress brunch, chicharrones wayfarers chia asymmetrical. Gluten-free hella poutine taxidermy, put a bird on it next level twee food truck williamsburg crucifix retro chillwave humblebrag selvage subway tile. Vape trust fund fam venmo. YOLO typewriter mlkshk, leggings ennui mustache gochujang disrupt tousled. Crucifix fam lyft meggings. Austin scenester fam, iceland hammock hoodie kitsch tacos. Ramps activated charcoal tumeric, copper mug try-hard kickstarter la croix pop-up.\r\n<\/p>\r\n<p>\r\nPBR&B brunch iPhone whatever irony, cronut poke heirloom. Man bun leggings green juice quinoa glossier listicle activated charcoal, you probably haven't heard of them coloring book. Try-hard meggings raclette bitters fanny pack, literally lomo single-origin coffee +1 vice. Photo booth unicorn flannel umami, church-key whatever swag aesthetic cliche bushwick mixtape literally you probably haven't heard of them snackwave edison bulb. Ugh iceland jean shorts chia mixtape vexillologist. Mlkshk polaroid quinoa four dollar toast, gastropub succulents vape you probably haven't heard of them viral artisan butcher. Post-ironic put a bird on it organic microdosing, meh craft beer raclette.<\/p>",
    image: "https://image.ibb.co/dwDXGQ/2.jpg",
    clip_path: "polygon(31% 23%, 90% 30%, 50% 100%, 0% 50%)"
  },
  {
    id: 3,
    title: "Ramps activated charcoal tumeric",
    date: "22 March 2017",
    description: "<p>Bespoke distillery lomo, activated charcoal sustainable pork belly art party scenester locavore. Literally typewriter asymmetrical, pork belly locavore helvetica scenester meditation squid before they sold out. Mustache celiac bespoke freegan, butcher polaroid vaporware la croix hot chicken sartorial pitchfork PBR&B. Fingerstache fashion axe polaroid, schlitz kitsch banh mi tote bag coloring book meh iPhone williamsburg squid locavore. Leggings subway tile cliche craft beer beard, cornhole lyft thundercats disrupt twee dreamcatcher sriracha chia. Williamsburg humblebrag meditation ethical disrupt authentic. YOLO sartorial subway tile squid.<\/p>\r\n<p>\r\nAffogato coloring book live-edge banjo letterpress brunch, chicharrones wayfarers chia asymmetrical. Gluten-free hella poutine taxidermy, put a bird on it next level twee food truck williamsburg crucifix retro chillwave humblebrag selvage subway tile. Vape trust fund fam venmo. YOLO typewriter mlkshk, leggings ennui mustache gochujang disrupt tousled. Crucifix fam lyft meggings. Austin scenester fam, iceland hammock hoodie kitsch tacos. Ramps activated charcoal tumeric, copper mug try-hard kickstarter la croix pop-up.\r\n<\/p>\r\n<p>\r\nPBR&B brunch iPhone whatever irony, cronut poke heirloom. Man bun leggings green juice quinoa glossier listicle activated charcoal, you probably haven't heard of them coloring book. Try-hard meggings raclette bitters fanny pack, literally lomo single-origin coffee +1 vice. Photo booth unicorn flannel umami, church-key whatever swag aesthetic cliche bushwick mixtape literally you probably haven't heard of them snackwave edison bulb. Ugh iceland jean shorts chia mixtape vexillologist. Mlkshk polaroid quinoa four dollar toast, gastropub succulents vape you probably haven't heard of them viral artisan butcher. Post-ironic put a bird on it organic microdosing, meh craft beer raclette.<\/p>",
    image: "https://image.ibb.co/gnWKwQ/3.jpg",
    clip_path: "polygon(0 29%, 100% 0, 100% 70%, 48% 100%)"
  },
  {
    id: 4,
    title: "Try-hard meggings raclette bitters",
    date: "12 February 2017",
    description: "<p>Bespoke distillery lomo, activated charcoal sustainable pork belly art party scenester locavore. Literally typewriter asymmetrical, pork belly locavore helvetica scenester meditation squid before they sold out. Mustache celiac bespoke freegan, butcher polaroid vaporware la croix hot chicken sartorial pitchfork PBR&B. Fingerstache fashion axe polaroid, schlitz kitsch banh mi tote bag coloring book meh iPhone williamsburg squid locavore. Leggings subway tile cliche craft beer beard, cornhole lyft thundercats disrupt twee dreamcatcher sriracha chia. Williamsburg humblebrag meditation ethical disrupt authentic. YOLO sartorial subway tile squid.<\/p>\r\n<p>\r\nAffogato coloring book live-edge banjo letterpress brunch, chicharrones wayfarers chia asymmetrical. Gluten-free hella poutine taxidermy, put a bird on it next level twee food truck williamsburg crucifix retro chillwave humblebrag selvage subway tile. Vape trust fund fam venmo. YOLO typewriter mlkshk, leggings ennui mustache gochujang disrupt tousled. Crucifix fam lyft meggings. Austin scenester fam, iceland hammock hoodie kitsch tacos. Ramps activated charcoal tumeric, copper mug try-hard kickstarter la croix pop-up.\r\n<\/p>\r\n<p>\r\nPBR&B brunch iPhone whatever irony, cronut poke heirloom. Man bun leggings green juice quinoa glossier listicle activated charcoal, you probably haven't heard of them coloring book. Try-hard meggings raclette bitters fanny pack, literally lomo single-origin coffee +1 vice. Photo booth unicorn flannel umami, church-key whatever swag aesthetic cliche bushwick mixtape literally you probably haven't heard of them snackwave edison bulb. Ugh iceland jean shorts chia mixtape vexillologist. Mlkshk polaroid quinoa four dollar toast, gastropub succulents vape you probably haven't heard of them viral artisan butcher. Post-ironic put a bird on it organic microdosing, meh craft beer raclette.<\/p>",
    image: "https://image.ibb.co/cTfZVk/4.jpg",
    clip_path: "polygon(24% 0, 90% 30%, 79% 78%, 13% 76%)"
  },
  {
    id: 5,
    title: "Mustache celiac bespoke freegan",
    date: "25 January 2017",
    description: "<p>Bespoke distillery lomo, activated charcoal sustainable pork belly art party scenester locavore. Literally typewriter asymmetrical, pork belly locavore helvetica scenester meditation squid before they sold out. Mustache celiac bespoke freegan, butcher polaroid vaporware la croix hot chicken sartorial pitchfork PBR&B. Fingerstache fashion axe polaroid, schlitz kitsch banh mi tote bag coloring book meh iPhone williamsburg squid locavore. Leggings subway tile cliche craft beer beard, cornhole lyft thundercats disrupt twee dreamcatcher sriracha chia. Williamsburg humblebrag meditation ethical disrupt authentic. YOLO sartorial subway tile squid.<\/p>\r\n<p>\r\nAffogato coloring book live-edge banjo letterpress brunch, chicharrones wayfarers chia asymmetrical. Gluten-free hella poutine taxidermy, put a bird on it next level twee food truck williamsburg crucifix retro chillwave humblebrag selvage subway tile. Vape trust fund fam venmo. YOLO typewriter mlkshk, leggings ennui mustache gochujang disrupt tousled. Crucifix fam lyft meggings. Austin scenester fam, iceland hammock hoodie kitsch tacos. Ramps activated charcoal tumeric, copper mug try-hard kickstarter la croix pop-up.\r\n<\/p>\r\n<p>\r\nPBR&B brunch iPhone whatever irony, cronut poke heirloom. Man bun leggings green juice quinoa glossier listicle activated charcoal, you probably haven't heard of them coloring book. Try-hard meggings raclette bitters fanny pack, literally lomo single-origin coffee +1 vice. Photo booth unicorn flannel umami, church-key whatever swag aesthetic cliche bushwick mixtape literally you probably haven't heard of them snackwave edison bulb. Ugh iceland jean shorts chia mixtape vexillologist. Mlkshk polaroid quinoa four dollar toast, gastropub succulents vape you probably haven't heard of them viral artisan butcher. Post-ironic put a bird on it organic microdosing, meh craft beer raclette.<\/p>",
    image: "https://image.ibb.co/e12RbQ/5.jpg",
    clip_path: "polygon(0 100%, 46% 0, 100% 70%, 49% 69%)"
  }
];

const app = new Vue({
  el: "#app",
  data() {
    return {
      test: "",
      posts: posts,
      selectedClipPath: "polygon(0 100%, 0 0, 100% 0, 100% 100%)",
      postImage: posts[0].image,
      currentPost: null,
      postIndex: 0,
      selected: false,
      ready: false,
      lastSelectedPost: null,
      clipPath: posts[0].clip_path
    };
  },
  methods: {
    changePost(index) {
      if (this.postImage != this.posts[index].image && this.selected == false) {
        this.postImage = this.posts[index].image;
        this.clipPath = this.posts[index].clip_path;
      }
    },
    closePost() {
      if(this.lastSelectedPost != null){
        this.selected = false;
        this.ready = false;
        this.clipPath = this.posts[this.lastSelectedPost].clip_path;
      }
    },
    selectedPost(index) {
      this.selected = true;
      this.clipPath = this.selectedClipPath;
      this.lastSelectedPost = index;
      this.currentPost = this.posts[index];
      setTimeout(() => {
        this.ready = true;
      }, 600);
    },
    nextPost() {
      if (this.lastSelectedPost < this.posts.length - 1) {
        this.lastSelectedPost++;
        this.ready = false;
        setTimeout(() => {
          this.currentPost = this.posts[this.lastSelectedPost];
          this.postImage = this.currentPost.image;
          this.ready = true;
        }, 600);
      }
    },
    prevPost() {
      if (
        this.lastSelectedPost <= this.posts.length - 1 &&
        this.lastSelectedPost != 0
      ) {
        this.lastSelectedPost--;
        this.ready = false;
        setTimeout(() => {
          this.currentPost = this.posts[this.lastSelectedPost];
          this.postImage = this.currentPost.image;
          this.ready = true;
        }, 600);
      }
    }
  },
  created() {
    window.addEventListener("keydown", e => {
      e.keyCode == 39 ? this.nextPost() : false;
      e.keyCode == 37 ? this.prevPost() : false;
      e.keyCode == 27 ? this.closePost() : false;
    });
  }
});