<?php
/**
 * this view generates fields for search form
 * <br/><br/>
 * @author Gabriele Droege, Patricia Kelbert (BGBM, GGBN/DNA Bank Network) <contact@dnabank-network.org>
 * @version yii 2.0.3
 * @package View
 * @var $this SearchController
 * @var $model SearchForm
 * @var $selectionLists - created in the controller
 * @var $form CActiveForm
 * @copyright Copyright © 2011 DNA Bank Network http://www.dnabank-network.org
 * <br/>The contents of this file are subject to the Mozilla Public License Version 1.1
 * @filesource
 * @license http://www.mozilla.org/MPL/ MPL
 */
use yii\helpers\Html;

use yii\web\View;
use yii\helpers\Url;
use yii\jui\Dialog;
use kartik\widgets\ActiveForm;
use common\models\SignupForm;
use yii\bootstrap\Modal;


$this->title = 'NAGB Portal';
// $this->title = 'Search';
// $this->params ['breadcrumbs'] [] = $this->title;

?>
<style>
<!--
#logos img{max-height:160px;}
-->
</style>

<link rel="stylesheet"
	href="<?php echo Yii::$app->request->baseUrl?>/css/map/ol.css"
	type="text/css">
	<link rel="stylesheet" type="text/css"
		href="<?php echo Yii::$app->request->baseUrl?>/css/jquery.jqplot.min.css" />
<script src="<?php echo Yii::$app->request->baseUrl?>/js/ol.js"></script>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
 
   <script type="text/javascript" src="<?php echo Yii::$app->request->baseUrl?>/js/jquery.jqplot.min.js"></script>
   
  <script type="text/javascript" 
  	src="<?php echo Yii::$app->request->baseUrl?>/js/jqplot.dateAxisRenderer.min.js"></script>
  

 
    <script type="text/javascript"
    src="<?php echo Yii::$app->request->baseUrl?>/js/jqplot.categoryAxisRenderer.min.js"></script>
     <script type="text/javascript"
    src="<?php echo Yii::$app->request->baseUrl?>/js/jqplot.canvasAxisTickRenderer.min.js"></script>
      <script type="text/javascript"
    src="<?php echo Yii::$app->request->baseUrl?>/js/jqplot.canvasTextRenderer.min.js"></script>
      	<script type="text/javascript" 
  	src="<?php echo Yii::$app->request->baseUrl?>/js/jqplot.cursor.min.js"></script>
    
<div class="jumbotron">
	<h2>Map</h2>
</div>
<div class="container">

	<div class="container-fluid" >

		<div class="row-fluid">
			<div id="mapdiv"></div>
		</div>

	</div>




	<br />

  <?php
		Dialog::begin ( [
				'clientOptions' => [
						'modal' => true,
						'title' => "GGBN Member Details",
						'width' => "800px",
						'id' => 'logodiv',
						'class' => "feedbackclass",
						'buttons' => [ ]
				],
				'id' => 'logodiv',
				'class' => "feedbackclass"
		] );
		echo "<span id='dialog-content'></span><br/>";
		// echo Html::button('Close', ['class' => 'btn btn-primary', 'name' => 'feedback-button', 'id'=>'close-button']);

		Dialog::end ();
		$i = 0;
		?>
<br/>
<hr/>
  	 <div class="col-lg-6" id="chartmembers" style="margin-top: 20px; width: 800px; height: 400px;"></div>
  	  <br/>
  	  <div class="clearer"></div>
  	 <button class="button-reset">Reset Zoom</button>
  	 <br/>
<hr/>
<div class="clearer"></div>

	<script>

	 

var map = new OpenLayers.Map({
	div:"mapdiv",
	 projection: "EPSG:900913",
	    layers: [
	        new OpenLayers.Layer.XYZ(
	            "OpenStreetMap",
	            [
	                "http://otile1.mqcdn.com/tiles/1.0.0/map/${z}/${x}/${y}.png",
	                "http://otile2.mqcdn.com/tiles/1.0.0/map/${z}/${x}/${y}.png",
	                "http://otile3.mqcdn.com/tiles/1.0.0/map/${z}/${x}/${y}.png",
	                "http://otile4.mqcdn.com/tiles/1.0.0/map/${z}/${x}/${y}.png"
	            ],
	            {
	                attribution: "Map provided by <a href='http://www.mapquest.com/'  target='_blank'>MapQuest</a>, <a href='http://www.openstreetmap.org/' target='_blank'>Open Street Map</a> and contributors, <a href='http://creativecommons.org/licenses/by-sa/2.0/' target='_blank'>CC-BY-SA</a>  <img src='http://developer.mapquest.com/content/osm/mq_logo.png' border='0'>",
	               transitionEffect: "resize"
	            }
	        ),
	    ],
	    center: [0, 0],
	    zoom: 2,
	    width:"auto",height:"auto"
});
var epsg4326 =  new OpenLayers.Projection("EPSG:4326"); //WGS 1984 projection
var projectTo = map.getProjectionObject(); //The map projection (Spherical Mercator)



var vectorLayer = new OpenLayers.Layer.Vector("Overlay");

<?php
foreach ( $latitude as $il => $la ) {
	if (! empty ( $longitude [$il] ) && ! empty ( $latitude [$il] ))
		echo "
var feature = new OpenLayers.Feature.Vector(
        new OpenLayers.Geometry.Point( " . $longitude [$il] . ", " . $latitude [$il] . " ).transform(epsg4326, projectTo),
        {description:'hallo'} ,
        {externalGraphic: 'http://data.ggbn.org".Yii::$app->request->baseUrl."/images/butterfly.png', graphicHeight: 10, graphicWidth: 10, graphicXOffset:-12, graphicYOffset:-10  }
    );
vectorLayer.addFeatures(feature);";
}
?>


map.addLayer(vectorLayer);


//Add a selector control to the vectorLayer with popup functions
var controls = {
  selector: new OpenLayers.Control.SelectFeature(vectorLayer, { onSelect: createPopup, onUnselect: destroyPopup })
};

function createPopup(feature) {
  feature.popup = new OpenLayers.Popup.FramedCloud("pop",
      feature.geometry.getBounds().getCenterLonLat(),
      null,
      '<div class="markerContent">'+feature.attributes.description+'</div>',
      null,
      true,
      function() { controls['selector'].unselectAll(); }
  );
  //feature.popup.closeOnMove = true;
  map.addPopup(feature.popup);
}

function destroyPopup(feature) {
  feature.popup.destroy();
  feature.popup = null;
}

map.addControl(controls['selector']);
controls['selector'].activate();
$(function() {
    $( "#logodiv" ).dialog({
      autoOpen: false,
      modal: true,

    });

    $( "#logos img" ).click(function(event) {
    	i=event.target.id.split("image-")[1];
    	partner="#partner-"+i;
    	text=$(partner).html();
    	$( "#dialog-content" ).html(text);
        $( "#logodiv" ).dialog( "open" );
      });

    $('#close-button').click(function() {
    	 $('#logodiv').dialog("close");
    	 });

	 $( "#logodiv" ).on('clickoutside',function(){
		    $('#logodiv').dialog('close');
	 });

	 
	 
  });

</script>
</div>