1 
<!DOCTYPE html>
2 
<html>
3 
  <meta charset="utf-8">
4 
  <head>
5 
	<title>Lepakshi Mural</title>
6 
	<meta http-equiv='imagetoolbar' content='no'/>
7 
	<link rel="stylesheet" type="text/css" href="bootstrap.css"></link>
8 
	<style type="text/css"> v\:* {behavior:url(#default#VML);}
9 
    label { display: inline;}
10 
	  h1 { margin: 0; padding: 6px; border:0; font-size: 20pt; }
11 
	  #header { height: 43px; padding: 0; background-color: #eee; border: 1px solid #888; }
12 
	  #subheader { height: 12px; text-align: right; font-size: 10px; color: #555;}
13 
	  #map {border: 1px solid #888;}
14 
	</style>
15 
</head>
16 
<body onload="init();">
17 
  <div class="fluid-container">
18 





19

    <div class="navbar">





20

      <div class="navbar-inner">





21

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





22

        <ul class="nav">





23

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





24

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





25

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





26

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





27

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





28

          </a></li>





29

          <li>





30

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





31

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





32

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





33

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





34

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





35

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





36

            </span>





37

          </li>





38

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





39

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





40

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





41

        </ul>





42

      </div>





43

    </div>





44






45

    <div id="notification">





46

    </div>





47

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





48

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





49

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





50

    </div>





51






52

    <div class="btn-group">





53

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





54

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





55

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





56

    </div>





57

    





58

    <p></p>





59






60

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





61






62

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





63

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





64

    </div>





65






66

    <div class="edit-json">





67

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





68

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





69

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





70

    </div>





71






72

  </div>





73






74






75

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





76

    <div class="modal-header">





77

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





78

      <div id="myModalLabel">





79

        <h3>Annotation attributes</h3>





80

        <small>Select attributes for annotation</small>





81

      </div>





82

    </div>





83

    <div class="modal-body">





84

      <div id="infovis">





85

        <div class="well text-info">





86

          <ul>





87

            <li><b>Character:</b> <span id="character-value"></span></li>





88

            <li>





89

              <b>Ornament:</b> 





90

              <ul>





91

                <li><b>Material:</b> <span id="material-value"></span></li>





92

                <li><b>Jewellery:</b> <span id="jewellery-value"></span></li>





93

              </ul>





94

            </li>





95

          </ul>





96

        </div>





97

      </div>





98

    </div>





99

    <div class="modal-footer">





100

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





101

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





102

    </div>





103

  </div>





104






105

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>





106

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





107

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





108

  <script src="http://www.openlayers.org/api/2.11/OpenLayers.js" type="text/javascript"></script>





109

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





110

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





111

	<script type="text/javascript">





112

    function annotationTree() {





113

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





114

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





115

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





116

	  }





117

    function editJSON() {





118

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





119

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





120

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





121

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





122

    }





123

    function saveJSON() {





124

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





125

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





126

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





127

      try {





128

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





129

      } catch(e) {





130

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





131

        myJSON = [];





132

      }





133

    }





134

	  function treeClose() {





135

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





136

      attribs["character"] =  $("#character-value").text();





137

      attribs["material"] = $("#material-value").text();





138

      myJSON.push(attribs);





139

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





140

	  }





141

	</script>





142

  





143

</body>





144

</html>