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/myVector.js"></script>
40 
	<script type="text/javascript" src="static/bootstrap.js"></script>
41 
	<script type="text/javascript">
42 
	  function treeClose() {
43 
      $('#annotation-tree').modal('hide');
44 
      attribs["character"] =  $("#character-value").text();
45 
      attribs["material"] = $("#material-value").text();
46 
      myJSON.push(attribs);
47 
      $("#publish").attr("disabled", false);
48 
	  }
49 
	</script>
50 
</head>
51 
<body onload="init();">
52 
  <!--div id="header"><h1>Lepakshi Mural</h1></div-->
53 
  <div class="fluid-container">
54 





55

    <div class="navbar">





56

      <div class="navbar-inner">





57

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





58

        <ul class="nav">





59

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





60

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





61

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





62

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





63

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





64

          </a></li>





65

          <li>





66

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





67

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





68

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





69

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





70

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





71

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





72

            </span>





73

          </li>





74

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





75

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





76

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





77

        </ul>





78

      </div>





79

    </div>





80






81

    <div id="notification">





82

    </div>





83

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





84

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





85

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





86

    </div>





87

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





88

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





89

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





90

    </div>





91






92

    <div class="btn-group">





93

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





94

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





95

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





96

    </div>





97






98

    <p></p>





99






100

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





101

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





102

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





103

    <p></p>





104

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





105






106

    <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>





107

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





108

    </div>





109






110

    <div class="edit-json">





111

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





112

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





113

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





114

    </div>





115






116

  </div>





117






118

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





119






120

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





121

    <div class="modal-header">





122

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





123

      <div id="myModalLabel">





124

        <h3>Annotation attributes</h3>





125

        <small>Select attributes for annotation</small>





126

      </div>





127

    </div>





128

    <div class="modal-body">





129

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





130

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





131

        <ul></ul>





132

      </div>





133

    </div>





134

    <div class="modal-footer">





135

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





136

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





137

    </div>





138

  </div>





139






140

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





141

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





142

  </script>





143






144

	<script type="text/javascript">





145

    function annotationTree() {





146

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





147

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





148

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





149

	  }





150

    function editJSON() {





151

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





152

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





153

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





154

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





155

    }





156

    function saveJSON() {





157

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





158

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





159

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





160

      try {





161

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





162

      } catch(e) {





163

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





164

        myJSON = [];





165

      }





166

    }





167

	  function treeClose() {





168

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





169

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





170

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





171

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





172

        attribs[key] = val;





173

      });





174

      myJSON.push(attribs);





175

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





176

	  }





177

    function loadTreeJSON() {





178

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





179

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





180

        ht.loadJSON(json);





181

        ht.refresh();





182

        ht.controller.onComplete();





183

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





184

      });





185

    }





186

    function editTreeJSON() {





187

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





188

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





189

    }





190

	</script>





191

	<script type="text/javascript" src="static/jit.js"></script>





192

</body>





193

</html>