<?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;
$this->title = 'Specimen Explorer';
// $this->title = 'Search';
// $this->params ['breadcrumbs'] [] = $this->title;

?>

  
<div class="jumbotron">
  <h2>Statistics for <?php echo $registry;?></h2>
</div>
<div class="container">
  <h2><?php echo $registry; echo $basisofrecordstxt;?></h2>
  <div class="row">
  <div id="chart1" class="col-lg-6" style="width: 500px; height: 300px;"></div>
  <div id="chart2" class="col-lg-6" style="width: 500px; height: 300px;"></div>
  </div>
  
  <div class="clearer"></div>
  <span id="info3"></span>


  <script type="text/javascript">
    $(document).ready(function(){
        var data =<?php echo $kindofunits;?>;
        var plot1 = $.jqplot ('chart1', [data], 
          { 
            title: 'Kind of units - click to refine',
            grid: {borderColor: 'white', shadow: false, drawBorder: false},
            seriesDefaults: {
              // Make this a pie chart.
              renderer: jQuery.jqplot.PieRenderer, 
              rendererOptions: {
                // Put data labels on the pie slices.
                // By default, labels show the percentage of the slice.
                showDataLabels: true,
                fill: false,
                sliceMargin: 4, 
                lineWidth: 5,
                highlightMouseOver: true
              },
            }, 
            legend: { show:true, location: 'e' }
          }
        );

      
       
        <?php
        if (!empty($species)){
        	echo " var data =".$species.";
            var plot2 = $.jqplot ('chart2', [data],
                    {
                      title: 'Species for the genus ".$genus."- click to access to the records',
                      grid: {borderColor: 'white', shadow: false, drawBorder: false},
                      seriesDefaults: {
                        // Make this a pie chart.
                        renderer: jQuery.jqplot.PieRenderer,
                        rendererOptions: {
                          // Put data labels on the pie slices.
                          // By default, labels show the percentage of the slice.
                          showDataLabels: true,
                          highlightMouseOver: true
                        },
                      },
                      legend: { show:true, location: 'ne' }
                    }
                  );";
        }
        else
        	if (!empty($genera)){
        		echo " var data =".$genera.";
            var plot2 = $.jqplot ('chart2', [data],
                    {
                      title: 'Genera for the family ".$family."- click to refine',
                      grid: {borderColor: 'white', shadow: false, drawBorder: false},
                      seriesDefaults: {
                        // Make this a pie chart.
                        renderer: jQuery.jqplot.PieRenderer,
                        rendererOptions: {
                          // Put data labels on the pie slices.
                          // By default, labels show the percentage of the slice.
                          showDataLabels: true,
                          highlightMouseOver: true
                        },
                      },
                      legend: { show:true, location: 'ne' }
                    }
                  );";
        	}
        else
        	if (!empty($families)){
        		echo "
		    var data =".$families.";
            var plot2 = $.jqplot ('chart2', [data],
                    {
                      title: 'Families for the order ".$ordo."- click to refine',
                      grid: {borderColor: 'white', shadow: false, drawBorder: false},
                      seriesDefaults: {
                        // Make this a pie chart.
                        renderer: jQuery.jqplot.PieRenderer,
                        rendererOptions: {
                          // Put data labels on the pie slices.
                          // By default, labels show the percentage of the slice.
                          showDataLabels: true,
                          highlightMouseOver: true
                        },
                      },
                      legend: { show:true, location: 'ne' }
                    }
                  );";
        	}
        else
        if (!empty($orders)){
        echo "var data = ".$orders.";
            var plot2 = $.jqplot ('chart2', [data], 
                    { 
                      title: 'Order for the class ".$classis."- click to refine',
                      grid: {borderColor: 'white', shadow: false, drawBorder: false},
                      seriesDefaults: {
                        // Make this a pie chart.
                        renderer: jQuery.jqplot.PieRenderer, 
                        rendererOptions: {
                          // Put data labels on the pie slices.
                          // By default, labels show the percentage of the slice.
                          showDataLabels: true,
                          highlightMouseOver: true
                        },
                      }, 
                      legend: { show:true, location: 'ne' }
                    }
                  );";
        }
        else 
        	echo "
		 var data =".$classes.";
        if(data.length>10){
            var plot2 = $.jqplot ('chart2', [data], 
                    { 
                      title: 'Classes - click to refine',
                      grid: {borderColor: 'white', shadow: false, drawBorder: false},
                      seriesDefaults: {
                        // Make this a pie chart.
                        renderer: jQuery.jqplot.PieRenderer, 
                        rendererOptions: {
                          // Put data labels on the pie slices.
                          // By default, labels show the percentage of the slice.
                          showDataLabels: true,
                          highlightMouseOver: true
                        },
                      }, 
                      legend: { show:true, location: 'ne' }
                    }
                  );
        }
        else{
        var plot2 = $.jqplot ('chart2', [data], 
          { 
            title: 'Classes - click to refine',
            grid: {borderColor: 'white', shadow: false, drawBorder: false},
            seriesDefaults: {
              // Make this a pie chart.
              renderer: jQuery.jqplot.PieRenderer, 
              rendererOptions: {
                // By default, labels show the percentage of the slice.
                showDataLabels: true,
                fill: false,
                sliceMargin: 4, 
                lineWidth: 6,
                highlightMouseOver: true
              },
            }, 
            legend: { show:true, location: 'ne' }
          }
        );
        }";
       
		
      		?>

        $("#chart1").bind('jqplotDataHighlight', function(ev, seriesIndex, pointIndex, data) {
            var $this = $(this);                
            $this.attr('title', data[0] + ": " + data[1]);    
            $this.css('cursor','pointer');                                         
        }); 

        $("#chart1").bind('jqplotDataUnhighlight', function(ev, seriesIndex, pointIndex, data) {
            var $this = $(this);                
            $this.attr('title',""); 
            $this.css('cursor','');            
 		});

        $("#chart2").bind('jqplotDataHighlight', function(ev, seriesIndex, pointIndex, data) {
            var $this = $(this);                
            $this.attr('title', data[0] + ": " + data[1]);     
            $this.css('cursor','pointer');                                      
        }); 

        $("#chart2").bind('jqplotDataUnhighlight', function(ev, seriesIndex, pointIndex, data) {
            var $this = $(this);                
            $this.attr('title',""); 
            $this.css('cursor','');            
 		});

        $("#chart2 .jqplot-table-legend-label").bind("click", function() {
            var $this = $(this);
            var url ="";
            <?php 
                    if (!empty($species)){
                    	echo   "var institution=$(location).attr('search').split(\"&\")[0].split(\"registry=\")[1];";
                    	echo   "url = 'http://'+$(location).attr('hostname')+'/".Yii::$app->params['siteName']."/search/browse?'+'institution='+institution+'&fullScientificName='+encodeURI($(this).text().split('(')[0].trim()+'*');";
                     	echo   "$(location).attr('href',url);";
                    }else{
                    	if (!empty($genera))
                    		echo "url += '&genus='+$(this).text().split('(')[0].trim();";
                      else  if (!empty($families))  
                          	echo "url += '&family='+$(this).text().split('(')[0].trim();";
                       else if (!empty($orders))  
                               echo "url += '&ordo='+$(this).text().split('(')[0].trim();";
                       else  if (!empty($classes))  
                              echo   "url += '&classis='+$(this).text().split('(')[0].trim();";
                        echo   "$(location).attr('href',$(location).attr('href')+url);";
                    }
                    ?>
          });

        $('#chart2').bind('jqplotDataClick', 
                function (ev, seriesIndex, pointIndex, data) {
                  $('#info3').html('You clicked on '+ data.toString().split('(')[0]);
                  var url ="";
                  <?php 
                  if (!empty($species)){
                  	echo   "var institution=$(location).attr('search').split(\"&\")[0].split(\"registry=\")[1];";
                  	echo   "url += 'http://'+$(location).attr('hostname')+'/".Yii::$app->params['siteName']."/search/browse?'+'institution='+institution+'&fullScientificName='+encodeURI(data.toString().split('(')[0].trim()+'*');";
                   	echo   "$(location).attr('href',url);";
                  }else{
                  	if (!empty($genera))
                  		echo "url += '&genus='+data.toString().split('(')[0].trim();";
                    else  if (!empty($families))  
                        	echo "url += '&family='+data.toString().split('(')[0].trim();";
                     else if (!empty($orders))  
                             echo "url += '&ordo='+data.toString().split('(')[0].trim();";
                     else  if (!empty($classes))  
                            echo   "url += '&classis='+data.toString().split('(')[0].trim();";
                      echo   "$(location).attr('href',$(location).attr('href')+url);";
                  }
                  ?>
        });


        $('#chart1').bind('jqplotDataClick', 
                function (ev, seriesIndex, pointIndex, data) {
            var url ="";
            var burl=$(location).attr('href').split("?")[0];
            var filter=$(location).attr('href').split("?")[1];
            var sep="?";
            
            if(filter !=null){
                var filters=filter.split("&");
                for (i=0;i<filters.length;i++){
                    if (filters[i].indexOf("sampletype")==-1 ){
                        if(i==0 || sep=="?"){
                            url+=sep+filters[i];
                            sep="&";
                        }
                        else
                            url+=sep+filters[i];
                    }else{
                        var oldvalue=filters[i].split("sampletype=")[1];
                        if(oldvalue==data.toString().split('(')[0].trim()){
                            var institution=$(location).attr('search').split("&")[0].split("registry=")[1];
                            var url = 'http://'+$(location).attr('hostname')+'/<?php echo Yii::$app->params['siteName']?>/search/browse?'+'institution='+institution;
                            for (j=0;j<filters.length;j++){
                                if(filters[j].indexOf("registry")==-1)
                                        url+="&"+filters[j];
                            }
                            return  $(location).attr('href',url);
                        }
                    }
                }
                url+=sep+'sampletype='+data.toString().split('(')[0].trim();
            }
            else
                url+=sep+'sampletype='+data.toString().split('(')[0].trim();
            $(location).attr('href',burl+url);
  });
        

        $("#chart1 .jqplot-table-legend-label").bind("click", function() {
            var url ="";
            var burl=$(location).attr('href').split("?")[0];
            var filter=$(location).attr('href').split("?")[1];
            var sep="?";
            
            if(filter !=null){
                var filters=filter.split("&");
                for (i=0;i<filters.length;i++){
                    if (filters[i].indexOf("sampletype")==-1 ){
                        if(i==0 || sep=="?"){
                            url+=sep+filters[i];
                            sep="&";
                        }
                        else
                            url+=sep+filters[i];
                    }else{
                        var oldvalue=filters[i].split("sampletype=")[1];
                        if(oldvalue==$(this).text().split('(')[0].trim()){
                            var institution=$(location).attr('search').split("&")[0].split("registry=")[1];
                            var url = 'http://'+$(location).attr('hostname')+'/<?php echo Yii::$app->params['siteName']?>/search/browse?'+'institution='+institution;
                            for (j=0;j<filters.length;j++){
                                if(filters[j].indexOf("registry")==-1)
                                        url+="&"+filters[j];
                            }
                            return  $(location).attr('href',url);
                        }
                    }
                }
                url+=sep+'sampletype='+$(this).text().split('(')[0].trim();
            }
            else
                url+=sep+'sampletype='+$(this).text().split('(')[0].trim();
            $(location).attr('href',burl+url);
  });

        
             
                    
        var t1= $('#chart1.jqplot-target>table.jqplot-table-legend').height();
        if(t1<$('#chart1').height())
            t1=$('#chart1').height();
        var t2= $('#chart2.jqplot-target>table.jqplot-table-legend').height();
        if(t2<$('#chart2').height())
            t2=$('#chart2').height();
  
       
        $('.browser').css('height',t1+t2+150);
      });
    </script>

</div>