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-tree').show();
8 
	  }
9 





10

	  function closeForm() {





11

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





12

	  }





13






14

	  function faceOrnament() {





15

	  x = document.getElementsByClassName('annotate');





16

	  if(x[0].checked == true && x[0].value == 'face') {





17

	  $('face').show();





18

	  }





19

	  else if (x[1].checked == true && x[1].value == 'ornament') {





20

	  $('ornament').show();





21

	  }





22

	  else {





23

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





24

	  }





25

	  }





26

	</script>





27

	<style type='text/css'>





28

	  #annotation-tree {





29

	  position:fixed;





30

	  top:0px;





31

	  left:0px;





32

	  width:100%;





33

	  height:100%;





34

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





35

	  display:none;





36

	  z-index:99999;                                         





37

          }





38

	  #face, #ornament {





39

	  display:none;





40

	  }





41

	</style>





42

	<title>Lepakshi Mural</title>





43

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





44

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





45

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





46

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





47

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





48

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





49

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





50

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





51

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





52

	</style>





53

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





54

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





55

	<script type="text/javascript">





56

	  function treeClose()





57

	  {





58

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





59

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





60

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





61

	  myJSON.push(attribs);





62

	  }





63

	</script>





64

      </head>





65

<body onload="init();"> 





66

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





67

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





68

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





69

  </div>





70

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





71

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





72

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





73

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





74

  <div>





75

    <ul>





76

      <li>





77

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





78

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





79

      </li>





80

      <li>





81

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





82

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





83

      </li>





84

      <li>





85

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





86

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





87

      </li>





88

    </ul>





89

  </div>





90

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





91

  <div id="annotation-tree">





92

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





93

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





94

      Choose a category for annotated part : <br />





95

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





96

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





97

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





98

    </div>





99

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





100

      Choose whose face is it : <br>





101

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





102

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





103

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





104

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





105

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





106

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





107

      </div>





108

      





109

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





110

	Choose what jewellery is it : <br />





111

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





112

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





113

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





114

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





115

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





116

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





117

	<br />





118

	Choose what materal of an ornament : <br />





119

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





120

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





121

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





122

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





123

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





124

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





125

      </div>





126

      





127

    </div>





128

  </body>





129

</html>