<script>
$(document).ready(function() {
    // initialize anniversary count down
  var g_Now = Math.floor(new Date().getTime() / 1000);
  if (g_Now < 1483779600 && g_Now > 1482138000) {
    // do not display after 10:00:00 07.01.2017 (CET) (1483779600)
    // do not display before 10:00:00 19.12.2016 (CET) (1482138000)
    var g_AnniversaryDate = new Date(2017, 00, 07, 10, 00, 00); // careful! January hat the number "0"
    InitializeFancyAnniversaryCountDown(g_AnniversaryDate);
  }
});
/* ---------------------- */
/* anniversary count down */
/* ---------------------- */

//preload images
var g_ImageObject = new Object();
g_ImageObject[0] = new Image();
g_ImageObject[1] = new Image();
g_ImageObject[2] = new Image();
g_ImageObject[3] = new Image();
g_ImageObject[4] = new Image();
g_ImageObject[5] = new Image();
g_ImageObject[6] = new Image();
g_ImageObject[7] = new Image();
g_ImageObject[8] = new Image();
g_ImageObject[9] = new Image();
g_ImageObject[0].src = 'https://s29.postimg.org/9lwla0khz/number_0.png';
g_ImageObject[1].src = 'https://s29.postimg.org/4oj0owiiv/number_1.png';
g_ImageObject[2].src = 'https://s29.postimg.org/ijhb7dcxz/number_2.png';
g_ImageObject[3].src = 'https://s29.postimg.org/gsya5vvev/number_3.png';
g_ImageObject[4].src = 'https://s29.postimg.org/r4amyjn47/number_4.png';
g_ImageObject[5].src = 'https://s29.postimg.org/443zm7paf/number_5.png';
g_ImageObject[6].src = 'https://s29.postimg.org/es7ql1z9j/number_6.png';
g_ImageObject[7].src = 'https://s29.postimg.org/z0v46rykn/number_7.png';
g_ImageObject[8].src = 'https://s29.postimg.org/ayeabwhxj/number_8.png';
g_ImageObject[9].src = 'https://s29.postimg.org/6qo3gw5vr/number_9.png';

// calculate remaining time for the anniversary countdown
function getTimeRemaining(a_EndTime) {
  var l_TimeStamp = Date.parse(a_EndTime) - Date.parse(new Date());
  var l_Days = Math.floor(l_TimeStamp / (1000 * 60 * 60 * 24));
  var l_Hours = Math.floor((l_TimeStamp / (1000 * 60 * 60)) % 24);
  var l_Minutes = Math.floor((l_TimeStamp / 1000 / 60) % 60);
  var l_Seconds = Math.floor((l_TimeStamp / 1000) % 60);
  return {
    'total': l_TimeStamp,
    'days': l_Days,
    'hours': l_Hours,
    'minutes': l_Minutes,
    'seconds': l_Seconds
  };
}

//initialize the clock for the anniversary countdown
function InitializeFancyAnniversaryCountDown(a_EndTime)
{
  var l_DaysFirst = $('.FancyAnniversaryCountDown .DaysFirst');
  var l_DaysLast = $('.FancyAnniversaryCountDown .DaysLast');
  var l_HoursFirst = $('.FancyAnniversaryCountDown .HoursFirst');
  var l_HoursLast = $('.FancyAnniversaryCountDown .HoursLast');
  var l_MinutesFirst = $('.FancyAnniversaryCountDown .MinutesFirst');
  var l_MinutesLast = $('.FancyAnniversaryCountDown .MinutesLast');
  var l_SecondsFirst = $('.FancyAnniversaryCountDown .SecondsFirst');
  var l_SecondsLast = $('.FancyAnniversaryCountDown .SecondsLast');

  function UpdateFancyClock() {
    var l_TimeRemaining = getTimeRemaining(a_EndTime);
    l_DaysFirst.css('background-image', 'url(' + g_ImageObject[('0' + l_TimeRemaining.days).slice(-2, -1)].src + ')');
    l_DaysLast.css('background-image', 'url(' + g_ImageObject[('0' + l_TimeRemaining.days).slice(-1)].src + ')');
    l_HoursFirst.css('background-image', 'url(' + g_ImageObject[('0' + l_TimeRemaining.hours).slice(-2, -1)].src + ')');
    l_HoursLast.css('background-image', 'url(' + g_ImageObject[('0' + l_TimeRemaining.hours).slice(-1)].src + ')');
    l_MinutesFirst.css('background-image', 'url(' + g_ImageObject[('0' + l_TimeRemaining.minutes).slice(-2, -1)].src + ')');
    l_MinutesLast.css('background-image', 'url(' + g_ImageObject[('0' + l_TimeRemaining.minutes).slice(-1)].src + ')');
    l_SecondsFirst.css('background-image', 'url(' + g_ImageObject[('0' + l_TimeRemaining.seconds).slice(-2, -1)].src + ')');
    l_SecondsLast.css('background-image', 'url(' + g_ImageObject[('0' + l_TimeRemaining.seconds).slice(-1)].src + ')');
    if (l_TimeRemaining.total <= 0) {
     clearInterval(l_IntervalTime);
    }
  }

  UpdateFancyClock();
  var l_IntervalTime = setInterval(UpdateFancyClock, 1000);
}
</script>
<style>
#Themeboxes #AnniversaryCountDownBox {
    height: 120px;
}
.Themebox {
    position: relative;
    margin-bottom: 10px;
    width: 180px;
    height: 154px;
}
#Themeboxes div {
    font-size: 10pt;
    background-repeat: no-repeat;
}
#ThemeboxesColumn {
    position: absolute;
    width: 180px;
    filter: alpha(opacity=100);
}
/* ---------------------- */
/* anniversary count down */
/* ---------------------- */

.FancyAnniversaryCountDown {
  position: absolute;
  margin-left: 26px;
  margin-top: 50px;
  font-family: courier new;
  color: #5A2800;
  text-align: center;
}
.FancyAnniversaryCountDown .CountDownLabel {
  width: 28px;
  text-align: center;
  font-family: Verdana, Arial, Times New Roman, sans-serif;
  font-size: 8pt !important;
  margin-top: 2px;
}
.FancyAnniversaryCountDown .Number {
  float: left;
  width: 12px;
  text-align: right;
}
.FancyAnniversaryCountDown .NumberSecond {
  margin-left: 1px;
}
.FancyAnniversaryCountDown .Number > span {
  background-repeat: no-repeat;
  display: block;
  height: 21px;
  width: 14px;
}
.FancyAnniversaryCountDown .Separator {
  float: left;
  position: relative;
  display: inline-block;
  top: 2px;
  width: 3px;
  height: 21px;
  margin-left: 3px;
  margin-right: 2px;
}
</style>
<div id="ThemeboxesColumn">
<div id="Themeboxes">
<div id="AnniversaryCountDownBox" class="Themebox" style="background-image:url(https://a248.e.akamai.net/cipsoft.download.akamai.com/118500/tibia/static.tibia.com/images/global/themeboxes/anniversary/tibia-anniversary-countdown.png);">
        <div class="FancyAnniversaryCountDown">
          <div class="Number NumberFirst"><span class="DaysFirst"></span><div class="CountDownLabel">days</div></div>
          <div class="Number NumberSecond"><span class="DaysLast"></span></div>
          <div class="Separator"></div>
          <div class="Number NumberFirst"><span class="HoursFirst" ></span><div class="CountDownLabel">hrs</div></div>
          <div class="Number NumberSecond"><span class="HoursLast" ></span></div>
          <div class="Separator"></div>
          <div class="Number NumberFirst"><span class="MinutesFirst"></span><div class="CountDownLabel">mins</div></div>
          <div class="Number NumberSecond"><span class="MinutesLast"></span></div>
          <div class="Separator"></div>
          <div class="Number NumberFirst"><span class="SecondsFirst"></span><div class="CountDownLabel">secs</div></div>
          <div class="Number NumberSecond"><span class="SecondsLast"></span></div>
        </div>
        <div class="Bottom" style="background-image:url(https://a248.e.akamai.net/cipsoft.download.akamai.com/118500/tibia/static.tibia.com/images/global/general/box-bottom.gif);"></div>
      </div>
      </div>
</div>