#!/bin/bash



seuil_uo="20"

zone="PERU"
#zone="CALIFORNIA"

scriptname=`echo $0 | awk -v var=1 -F".bash" '{print $var}'`
outfilename="${scriptname}.xhtml"


titre_H1="Lien EUC/Upwelling"
titre_H2="cmip5 Native grid SST - {zone}"

# Header
bookmarks="${titre_H2}"
stylesheet1="../../css/chris_EUC_Upwelling.css"
stylesheet1_title="feuille de style CHRIS"

imgdir1="./image"

img_titre+=("sst native grid");               img_root+=("_native_grid_${zone}_sst.png")
img_titre+=("sst scipy 025");                 img_root+=("_tr025_scipy_native_lev_${zone}_sst.png")
img_titre+=("sst scipy cdo 025");             img_root+=("_tr025_scipy_cdo_${zone}_thetao_sst.png")
 
img_titre+=("sst native grid");               img_root+=("_native_grid_${zone}_sst_ZOOM.png")
img_titre+=("sst scipy 025");                 img_root+=("_tr025_scipy_native_lev_${zone}_sst_ZOOM.png")
img_titre+=("sst scipy cdo 025");             img_root+=("_tr025_scipy_cdo_${zone}_thetao_sst_ZOOM.png")

img_titre+=("hfdsA native grid");             img_root+=("_native_grid_${zone}_hfdsA.png")
img_titre+=("hfdsA native grid * sftlf");     img_root+=("_native_grid_${zone}_hfdsAxsftlf.png")
img_titre+=("hfdsO native grid");             img_root+=("_native_grid_${zone}_hfdsO.png")
img_titre+=("hfdsA scipy 025");               img_root+=("_tr025_scipy_${zone}_hfdsA.png")
img_titre+=("hfdsO scipy 025");               img_root+=("_tr025_scipy_${zone}_hfdsO.png")

img_titre+=("hfdsA native grid");             img_root+=("_native_grid_${zone}_hfdsA_ZOOM.png")
img_titre+=("hfdsA native grid * sftlf");     img_root+=("_native_grid_${zone}_hfdsAxsftlf_ZOOM.png")
img_titre+=("hfdsO native grid");             img_root+=("_native_grid_${zone}_hfdsO_ZOOM.png")
img_titre+=("hfdsA scipy 025");               img_root+=("_tr025_scipy_${zone}_hfdsA_ZOOM.png")
img_titre+=("hfdsO scipy 025");               img_root+=("_tr025_scipy_${zone}_hfdsO_ZOOM.png")
dim=${#img_root[@]}



#exp_list="cmip5_IPSL-CM5A-LR cmip5_CMCC-CM"
#exp_list="cmip5_IPSL-CM5A-LR"
#exp_list="cmip5_CMCC-CM"
exp_list="cmip5_ACCESS1-0 cmip5_ACCESS1-3 cmip5_bcc-csm1-1 cmip5_bcc-csm1-1-m cmip5_BNU-ESM cmip5_CanESM2 cmip5_CCSM4 cmip5_CESM1-BGC cmip5_CESM1-CAM5-1-FV2 cmip5_CESM1-CAM5 cmip5_CESM1-FASTCHEM cmip5_CESM1-WACCM cmip5_CMCC-CESM cmip5_CMCC-CM cmip5_CMCC-CMS cmip5_CNRM-CM5 cmip5_CNRM-CM5-2 cmip5_CSIRO-Mk3-6-0 cmip5_EC-EARTH cmip5_FGOALS-g2 cmip5_GFDL-CM2p1 cmip5_GFDL-CM3 cmip5_GFDL-ESM2G cmip5_GFDL-ESM2M cmip5_GISS-E2-H cmip5_GISS-E2-H-CC cmip5_GISS-E2-R cmip5_GISS-E2-R-CC cmip5_HadCM3 cmip5_HadGEM2-CC cmip5_HadGEM2-ES cmip5_IPSL-CM5A-LR cmip5_IPSL-CM5A-MR cmip5_IPSL-CM5B-LR cmip5_MIROC-ESM cmip5_MIROC-ESM-CHEM cmip5_MPI-ESM-LR cmip5_MPI-ESM-MR cmip5_MPI-ESM-P cmip5_MRI-CGCM3 cmip5_MRI-ESM1 cmip5_NorESM1-M cmip5_NorESM1-ME"


################################################################################

# Header
cat >  ${outfilename}   <<  EOD
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">

  <head>
    <title>${bookmarks}</title>
    <link type="text/css" rel="stylesheet" href="${stylesheet1}" title="${stylesheet1_title}" />
    
  <meta charset="UTF-8" /></head>



EOD


# Javascript  (open Windows)
cat >>  ${outfilename}   <<  EOD
<!--========================================================================-->
<!--                      Javascript (Open Windows)                         -->
<!--========================================================================-->
   <script type="text/javascript">
    // initialise the visibility check
    function affCache(idDiv) {
    var div = document.getElementById(idDiv);
    if (div.style.display == "none")
    div.style.display = "";
    else
    div.style.display = "none";
    }

    // Chargement images dans window.open
    function ChargeImage1(img1) {
    window.open(img1,img1,'width=1000, height=700, status=no').focus();return false;
    }
   </script>


EOD




cat >>  ${outfilename}   <<  EOD
<!--========================================================================-->
<!--                              BODY                                      -->
<!--========================================================================-->
   <body>        
   <h1>${titre_H1}</h1>
   <h2>${titre_H2}</h2>

      <!--========================================================================-->
      <!--                              TABLE                                     -->
      <!--========================================================================-->
      <table>
         <tbody>
EOD


jj=0
for exp in ${exp_list}; do
   if [ `echo $((${jj}%4))` == 0 ] ; then
      cat >>  ${outfilename}   <<  EOD
         <tr>
EOD
      for (( ii=0; ii<${dim}; ii=ii+1 )) ; do
         cat >>  ${outfilename}   <<  EOD
            <td align="center" rowspan="1" colspan="1">${img_titre[${ii}]}</td>
EOD
      done
      cat >>  ${outfilename}   <<  EOD
         </tr>
EOD
   fi
   
   cat >>  ${outfilename}   <<  EOD
<!--========================================================================-->
<!-- ${exp} -->
<!--========================================================================-->
         <tr>
EOD

   for (( ii=0; ii<${dim}; ii=ii+3 )) ; do
   cat >>  ${outfilename}   <<  EOD
            <td align="center" rowspan="1" colspan="3" style="background-color: #fdffda;"><span class="stabilo2">${exp}</span></td>
EOD
   done

   cat >>  ${outfilename}   <<  EOD
         </tr>
         <tr>
EOD

   for (( ii=0; ii<${dim}; ii=ii+1 )) ; do
      img[${ii}]="${imgdir1}/${exp}${img_root[${ii}]}"

      cat >>  ${outfilename}   <<  EOD
            <td><a href="javascript:;" onclick="ChargeImage1('${img[${ii}]}');">
            <img class="image1" src='${img[${ii}]}' /></a></td>
EOD
   done

   cat >>  ${outfilename}   <<  EOD
         </tr>
EOD

   jj=`echo $((${jj}+1))`
   echo ${jj}
done

cat >>  ${outfilename}   <<  EOD
         </tbody>
      </table>
   </body>
</html>
EOD
