@(values: Exhibition)
@import helper.twitterBootstrap._
<script>
		function getParameterByName(name, url) {
		    if (!url) url = window.location.href;
		    name = name.replace(/[\[\]]/g, "\\$&");
		    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
		        results = regex.exec(url);
		    if (!results) return null;
		    if (!results[2]) return '';
		    return decodeURIComponent(results[2].replace(/\+/g, " "));
		}

    $( document ).ready(function(){
		var queryStr = getParameterByName('fullscreen');
		if(queryStr == "true"){
			$(".navbar").hide();
			$("#content").css("padding-top", "0px");
			$(".container").css("padding", "0px 0px 0px 0px");			
			$("#mapcontainer").css("height", "100%");
			$("#mapcontainer").css("padding-top", "0px");
			$(".annotation_single").css("background-color", "black");
			$("#annotation").attr("style","background-color: black; color: white; position: fixed; right: 0px; font-size: 22px; height: 100%; overflow: auto; padding: 27px; text-align: left; width: 15%;");
			$("#photo").attr("style","float: left; height: 100%; width: 85%;");
			$("html").css("overflow","hidden");
		} 
	});

	
</script>	
        <style type="text/css">
       	.container {
        height: 100%;
        width: 100%;
        }

        
        #annotation {
        height: 10%;
        width: 100%;
        z-index: 999;
        }
        
        html, body {
            width: 100%;
            padding: 0;
            margin: 0;
        }
        #textcontainer {
        	bottom: 0px;
        	width: 50%;
        }
        
        #textcontainer p {
       		font-family: sans-serif;
        	color: white;
        	font-size: 20px;
        }        
        
        .annotation_single {
        	display: none;
        }
    </style>
    			
    <link rel="stylesheet" href="/assets/css/leaflet.css" />
    <link rel="stylesheet" href="/assets/js/leaflet/leaflet.draw/leaflet.draw.css" />
    <link rel="stylesheet" href="/assets/js/bootstrap3-editable/css/bootstrap-editable.css" />
    <link rel="stylesheet" href="/assets/js/bootstrap-wysihtml5/bootstrap-wysihtml5-0.0.2.css" />




   <div id="mapcontainer">		
   		<div id="photo"></div>		
   		<div id="annotation">
				<div class="annotation_single selected" style="display: block">
				Vergrösserung der Ansicht: Zoomen mit zwei Fingern.<br/><br/>

		Übersetzung der Telugu-Überschrift: Tippen auf die gewünschte Szene.
				</div>				
		</div>
   </div>
    <script type="text/javascript">

      $(document).ready(function(){

	                $.ajax({
                type: "GET",
                url: "/assets/data/maps/"+@values.id.get+"/ImageProperties.xml",
                dataType: "xml",
                success: function(xml) {
                        $(xml).find('IMAGE_PROPERTIES').each(function(){
                                map_width = $(this).attr('WIDTH');
                                $("#photo").attr("data-width", map_width);
                                map_height = $(this).attr('HEIGHT');
                                $("#photo").attr("data-height", map_height);
                                map_version = $(this).attr('VERSION');
                                $("#photo").attr("data-version", map_version);

                         var m_width = $("#photo").attr("data-width");
                        console.log(m_width);


                        });

                }
                });
        console.log(window.map_width);
        });
    </script>
    <script src="/assets/js/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
    <script src="/assets/js/bootstrap3-editable/js/inputs-ext/wysihtml5/wysihtml5.js"></script>
    <script src="/assets/js/leaflet/leaflet.js"></script>
    <script src="/assets/js/leaflet/leaflet.draw/leaflet.draw.js"></script>
    <script src="/assets/js/leaflet/leaflet.draw/leaflet.draw-src.js"></script>
	<script src="/admin/cat/@values.id.get/map/serve.js" type="text/javascript"></script>
    <script type="text/javascript" src="/assets/js/leaflet/L.TileLayer.Zoomify.js"></script>  
    <script type="text/javascript" src="/assets/js/bootstrap-wysihtml5/bootstrap-wysihtml5-0.0.2.js"></script>  
	<script src="@routes.Assets.at("js/fileuploader.js")"></script>

<IMAGE_PROPERTIES WIDTH="30480" HEIGHT="19143" NUMTILES="12057" NUMIMAGES="1" VERSION="1.8" TILESIZE="256" />
	
	
    <script type="text/javascript">


	

	 var uniqID = {
		  counter:0,
		  get:function(prefix) {
		      if(!prefix) {
		          prefix = ''+@values.id.get+''+'_';
		      }
		      var id =  prefix+""+uniqID.counter++;
		      if(jQuery("#"+id).length == 0)
		          return id;
		      else
		          return uniqID.get()	
	   }
	};
    

    
       var map = L.map('photo', 'attributionControl: false').setView([37.8, -96], 4);
    var m_width = $("#photo").attr("data-width");
        console.log(m_width);

    var m_height = $("#photo").attr("data-height");

   L.tileLayer.zoomify('data/maps/'+@values.id.get+'/', {
        width: @values.width, 
        height: @values.height,
        tolerance: '0.8',
        attribution: ''
    }).addTo(map);

	var drawnItems = new L.FeatureGroup();
	map.addLayer(drawnItems);

	
	function onEachFeature(feature, layer) {

		drawnItems.addLayer(layer)
		shape_id = feature.pk
		var shape = layer.toGeoJSON();
		annotation = feature.value
		$(layer._path).attr("pk", shape_id);
	    layer._path.id = 'path_'+shape_id;
		layer._path.note_id = 'annotation_'+shape_id;

        $("#annotation").append('<div class="annotation_single" id="'+layer._path.note_id+'">'+annotation+'</div>');

		$("#"+layer._path.id).click(function(){
			$(".selected").removeClass("selected").addClass("notselected");
			$("#"+layer._path.note_id).addClass("selected").removeClass("notselected");
			$(".notselected").hide();				
			$(".selected").fadeIn();

		}); 
	}

	var myStyle = {
	 "color": "#ff7800",
	 "stroke": false,
	 "fillOpacity": 0
	};

	L.geoJson(shapeCollection, {
    	onEachFeature: onEachFeature,
    	style: myStyle
	}).addTo(map);
	
	map.on('draw:created', function (e) {
		var type = e.layerType,
			layer = e.layer;

		if (type === 'marker') {
			layer.bindPopup('A popup!');
		}

		drawnItems.addLayer(layer);
		
	});


		


	        
    </script>
</div>
<div id="textcontainer">
</div>
							
							
							
							
