{% load alter_size %}
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Edgwareroad.org {{article.title}}</title>
<link rel="stylesheet" type="text/css" href="/static/css/colorbox.css" />
<link rel="stylesheet" type="text/css" href="/static/css/fonts.css" />
<link rel="stylesheet" type="text/css" href="/static/css/jquery.tooltip.css" />
<link href="/static/css/articleDemo.css" rel="stylesheet" type="text/css" />
<style type="text/css">

.style1 {font-size: 16px}

body, html {
  font-size: {{ "14px"|make_really_big:m }};
  margin: 0px;
  padding: 0px;  
}


p {
  padding: 0px;
  margin: 0px;
}


.canvas {
  position: relative;
  height: {{height}}
  width: {{width}}
  }

.textbox_canvas_text * {
  margin-top: 0px;
}

.textbox_canvas_text {
  margin-top: 0px;
}

.box {
  position: absolute;
  }

.page {
	clear:left;
	font-family: Helvetica, sans-serif;
	font-size: 12px;
	width: {{width}}px;
	height: {{height}}px;
/*
	border-left:1px #CC6600 dotted;
	border-bottom: #CC6600 1px dotted;
*/
	margin-left: 25px;
	margin-top: 10px;
	margin-bottom: 20px;
  padding: 0px;
	position: relative;
/*	background-color: #FFFFFF; */
}

{% for p in pages %}

#page{{p.id}} {

  }

{% for t in p.textBoxes %}
#textbox{{p.id}}{{t.id}} {
  {% for prop, value in t.css.items %}
    {{prop}}: {{ value|make_really_big:m }};
  {% endfor %}
  }
{% endfor %}

{% for i in p.imageBoxes %}
#imagebox{{p.id}}{{i.id}} {
  {% for prop, value in i.css.items %}
    {{prop}}: {{ value|make_really_big:m }};
  {% endfor %}
  }

#imagebox{{p.id}}{{i.id}} img {
  height: {{ i.css.height|make_really_big:m }};
  width: {{ i.css.width|make_really_big:m }}  
  }
{% endfor %}

{% endfor %}


</style>

<script type="text/javascript" src="/static/js/jquery.js"></script>
<script type="text/javascript" src="/static/js/jquery.colorbox.js"></script>
<script type="text/javascript" src="/static/js/jquery.srt.js"></script>
<script type="text/javascript" src="/static/js/jquery.tooltip.js"></script>
<!-- <script type="text/javascript" src="/static/js/swfobject.js"></script> -->
<script type="text/javascript" src="/static/js/articleMockup.js"></script>

</head>

<body>
<div class="hiddenDivs">
  <div id="videoWrap">
    <video id="padmaVideo" data-base="/static/mockup/video/" src="" controls>Sorry, you currently need Firefox 3.5 to view this.</video>
    <div id="srtWrap">
      <div class="srtContainer">
        <div class="srtTitle">Transcript:</div>
        <div class="srt Transcript" data-srt="" data-video="padmaVideo">
          
        </div>
        <div class="toggleButton icon" title="Switch to Description">-></div>
      </div>
      <div class="srtContainer" style="display: none;">
        <div class="srtTitle">Description:</div>
        <div class="srt Description" data-video="padmaVideo" data-srt="">
          
        </div>
        <div class="toggleButton icon" title="Switch to Transcript">&lt;-</div>
      </div>
    </div>
  </div>
</div>

<div class="hiddenDivs">
  <div id="audioWrap">
    <audio id="padmaAudio" data-base="/static/mockup/audio/" src="" controls>Sorry, you currently need Firefox 3.5 to view this.</audio>
    <div id="srtWrap2">
      <div class="audioSrt">
        <div class="srtTitle"><span style="font-family:Verdana, Arial, Helvetica, sans-serif">Transcript:</span></div>
        <div class="srt Transcript" data-srt="" data-video="padmaAudio">
          
        </div>
<!--        <div class="toggleButton icon" title="Switch to Description">-></div> -->
      </div>
<!--
      <div class="srtContainer" style="display: none;">
        <div class="srtTitle">Description:</div>
        <div class="srt Description" data-video="padmaAudio" data-srt="">
          
        </div>
        <div class="toggleButton icon" title="Switch to Transcript">&lt;-</div>
      </div>
-->
    </div>
  </div>
</div>      


<!--<div class="big" id="1">
   
 <div id="lefttitle"><img src="/static/images/titlecard1.png" width="332" height="108" />
 </div>
  
  <div id="navcontaineren" class="english">
	<ul id="navlisten">
	  <li id="active"><a href="http://edgwareroad.org/mockup/home" id="current">home</a></li>
	  <li><a href=""> contact </a></li>
	  <li><a href="">about</a> </li>
	  <li><a href="" target="_blank"> events</a>
	</ul>
  </div>
    
  

   <div id="navcontainerar" class="arabic">
	<ul id="navlistar">
	  <li id="active"><a href="http://edgwareroad.org/mockup/home" id="current">بيت</a></li>
	  <li><a href=""> احتكاك</a></li>
	  <li><a href="">حوالي</a> </li>
	  <li><a href="" target="_blank">أحداث</a>
	</ul>
  </div>
    
    
  <div id="righttitle" class="english"> Vol. 0, July 2011</div>
  <div id="righttitle1" class="arabic">ادجوار رود ، المجلد 1 يناير 2011</div>
<<<<<<< TREE
	<div id="languageBtn"><span class="arabicBtn">االقائمة العربية</span> <span class="englishBtn">English Menu</span></div>
 </div>-->

<div id="header">
      <ul id="nav">
        <li>
          <a href="/archive" title="The Edgwareroad.org Archive">Archive</a>
        </li>
        <li>
          <a href="/upload" title="File Uploader">Upload</a>
        </li>
        <li>
          <a href="/publish" title="Publish!">Publish</a>
        </li>
          <li>
          <a href="/browse" title="Browse Publications">Browse</a>
        </li>
        <li>
          <a href="/contact" title="Contact Us">About/Contact</a>
        </li>
        <li>
          <a href="/faq" title="Frequently Asked Questions">FAQ</a>
        </li>
        <li> &nbsp;</li>
        </ul>
        <div id="GoHome">
          <a href="/home" title="home">Edgwareroad.org</a>
		</div>
		</div>
    

<div id="pagesWrapper">
{% autoescape off %}
{% for p in pages %}
<div class="page" id="page{{p.id}}">
    {% for t in p.textBoxes %}
      <div id="textbox{{p.id}}{{t.id}}" class="box textBox">
        {{t.html|parse_html:m}}
      </div>
    {% endfor %}
    {% for i in p.imageBoxes %}
      <div id="imagebox{{p.id}}{{i.id}}" class="box imageBox">
        <img src="{{i.resource.resized}}" />
      </div>
    {% endfor %}
</div>
{% endfor %}
{% endautoescape %}
</div>
<p>&nbsp;</p>
<div id="contents"> 
 <div class="english">
  <div id="dotsHeader">
    <p><span id="articleName">{{ article.name }}</span>
      <span class="pdfLink">
        &lt;&lt;
        <a target="_blank" href="/edit/print_article/?id={{article.id}}" title="Download PDF">
          get pdf
        </a>
        &gt;&gt;
      </span>
    </p>
    {% if is_owner %}
    <div id="articleEditWrapper">
      <h5 id="articleAdminH">Article Admin</h5>
      <div id="articleFormToggle">
        <p>
          <form id="titleForm" method="post" action="">
            <input type="hidden" id="articleId" value="{{ article.id }}" />
            <input type="text" id="articleTitle" value="{{ article.name }}" />
            <input type="submit" id="submitTitleBtn" value="Change Title" />
          </form>
        </p>

        <p>
          Lock Article: <input type="checkbox" id="lockArticle" {% if locked %} checked="checked" {% endif %}>
        </p>
        <p>
          Publish Article: <input type="checkbox" id="publishArticle" {% if published %} checked="checked" {% endif %}>
        </p>

        <p>

        </p>
      </div>
    </div>
    {% endif %}
  </div>
  {% for a_b in articles_before %}
    <a href="../../{{a_b.product.id}}/{{a_b.order}}/">{{a_b.order}}</a>. {{a_b.name}}<br />
  {% endfor %}
 <!--   {{article.order}}. {{article.title}} -->
  </div>
  <!--
  <div class="arabic">
  <p>متلامس:<br />
  <br />
  </div>
  -->
  <div id="scrollDots">

  </div>
  <div class="english">
    <p>
   {% for a_a in articles_after %}
      <a href="../../{{a_a.product.id}}/{{a_a.order}}/">{{a_a.order}}</a>. {{a_a.name}}<br />
    {% endfor %}
    </p>
   </div>
  
  <div class="arabic">
   </div>
  
  </p>
</div>

</body>
</html>
