{extends file=$menu.dir|cat:"base.tpl"}

{block name="scripts"}{/block}
{block name="css"}
    <style type="text/css">
    	{literal}
    		#_parameters_container{display: block !important}
			#_parameters_container .central_page_second_map a{color: red}
			#map_iframe:-webkit-full-screen {
			  width: 100%;
			  height: 100%;
			  overflow: hidden;
			}
			#fullscreen{
				padding: 5px;text-align: center; border: 1px solid; #ccc; width: 99.2%;margin-bottom: 4px;cursor: pointer;
			}
		{/literal}
    </style>
{/block}
{block name="body"}
		<div id="content">

		    <!-- Content wrapper -->
		    <div class="wrapper">

			    <!-- Action tabs -->
			    {include file=$menu.dir|cat:"action_bars.tpl"}
			    <!-- /action tabs --> 
			    <form method="post" id="map_form" style="display:none">
			    	<input type="text" name="lat">
			    	<input type="text" name="lon">
			    	<input type="text" name="address_to_string">
			    	<textarea name="info_win"></textarea>
			    </form>
		    	
                <!-- Media datatable -->
              		 <div id="fullscreen">Fullscreen Mode</div>	
                     <iframe id="map_iframe" src="/view/templates_1/map.html" width="100%" height="100%"></iframe>  
              
                <!-- /media datatable -->
 
		    </div>
		    <!-- /content wrapper -->

		</div>
		<!-- /content -->


<script>
{literal}	
	window.addEventListener("message", get_message,false);
	window.addEventListener("load",send_message,false);

	function get_message(message){
		if(message.data.hasOwnProperty("window_height"))
			document.getElementById("map_iframe").style.height = message.data.window_height+"px";
		else if(message.data.hasOwnProperty("coordinats")){
			var form = $("#map_form");
			$("input[name='lat']",form).val(message.data.coordinats.lat);
			$("input[name='lon']",form).val(message.data.coordinats.lon);
			$("input[name='address_to_string']",form).val(message.data.address_to_string);
			$("textarea",form).val(message.data.info_win);
			setTimeout(function(){
				form.submit();
			},100);
		}
	}

{/literal}
	function send_message(){
	   var iframeID = document.getElementById('map_iframe').contentWindow;
	   iframeID.postMessage({
	   		info_win:'{$menu.select_body.{"info_"|cat:$_class_->_lang}}',
	   		address_to_string: '{$menu.select_body.address_to_string}',
	   		position:{
   				lat:'{$menu.select_body.lat}',
   				lon:'{$menu.select_body.lon}'
	   		}
	   	},"*");
	}
{literal}
	function toggleFullScreen(param){
	  var elem = param?document.getElementById(param):document.documentElement; 			
	  if(!document.fullscreenElement &&  
	      !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ){ 
	  	 if(elem.requestFullscreen) 
	      elem.requestFullscreen();
	     else if(elem.msRequestFullscreen) 
	      elem.msRequestFullscreen();
	     else if(elem.mozRequestFullScreen)
	      elem.mozRequestFullScreen();
	     else if(elem.webkitRequestFullscreen)
	      elem.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
	    
	  }else{
	    if(document.exitFullscreen) 
	      document.exitFullscreen();
	    else if(document.msExitFullscreen) 
	      document.msExitFullscreen();
	    else if(document.mozCancelFullScreen) 
	      document.mozCancelFullScreen();
	    else if(document.webkitExitFullscreen) 
	      document.webkitExitFullscreen();
	  }
	}

	document.getElementById("fullscreen").addEventListener("click",function(){
		toggleFullScreen("map_iframe");
	},false);
{/literal}		
</script>                
{/block}