<!-- CMPTV WEATHER MODULE (745 x 120) -->
<div id="cmptvWeather" style="
  width: 745px;
  height: 120px;
  background:#08488D;
  overflow:hidden;
  position:relative;
">

  <!-- TOP VIEW -->
  <div id="weatherTop" style="
    position:absolute;
    inset:0;
    opacity:1;
    transition:opacity 1s ease-in-out;
  ">
    <img id="weatherImgTop"
      src="https://w.bookcdn.com/weather/picture/3_2015_1_1_0a4d94_750_ffffff_333333_08488D_1_ffffff_333333_0_6.png?scode=2&domid=w209&anc_id=55640"
      style="
        width:100%;
        display:block;
      ">
  </div>

  <!-- BOTTOM VIEW -->
  <div id="weatherBottom" style="
    position:absolute;
    inset:0;
    opacity:0;
    transition:opacity 1s ease-in-out;
  ">
    <img id="weatherImgBottom"
      src="https://w.bookcdn.com/weather/picture/3_2015_1_1_0a4d94_750_ffffff_333333_08488D_1_ffffff_333333_0_6.png?scode=2&domid=w209&anc_id=55640"
      style="
        width:100%;
        display:block;
      ">
  </div>

</div>

<script>
(function(){

  const top = document.getElementById("weatherTop");
  const bottom = document.getElementById("weatherBottom");

  const imgTop = document.getElementById("weatherImgTop");
  const imgBottom = document.getElementById("weatherImgBottom");

  const WEATHER_URL = imgTop.src;

  let showingTop = true;

  /*
    MANUAL IMAGE ALIGNMENT CONTROLS
    Negative value = move image UP
    Positive value = move image DOWN
  */
  const TOP_IMAGE_OFFSET_Y = -10;      // requested: top image up by 5px
  const BOTTOM_IMAGE_OFFSET_Y = -152; // requested: bottom image up by 10px from previous -120

  function applyImageOffsets() {
    imgTop.style.transform = "translateY(" + TOP_IMAGE_OFFSET_Y + "px)";
    imgBottom.style.transform = "translateY(" + BOTTOM_IMAGE_OFFSET_Y + "px)";
  }

  function swap(){
    if(showingTop){
      top.style.opacity = 0;
      bottom.style.opacity = 1;
    } else {
      top.style.opacity = 1;
      bottom.style.opacity = 0;
    }
    showingTop = !showingTop;
  }

  function refreshWeather(){
    const fresh = WEATHER_URL + "&t=" + Date.now();
    imgTop.src = fresh;
    imgBottom.src = fresh;
  }

  imgTop.onload = applyImageOffsets;
  imgBottom.onload = applyImageOffsets;

  applyImageOffsets();

  setInterval(swap, 60000);            // 1 min switch
  setInterval(refreshWeather, 300000); // 5 min refresh

})();
</script>