jQuery(document).ready(function($)
{
    /*
    * @desc Objeto galería
    */
    var Gallery = {};

    /*
    * @desc Id contenedor
    */
    Gallery.navigationGalleryId = "navigationGallery";

    /*
    * @desc Id contenedor padres
    */
    Gallery.parentsGalleryId = "parentsGallery";

    Gallery.allButtonsActuacions = ["btnAereasGallery", "btnPuntosElevadosGallery", "btnPuentesGallery", "btnVideosGallery"];

    /*
    * @desc Al inicializarse la página se ejecuta automáticamente
    */
    Gallery.init = function()
    {
        $( "#mapa2, #mapa3, #" + Gallery.navigationGalleryId + " label" ).hide();
        $('.carousel').carousel({
            pause: true,
            interval: false
        });
        $("#"+Gallery.parentsGalleryId).hide();
    }();

    /*
    * @desc Oculta las actuaciones
    */
    Gallery.hideActuacions = function()
    {
        $( "#mapa1, #mapa2, #mapa3" ).hide();
    }

    /*
    * @desc Muestra blockui
    * @param Tag - html tag
    * @param Message - mensaje
    */
    Gallery.showPreloader = function( tag, message )
    {
        $.blockUI( { message: "<"+tag+">"+message+"</"+tag+">" } );
    }

    /*
    * @desc Oculta el preloader
    */
    Gallery.hidePreloader = function()
    {
        $.unblockUI();
    }

    /*
    * @desc Genera los botones imágenes, vídeos
    * @param Data - array de objetos
    */
    Gallery.generateButtons = function( data )
    {

        Gallery.buttons = {};
        Gallery.buttons.total = 0;

        for( obj in data )
        {
            if( _.has(data[obj], 'img' ) === true )
            {
                Gallery.buttons.img = true;
            }
            if( _.has(data[obj], 'video' ) === true )
            {
                Gallery.buttons.video = true;
            }
        }

        for( var i = 0; i < Gallery.allButtonsActuacions.length; i++ )
        {
            Gallery.hideButton( Gallery.allButtonsActuacions[i] );
        }

        if( _.has( Gallery.buttons , 'img' ) === true)
        {
            Gallery.displayButton( "btnImgsGallery" );
            Gallery.buttons.total++;
        }
        else
        {
            Gallery.hideButton( "btnImgsGallery" );
        }

        if( _.has( Gallery.buttons , 'video' ) === true)
        {
            Gallery.displayButton( "btnVideosGallery" );
            Gallery.buttons.total++;
        }
        else
        {
            Gallery.hideButton( "btnVideosGallery" );
        }

        //su +
        if( Gallery.buttons.total > 1 )
        {
            Gallery.displayNavigation();
        }
        else
        {
            Gallery.hideNavigation();
        }
    }

    /*
    * @desc Muestra la navegación
    */
    Gallery.displayNavigation = function ()
    {
        $( "#"+Gallery.navigationGalleryId ).show();
    }

    /*
    * @desc Oculata la navegación
    */
    Gallery.hideNavigation = function ()
    {
        $( "#"+Gallery.navigationGalleryId ).hide();
    }

    /*
    * @desc Muestra botones
    * @param Id del elemento
    */
    Gallery.displayButton = function ( btn )
    {
        $( "#" + btn ).show();
    }

    /*
    * @desc Oculta botones
    * @param Id del elemento
    */
    Gallery.hideButton = function ( btn )
    {
        $("#" + btn).hide();
    }

    /*
    * @desc Detiene el carousel para evitar errores al cambiar a vídeo
    */
    Gallery.stopCarousel = function()
    {
        $('.carousel').each(function(){
            $(this).carousel({
                interval: false
            });
        });
    }

    /*
    * @desc Oculta el carousel
    */
    Gallery.hideCarousel = function()
    {
        $(".carousel").hide();
    }

    /*
    * @desc Muestra el carousel
    */
    Gallery.displayCarousel = function()
    {
        $(".carousel").show();
    }

    /*
    * @desc Oculta los vídeos
    */
    Gallery.hideVideos = function()
    {
        $("#videos").hide();
        $("#titleVideo").hide();
    }

    /*
    * @desc Muestra los vídeos
    */
    Gallery.displayVideos = function()
    {
        $("#videos").show();
        $("#titleVideo").show();
    }

    /*
    * @desc Oculta el caption
    */
    Gallery.hideCaption = function()
    {
        $("#captionGallery").hide();
    }

    /*
    * @desc Muestra el caption
    */
    Gallery.displayCaption = function()
    {
        $("#captionGallery").show();
    }

    /*
    * @desc Limpia el contenido de los vídeos
    */
    Gallery.clearVideo = function()
    {
        $("#titleVideo").html( "" );
        $("#videos").html( "" );
    }

    /*
    * @desc Cuando se cambia la opción del select a cualquier actuación
    */
    Gallery.changeToActuacions = function()
    {
        $("#"+Gallery.parentsGalleryId).hide();
        Gallery.hideCarousel();
        Gallery.hideCaption();
        Gallery.hidePreloader();
        Gallery.hideVideos();
    }

    /*
    * @desc Formatea el título para coger el idioma correspondiente
    * @param Data - Array de objetos
    */
    Gallery.formatTitle = function( data )
    {
        title = data.post_title.split( "<!--:-->" );
        if( Gallery.language && Gallery.language === "CA" )
        {
            title = title[0].replace("<!--:CA-->", "").replace("<!--:es-->", "");
        }
        else
        {
            title = title[1].replace("<!--:CA-->", "").replace("<!--:es-->", "");
        }
        return title;
    }

    /*
    * @desc Genera los enlaces de los elementos padres
    * @param Data - Array de objetos
    */
    Gallery.generateParents = function( data )
    {
        var html = "", i = 0;
        for( obj in data )
        {
            title = Gallery.formatTitle( data[obj] );

            if( data[obj].post_type === "videos" )
            {
                html+="<div class='col-md-4 col-lg-4 col-xs-12 col-sm-12' style='padding-top: 5px'><span style='font-size: 18px; margin-top: -2px'>&raquo;</span> ";
            }
            else
            {
                html+="<div class='col-md-3 col-lg-3 col-xs-12 col-sm-12' style='padding-top: 5px'><span style='font-size: 18px; margin-top: -2px'>&raquo;</span> ";
            }


            if( i === 0 )
            {
                html+="<a class='wp-green-color parentLinkGallery' href='javascript:void(0)' data-id="+data[obj].ID+" data-type=\""+data[obj].post_type+"\">"+title+"</a>";
                $("#parentGalleryTitle").text(title).show();
            }
            else
            {
                html+="<a style='color: #111' class='parentLinkGallery' href='javascript:void(0)' data-id="+data[obj].ID+" data-type=\""+data[obj].post_type+"\">"+title+"</a>";
            }

            html+="</div>";
            i++;
        }

        $("#" + Gallery.parentsGalleryId).html( "" ).append( html );
    }

    /*
    * @desc Actualiza las clases del título del slider
    * @param Data - Array de objetos
    */
    Gallery.updateParentTitle = function( data )
    {
        title = Gallery.formatTitle( data[0] );
        $("#parentGalleryTitle").text(title).show();
    }

    /*
    * @desc Actualiza las clases de los elementos padres
    * @param thisEl - El elemento pulsado
    */
    Gallery.reloadChildrensAnimation = function(thisEl)
    {
        $(".parentLinkGallery").removeAttr( 'style' );
        $(".parentLinkGallery").removeClass("wp-green-color");
        thisEl.addClass("wp-green-color");
        thisEl.css("color", "#8F9F06");
        $(".parentLinkGallery").not(thisEl).css("color", "#111");
        Gallery.activateDefaultButton();
    }

    /*
    * @desc Al cambiar de elemento de navegación el botón activo siempre es el primero
    */
    Gallery.activateDefaultButton = function()
    {
        $("#navigationGallery label").removeClass("btn-bsav");
        $("#navigationGallery label").first().addClass("btn-bsav");
    }

    /*
    * @desc Controla cuando los elementos de navegación deben mostrarse o no
    * @param Data - Array de objetos
    */
    Gallery.displayControls = function( data )
    {
        if( data.length == 1 )
        {
            $(".carousel-control").hide();
        }
        else
        {
            $(".carousel-control").show();
        }
    }

    /*
    * @desc Al pulsar en los enlaces padres, hay que delegar para que funcione
    */
    $(document).on("click", ".parentLinkGallery", function(e)
    {
        e.preventDefault();

        Gallery.showPreloader( "h1", "Cargando elementos" );

        Gallery.reloadChildrensAnimation($(this));

        Gallery.currentTitle = $(this).text();

        var id = $(this).data("id");
        var type = $(this).data("type");
        var data = {
            action: 'load_childrens_gallery',
            type: type,
            id: id,
            language: Gallery.language
        };

        $.get( galleryAjax.url, data, function( response )
        {
            if( typeof response ===  "object" )
            {
                if( response.success === true )
                {
                    Gallery.updateParentTitle( response.data.parent );
                    if( type === "videos" )
                    {
                        Gallery.generateVideoChildrens( response.data.childrens );
                    }
                    else
                    {
                        Gallery.generateChildrens( response.data.childrens );
                    }

                    Gallery.generateButtons( response.data.childrens );
                }
                else if( response.success === false )
                {
                    alert( "ERROR" );
                }
            }
            Gallery.hidePreloader();
            Gallery.hideActuacions();
            $("#"+Gallery.parentsGalleryId).show();
        });
    })

    /*
    * @desc Al ejecutarse el carousel ocultamos el caption
    */
    $(".carousel").on('slide.bs.carousel', function(evt)
    {
       var caption = $('div.item:nth-child(' + ($(evt.relatedTarget).index()+1) + ') .carousel-caption');
       $('#captionGallery').html(caption.html());
       caption.css('display','none');
    });

    /*
    * @desc Al pulsar el botón vídeo
    */
    $("#btnVideosGallery").on("click", function(e)
    {
        Gallery.showPreloader("h2", "Cargando...");
        e.preventDefault();

        Gallery.hideVideos();

        $(".carousel-inner").html( "" );
        $("#navigationGallery label").removeClass("btn-bsav");
        $(this).addClass("btn-bsav");

        for(var i = 0 ; i < Gallery.videoCommons.length ; i++)
        {
            $('<div class="item"><center><iframe width="640" height="480" class="embed-responsive-item" src="https://www.youtube.com/embed/i8RBl7NmL8g" frameborder="0" allowfullscreen></iframe></center></div>').appendTo('.carousel-inner');
            //$('<li data-target="#bsav-gallery-carrousel" data-slide-to="'+i+'"></li>').appendTo('.carousel-indicators')
        }

        Gallery.displayControls(Gallery.videoCommons);

        $('.item').first().addClass('active');

        $(".carousel").css("max-height", "1000px");

        Gallery.hideCaption();

        Gallery.hidePreloader();
    });

    /*
    * @desc Al pulsar en el botón imágenes
    */
    $("#btnImgsGallery, #btnAereasGallery, #btnPuentesGallery, #btnPuntosElevadosGallery").on("click", function(e)
    {
        Gallery.showPreloader( "h2", "Cargando..." );
        e.preventDefault();
        if( $(this).attr("id") === "btnPuentesGallery")
        {
            thisCarouselData = Gallery.arrayPonts;
        }
        else if( $(this).attr("id") === "btnPuntosElevadosGallery" )
        {
            thisCarouselData = Gallery.arrayElevats;
        }
        else if( $(this).attr("id") === "btnAereasGallery" )
        {
            thisCarouselData = Gallery.arrayAereas;
        }
        else if( $(this).attr("id") === "btnImgsGallery" )
        {
            Gallery.generateChildrensOnClick();
            return;
        }

        Gallery.hideVideos();

        Gallery.displayCarousel();

        $(".carousel-inner").html( "" );

        $("#navigationGallery label").removeClass("btn-bsav");
        $(this).addClass("btn-bsav");

        Gallery.generateChildrensActuacions( thisCarouselData );
        Gallery.hidePreloader();
    })

    /*
    * @desc Genera los elementos hijos si son imágenes, crea arrays de objetos globales
    * @param Data - Array de objetos
    */
    Gallery.generateChildrensOnClick = function()
    {

        Gallery.hideVideos();

        Gallery.displayCarousel();

        $(".carousel-inner").html( "" );

        for(var i = 0; i < Gallery.imagesCommons.length; i++)
        {
            if( Gallery.imagesCommons[i].desc )
            {
                $('<div class="item"><center><img src="'+Gallery.imagesCommons[i].img+'"><br><div class="carousel-caption"><strong><h5 style="font-weight: bold;">'+Gallery.imagesCommons[i].title+'</h5></strong><p style="font-size: 14px">'+Gallery.imagesCommons[i].desc+'</p></div></center></div>').appendTo('.carousel-inner');
            }
            else
            {
                $('<div class="item"><center><img src="'+Gallery.imagesCommons[i].img+'"><div class="carousel-caption"><h4></h4></div></center></div>').appendTo('.carousel-inner');
            }
        }

        $("#navigationGallery").appendTo("#buttonsMoved");

        Gallery.displayControls(Gallery.imagesCommons);

        $('.item').first().addClass('active');

        $('#navigationGallery label').removeClass('btn-bsav');

        $('#btnImgsGallery').addClass('btn-bsav');

        $(".carousel").css("max-height", "500px");

        //$('.carousel-indicators > li').first().addClass('active');
        $('#bsav-gallery-carrousel').carousel();

        var caption = $('div.item:nth-child(1) .carousel-caption');
        caption.css('display','none');
        $('#captionGallery').html(caption.html());
        Gallery.displayCaption();
        Gallery.hidePreloader();
    }

    /*
    * @desc Genera los elementos hijos si son imágenes, crea arrays de objetos globales
    * @param Data - Array de objetos
    */
    Gallery.generateChildrens = function( data )
    {
        Gallery.videoCommons = [];//videos globales
        Gallery.imagesCommons = [];//imágenes globales
        for( obj in data )
        {
            if( _.has( data[obj] , 'img' ) )
            {
                Gallery.imagesCommons.push({
                    id: obj,
                    date: _.has( data[obj] , 'date' ) === true ? data[obj].date.value : null,
                    desc: _.has( data[obj] , 'desc' ) === true ? data[obj].desc.value : null,
                    img: _.has( data[obj] , 'img' ) === true ? data[obj].img.value : null,
                    title: _.has( data[obj] , 'title' ) === true ? data[obj].title.value : null
                })
            }
            else if( _.has( data[obj] , 'video' ) )
            {
                Gallery.videoCommons.push({
                    id: obj,
                    desc: _.has( data[obj] , 'desc' ) === true ? data[obj].desc.value : null,
                    title: _.has( data[obj] , 'title' ) === true ? data[obj].title.value : null,
                    video: _.has( data[obj] , 'video' ) === true ? data[obj].video.value : null
                })
            }
        }

        Gallery.imagesCommons.sort(function(a,b)
        {
             return new Date(b.date) - new Date(a.date);
        });

        //si son post_type histories no alteramos el orden
        if( Gallery.currentPostType !== "histories" )
        {
            Gallery.imagesCommons.reverse();
        }

        if( Gallery.currentPostType == "maquetes" )
        {
            Gallery.imagesCommons.reverse();
        }

        if( Gallery.currentPostType == "planols" )
        {
            Gallery.imagesCommons.reverse();
        }

        if( Gallery.currentPostType == "virtuals" )
        {
            Gallery.imagesCommons.reverse();
        }

        Gallery.hideVideos();

        Gallery.displayCarousel();

        $(".carousel-inner").html( "" );

        for(var i=0 ; i < Gallery.imagesCommons.length ; i++)
        {
            if( Gallery.imagesCommons[i].desc )
            {
                $('<div class="item"><center><img src="'+Gallery.imagesCommons[i].img+'"><br><div class="carousel-caption"><strong><h5 style="font-weight: bold;">'+Gallery.imagesCommons[i].title+'</h5></strong><p style="font-size: 14px">'+Gallery.imagesCommons[i].desc+'</p></div></center></div>').appendTo('.carousel-inner');
            }
            else
            {
                $('<div class="item"><center><img src="'+Gallery.imagesCommons[i].img+'"><div class="carousel-caption"><h4></h4></div></center></div>').appendTo('.carousel-inner');
            }
        }

        $("#navigationGallery").appendTo("#buttonsMoved");

        Gallery.displayControls(Gallery.imagesCommons);

        $('.item').first().addClass('active');

        $(".carousel").css("max-height", "500px");

        //$('.carousel-indicators > li').first().addClass('active');
        $('#bsav-gallery-carrousel').carousel();

        var caption = $('div.item:nth-child(1) .carousel-caption');
        caption.css('display','none');
        $('#captionGallery').html(caption.html());
        Gallery.displayCaption();
    }

    /*
    * @desc Genera los elementos hijos si son imágenes, crea arrays de objetos globales
    * @param Data - Array de objetos
    */
    Gallery.generateChildrensActuacions = function( data )
    {
        Gallery.actuacio = [];//videos globales
        Gallery.videoActuacio = [];//imágenes globales
        for( obj in data )
        {
            if( _.has( data[obj] , 'img' ) )
            {
                Gallery.actuacio.push({
                    id: obj,
                    date: _.has( data[obj] , 'date' ) === true ? data[obj].date.value : null,
                    desc: _.has( data[obj] , 'desc' ) === true ? data[obj].desc.value : null,
                    img: _.has( data[obj] , 'img' ) === true ? data[obj].img.value : null,
                    title: _.has( data[obj] , 'title' ) === true ? data[obj].title.value : null
                })
            }
            else if( _.has( data[obj] , 'video' ) )
            {
                Gallery.videoActuacio.push({
                    id: obj,
                    desc: _.has( data[obj] , 'desc' ) === true ? data[obj].desc.value : null,
                    title: _.has( data[obj] , 'title' ) === true ? data[obj].title.value : null,
                    video: _.has( data[obj] , 'video' ) === true ? data[obj].video.value : null
                })
            }
        }

        Gallery.actuacio.sort(function(a,b)
        {
             return new Date(b.date) - new Date(a.date);
        });

        Gallery.hideVideos();

        Gallery.displayCarousel();

        $(".carousel-inner").html( "" );

        for(var i=0 ; i < Gallery.actuacio.length ; i++)
        {
            if( Gallery.actuacio[i].desc )
            {
                $('<div class="item"><center><img src="'+Gallery.actuacio[i].img+'"><br><div class="carousel-caption"><strong><h5 style="font-weight: bold;">'+Gallery.actuacio[i].title+'</h5></strong><p style="font-size: 14px">'+Gallery.actuacio[i].desc+'</p></div></center></div>').appendTo('.carousel-inner');
            }
            else
            {
                $('<div class="item"><center><img src="'+Gallery.actuacio[i].img+'"><div class="carousel-caption"><h4></h4></div></center></div>').appendTo('.carousel-inner');
            }
        }

        $("#navigationGallery").appendTo("#buttonsMoved");

        Gallery.displayControls(Gallery.actuacio);

        $('.item').first().addClass('active');

        $(".carousel").css("max-height", "500px");

        //$('.carousel-indicators > li').first().addClass('active');
        $('#bsav-gallery-carrousel').carousel();

        var caption = $('div.item:nth-child(1) .carousel-caption');
        caption.css('display','none');
        $('#captionGallery').html(caption.html());
        Gallery.displayCaption();
    }

    /*
    * @desc Genera el slider de tipo vídeos
    * @param Data - Array de objetos
    */
    Gallery.generateVideoChildrens = function( data )
    {
        Gallery.hideCarousel();

        Gallery.displayVideos();

        $('.carousel').carousel({
            pause: true,
            interval: false
        });

        Gallery.hideCaption();
        Gallery.clearVideo();
        Gallery.hideNavigation();

        $("#titleVideo").text(data[0].title);
        $("#titleVideo").show();
        $('<iframe width="1280" height="720" class="embed-responsive-item" src="https://www.youtube.com/embed/i8RBl7NmL8g" frameborder="0" allowfullscreen></iframe>').appendTo("#videos");
    }

    /*
    * @desc Al pulsar en cada marker de actuacions
    */
    $('area').click(function(e)
    {
        Gallery.showPreloader( "h2", "Espere..." );
        e.preventDefault();
        var language = $( "#qtranslate-chooser" ).find( '.dropdown-toggle li' ).context.URL.split( '/' );
        Gallery.language = language[4];
        var data = {
            action: 'actuacions',
            type: $(this).data("type"),
            title: $(this).data("title"),
            language: Gallery.language
        };

        $.get( galleryAjax.url, data, function( response )
        {
            if( typeof response === "object" )
            {
                if( response.success === true )
                {
                    $("#navigationGallery label").removeClass("active");
                    Gallery.updateParentTitle( response.data.parent );
                    var explodedType = data.type.split("-")[0];
                    var grouped = _.groupBy(response.data.childrens, 'post_type');
                    Gallery.generateButtonsActuacions( grouped, explodedType );
                    Gallery.arrayAereas = grouped["aereas-"+explodedType];
                    Gallery.arrayPonts = grouped["ponts-"+explodedType];
                    Gallery.arrayElevats = grouped["elevats-"+explodedType];
                    Gallery.videoCommons = _.has( grouped , 'videos-'+explodedType ) === true ? grouped["videos-"+explodedType] : [];
                    Gallery.generateChildrensActuacions( grouped["aereas-"+explodedType] );
                }
                Gallery.hidePreloader();
            }
        });
    });

    /*
    * @desc Genera los botones imágenes, vídeos
    * @param Data - array de objetos
    * @param Type - sagrera - sandreu
    */
    Gallery.generateButtonsActuacions = function( buttons, type )
    {
        Gallery.buttonsActuacions = {};
        Gallery.buttonsActuacions.total = 0;

        for( obj in buttons )
        {
            if( obj == 'aereas-' + type )
            {
                Gallery.buttonsActuacions.aereas = "btnAereasGallery";
            }
            if( obj == 'elevats-' + type )
            {
                Gallery.buttonsActuacions.elevats = "btnPuntosElevadosGallery";
            }
            if( obj == 'ponts-' + type )
            {
                Gallery.buttonsActuacions.ponts = "btnPuentesGallery";
            }
            if( obj == 'videos-' + type )
            {
                Gallery.buttonsActuacions.videos = "btnVideosGallery";
            }
        }

        for( var i = 0; i < Gallery.allButtonsActuacions.length; i++ )
        {
            Gallery.hideButton( Gallery.allButtonsActuacions[i] );
        }

        for( key in Gallery.buttonsActuacions )
        {
            if( Gallery.buttonsActuacions[key] != 0 )
            {
                Gallery.displayButton( String(Gallery.buttonsActuacions[key]) );
                Gallery.buttonsActuacions.total++;
            }
        }

        $("#btnImgsGallery").hide();
        if( Gallery.buttonsActuacions.total > 1 )
        {
            Gallery.displayNavigation();
            $("#btnAereasGallery").removeClass("btn-default").addClass("btn-bsav");
        }
        else
        {
            Gallery.hideNavigation();
        }

        if( type === "sagrera" )
        {
            $("#mapa2").hide();
        }
        else
        {
            $("#mapa3").hide();
        }
    }

    /*
    * @desc Al seleccionar una opción del desplegable
    */
     $("#dd_gallery li a").click(function()
     {
          Gallery.showPreloader( "h2", "Espere..." );

          Gallery.activateDefaultButton();

          $("#galleryHead .btn:first-child").text($(this).text());
          $("#galleryHead .btn:first-child").val($(this).text());

          var type = $(this).data( "type" );
          Gallery.currentPostType = type;
          var language = $( "#qtranslate-chooser" ).find( '.dropdown-toggle li' ).context.URL.split( '/' );
          Gallery.language = language[4];

          if( type == galleryAjax.sagrera )
          {
              $( "#mapa3, #mapa1" ).hide();
              $( "#mapa2" ).show();
              Gallery.changeToActuacions();
          }
          else if( type == galleryAjax.sandreu )
          {
              $( "#mapa2, #mapa1" ).hide();
              $( "#mapa3" ).show();
              Gallery.changeToActuacions();
          }
          else
          {
              var data = {
                  action: 'load_gallery',
                  type: type,
                  language: Gallery.language
              };

              $.get( galleryAjax.url, data, function( response )
              {
                  if( typeof response ===  "object" )
                  {
                      if( response.success === true )
                      {
                          if( type === "videos" )
                          {
                              Gallery.generateParents( response.data.parents );
                              Gallery.generateVideoChildrens( response.data.childrens );
                          }
                          else
                          {
                              Gallery.generateParents( response.data.parents );
                              Gallery.generateButtons( response.data.childrens );
                              Gallery.generateChildrens( response.data.childrens );
                          }

                      }
                      else if( response.success === false )
                      {
                          alert( "ERROR" );
                      }
                  }
                  Gallery.hidePreloader();
                  Gallery.hideActuacions();
                  $("#"+Gallery.parentsGalleryId).show();
              });
          }
     });
});