{% extends "base.html" %}
{% load thumbnail paniktags %}
{% block bodyID %}Party{% endblock %}
{% block title %}Party{% endblock %}

{% block extrascripts %}
<script>
var timer = null;
function reload() {
  if (location.href.indexOf('/party') == -1) {
    clearInterval(timer);
    return;
  }
  if (location.href.indexOf('?') == -1) {
    href = location.href;
  } else {
    href = location.href.substring(0, location.href.indexOf('?'));
  }
  href = href + '?' + new Date().getTime()
  $('#Changing').fadeOut();

  $('#Changing').load(href + " #Changing>*", null, function() {$('#Changing').fadeIn();});
}

$(function() {
  timer = setInterval(reload, 10000);
});
</script>
{% endblock %}

{% block main %}

<div id="party" class="news">

  <div class="content content-inline cf special">
    <a class="block cf" href="{{ focus|get_focus_url}}">
      {% if focus.content_category_title %}
        <div class="label labels absolute">
          <span class="item inBlock">{{ focus.content_category_title }}</span>
        </div>
      {% endif %}
      <div class="logo">
        {% thumbnail focus.content_image "500x375" crop="50% 25%" as im %}
        <img width="500" height="375" class="normal" src="{{im.url}}"/>
        {% endthumbnail %}
      </div>
      <div class="title"><div>{{ focus.focus_title }}</div></div>
    </a>
  </div>

  <style>
#metaNav, #Footer, .metas { display: none; }
.special .title {
	opacity:0.9;
        width: 482px;
        background: black;
        color: white;
        position: absolute;
        bottom: 0;
	font-family: "RegloBold";
        padding: 10px;
}

body {
        height: 90%;
        overflow: hidden;
}

#Changing,
#Commons {
        float: none;
        height: 200px;
        width: 500px;
        margin: 0 auto 0 auto;
}
#backgroundBox {
        margin: auto 0;
}

#Commons > .wrapper {
        position: relative;
}

#Player {
        width: 200px;
        position: absolute;
        top: 50px;
        left: 200px;
}

  </style>

{% endblock %}