1 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2 
<html xmlns="http://www.w3.org/1999/xhtml"
3 
      <head>
4 
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
5 
	<script type="text/javascript">
6 
	  function annotationTree() {
7 
	  $('#annotation-overlay').show();
8 
	  }
9 





10

	  function closeForm() {





11

	  $('#annotation-overlay').hide();





12

	  }





13






14

	  function faceOrnament() {





15

	  x = document.getElementsByClassName('annotate');





16

	  $('#face').hide(); $('#ornament').hide();





17

	  if(x[0].checked == true) {





18

	  $('#face').show();





19

	  }





20

	  else if (x[1].checked == true) {





21

	  $('#ornament').show();





22

	  }





23

	  else {





24

	  alert('Please select any one of the option')





25

	  }





26

	  }





27

	</script>





28

	<style type='text/css'>





29

	  #annotation-overlay {





30

	  position:fixed;





31

	  top:0px;





32

	  left:0px;





33

	  width:100%;





34

	  height:100%;





35

	  background-color:rgba(0, 0, 0, 0.5);





36

	  display:none;





37

	  z-index:99999;                                         





38

          }





39






40

	  #container {





41

	  position:absolute;





42

	  top:10%;





43

	  left:20%;





44

	  width:60%;





45

	  height:90%;





46

	  background-color:#ffa;





47

	  }





48






49

	  #face, #ornament {





50

	  display:none;





51

	  }





52

	</style>





53

	<title>Lepakshi Mural</title>





54

	<meta http-equiv='imagetoolbar' content='no'/>





55

	<!-- <link rel="stylesheet" type="text/css" href="./tree.css"></link> -->





56

	<style type="text/css"> v\:* {behavior:url(#default#VML);}





57

	  html, body {padding: 0; height: 100%; width: 100%; font-family: 'Lucida Grande',Geneva,Arial,Verdana,sans-serif; }





58

	  body { margin: 10px; background: #fff; }





59

	  h1 { margin: 0; padding: 6px; border:0; font-size: 20pt; }





60

	  #header { height: 43px; padding: 0; background-color: #eee; border: 1px solid #888; }





61

	  #subheader { height: 12px; text-align: right; font-size: 10px; color: #555;}





62

	  #map {height:95% border: 1px solid #888; }





63

	</style>





64

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





65

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





66

	<script type="text/javascript">





67

	  function treeClose()





68

	  {





69

	  $('#annotation-overlay').hide();





70

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





71

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





72

	  myJSON.push(attribs);





73

	  }





74

	</script>





75

      </head>





76

<body onload="init();"> 





77

  <div id="header"><h1>Lepakshi Mural</h1></div>





78

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





79

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





80

  </div>





81

  <input onclick="handler.trigger();" type="button" style="background-color:#00CC00;height:15px;-moz-border-radius:75px;-webkit-border-radius:75px; width:15px;"/>Mural<div id="content"></div>





82

  <input onclick="handler.trigger1();" type="button" style="background-color:#00CC00;height:15px;-moz-border-radius:75px;-webkit-border-radius:75px; width:15px;"/>Face<div id="content1"></div>





83

  <input onclick="handler.trigger2();" type="button" style="background-color:#00CC00;height:15px;-moz-border-radius:75px;-webkit-border-radius:75px; width:15px;"/>Jewellery<div id="content2"></div>





84

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





85

  <div>





86

    <ul>





87

      <li>





88

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





89

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





90

      </li>





91

      <li>





92

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





93

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





94

      </li>





95

      <li>





96

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





97

	<label for="boxToggle">Tag this</label>





98

      </li>





99

    </ul>





100

  </div>





101

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





102

  <div id="annotation-overlay">





103

    <div id="container">





104

      <input id="close-form" type="submit" onClick="closeForm();" value="Close" title="Close this form" />





105

      <div id="annotate" name="annotateForm" >





106

	Choose a category for annotated part : <br />





107

	<input type="radio" class="annotate" name="annotate" value="face" /> Face <br />





108

	<input type="radio" class="annotate" name="annotate" value="ornament" /> Ornament <br />





109

	<input type="submit" name="annotate" value="Next" onclick="faceOrnament();" />





110

      </div>





111

      <div id="face" name="faceForm">





112

	Choose whose face is it : <br>





113

	  <input type="radio" name="face" value="Shiva" /> Shiva <br />





114

	  <input type="radio" name="face" value="Vishnu" /> Vishnu <br />





115

	  <input type="radio" name="face" value="Krishna" /> Krishna <br />





116

	  <input type="radio" name="face" value="Parvati" /> Parvati <br />





117

	  <input type="radio" name="face" value="Lakshmi" /> Lakshmi <br />





118

	  <input type="radio" name="face" value="Saraswati" /> Saraswati <br />





119

	</div>





120

	





121

	<div id="ornament" name="ornamentForm" >





122

	  Choose what jewellery is it : <br />





123

	  <input type="radio" name="jewellery" value="Neckless" /> Neckless <br />





124

	  <input type="radio" name="jewellery" value="Bangles" /> Bangles <br />





125

	  <input type="radio" name="jewellery" value="Ear-ring" /> Ear-ring <br />





126

	  <input type="radio" name="jewellery" value="Nose-ring" /> Nose-ring <br />





127

	  <input type="radio" name="jewellery" value="Waistlet" /> Waistlet <br />





128

	  <input type="radio" name="jewellery" value="Ankalet" /> Ankalet <br />





129

	  <br />





130

	  Choose what materal of an ornament : <br />





131

	  <input type="radio" name="material" value="Gold" /> Gold <br />





132

	  <input type="radio" name="material" value="Silver" /> Silver <br />





133

	  <input type="radio" name="material" value="Bronze" /> Bronze <br />





134

	  <input type="radio" name="material" value="Ruby" /> Ruby <br />





135

	  <input type="radio" name="material" value="Diamond" /> Diamond <br />





136

	  <input type="radio" name="material" value="Platinum" /> Platinum <br />





137

	</div>





138

      </div>





139

    </div>





140

  </body>





141

</html>