<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:py="http://genshi.edgewall.org/">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>${page.book.title}</title>
<style type="text/css">
/* This first section of the stylesheet is called a CSS Reset.  */
/* A CSS Reset removes inconsistent formatting that browsers often apply  */

html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:”;}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}

div.fs {
  height: ${page.height}px;
  width: ${page.width}px;
  position: relative;
}

  div.fs a {
    display: block;
    width : 100%;
    height: 100%;
  }


  div.fs div {
    position: absolute;
  }
  div.block {
    display: block;
  }

  div.fs div img.bgimage {
    height: ${page.height}px;
    width: ${page.width}px;
    position: absolute;
  }
<py:if test="add_jquery">
.app-amzn-magnify {
 background-color: green;
border: 5px solid  #000000;
opacity: .5;
}
</py:if>

div.target-mag {
  position: absolute;
  display: block;
  overflow: hidden;
/* style */
  border: 5px solid  #000000;
 background-color: red;
}


div.target-mag-parent {
  width:100%;
  height:100%;
  display:none;
}

div.target-mag-lb {
  height: 100%;
  width: 100%;
  background: #333333;
  opacity:.75;
}

p.textzoom {
  z-index: 1;
  font-size: 150%
}
/* Tap Target Zone Size and Position */
<py:for each="mag in page">

#${mag.target_id} {
  top: ${mag.top}%;
  left: ${mag.left}%;
  height: ${mag.height}%;
  width: ${mag.width}%;
  border-width: 5px;

}
#${mag.target_id_mag} {
  /* Full-Size (900 X 1536) Image Offset for Magnification */
  top: ${mag.lb_top}%;
  left: ${mag.lb_left}%;
  height: ${mag.lb_height}%;
  width: ${mag.lb_width}%;
}

  #${mag.target_id_mag} img {
    /* Full-Size (900 X 1536) Image Offset for Magnification */
   /*top: -10%;*/
  /* Zoom factor ${mag.zoom_factor} */
    position: absolute;
    height: ${page.height * mag.zoom_factor}px;
    width: ${page.width * mag.zoom_factor}px;

   top: ${mag.zoomed_img_top * mag.zoom_factor}%;
<py:if test="mag.lb_left > 0">
   left: ${mag.zoomed_img_left * 4}%;
</py:if>
<py:if test="mag.lb_left == 0">
   left: ${mag.zoomed_img_left * mag.zoom_factor}%;
</py:if>
    /*left: -70%;*/
  }
</py:for>

/* assorted */
.center{
	position: absolute;
	top: 42%;
	left: 29%;
	width: 40%;

}
<py:if test="add_jquery">
.debug {
  z-index:100;
  /* would like buttons to stay above lightframe on debug...
  currently borked */
}
</py:if>
</style>
<py:if test="add_jquery">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  <script>
    var parent_idx = 0;
    var run_magnify = function() {
      // cycle through all target-mag-parent
      var parents = $('.target-mag-parent');
      var parent;

      next = function() {
        if (parent) {
          // hide
          $(parent).css('display', 'none');
        }
        parent = parents[parent_idx];
        parent_idx += 1;
        // show
          $(parent).css('display', 'block');
      };

      prev = function() {
        if (parent) {
          // hide
          $(parent).css('display', 'none');
        }
        parent_idx -= 1;
        parent = parents[parent_idx];
        // show
        $(parent).css('display', 'block');
      };

      $('a.next').click(function(event) {
        event.preventDefault();
        next();
      });

      $('a.prev').click(function(event) {
        event.preventDefault();
        prev();
      });

    $("body").keypress(function(event) {
      if ( event.which == 110 ) { // 'n'
        event.preventDefault();
        next();
      }
      if ( event.which == 112 ) { // 'p'
        event.preventDefault();
        prev();
      }
    });

   }
    $(document).ready(run_magnify);
  </script>
</py:if>
</head>

<body>
<py:if test="add_jquery">
  <a class='debug prev'>PREV</a>
  <a class='debug next'>NEXT</a>
</py:if>

  <div class="fs">
    <div><img class='bgimage' alt="" src="${img_src}"/></div>
    <py:for each="mag in page">
      <div id="${mag.target_id}">
        <py:choose>
          <py:when test="mag.txt">
            <a class="app-amzn-magnify" data-app-amzn-magnify="${mag.json_junk()}" >
              ${mag.txt}
            </a>
          </py:when>
          <py:otherwise>
            <!--<a class="app-amzn-magnify" data-app-amzn-magnify="{'targetId':'${mag.target_id_parent}', 'ordinal':${mag.ordinal}}" fail="true"> -->
            <a class="app-amzn-magnify" data-app-amzn-magnify="${mag.json_junk()}" >
              ${mag.pre_data}
            </a>
          </py:otherwise>
        </py:choose>
      </div>
    </py:for>
    <py:for each="mag in page">
      <div id="${mag.target_id_parent}" class="target-mag-parent">
        <div class="target-mag-lb"></div>
        <div id="${mag.target_id_mag}" class="target-mag">
          <img src="${mag.img_src}" alt=""/>
          ${mag.post_data}
        </div>

      </div>
    </py:for>
  </div>

</body>
</html>
