{% 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" />
  <link rel="stylesheet" href="/static/aloha/css/aloha.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/placeholder.js"></script>
  <script type="text/javascript" src="/static/js/utils.js"></script>
  <script type="text/javascript" src="/static/js/Math.uuid.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 type="text/javascript" src="/static/aloha/lib/require.js"></script>
  <script type="text/javascript" src="/static/aloha/lib/aloha.js" data-aloha-plugins="common/ui,
	                            common/format,
	                            common/table,
	                            common/list,
	                            common/link,
	                            common/undo,
	                            common/contenthandler,
	                            common/paste,
	                            common/characterpicker,
	                            common/commands,
	                            common/block,
	                            common/abbr,
	                            common/horizontalruler,
	                            common/align,
	                            extra/formatlesspaste,
	                            extra/headerids,
	                            extra/listenforcer,
	                            extra/metaview,
	                            extra/numerated-headers,
	                            extra/ribbon,
	                            extra/flag-icons,
	                            extra/linkbrowser,
	                            extra/cite"></script>
  <script>
    Aloha.settings.jQuery = $.noConflict();
    Aloha.ready(function() {
        var $ = Aloha.jQuery;
        $('.textbox_canvas_content').aloha();

        Aloha.bind("aloha-smart-content-changed", function(e, obj) {
            //var $editable = $(obj.editable.obj);
            //console.log(e, obj);
            var edited_obj = jQuery(obj.editable.obj);
            var html = edited_obj.html();
              var boxJq = edited_obj.parents('.box');
              var boxIndex = parseInt(boxJq.attr("data-index"));
              var canvasIndex = boxJq.parents('.canvas').attr("data-index");
              if (boxJq.hasClass("textBox")) {
                var thisBox = edgeArticle[canvasIndex].textBoxes[boxIndex];
              }

            thisBox.setHTML(html);

    //        console.log($editable.attr("data-field"));
        });

    });

  </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="text/javascript">
    (function($) {
	    $(function(){
		    $('img').Jcrop();
	    });
    })(jQuery);
	</script>

  <script type="text/javascript">
    (function($) { 
        //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 %}
        UUID = Math.uuid(7,10);
    //    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);
            });
          });
    })(jQuery);


  </script>
  <script type="text/javascript" src="/static/js/editor.js"></script>
  {% endblock %}
  {% block title %}
    Edgware Editor: {{ article.title }}
  {% 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>
    <input onclick="removeEditor(this);" type="button" class="save_text" value="Save"/>
		<div class="textbox_canvas_toolbox"></div>



  </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="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 %}