---
title: "Sound Viewer"
output: 
  html_document:
      self_contained: yes
params:
  data: your_file.csv
  captions: "caption_for_pictures"
  about: about.Rmd
  map: map.Rmd
editor_options: 
  chunk_output_type: console
---

<style>
#my_block {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px; 
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%;
  overflow: auto; 
  background-color: rgba(0,0,0, 0.1);
}
#my_img {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  padding: 10px 0;
  height: 150px;
}
</style>

```{r data_creation, include=FALSE}
df <- read.csv(params$data, stringsAsFactors = FALSE)

df$viewer <- 
  paste(create_image_look_up(img_src = df$pictures,
                                            img_caption = params$captions),
        create_sound_play(snd_src = df$audio))

df <- df[, -which(colnames(df) %in% c("audio", "pictures"))]
```


# {.tabset .tabset-fade .tabset-pills}

```{r add_map, child = params$map}
```

## data

```{r make_viewer, echo=FALSE, message=FALSE, warning=FALSE}
DT::datatable(data = df, 
              filter = 'top', 
              rownames = FALSE, 
              options = list(pageLength = 50, dom = 'tip'), 
              escape = FALSE)
```

<div class = "my_block" id="my_block" onclick = "pic_disappear()">
  <span class="close">&times;</span>
  <img class = "my_img" id="my_img">
  <div class = "caption" id="caption">
  </div>
</div>


## about

```{r about, child = params$about}
```


<script>
  function pic_appear(path, caption) {
    var path, caption;
    var block = document.getElementById("my_block");
    var block_img = document.getElementById("my_img");
    var caption_text = document.getElementById("caption");
    block.style.display = "block";
    block_img.src = path;
    caption_text.innerHTML = caption;
  }
  function pic_disappear() {
    var block = document.getElementById("my_block");
    block.style.display = "none";
  }
  function sound_play(x) {
    var audio = new Audio();
    audio.src = x;
    audio.play();
  }
  function resize(elem, percent) { 
  elem.style.fontSize = percent; 
  }
</script>
