1 
<!DOCTYPE html>
2 
<html>
3 
	 <head>
4 
		 <meta charset="utf-8">
5 
		 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
6 
	<script type="text/javascript">
7 
	  function annotationTree() {
8 
      $('#annotation-tree').modal();
9 
	  }
10 
	</script>
11 
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
12 
	<script type="text/javascript" src="http://underscorejs.org/underscore-min.js"></script>
13 
	<script type="text/javascript" src="http://backbonejs.org/backbone-min.js"></script>
14 
	<!-- <script type="text/javascript" src="static/tree.js"></script> -->
15 
	<style type='text/css'>
16 
	  /*#annotation-tree {
17 
	  position:fixed;
18 
	  top:0px;
19 
	  left:0px;
20 
	  width:100%;
21 
	  height:100%;
22 
	  background-color:rgba(0, 0, 0, 0.5);
23 
	  display:none;
24 
	  z-index:99999;
25 
          }*/
26 
  </style>
27 
	<title>Lepakshi Mural</title>
28 
	<meta http-equiv='imagetoolbar' content='no'/>
29 
	<link rel="stylesheet" type="text/css" href="static/bootstrap.css"></link>
30 
	<!--link rel="stylesheet" type="text/css" href="./tree.css"></link-->
31 
	<style type="text/css"> v\:* {behavior:url(#default#VML);}
32 
    label { display: inline;}
33 
	  h1 { margin: 0; padding: 6px; border:0; font-size: 20pt; }
34 
	  #header { height: 43px; padding: 0; background-color: #eee; border: 1px solid #888; }
35 
	  #subheader { height: 12px; text-align: right; font-size: 10px; color: #555;}
36 
	  #map {border: 1px solid #888;}
37 
	</style>
38 
	<script src="http://www.openlayers.org/api/2.11/OpenLayers.js" type="text/javascript"></script>
39 
	<script type="text/javascript" src="static/bootstrap.js"></script>
40 
	<script type="text/javascript" src="static/jit.js"></script>
41 
	<script type="text/javascript" src="static/tree.js"></script>
42 
	<script type="text/javascript" src="static/myVector.js"></script>
43 
	<script type="text/javascript">
44 
	  function treeClose() {
45 
      $('#annotation-tree').modal('hide');
46 
      attribs["character"] =  $("#character-value").text();
47 
      attribs["material"] = $("#material-value").text();
48 
      myJSON.push(attribs);
49 
      $("#publish").attr("disabled", false);
50 
	  }
51 
	</script>
52 
</head>
53 
<body onload="init();">
54 
  <!--div id="header"><h1>Lepakshi Mural</h1></div-->
55 
  <div class="fluid-container">
56 





57

    <div class="navbar">





58

      <div class="navbar-inner">





59

        <a class="brand" href="#">Lepakshi Mural</a>





60

        <ul class="nav">





61

          <li class="active"><a href="#">Home</a></li>





62

          <li><a></a></li>





63

          <li><a href="#" class="disabled">





64

            <label><input type="checkbox" name="allow-pan" value="allow-pan" id="allowPanCheckbox" checked=true onclick="allowPan(this);"> Pan</label>





65

            <!--label for="allowPanCheckbox"><small>allow pan while drawing</small></label-->





66

          </a></li>





67

          <li>





68

            <!--label><input type="radio" name="type" value="none" id="noneToggle" onclick="toggleControl(this);" checked="checked"> Navigate</label-->





69

            <!--label><input type="radio" name="type" value="box" id="boxToggle" onclick="toggleControl(this);"> Tag</label-->





70

            <!--label for="noneToggle">navigate</label-->





71

            <span class="btn-group" data-toggle="buttons-radio">





72

              <button class="btn active" value="none" id="control-select" onclick="toggleControl(this);" checked="checked">Navigate</button>





73

              <button class="btn" value="box" id="control-box" onclick="toggleControl(this);">Tag</button>





74

            </span>





75

          </li>





76

          <li><a></a></li>





77

          <li><a></a></li>





78

          <li><button class="btn" onClick="publish();" id="publish" disabled="true"/>Publish</button></li>





79

        </ul>





80

      </div>





81

    </div>





82






83

    <div id="notification">





84

    </div>





85

    <div id="posted" class="alert alert-success" style="display: none; width: 300px; margin: auto;">





86

      <button type="button" class="close" data-dismiss="alert">&times;</button>





87

      <b>Success!</b> Post successfully posted.





88

    </div>





89

    <div id="tree-json-loaded" class="alert alert-success" style="display: none; width: 300px; margin: auto;">





90

      <button type="button" class="close" data-dismiss="alert">&times;</button>





91

      <b>Success!</b> New JSON loaded.





92

    </div>





93






94

    <div class="btn-group">





95

      <button onclick="handler.trigger();"  class="btn btn-small">Mural</button>





96

      <button onclick="handler.trigger1();" class="btn btn-small"> Face</button>





97

      <button onclick="handler.trigger2();" class="btn btn-small">Jewellery</button>





98

    </div>





99






100

    <p></p>





101






102

    <input type="text" id="tree-json-file" value="old.json">





103

    <button class="btn" id="load-tree-json" onclick="loadTreeJSON();">Load JSON</button>





104

    <button class="btn" id="edit-tree-json" onclick="editTreeJSON();">Edit JSON</button>





105

    <p></p>





106

    <div id="map"></div>





107






108

    <div id="subheader">Generated by <a href="http://www.maptiler.org/">MapTiler</a><a href="http://www.klokan.cz/projects/gdal2tiles/">GDAL2Tiles</a>, Copyright &copy; 2008 <a href="http://www.klokan.cz/">Klokan Petr Pridal</a>,  <a href="http://www.gdal.org/">GDAL</a> &amp; <a href="http://www.osgeo.org/">OSGeo</a> <a href="http://code.google.com/soc/">GSoC</a>





109

      <!-- PLEASE, LET THIS NOTE ABOUT AUTHOR AND PROJECT SOMEWHERE ON YOUR WEBSITE, OR AT LEAST IN THE COMMENT IN HTML. THANK YOU -->





110

    </div>





111






112

    <div class="edit-json">





113

      <button id="edit-json-btn" class="btn" onclick="editJSON();">Edit JSON to tweet</button>





114

      <textarea rows="20" cols="50" id="edit-json" style="display: none;"></textarea>





115

      <button class="btn" id="save-json" style="display: none;" onclick="saveJSON();">Save</button>





116

    </div>





117






118

  </div>





119






120

  <script type="text/javascript" >resize();</script>





121






122

  <div id="annotation-tree" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">





123

    <div class="modal-header">





124

      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>





125

      <div id="myModalLabel">





126

        <h3>Annotation attributes</h3>





127

        <small>Select attributes for annotation</small>





128

      </div>





129

    </div>





130

    <div class="modal-body">





131

      <div id="infovis"> </div>





132

      <div id="tree-info" class="well text-info">





133

        <ul></ul>





134

      </div>





135

    </div>





136

    <div class="modal-footer">





137

      <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>





138

      <button class="btn btn-primary" onclick="treeClose();">Save changes</button>





139

    </div>





140

  </div>





141






142

  <script type="text/template" id="tree-info-template">





143

    <li><b><%= band %></b>: <span id="<%= node %>-value"><%= node %></span></li>





144

  </script>





145






146

	<script type="text/javascript">





147

    function annotationTree() {





148

      $('#annotation-tree').modal();





149

      $('#edit-json').hide();





150

      $('#edit-json-btn').show();





151

	  }





152

    function editJSON() {





153

      $('#edit-json').show();





154

      $('#save-json').show();





155

      $('#edit-json-btn').hide();





156

      $('#edit-json').val(JSON.stringify(myJSON));





157

    }





158

    function saveJSON() {





159

      $('#edit-json').hide();





160

      $('#save-json').hide();





161

      $('#edit-json-btn').show();





162

      try {





163

        myJSON = JSON.parse($('#edit-json').val());





164

      } catch(e) {





165

        alert('The JSON you entered is invalid. Please try again');





166

        myJSON = [];





167

      }





168

    }





169

	  function treeClose() {





170

      $('#annotation-tree').modal('hide');





171

      $('#tree-info ul li').each(function(idx, elem) {





172

        var key = $(elem).find('b').text().toLowerCase();





173

        var val = $(elem).find('span').text().toLowerCase();





174

        attribs[key] = val;





175

      });





176

      myJSON.push(attribs);





177

      $("#publish").attr("disabled", false);





178

	  }





179

    function loadTreeJSON() {





180

      var file = $('#tree-json-file').val();





181

      $.getJSON('static/'+file, function(json) {





182

        ht.loadJSON(json);





183

        ht.refresh();





184

        ht.controller.onComplete();





185

        $('#tree-json-loaded').show();





186

      });





187

    }





188

    function editTreeJSON() {





189

      var json = $('#tree-json-loaded').val();





190

      window.open("{{ url_for('editor') }}?json="+json);





191

    }





192

	</script>





193

</body>





194

</html>