
  {% extends 'main_base.html' %}


  {% block extra_head %}
  <link rel="stylesheet" href="/static/css/ui-lightness/jquery-ui-1.7.2.custom.css" />
  <link rel="stylesheet" href="/static/css/farbtastic.css" />
  <link rel="stylesheet" href="/static/css/editor.css" />
  <link rel="stylesheet" href="/static/css/fonts.css" />
  <link rel="stylesheet" href="/static/css/jquery.tooltip.css" />
  <link rel="stylesheet" href="/static/colorpicker/css/colorpicker.css" type="text/css" />
  <link rel="stylesheet" media="screen" type="text/css" href="/static/colorpicker/css/layout.css" />
<!--  <script type="text/javascript" src="/static/js/jquery.js"></script> -->
  <script type="text/javascript" src="/static/js/jquery-ui.js"></script>
  <script type="text/javascript" src="/static/js/farbtastic.js"></script>
  <script type="text/javascript" src="/static/js/jquery.Jcrop.js"></script>
  <script type="text/javascript" src="/static/js/jquery.color.js"></script>
  <script type="text/javascript" src="/static/js/jquery.tooltip.js"></script>
  <script type="text/javascript" src="/static/js/editor.js"></script>
  <script type="text/javascript" src="/static/js/placeholder.js"></script>
  <script type="text/javascript" src="/static/js/utils.js"></script>
  <script type="text/javascript" src="/static/ckeditor/ckeditor.js"></script>
  <script type="text/javascript" src="/static/colorpicker/js/colorpicker.js"></script>
  <script type="text/javascript" src="/static/colorpicker/js/eye.js"></script>
  <script type="text/javascript" src="/static/colorpicker/js/utils.js"></script>
  <script src="/static/Jcrop/js/jquery.Jcrop.js"></script>
  <link rel="stylesheet" href="/static/Jcrop/css/jquery.Jcrop.css" type="text/css" />

  <style type="text/css">
    body {
      font-size: 14px;
      }
  </style>
	<script language="Javascript">

	jQuery(function(){
		jQuery('img').Jcrop();
	});

	</script>

  <script type="text/javascript">
    var ARTICLE_ID = 0;
    {% if article_id %}
    ARTICLE_ID = {{article_id}};
    ARTICLE_WIDTH = {{article_width}};
    ARTICLE_HEIGHT = {{article_height}};
    REVISION_NO = {{rev_no}};
    FRONTEND_URL = "{{frontend_url}}";
    {% endif %}
    var UUID = parseInt(new Date().getTime() / (10000 * (Math.random() * 10)));
    USER_ID = {{ user.id }};
    isAjaxActive = false;
    $(document).ready(function() {
     edgeBin = new Bin(); 
      $('.binSelect').change(function() {
//        var PAGE_ID = 1;
        var cat = $('#searchSelect').val();
        if (cat == 0) {
          return;
        }
        var type = $('#typeSelect').val();
        if (type == 0) {
          type = 'image';
          $('#typeSelect option[value=image]').attr("selected", "selected");
        }
        edgeBin.loadCategory(cat, type);
        });
      });
  </script>

  {% endblock %}
  {% block title %}
    Edgware Editor - Hi {{ user.username }}
  {% endblock %}

  {% block header %}

  {% endblock %}

  {% block content %}
  <script type="text/html" id="tmpl_canvas">
    <div id="canvas<%= index %>" class="canvas" data-index="<%= index %>">
      <div class="page_btns">
        <div class="delete_page page_btn">
          Delete Page
        </div>
        <div class="move_page_up page_btn">
          Move Page Up
        </div>
        <div class="move_page_down page_btn">
          Move Page Down
        </div>
        <div class="toggle_handle page_btn">
          Toggle Handle
        </div>
        <div class="printMe page_btn">
          Get PDF
        </div>
        <div class="viewFrontend page_btn">
          View Webpage
        </div>
      </div>
      <div class="ruler ruler_horiz"><div class="handle handle_horiz_left"></div><div class="handle handle_horiz_right"></div></div>
      <div class="ruler ruler_vert"><div class="handle handle_vert_top"></div><div class="handle handle_vert_bottom"></div></div>
      <div class="audio_video"></div>
    </div>
  </script>
  <script type="text/html" id="tmpl_textbox">

		<div class="textbox_canvas">
				<div class="textbox_canvas_content">
						<%= html %>
				</div>
		</div>
		<div class="textbox_canvas_toolbox"></div>


			<input onclick="removeEditor(this);" type="button" class="save_text" value="Save"/>
  </script>
  <script type="text/html" id="tmpl_imagebox">
		<div class="imagebox_canvas">
			
		</div>


			<input onclick="removeEditor(this);" type="button" class="save_text" value="Save"/>
  </script>
 <script type="text/html" id="tmpl_imagebox_crop">
	<div class="imagebox_crop" style="z-index:9999999;">
		(<a href='#' class='do_crop_imagebox'>crop</a>)
		(<a href='#' class='cancel_crop_imagebox'>cancel</a>)

	</div>
 </script>
 
 <script type="text/html" id="tmpl_imagebox_properties">
		<div class="properties imagebox_props">
				  (<a href="#" class="crop_imagebox">crop</a>) 
		  		  <a href="#" class="z-index-sub"><</a> z <a href="#" class="z-index-add">></a> <a href="#" class="delete_box">(del)</a>
				<br>
				<a href="#" class="nudge_box">nudge</a>
		  <br><br>

				Opacity: <br>
				<div id="slider-range-max" class="change_opacity"></div>
							Border: <br>
				<div id="slider-range-max" class="change_border"></div>
	
				<div class="borderColorSelector"><div style="background-color: #0000ff"></div></div>
			<select class="borderStyle" name="borderStyle">
				  <option value="solid">solid</option>
   				  <option value="dotted">dotted</option>
   				  <option value="double">double</option>
   				  <option value="dashed">dashed</option>
				</select>
				
			</div>	
		</script>

<script type="text/html" id="tmpl_textbox_properties">
		<div class="properties textbox_props">
		  (<a href="#" class="edit_textbox">edit</a>)  <a href="#" class="delete_box">(del)</a>
<a href="#" class="z-index-sub"><</a> z <a href="#" class="z-index-add">></a>
<br>
<a href="#" class="nudge_box">nudge</a>
		<br><br>
		 
		  		Padding: <br>
				<div id="slider-range-max" class="change_padding"></div>
				Opacity: <br>
				<div id="slider-range-max" class="change_opacity"></div>
				Background:<br> ( <a href="#" class="background_transparent">transparent</a>)	
				<div class="backgroundColorSelector"><div style="background-color: #0000ff"></div></div>
				Border: <br>
				<div id="slider-range-max" class="change_border"></div>

				<div class="borderColorSelector"><div style="background-color: #0000ff"></div></div>
				<select class="borderStyle" name="borderStyle">
				  <option value="solid">solid</option>
   				  <option value="dotted">dotted</option>
   				  <option value="double">double</option>
   				  <option value="dashed">dashed</option>
				</select>
				
				
			</div>	
</script>
<script type="text/html" id="tmpl_resource_image">
  <div class="resourceMenu">
    <ul>
    <li class="image_rotate">Rotate Image</li>
    </ul>
  </div>

</script>
<script type="text/html" id="tmpl_resource_doc">
  <div class="resourceMenu">
    <ul>
      <li class="download_doc">Download Text</li>
    </ul>
  </div>
</script>
<script type="text/html" id="tmpl_resource_av">
  <div class="resourceMenu">
    <ul>
      <!-- <li class="upload_srts">Upload Subtitles</li> -->
      <li class="play_media">Play</li>
    </ul>
  </div>
</script>
<script type="text/html" id="tmpl_historyData">
  <div class="historyPage">Page: <%= page_no %></div>
  <div class="historyBoxType">BoxType: <%= box_type %></div>
  <div class="historyAction">Action: <%= prop %></div>
  <div class="historyOldVal">Old Value: <%= old_val %></div>
  <div class="historyNewVal">New Value: <%= new_val %></div>
</script>

  <div id="ajaxBusy">

  </div>
  <div id="wrapper">
    <div id="canvasContainer">
      
    </div>
    <div id="bins">
      <div id="bin">
        <div id="binTop">
	        <div id="searchCat">
            <div class="addTextBoxWrapper">
				      <div class='newTextBox english' title="Drag to page to add an english textbox">
				        + TEXTBOX
				      </div>
              <div class="newTextBox arabic" title="Drag to page to add an arabic textbox">
          إضافة مربع
      	      </div>
            </div>
	        </div>
	        <div id="addElements">
	          <select id="searchSelect" class="binSelect" name="searchSelect">
              <option value="0">Study</option>
	            {% for c in categories %}
	            <option value="{{c.id}}">{{c.name}}</option>
	            {% endfor %}
	          </select>
            <select id="typeSelect" class="binSelect" name="typeSelect">
              <option value="0">Type</option>
              <option value="image">Images</option>
              <option value="audio">Audio</option>
              <option value="video">Video</option>
              <option value="text">Text</option>
            </select>
            <div style="clear:both;"></div>
            <div class="navControls">
              Displaying <span class="start_index">0</span> to <span class="end_index">0</span> of <span class="totalResources">0</span> resources<br />
              <a href="#" onclick='return false;' class="prevPage"><< Prev</a>
		          <a href="#" onclick='return false;' class="nextPage">Next >></a>
			        <br />
              <input class="searchBin placeholder" data-placeholder="Search" />
            </div>
          </div>
         
          <div class="binResources">

          </div>
	      </div>
      </div>
        
    </div>

    <div id="controls">
      <a href="#" id="newPage">Add new page</a>

    </div>
    <div id="coordinates" style="position:fixed;bottom:20px;left:10px;z-index:10000;">
    </div>

  </div>
  <div id="historyWindow">
    <div class="historyTitle">Others' Edits:</div>
    <div class="historyItems">

    </div> 
  </div>
{% endblock %}
