{% macro format(thumbnail, b_w, b_h, extraclass)%}
    {% set b_width = b_w %}
    {% set b_height = b_h|default(b_w) %}

    {% set b_ratio = b_width / b_height %}
    {% set i_ratio = thumbnail.get_width() / thumbnail.get_height() %}

    {% if i_ratio > b_ratio%}
        {% if b_width > thumbnail.get_width() %}
            {% set d_width = thumbnail.get_width() %}
        {% else %}
            {% set d_width = b_width %}
        {% endif %}
        {% set d_height = d_width / thumbnail.get_width() * thumbnail.get_height() %}
        {% set top = (b_height - d_height) / 2 %}
    {% else %}
        {% if b_height > thumbnail.get_height() %}
            {% set d_height = thumbnail.get_height() %}
        {% else %}
            {% set d_height = b_height %}
        {% endif %}
        {% set d_width = d_height * thumbnail.get_width() / thumbnail.get_height() %}
        {% set top = ((b_height - d_height) / 2) %}
    {% endif %}


        {% set record_type = thumbnail.get_type() %}
        <div style="width:{{b_width|round}}px;height:{{b_height|round}}px;" class="thumb_wrapper {{extraclass|default('')}}">
        {% if record_type == 'VIDEO_MP4' or record_type == 'VIDEO_FLV' %}
          {% set random = thumbnail.get_random() %}
          <div class="record record_video imgTips" style="width:{{d_width|round}}px;height:{{d_height|round}}px;top:{{top|round}}px;">
            <video type="video/mp4" controls="controls" style="width:{{d_width|round}}px;height:{{d_height|round}}px;" autoplay="autoplay">
              <source src="{{thumbnail.get_url()}}" type="video/mp4"></source>
            </video>
          </div>
        {% elseif record_type == 'FLEXPAPER' %}
          {% set random = thumbnail.get_random() %}
          <div class="record record_document imgTips" style="width:{{d_width|round}}px;height:{{d_height|round}}px;top:{{top|round}}px;">
              <div id="preview_{{thumbnail.get_base_id()}}_{{thumbnail.get_record_id()}}_{{random}}" class="PNB" style=""></div>
            <input type="hidden" name="width" value="{{thumbnail.get_width()}}"/>
            <input type="hidden" name="height" value="{{thumbnail.get_height()}}"/>
          </div>
          <script type="text/javascript">
            swfobject.embedSWF("/include/FlexPaper_flash/FlexPaperViewer.swf",
            "preview_{{thumbnail.get_base_id()}}_{{thumbnail.get_record_id()}}_{{random}}",
            "100%", "100%", "9.0.0", false, false,
            {menu: "false",flashvars: "SwfFile={{thumbnail.get_url()}}&Scale=0.6&ZoomTransition=easeOut&ZoomTime=0.5&ZoomInterval=0.1&FitPageOnLoad=true&FitWidthOnLoad=true&PrintEnabled=true&FullScreenAsMaxWindow=false&localeChain={{ app['locale'] }}",  movie: "/include/FlexPaper_flash/FlexPaperViewer.swf",  allowFullScreen :"true",wmode: "transparent"}, false);</script>

        {% elseif record_type == 'AUDIO_MP3' %}
          {% set random = thumbnail.get_random() %}
          <div class="record record_audio audioTips" style="width:{{d_width|round}}px;height:{{d_height|round}}px;top:{{top|round}}px;">
            <div id="preview_{{thumbnail.get_base_id()}}_{{thumbnail.get_record_id()}}_{{random}}" class="PNB" style=""></div>
            <input type="hidden" name="width" value="{{thumbnail.get_width()}}"/>
            <input type="hidden" name="height" value="{{thumbnail.get_height()}}"/>
          </div>
          <script type="text/javascript">
            swfobject.embedSWF("/include/jslibs/audio-player/player.swf",
            "preview_{{thumbnail.get_base_id()}}_{{thumbnail.get_record_id()}}_{{random}}",
            "{{thumbnail.get_width()}}", "{{thumbnail.get_height()}}", "9.0.0", false, false,
            {menu: "false",flashvars: "playerID=2&autostart=yes&noinfo=yes&animation=no&remaining=yes&soundFile={{thumbnail.get_url()}}", movie: "/include/jslibs/audio-player/player.swf",  allowFullScreen :"true",wmode: "transparent"}, false);</script>
        {% else %}
          <img class="record record_image imgTips zoomable thumb" oncontextMenu="return(false);"
               style="width:{{d_width|round}}px;height:{{d_height|round}}px;top:{{top|round}}px;"
               src="{{thumbnail.get_url()}}" ondragstart="return false;">
          <input type="hidden" name="width" value="{{thumbnail.get_width()}}"/>
          <input type="hidden" name="height" value="{{thumbnail.get_height()}}"/>
        {% endif %}
        </div>


{% endmacro %}

{% macro format100percent(thumbnail, extraclass)%}
        {% set record_type = thumbnail.get_type() %}
        <div style="width:100%" class="thumb_wrapper {{extraclass|default('')}}">
        {% if record_type == 'VIDEO_MP4' or record_type == 'VIDEO_FLV' %}
          {% set random = thumbnail.get_random() %}
          <div class="record record_video imgTips" style="100%;">
            <video type="video/mp4" controls="controls" style="width:100%;" autoplay="autoplay">
              <source src="{{thumbnail.get_url()}}" type="video/mp4"></source>
            </video>
          </div>
        {% elseif record_type == 'FLEXPAPER' %}
          {% set random = thumbnail.get_random() %}
          <div class="record record_document imgTips" style="width:100%;">
              <div id="preview_{{thumbnail.get_base_id()}}_{{thumbnail.get_record_id()}}_{{random}}" class="PNB" style=""></div>
            <input type="hidden" name="width" value="{{thumbnail.get_width()}}"/>
            <input type="hidden" name="height" value="{{thumbnail.get_height()}}"/>
          </div>
          <script type="text/javascript">
            swfobject.embedSWF("/include/FlexPaper_flash/FlexPaperViewer.swf",
            "preview_{{thumbnail.get_base_id()}}_{{thumbnail.get_record_id()}}_{{random}}",
            "100%", "100%", "9.0.0", false, false,
            {menu: "false",flashvars: "SwfFile={{thumbnail.get_url()}}&Scale=0.6&ZoomTransition=easeOut&ZoomTime=0.5&ZoomInterval=0.1&FitPageOnLoad=true&FitWidthOnLoad=true&PrintEnabled=true&FullScreenAsMaxWindow=false&localeChain={{app['locale']}}",  movie: "/include/FlexPaper_flash/FlexPaperViewer.swf",  allowFullScreen :"true",wmode: "transparent"}, false);</script>

        {% elseif record_type == 'AUDIO_MP3' %}
          {% set random = thumbnail.get_random() %}
          <div class="record record_audio audioTips" style="width:100%;">
            <div id="preview_{{thumbnail.get_base_id()}}_{{thumbnail.get_record_id()}}_{{random}}" class="PNB" style=""></div>
            <input type="hidden" name="width" value="{{thumbnail.get_width()}}"/>
            <input type="hidden" name="height" value="{{thumbnail.get_height()}}"/>
          </div>
          <script type="text/javascript">
            swfobject.embedSWF("/include/jslibs/audio-player/player.swf",
            "preview_{{thumbnail.get_base_id()}}_{{thumbnail.get_record_id()}}_{{random}}",
            "{{thumbnail.get_width()}}", "{{thumbnail.get_height()}}", "9.0.0", false, false,
            {menu: "false",flashvars: "playerID=2&autostart=yes&noinfo=yes&animation=no&remaining=yes&soundFile={{thumbnail.get_url()}}", movie: "/include/jslibs/audio-player/player.swf",  allowFullScreen :"true",wmode: "transparent"}, false);</script>
        {% else %}
          <img class="record record_image imgTips zoomable thumb" oncontextMenu="return(false);"
               style="width:100%;"
               src="{{thumbnail.get_url()}}" ondragstart="return false;">
          <input type="hidden" name="width" value="{{thumbnail.get_width()}}"/>
          <input type="hidden" name="height" value="{{thumbnail.get_height()}}"/>
        {% endif %}
        </div>


{% endmacro %}