<html xmlns:tal="http://xml.zope.org/namespaces/tal"
      xmlns:metal="http://xml.zope.org/namespaces/metal"
      xmlns:i18n="http://xml.zope.org/namespaces/i18n">
  <head>
    <title>Display macros for arbitrary set of photos</title>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
  </head>
  <body>
    <div metal:define-macro="grid"
         tal:define="slide_size portal_object/slide_size;
                     mayBeDropable exists:dropable;
                     dropable python:True if mayBeDropable and dropable else False"
         i18n:domain="portfolio">
      <div id="lightbox" tal:attributes="class python:'lightbox photo-drop-target' if dropable else 'lightbox'">
        <span metal:define-macro="thumbnails" tal:repeat="info infos" tal:omit-tag="">
          <span tal:define="size info/thumbSize;
                            margin_top python:(slide_size - size['height']) / 2;
                            margin_left python:(slide_size - size['width']) / 2;
                            selected info/selected|nothing"
                tal:attributes="class info/className;
                                name info/cmf_uid"
                metal:define-macro="thumbnail">
            <a class="slide" tal:attributes="href info/href; title info/title">
              <img tal:attributes="src info/thumbUrl;
                                   alt info/title;
                                   height size/height;
                                   width size/width;
                                   style string:margin-top:${margin_top}px;; margin-left:${margin_left}px;"/>
            </a>
            <tal:block tal:condition="python:features.has_key('select')">
              <span class="button slide-select" tal:condition="not:selected">
                <a name="add_to_selection" title="Add to selection"
                   tal:attributes="href python:features['select'](info['o'], False)"
                   i18n:attributes="title">
                  <img tal:attributes="src string:${portal_url}/transparent.gif"
                       height="17" width="12" alt="Add to selection"
                       i18n:attributes="alt"/>
                </a>
              </span>
              <span class="button slide-deselect" tal:condition="selected">
                <a name="remove_to_selection" title="Remove to selection"
                   tal:attributes="href python:features['select'](info['o'], True)"
                   i18n:attributes="title">
                  <img height="17" width="12" alt="Remove to selection"
                       tal:attributes="src string:${portal_url}/transparent.gif"
                       i18n:attributes="alt"/>
                </a>
              </span>
            </tal:block>
            <span class="button slide-cart" tal:condition="python:info.get('buyable')">
              <a name="add_to_cart" title="Add to cart"
                 tal:attributes="href python:features['cart'](info['o'])"
                 i18n:attributes="title">
                <img height="17" width="20" alt="Add to cart"
                     tal:attributes="src string:${portal_url}/transparent.gif"
                     i18n:attributes="alt"/>
              </a>
            </span>
            <span class="button slide-del" tal:condition="python:features.has_key('del')">
              <a title="Delete"
                 tal:attributes="href python:features['del'](info['o'])"
                 i18n:attributes="title">
                <img height="19" width="18" alt="Delete"
                     tal:attributes="src string:${portal_url}/transparent.gif"
                     i18n:attributes="alt"/>
              </a>
            </span>
            <span class="button cb" tal:condition="features/checkbox|nothing">
              <input type="checkbox" name="uids:list"
                     tal:attributes="value info/cmf_uid"/>
            </span>
            <tal:block tal:condition="features/hideAnonymous|nothing">
              <span class="button slide-hide"
                    tal:define="mtop python:margin_top + 4;
                                mleft python:margin_left + size['width'] - 17"
                    tal:condition="not:info/hiddenForAnonymous"
                    tal:attributes="style python:'margin-top:%dpx;; margin-left:%dpx' % (mtop, mleft)">
                <a title="Hide for anonymous" name="hide_for_anonymous"
                   tal:attributes="href string:${info/href}/hideForAnonymous"
                   i18n:attributes="title">
                  <img height="15" width="16" alt="Hide for anonymous"
                       tal:attributes="src string:${portal_url}/transparent.gif"
                       i18n:attributes="alt"/>
                </a>
              </span>
              <span class="button slide-show"
                    tal:define="mtop python:margin_top + 4;
                                mleft python:margin_left + size['width'] - 17"
                    tal:condition="info/hiddenForAnonymous"
                    tal:attributes="style python:'margin-top:%dpx;; margin-left:%dpx' % (mtop, mleft)">
                <a title="Show for anonymous" name="show_for_anonymous"
                   tal:attributes="href string:${info/href}/resetHide"
                   i18n:attributes="title">
                  <img height="15" width="16" alt="Show for anonymous"
                       tal:attributes="src string:${portal_url}/transparent.gif"
                       i18n:attributes="alt"/>
                </a>
              </span>
            </tal:block>
          </span>
        </span>
      </div>
      <br clear="all"/>
      <noscript>
        <div metal:use-macro="here/batch_macros/macros/navigation">batch navigation</div>
      </noscript>
      <script type="text/javascript" tal:condition="not:dropable"
              tal:content="structure python:'''
              new Lightbox(document.getElementById('lightbox'),
                           document.getElementById('lightbox_toolbar'),
                           %(complete)s,
                           '%(container_type)s');
                           ''' % {'complete' : 'true' if not batch.next else 'false',
                                  'container_type' : options.get('container_type', 'portfolio')}">
      </script>
      <script type="text/javascript"
              tal:condition="dropable"
              tal:content="structure python:'''
              (function(){
                var lb = document.getElementById('lightbox');
                new Lightbox(lb,
                             document.getElementById('lightbox_toolbar'),
                             %(complete)s,
                             '%(container_type)s');
                var uploadUrl = '%(putUrl)s';
                var options = {'slideSize' : %(slideSize)d,
                               'thumbnailSize' : %(thumbnailSize)d};
                new DDImageUploader(lb, uploadUrl, options);
              })();
              ''' % {'putUrl' : '%s/put_upload' % here.absolute_url(),
                     'slideSize' : portal_object.slide_size,
                     'thumbnailSize' : portal_object.thumb_size,
                     'complete': 'true' if not batch.next else 'false',
                     'container_type' : options.get('container_type', 'portfolio')}">
      </script>
    </div>
    <div metal:define-macro="film_bar" tal:omit-tag="">
      <div id="film_bar">
        <table cellspacing="0">
          <tr tal:define="slide_size python:portal_object.thumb_size/2 + 10;
                          blank_img string:$portal_url/transparent.gif">
            <td tal:repeat="info contextInfos/infos">
              <a tal:attributes="href info/href;
                                 title info/title;
                                 class info/className;
                                 portfolio:position info/index;">
                <img tal:define="size info/thumbSize;
                                 margin_top python:(slide_size - size['height']) / 2"
                     tal:attributes="src python:info['src'] if info['displayed'] else blank_img;
                                     alt info/title;
                                     height size/height;
                                     width size/width;
                                     style string:margin-top : ${margin_top}px ;"/>
              </a>
            </td>
          </tr>
        </table>
      </div>
      <div class="jsslider">
        <span id="slider"/>
      </div>
      <script type="text/javascript"
              tal:content="python:'''
              var startSlideShow, slideShowNext, stopSlideShow;
              (function(){
                var ctxInfos = {'filmLength': %(filmLength)s,
                                'center': %(center)s,
                                'slideSize': %(slideSize)d,
                                'ctxUrlTranslation' : [%(reBaseCtxUrl)s, %(canonicalUrl)s]};
              var fs = new FilmSlider(document.getElementById('film_bar'),
                                      document.getElementById('slider'),
                                      ctxInfos,
                                      document.getElementById('medium_image').getElementsByTagName('img')[0],
                                      document.getElementById('image_toolbar'),
                                      document.getElementById('Breadcrumbs'));
              startSlideShow = function() {return fs.startSlideShow();};
              stopSlideShow = function() {return fs.stopSlideShow();};
              slideShowPrevious = function() {return fs.slideShowPrevious();};
              slideShowNext = function() {return fs.slideShowNext();};
              slideShowImageLoaded = function() {return fs.slideShowImageLoaded();};
              })();
              ''' % {'filmLength' : len(contextInfos['infos']),
                     'center' : index,
                     'slideSize' : portal_object.thumb_size/2 + 11,
                     'reBaseCtxUrl' : contextInfos['reBaseCtxUrl'],
                     'canonicalUrl' : contextInfos['canonicalUrl']}">
      </script>
    </div>
  </body>
</html>