<?php
/*
Template Name: Página de galería
*/
?>
<?php get_header(); ?>

<div class="row">

    <div class="col-md-12" id="galleryHead" style="padding-left: 0px"><!--top gallery-->
        <div class="col-md-12 wp-grey-back">
            <h1 class="wp-font-bold pull-right"><?php echo __('[:CA]IMATGES DE LES OBRES[:es]IMAGENES DE LAS OBRAS'); ?></h1>
            <div class="btn-group btn-group-success pull-left actuacions">
            	  <button class="btn wp-bg-color" type="button"><?php echo __('[:CA]Mapa general[:es]Mapa general') ?></button>
            	  <button data-toggle="dropdown" class="btn wp-bg-color dropdown-toggle" type="button"><span class="caret"></span>
            	  </button>
            	  <ul class="dropdown-menu" id="dd_gallery">
              		  <li><a href="javascript:void(0)" data-type="actuaciones-sagrera"><?php echo __('[:CA]Actuacions Sagrera[:es]Actuaciones Sagrera') ?></a></li>
              		  <li><a href="javascript:void(0)" data-type="actuaciones-sandreu"><?php echo __('[:CA]Actuacions Sant Andreu[:es]Actuaciones Sant Andreu') ?></a></li>
              		  <li><a href="javascript:void(0)" data-type="processos"><?php echo __('[:CA]Processos[:es]Procesos') ?></a></li>
                      <li><a href="javascript:void(0)" data-type="histories"><?php echo __('[:CA]Història[:es]Historia') ?></a></li>
                      <li><a href="javascript:void(0)" data-type="maquetes"><?php echo __('[:CA]Maquetes[:es]Maquetas') ?></a></li>
                      <li><a href="javascript:void(0)" data-type="planols"><?php echo __('[:CA]Plànols[:es]Planos') ?></a></li>
                      <li><a href="javascript:void(0)" data-type="virtuals"><?php echo __('[:CA]Virtuals[:es]Virtuales') ?></a></li>
                      <li><a href="javascript:void(0)" data-type="videos"><?php echo __('[:CA]Vídeos[:es]Vídeos') ?></a></li>
            	  </ul>
            </div>
        </div>
    </div><!--./top gallery-->

    <div id="contentGallery"><!--content gallery-->
        <div class="col-md-12 initMap" id="mapa1"><!--init map-->
            <div class="mapGallery col-md-10 col-md-offset-1">
                <img src="<?php echo MULTIMEDIA_DIR ?>/2015/04/0.jpg" class="img-responsive" usemap="#actuacions">
            </div>
        </div><!--./init map-->

        <div class="col-md-12 initMap" id="mapa2"><!--map sagrera-->
            <div class="col-md-10 col-md-offset-1" id="coordsSagrera">
                <img id="sMpa2" class="img-responsive" src="http://www.image-maps.com/m/private/0/utgum426ttlhurlpe9g09jd890_mapasagrera.jpg" border="0" width="800" height="420" orgWidth="800" orgHeight="420" usemap="#sagreraMap" alt="" />
                    <map name="sagreraMap" id="sMpa2">
                    <area alt="Torre del Fang" data-title="<!--:CA-->Torre del Fang<!--:--><!--:es-->Torre del Fang<!--:-->" data-type="sagrera-1" title="Torre del Fang" href="javascript:void(0)" shape="rect" coords="156,69,206,135" style="outline:none;" />
                    <area alt="Bac de Roda" data-title="<!--:CA-->Bac de Roda<!--:--><!--:es-->Bac de Roda<!--:-->" data-type="sagrera-2" title="Bac de Roda" href="javascript:void(0)" shape="rect" coords="192,94,242,166" style="outline:none;" />
                    <area alt="Pont del Treball Digne (Sud)" data-title="<!--:CA-->Pont del Treball Digne (Sud)<!--:--><!--:es-->Puente del Treball Digne (Sur)<!--:-->" data-type="sagrera-3" title="Pont del Treball Digne (Sud)" href="javascript:void(0)" shape="rect" coords="342,159,400,235" style="outline:none;" />
                    <area alt="Pont del Treball Digne (Nord)" data-title="<!--:CA-->Pont del Treball Digne (Nord)<!--:--><!--:es-->Puente del Treball Digne (Norte)<!--:-->" data-type="sagrera-4" title="Pont del Treball Digne (Nord)" href="javascript:void(0)" shape="rect" coords="406,108,464,184" style="outline:none;" />
                    <area alt="Riera d'Horta" title="Riera d'Horta" data-title="<!--:CA-->Riera d'Horta<!--:--><!--:es-->Riera d'Horta<!--:-->" data-type="sagrera-5" href="javascript:void(0)" shape="rect" coords="530,167,588,243" style="outline:none;"      />
                    <area alt="Rambla Onze de Setembre" data-title="<!--:CA-->Rambla Onze de Setembre<!--:--><!--:es-->Rambla Onze de Setembre<!--:-->" data-type="sagrera-6" title="Rambla Onze de Setembre" href="javascript:void(0)" shape="rect" coords="623,173,681,249" style="outline:none;" />
                    <area shape="rect" coords="798,418,800,420" alt="Image Map" style="outline:none;" title="Image Map" href="javascript:void(0)" />
                </map>
            </div>
        </div><!--./map sagrera-->

        <div class="col-md-12 initMap" id="mapa3"><!--map sandreu-->
            <div class="col-md-10 col-md-offset-1" id="coordsSandreu">
                <img id="sMap1" src="http://www.image-maps.com/m/private/0/utgum426ttlhurlpe9g09jd890_mapasandreu.jpg" border="0" width="800" height="420" orgWidth="800" orgHeight="420" usemap="#sandreuMap" alt="" />
                    <map name="sandreuMap" id="sMap1">
                    <area  alt="Triangle Ferroviari" data-type="sandreu-1" data-title="<!--:CA-->Triangle Ferroviari<!--:--><!--:es-->Triángulo Ferroviario<!--:-->" href="javascript:void(0)" shape="rect" coords="155,69,210,142" style="outline:none;" />
                    <area  alt="Estació Sant Andreu Comtal" data-type="sandreu-2" data-title="<!--:CA-->Estació Sant Andreu Comtal<!--:--><!--:es-->Estación Sant Andreu Comtal<!--:-->" href="javascript:void(0)" shape="rect" coords="300,29,356,104" style="outline:none;" />
                    <area  alt="Carrer de Ferran Junoy" data-type="sandreu-3" data-title="<!--:CA-->Carrer de Ferran Junoy<!--:--><!--:es-->Calle de Ferran Junoy<!--:-->" href="javascript:void(0)" shape="rect" coords="350,67,406,142" style="outline:none;"      />
                    <area  alt="Carren Andana de l'Estació" data-type="sandreu-4" data-title="<!--:CA-->Carrer Andana de l'Estació<!--:--><!--:es-->Calle Andana de l'Estació<!--:-->" href="javascript:void(0)" shape="rect" coords="413,45,469,120" style="outline:none;" />
                    <area shape="rect" coords="798,418,800,420" alt="Image Map" style="outline:none;" title="Image Map" href="javascript:void(0)" />
                </map>
            </div>
        </div><!---/map sandreu-->

        <div id="gallery" class="col-md-12"><!--dynamic gallery-->

            <div id="parentsGallery" class="row" style="padding-left: 0px">


            </div><!--cuando es distinto de actuacions-->

            <div class="text-center wp-green-color"></div><!--title gallery-->

            <div class="row">

                <div class="col-md-12 text-center" id="navigationGallery">

                    <div class="btn-group" data-toggle="buttons">
                        <label class="btn btn-bsav active center-block" id="btnImgsGallery"><input type="radio"><?php echo __('[:CA]Imatges[:es]Imágenes') ?></label>
                        <label class="btn center-block" id="btnAereasGallery"><input type="radio"><?php echo __('[:CA]Aèries[:es]Aéreas') ?></label>
                        <label class="btn center-block" id="btnPuntosElevadosGallery"><input type="radio"><?php echo __('[:CA]Punts elevats[:es]Puntos elevados') ?></label>
                        <label class="btn center-block" id="btnPuentesGallery"><input type="radio"><?php echo __('[:CA]Des de els ponts[:es]Desde los puentes') ?></label>
                        <label class="btn center-block" id="btnVideosGallery"><input type="radio"><?php echo __('[:CA]Vídeos[:es]Vídeos') ?></label>
                    </div>

                </div><!--navigation gallery-->

            </div>

            <div id="bsav-gallery-carrousel" class="carousel slide carousel-fade" data-ride="carousel" style="display: none">

                <h1 id="parentGalleryTitle" class="col-md-12 text-center wp-green-color" style="display: none"></h1>

                <div id="buttonsMoved"></div>

                <!-- Indicators -->
                <ol class="carousel-indicators"></ol>
                <!-- Wrapper for slides -->
                <div class="carousel-inner"></div>

                  <!-- Controls -->
                  <a class="left carousel-control" href="#bsav-gallery-carrousel" data-slide="prev">
                      <span class="glyphicon glyphicon-circle-arrow-left"></span>
                  </a>
                  <a class="right carousel-control" href="#bsav-gallery-carrousel" data-slide="next">
                      <span class="glyphicon glyphicon-circle-arrow-right"></span>
                  </a>
                  <!-- ./Controls -->

            </div>

            <div id="captionGallery" class="col-md-6 col-lg-6 col-sm-12 col-xs-12 col md-offset-3 col-lg-offset-3"></div>

            <h1 id="titleVideo" class="text-center wp-green-color" style="display: none"></h1>
            <div id="videos" style="display: none" class="embed-responsive embed-responsive-4by3">

            </div>

        </div><!--./dynamic gallery-->

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

</div>

<style type="text/css">
    /* Optional for caret */
    .actuacions {
        margin-top: 20px;
    }
    .wp-bg-color{
        background-color: #8F9F06;
    }
    #galleryHead{
        background-color: #414141;
    }
    #navigationGallery label{
        padding: 12px 25px;
        margin: 40px 8px 25px 8px;
    }
    #parentsGallery{
        background: #d9d9d9;
        padding: 20px 0px;
    }
    #parentsGallery a{
        font-size: 14px;
        margin-top: 12px;
    }

    .carousel-control {
          color: #8F9F06;
    }
    .carousel-control:hover {
          color: #8F9F06;
    }
    .carousel-control:active {
          color: #8F9F06;
    }
    .parentGalleryLink:active{
        color: #8F9F06;
    }
    .carousel-control.left, .carousel-control.right {
      background-image: -webkit-linear-gradient(left, rgba(255,255,255, .5) 0%, rgba(255,255,255, .0001) 100%);
      background-image: -o-linear-gradient(left, rgba(255,255,255, .5) 0%, rgba(255,255,255, .0001) 100%);
      background-image: -webkit-gradient(linear, left top, right top, from(rgba(255,255,255, .5)), to(rgba(255,255,255, .0001)));
      /* background-image: linear-gradient(to right, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%); */
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#fff', GradientType=1);
      background-repeat: repeat-x;
    }
    .glyphicon-chevron-right{
        color: #fff;
        background: #8F9F06;
        border-radius: 80%;
        padding: 30px;
    }
    .glyphicon-chevron-left{
        color: #fff;
        background: #8F9F06;
        border-radius: 80%;
        padding: 30px;
    }
    .glyphicon-chevron-right, .carousel-control .icon-prev, .carousel-control .icon-next {
      width: 45px;
      height: 45px;
      margin-top: -15px;
      font-size: 40px;
    }
    .carousel {
      max-height: 300px;
      overflow: hidden;
    }
    .carousel-indicators
    {
        display: none;
    }
    .carousel-control .glyphicon-circle-arrow-left,
    .carousel-control .glyphicon-circle-arrow-right {
        display: inline-block;
        position: absolute;
        top: 50%;
        left: 25%;
        z-index: 5;
        padding: 30px;
    }
    .glyphicon-circle-arrow-left:active,
    .glyphicon-circle-arrow-right:active {
        color: #8F9F06;
    }
    .carousel-control {
        font-size: 48px;
        margin-left: -20px;
    }
</style>

<?php get_footer() ?>