//INDEX
function indexPage() { 
    alloweUsers = [315,7268,6494,1766,7221,4767,1738,7147,8000,7155,7353,190,35,6067,8483,395,8985,6329,9755,1156,370];
    $.when( getUser(), getProjects() ).done(function(user, projects) {
        user = user[0]; 
        if( $.inArray(user.data[0].id, alloweUsers) > -1 ) {
            console.log("Usuario permitido")
        }else{
            window.location.replace(window.location.protocol+"/error.html");
        }
        var userName = user.data[0].username; 
        $('.user li:eq(0)').html(userName);
        document.querySelector('#projects > input').addEventListener("keydown", function(event) {
           // if (event.keyCode === 13) alert();
           
        })
        if(projects[0] && projects[0].data.length > 0){
               
                //var projectsObj = [];
                
                if(localStorage.getItem('project_id') === null){
                    localStorage.setItem('project_id', projects[0].data[0].project.id);
                    render(decodeURI(window.location.hash));
                }
                
                $.each(projects[0].data, function(key, project){
                    var strProject = '<li data-id="'+project.project.id+'">'+project.project.name+'</li>';
                    $("#projects ul").append(strProject);
                    if(String(project.project.id) === localStorage.getItem('project_id')){
                        $('#projects input').val(project.project.name);
                    }
                    // projectsObj.push({'id': project.project.id, 'name': project.project.name});
                });

                // Añadimos proyectos a localStorage
                // localStorage.setItem('projects', JSON.stringify(projectsObj));    
             


        }
        $("#projects button").click(function(){
            $(this).parent().find("ul").css("display","flex");
            $trigger = $(this).attr('class');
        });

        $('.user li:eq(1)').click(function(){
            $.ajax({
                type: "GET",
                timeout: 30000,
                url: 'https://accounts.admira.com/login/close?access_token=' + localStorage.getItem('token') + '&client_id='+client_sso_id + '&redirect_uri='+callback + '&response_type=code&scope=account.profile',
                xhrFields: {
                    withCredentials: true
                },
                success: function(data){
                    localStorage.clear();
                    location.reload();
                    console.log("logout");
                }
            });    
        });  
      
        $('#projects li').click(function(){
            
            localStorage.setItem('idPlayer', "");
            localStorage.setItem('namePlayer', "");
            localStorage.setItem('idAlbum', "");
            localStorage.setItem('nameAlbum', "");
            localStorage.setItem('idSchedule', "");
            localStorage.setItem('nameSchedule', "");   
            var project = $(this).data('id');
            localStorage.setItem('project_id',project);
           // location.reload();
           
           switch (window.location.hash){
                default:

                case "#player-list":
                case "#player-page":
                    window.location.hash = '#player-list';   
                break;

                case "#album-list":
                case "#album-page":
                    window.location.hash = '#album-list';
                break;

                case "#schedule-list":
                case "#schedule-page":
                    window.location.hash = '#schedule-list';
                break;
           }
           $(window).trigger('hashchange');
           $(this).parent().html("");
           indexPage();
        }); 

        $('#brand').click(function(){
            window.location  = '';
        })

        $('#projects input').on("keyup", function () {    
            var searchText = $(this).val();
            searchText = searchText.toLowerCase();
            searchText = searchText.replace(/\s+/g, '');
            
            $('#projects li').each(function(){
              
                var currentLiText = $(this).html();
                if (((currentLiText.toLowerCase()).replace(/\s+/g, '')).indexOf(searchText) !== -1) {
                    $(this).css('display','flex');
                }else{
                    $(this).css('display','none');
                }
            });  

            if ( searchText.length > 0 ) {
                $("#projects ul").css("display","flex");
            }else{
                $("#projects ul").css("display","none");                    
            }
        });
        
     })
}

//seciones principales del nav
function playerList(){
    if ( $("#info_area").hasClass("showInfo"))
        hideInfo();
    $('#spinner').css("display", "flex");
    var d_Main = $.Deferred();
    $('#infoPag').html("Player List");
    $('.nav ').removeClass("active");
    $('.players.nav ').addClass("active");
    $( "nav" ).removeClass( "visible" ); 


    //$.when( getPlayers(), getSummary(), getPlayersDownloads(), d_Main ).done(function(players, summary, downloads) {
    $.when( getPlayers(), getPlayerStatusEmission(), getPlayersDownloads(), d_Main ).done(function(players, statusEmission, downloads) {
    
        players = players[0];
        statusEmission = statusEmission[0];
        //summary = summary[0];
        downloads = downloads[0];
        var arrDataPlv = [];
        var arrSearch = [];
        var arrPlvStatus = {};   
         
        $("#player").html(""); 
        orderObj.players = [];
           
            if(statusEmission.data && statusEmission.data.length > 0){
                $.each(statusEmission.data, function( index, playerStatus ) {
                    if (playerStatus.plv.playlistMode === 1){
                        arrPlvStatus[playerStatus.plv.id] = {};
                        if( playerStatus.status === 0 ) {
                            arrPlvStatus[playerStatus.plv.id].status = 'stopped'; 
                        }else if (playerStatus.status === 1){
                            arrPlvStatus[playerStatus.plv.id].status = 'connected'; 
                        } else{
                            arrPlvStatus[playerStatus.plv.id].status = 'disConnected'; 
                        }
                    }
                }); 
            }

            if(downloads.data && downloads.data.length > 0){
                $.each(downloads.data, function( index, download ) {
                    // var downloaded = download.videos !== undefined ? download.videos.length : 0,
                    //     total = download.videosXML !== undefined ? download.videosXML.length : 0;
                    var downloaded = download.countVideos,
                        total = download.countVideosXML;
                        if (arrPlvStatus[download.plv_id]) {
                            arrPlvStatus[download.plv_id].download = downloaded+"/"+total; 
                        } 
                     

                });

            }

            if (players.data && players.data.length > 0) {
                 var i = 0;
                $.each(players.data, function( index , player ) {                  
                  
                    //No mostramos plvs si no son modo simple
                    if (player.playlistMode === 1){
                        var status = arrPlvStatus[player.id] && arrPlvStatus[player.id].status ? arrPlvStatus[player.id].status : "disConnected";
                        var download = arrPlvStatus[player.id] && arrPlvStatus[player.id].download ? arrPlvStatus[player.id].download : "0/0";

                        arrDataPlv.push('<li data-id="'+player.id+'" data-name="'+player.name+'">'+
                                            '<a href="#player-page"><div class="name">'+
                                                '<div class="img"><span class="status '+status+'"></span></div>'+
                                                    '<div>'+
                                                        '<h3><span>Music Player</span>'+player.name+'</h3>'+ 
                                                    '</div>'+
                                                '</div>'+
                                                '<ul class="infoRow">'+
                                                    '<li class="status2">'+download+'</li>'+
                                                    '<li>'+player.nick+'</li>'+
                                                '</ul>'+
                                            '</a>'+
                                            '<ul class="toolsRow">'+
                                                '<li class="edit"></li>'+
                                                '<li class="delete"></li>'+
                                            '</ul>'+
                                        '</li>');
                     
                        arrSearch.push([arrDataPlv[i],player.name]);        
                        i++;  
                        // var strList=
                        //             '<li data-id="'+player.id+'" data-name="'+player.name+'">'+
                        //                 '<a href="#player-page"><div class="name">'+
                        //                     '<div class="img"><span class="status disConnected"></span></div>'+
                        //                         '<div>'+
                        //                             '<h3><span>Music Player</span>'+player.name+'</h3>'+ 
                        //                         '</div>'+
                        //                     '</div>'+
                        //                     '<ul class="infoRow">'+
                        //                         '<li class="status2"></li>'+
                        //                         '<li>'+player.nick+'</li>'+
                        //                     '</ul>'+
                        //                 '</a>'+
                        //                 '<ul class="toolsRow">'+
                        //                     '<li class="edit"></li>'+
                        //                     '<li class="delete"></li>'+
                        //                 '</ul>'+
                        //             '</li>';    
                        // $("#player").append(strList);
                    }                                                             
                }); 
               
                if (i === 0){ //Si no hay ningún player simple    // 0 (no tiene ningún player modo simple) para que no quede en blanco la página, mostraremos imagen 

                    var strList =   '<div id="error-page">'+
                                        '<div class="wrapper">'+
                                            '<div class="error-img"></div>'+
                                            '<h1>Oops!</h1>'+
                                            '<p>There is no player created yet.</p>'+
                                        '</div>'+    
                                    '</div>';
                        $("#player").append(strList);
                }else{
                
                    $("#player").contextMenu({
                        selector: 'li', 
                        callback: function(key, options) {
                            idPlayer = options.$trigger.data("id");
                            localStorage.setItem('idPlayer', idPlayer);
                            namePlayer = options.$trigger.data("name");
                            localStorage.setItem('namePlayer', namePlayer);
                            if(key=="open"){
                                checkToken(function(done){
                                    if(done){ 
                                        window.location.hash = '#player-page';
                                    } 
                                });        
                            }

                            if(key=="edit"){
                                checkToken(function(done){
                                    if(done){ 
                                        playerInfoAreaPage();
                                    } 
                                });  
                            }
                            if(key=="delete"){ 
                                checkToken(function(done){
                                    if(done){ 
                                        deletePlayer();
                                    } 
                                });  
                            }
                        },
                        items: {
                            "open": {name: "Open"}, 
                            "edit": {name: "Edit"},   
                            "delete": {name: "Delete"},
                        }
                    });

                    $('#pagination-container-players').pagination({
                        dataSource: arrDataPlv,
                        prevText: '<span class="first"></span>',
                        nextText: '<span class="last"></span>',
                        pageSize: 15,
                        pageRange: 1,
                        callback: function(data, pagination) {
                            orderObj.players = [];
                            // template method of yourself
                            var html = template(data);
                            $("#player").html(html);

                            //Recorremos todos los li de players, para llenar el objeto que sirve para cambir el orden de la lista
                            setTimeout(function(){
                                $('#player > li').each(function(){         
                                    orderObj.players.push({
                                        id: $(this).data("id"),
                                        name: $(this).data("name"),
                                        status: $(this).find('.img span')[0].classList[1],
                                        download: $(this).find('ul.infoRow li:eq(0)').html(),
                                        description: $(this).find('ul.infoRow li:eq(1)').html()
                                    }) 
                                });
                            },100);
    
                            $('#spinner').css("display", "");

                        }
                    
                    }) 

                    function template(data) {
                        var html = "";
                        $.each(data, function(index, item){
                            html += item;
                        });
                        
                        return html;
                    }
                }
            }else{
                var strList = '<div id="error-page">'+
                                '<div class="wrapper">'+
                                    '<div class="error-img"></div>'+
                                    '<h1>Oops!</h1>'+
                                    '<p>There is no player created yet.</p>'+
                                '</div>'+    
                        '</div>';
                        $("#player").append(strList);
            }
          
           
            searchItemsPagination(arrSearch, "#autocomplete_player", "#player");  
            
            tipRight();

            var strTabs =
                '<li><button class="tablink active">schedules</button></li>'+
                '<li><button disabled class="tablink"></button></li>';
            $(".tabs").html(strTabs);
            setTimeout(function(){
                tabs($('button:contains("schedules")'), 'schedules');
                $(".tabs").addClass("active");
              },100);

            $('#spinner').css("display", "");

    });
    
   
     $( "main" ).load( window.location.protocol+"/route/player-list/player-list.html", function() { d_Main.resolve(); });


}

function albumList() {
    if ( $("#info_area").hasClass("showInfo")) hideInfo();
    $('#spinner').css("display", "flex");
   
    var d_Main = $.Deferred();
    $('#infoPag').html("Album List");
    $('.nav ').removeClass("active");
    $('.albums.nav ').addClass("active");
    $( "nav" ).removeClass( "visible" ); 

    $.when( getAlbumsBlock(), d_Main ).done(function(albums) {

        albums = albums[0];
       
        $("#album").html("");
        orderObj.albums = [];


        if (albums.data.length>0){
           
            albums.data.sort(function(a, b) {
                var nameA = a.name.toUpperCase(); // ignore upper and lowercase
                var nameB = b.name.toUpperCase(); // ignore upper and lowercase
                if (nameA < nameB) {
                    return -1;
                }
                if (nameA > nameB) {
                    return 1;
                }

                // names must be equal
                return 0;
                });
            $.each(albums.data, function( index, album ) {
                var strList='<li data-id="'+album.id+'" data-name="'+album.name+'">'+
                '<a href="#album-page">'+
                    '<div class="name">'+
                        '<div class="img mainColor"><span></span></div>'+
                        '<div>'+
                            '<h3><span>Album</span>'+album.name+'</h3>'+ 
                        '</div>'+
                    '</div>'+
                            '<ul class="infoRow">'+
                                '<li>'+album.content+'</li>'+
                                '<li>'+album.description+'</li>'+
                            '</ul></a>'+
                            '<ul class="toolsRow">'+
                            '<li class="edit"></li>'+
                            '<li class="delete"></li>'+
                        '</ul>'+
                        '</li>';    
                $("#album").append(strList);                                                          
            }); 
                                                                                   
            // $("#album a li").click(function(){
            //     idAlbum = $(this).data("id");
            //     nameAlbum = $(this).data("name");
            //     localStorage.setItem('idAlbum', idAlbum);
            //     localStorage.setItem('nameAlbum', nameAlbum);
            // });

            //Recorremos todos los li de album, para llenar el objeto que sirve para cambir el orden de la lista
                   
            $('#album > li').each(function(){
                 
                orderObj.albums.push({
                    id: $(this).data("id"),
                    name: $(this).data("name"),
                    songs: $(this).find('ul.infoRow li:eq(0)').html(),
                    description: $(this).find('ul.infoRow li:eq(1)').html()
                }) 
                        
            }); 

            $("#album").contextMenu({
                    selector: 'li', 
                    callback: function(key, options) {
                        idAlbum = options.$trigger.data("id");
                        nameAlbum = options.$trigger.data("name");
                        localStorage.setItem('idAlbum', idAlbum);
                        localStorage.setItem('nameAlbum', nameAlbum);
                        if(key=="open"){
                            checkToken(function(done){
                                if(done){ 
                                    window.location.hash = '#album-page';
                                } 
                            });
                        }
                        if(key=="edit"){
                            checkToken(function(done){
                                if(done){ 
                                    albumInfoAreaPage();
                                } 
                            });
                        }
                        if(key=="delete"){
                            deleteAlbum();
                        }
                    },
                    items: {
                        "open": {name: "Open"}, 
                        "edit": {name: "Edit"},   
                        "delete": {name: "Delete"},
                    }
                });
        }else{
            var strList = '<div id="error-page">'+
                                '<div class="wrapper">'+
                                    '<div class="error-img"></div>'+
                                    '<h1>Oops!</h1>'+
                                    '<p>There is no album created yet.</p>'+
                                '</div>'+    
                        '</div>';
                        $("#album").append(strList);
        }
       
        searchItems("#autocomplete_album", "#album");        
       
        //llamamos a la funcion para que los inpunts tenga tooltip que muestre contador de caracteres restantes.
        chargeTyppyInput();
     
        tipLeft();

        $('#spinner').css("display", "");
        var strTabs =
            '<li><button class="tablink active">tracks</button></li>'+
            '<li><button disabled class="tablink"></button></li>';
         $(".tabs").html(strTabs);
         setTimeout(function(){
            tabs($('button:contains("tracks")'), 'tracks');
            $(".tabs").addClass("active")
          },100);

    });

    $( "main" ).load( window.location.protocol+"/route/album-list/album-list.html", function() { d_Main.resolve(); });
    // $( "main" ).load( "http://"+ window.location.host+"/newadmira-music/route/album-list/album-list.html", function() { d_Main.resolve(); });
}

function scheduleList() {
    
    if ( $("#info_area").hasClass("showInfo")) hideInfo();
    $('#spinner').css("display", "flex");

    var d_Main = $.Deferred();
    $('#infoPag').html("Schedule List");
    $('.nav ').removeClass("active");
    $('.schedules.nav ').addClass("active");
    $( "nav" ).removeClass( "visible" ); 
   
    
   
    $.when( getSchedules(), d_Main ).done(function(schedules) {
        schedules = schedules[0];

        $("#schedule").html("");
        orderObj.schedules = [];

        if (schedules.data.length>0){
            schedules.data.sort(function(a, b) {
                var nameA = a.name.toUpperCase(); // ignore upper and lowercase
                var nameB = b.name.toUpperCase(); // ignore upper and lowercase
                if (nameA < nameB) {
                    return -1;
                }
                if (nameA > nameB) {
                    return 1;
                }

                // names must be equal
                return 0;
                });
                $.each(schedules.data, function( index, schedule ) {
                                
                                var strList='<li data-id="'+schedule.id+'" data-name="'+schedule.name+'">'+

                               '<a href="#schedule-page"><div class="name">'+
                                    '<div class="img mainColor"><span></span></div>'+
                                    '<div>'+
                                        '<h3><span>Schedule</span>'+schedule.name+'</h3>'+ 
                                    '</div>'+
                                '</div>'+
                                        '<ul class="infoRow">'+
                                            '<li>'+schedule.description+'</li>'+
                                        '</ul></a>'+
                                        '<ul class="toolsRow">'+
                                            '<li class="edit"></li>'+
                                            '<li class="delete"></li>'+
                                        '</ul>'+
                                    '</li>';    
 
                        $("#schedule").append(strList);
                });

            //Recorremos todos los li de schedule, para llenar el objeto que sirve para cambir el orden de la lista
                   
            $('#schedule > li').each(function(){
                 
                orderObj.schedules.push({
                    id: $(this).data("id"),
                    name: $(this).data("name"),
                    songs: $(this).find('ul.infoRow li:eq(0)').html(),
                    type: $(this).find('ul.infoRow li:eq(1)').html(),
                    description: $(this).find('ul.infoRow li:eq(2)').html()
                }) 
                        
            }); 

                
                $("#schedule").contextMenu({
                    selector: 'li', 
                    callback: function(key, options) {
                        idSchedule = options.$trigger.data("id");
                        nameSchedule = options.$trigger.data("name");
                        localStorage.setItem('idSchedule', idSchedule);
                        localStorage.setItem('nameSchedule', nameSchedule);
                        if(key=="open"){
                            checkToken(function(done){
                                if(done){ 
                                    window.location.hash = '#schedule-page';
                                } 
                            });
                        }
                        if(key=="edit"){
                            checkToken(function(done){
                                if(done){ 
                                    scheduleInfoAreaPage();
                                } 
                            });
                        }
                        if(key=="delete"){
                            checkToken(function(done){
                                if(done){ 
                                    deleteSchedule();
                                } 
                            });  

                        }
                    },
                    items: {
                        "open": {name: "Open"}, 
                        "edit": {name: "Edit"},   
                        "delete": {name: "Delete"},
                    }
                });
        }else{        

            var strList = '<div id="error-page">'+
                                '<div class="wrapper">'+
                                    '<div class="error-img"></div>'+
                                    '<h1>Oops!</h1>'+
                                    '<p>There is no schedule created yet.</p>'+
                                '</div>'+    
                        '</div>';
             $("#schedule").append(strList);
        }
        
        searchItems("#autocomplete_schedule", "#schedule");        
       
        //llamamos a la funcion para que los inpunts tenga tooltip que muestre contador de caracteres restantes.
        chargeTyppyInput();

        tipLeft();

        $('#spinner').css("display", "");
        var strTabs =
            '<li><button class="tablink active">albums</button></li>'+
            '<li><button disabled class="tablink"></button></li>';
         $(".tabs").html(strTabs);
         
         setTimeout(function(){
           tabs($('button:contains("albums")'), 'albums');  
           $(".tabs").addClass("active");
         },100);
            
        
        });
       

    $( "main" ).load( window.location.protocol+"/route/schedule-list/schedule-list.html", function() { d_Main.resolve(); });
    
}


// paginas individuales
function playerPage() {
    $('#spinner').css("display", "flex");
    var d_Main = $.Deferred();
    var d_Info = $.Deferred();
    $('#infoPag').html("Player Detail");
    $('.nav ').removeClass("active");
    $('.players.nav').addClass("active");
    $( "nav" ).removeClass( "visible" ); 

    /////////////////////////////////////////////////////
    //Si el usuario accede con la url directa #player-page o ha retrocedido con el navagedor y se acaba de eliminar un player, rederigimos a palerList
    if (idPlayer === ""){
        window.location.hash = '#player-list';
        return false;
    }
    ///////////////////////////////////////////////////

    //$.when(getPlayer(), getInfoPlayer(), getConfPlayer(), getSchedulePlayer(), d_Main, d_Info).done(function(player, player_info, player_conf, player_schedule) {
    $.when(getPlayer(), getInfoPlayer(), getConfPlayer(), getEmissionPlayer(), getPlayerDownloads(), getSchedulePlayer(), d_Main, d_Info).done(function(player, player_info, player_conf, player_emission, player_downloads, player_schedule) {

    
        player= player[0];
        player_info = player_info[0];
        player_conf = player_conf[0];
        player_emission = player_emission[0];
        player_downloads = player_downloads[0];

        player_schedule = player_schedule[0];


        $('#plv_timezone').selectric();

        //dos arrays para comparar si hay disferencía en la propiedades del player. A continuación está la función que las compara
        var data = [player.data[0].id,player.data[0].name,player_info.data[0].location,player.data[0].nick, player_conf.data.volume, player_conf.data.advancedVideoSmoothing];
        
        var newData = [];
        var status,
            lastUpdate = player_emission.data[0] ? moment.unix(player_emission.data[0].tstamp).fromNow() : "---";
            lastUpdate = lastUpdate.charAt(0).toUpperCase() + lastUpdate.slice(1),
            downloaded = "";

            
            if (player_downloads.data[0]){

                var videos = "0", videosXML = "0";

                if(player_downloads.data[0].videos){
                    videos = player_downloads.data[0].videos.length;
                } 

                if(player_downloads.data[0].videosXML){
                    videosXML = player_downloads.data[0].videosXML.length;
                } 

                downloaded = videos + ' / ' + videosXML;
            }else{
                downloaded = "0 / 0";
            }
        
        function arrEvery(a1,a2) {    
                return a1.every(function (v, i) {
                    return v === a2[i];
                });
        }
        $('#player-page h1').html(player.data[0].name);
        $('#player_description').html(player.data[0].nick);
        if (player_emission.data[0]) {
            switch (player_emission.data[0].status) {
                case 0:
                    status = "Stopped";
                    break;
                case 1:
                    status = "Active";
                    break;
                case 2:
                    status = "Disconnected";
                    break;
            }
        }else{
            status = "Disconnected";    
        }    
        $('#player-page .info li:eq(0) span').html(status);
        $('#player-page .info li:eq(1) span').html(downloaded);
        $('#player-page .info li:eq(2) span').html(lastUpdate);
        $('#player-page #player_schedule').html(player_schedule.data.name);
        $("#player-info input:eq(0)").val(player.data[0].name);
        $("#player-info input:eq(1)").val(player_info.data[0].location);
        $("#player-info textarea").val(player.data[0].nick);
        $("#player-info input[type=hidden]").val(player.data[0].id);

        if (player_schedule.data.length !== 0) { //Si hay asignado un schedule al player
            $('.dropzone').addClass('assigned');
            $('.dropzone').removeClass('unassigned');
            $('.dropzone').data('id', player_schedule.data.id );
            $('.dropzone').data('name', player_schedule.data.name);
         }

        $("#player-info button:eq(0)").on('click', function(e){
            
            e.preventDefault();

            if ( $.trim($('#namePlayer').val())==="" || $.trim($('#descPlayer').val())==="") {
                swal({  
                    position: 'top-end',
                    type: 'error',
                    html: 'The name and description field are required.',
                    showConfirmButton: true,
                    customClass: 'notify',
                    toast: true,
                });                
               
            }else{
                var crossfade;

                if ( $('#crossfadeSwitch').is(':checked') ) {
                    crossfade = parseFloat($('#valCross').html())*1000;
                } else {
                    crossfade = 0; 
                }

              
                newData = [parseInt($('#idHideP').val()),$.trim($('#namePlayer').val()),$.trim($('#locationPlayer').val()),$.trim($('#descPlayer').val()),parseInt($('#valVolume').html()),crossfade] 
              

                if (!arrEvery(data, newData)) {
                    checkToken(function(done){
                        if(done){ 
                            modifyPlayer(newData[0],newData[1],newData[2],newData[3],newData[4],newData[5]);
                        } 
                    });
                    
                }         

            }
        })

        chargeTyppyInput();
       
        var valueVolume = player_conf.data.volume;
        var valueCrossfade = player_conf.data.advancedVideoSmoothing;

        if(player_conf.data.advancedVideoSmoothing > 1) {
            $('#crossfadeSwitch').prop('checked', true );
        } else {
            valueCrossfade = 0;
            $('.slider:eq(2)').css('display','none');
        }

        sliders(valueVolume, valueCrossfade);
      
        //area para arrastrar y asignar album o schedule
        $( ".dropzone" ).droppable({
            accept: ".dragelement",
            tolerance: "pointer",

            over: function( event, ui ) {
                if (!$(this).hasClass('assigned')){

                    $(this).css('border-color','#7DAD57');
                }
            },
            out: function( event, ui ) {
                if (!$(this).hasClass('assigned')){
                   $(this).css('border', ''); 
                }    
            },  
            drop: function(event, ui) {

                if (!$(this).hasClass('assigned')){
                    if ($(ui.draggable).closest('.source').attr('id') === 'schedules') {
                        
                        checkToken(function(done){
                            if(done){ 
                                assignScheduleToPlayer($(ui.draggable).parent().data('id'), $(ui.draggable).parent().data('name') );
                            } 
                        });
                       
                        // $(this).addClass('assigned');
                        // $(this).removeClass('unassigned');
                        // $('#player-page li:eq(1)').html($(ui.draggable).parent().data('name'));
                    }else{
                    // ¿Se podrá asignar en un futuro un álbum?;
                    }
                } else {
                    
                    swal({
                        position: 'top-end',
                        type: 'warning',
                        html: 'The player has a schedule assigned. Unassign first to add another schedule',
                        showConfirmButton: true,
                        customClass: 'notify',
                        toast: true,
                    });
                }
              
                $(this).css('border','');
            }
        });
        
        //Dropdown con 5 dias desde la fecha actual hacía atrás para cargar los emission log
        for (var i=0; i<5; i++)
            {
                $("#dataLogs").append($("<option />").val( moment().subtract(i, 'days').format('YYYYMMDD') ).text(moment().subtract(i, 'days').format('dddd - DD/MM/YYYY')));
            }
        
        $("#dataLogs").selectric({
            onChange: function() {
                $('#spinner').css("display", "flex");
                $("#listEmission").html("");
                var day = $('option:selected',this).val();
                var arrData = [];
                $.when(getEmissionTimeline(day)).done(function(emission){
                 //  emission = emission[0];
                //    console.log(emission);
                    var i,
                        lastSec = 0,
						lastContentDuration = 0,
                        secDiff = 0;
                   if(emission.data && Object.keys(emission.data).length > 0) {
                        $.each(emission.data, function(hour, seconds){
                        // console.log(hour);
                    
                            $.each(seconds, function(sec, content){
                                // console.log('sec', sec);
                                // console.log('content', content);   
                            // Obtenemos los segundos de diferencia respecto al anterior pase (Teniendo en cuenta lo que dura el contenido)
                                secDiff = sec - lastSec - lastContentDuration;
                                lastSec = sec;
                                lastContentDuration = (content.content_duration) ? content.content_duration : 0;

                            // var strList = '';
                            //arrData.push();
                                
                            //     if(secDiff > 0) arrData.push( '<li style="background-color: lightcoral"><div>No content between '+segToHour(hour, parseInt(lastSec) + parseInt(lastContentDuration))+' and '+segToHour(hour, sec)+'</div></li>');

                                arrData.push('<li><div>'+content.content_name+'</div><div>'+moment().startOf('day').seconds(content.content_duration).format('mm:ss')+'</div><div>'+moment().startOf('day').hour(hour).seconds(sec).format('HH:mm:ss')+'</div></li>');

                            //     $("#listEmission ul").append(strList);

                            })
                        
                        })
                        
                        $('#pagination-container').pagination({
                            dataSource: arrData,
                            prevText: '<span class="first"></span>',
                            nextText: '<span class="last"></span>',
                            pageSize: 16,
                            pageRange: 1,
                            callback: function(data, pagination) {
                                // template method of yourself
                                var html = template(data);
                                $('#listEmission').html(html);
                                $('#spinner').css("display", "");

                            }
                        })
                   }else{
                        swal({
                            position: 'top-end',
                            type: 'warning',
                            html: 'No results found',
                            showConfirmButton: false,
                            customClass: 'notify',
                            timer: 3000,
                            toast: true,
                        })    
                        setTimeout(function(){
                            playerPage();     
                        },1500)        
                   }
					
                })
                
                function template(data) {
                    var html = '<ul>';
                    $.each(data, function(index, item){
                        html += item;
                    });
                    html += '</ul>';
                    return html;
                }
                


            }
        });   
       

        $("#player-page .edit").click(function(){
            checkToken(function(done){
                if(done){ 
                    playerInfoAreaPage();
                } 
            });
            
        })
       
        var strTabs =
            '<li><button class="tablink active">schedules</button></li>'+
            '<li><button disabled class="tablink"></button></li>';
        $(".tabs").html(strTabs);

        setTimeout(function(){
            tabs($('button:contains("schedules")'), 'schedules');
            $(".tabs").addClass("active");    
          },100);
   
        
        $('#spinner').css("display", "");

        if ($(window).width() > 1024) showInfo();

        

    });
   
    $( "main" ).load( window.location.protocol+"/route/player-page/player-page.html", function() { d_Main.resolve(); });
    
     $( "#info_area" ).load( window.location.protocol+"/route/player-info/player-info.html", function(){ d_Info.resolve(); });
}

function albumPage() {
    $('#spinner').css("display", "flex");
    var d_Main = $.Deferred();
    var d_Info = $.Deferred();
    $('#infoPag').html("Album Detail");
    $('.nav ').removeClass("active");
    $('.albums.nav ').addClass("active");
    $( "nav" ).removeClass( "visible" ); 
    
    /////////////////////////////////////////////////////
    //Si el usuario accede con la url directo #album-page o ha retrocedido con el navagedor y se acaba de eliminar un álbum, rederigimos a albumList
    if (idAlbum === ""){
        window.location.hash = '#album-list';
        return false;
    }
    ///////////////////////////////////////////////////

    $.when(getAlbumBlock(), d_Main, d_Info).done(function(album, tracks) {
    
        album = album[0];
        // tracks = tracks[0];
  
        //dos arrays para comparar si hay diferencía en la propiedades del álbum. A continuación está la función que las compara
        var data = [album.data[0].id,album.data[0].name,album.data[0].description,album.data[0].playMode];
       
        var newData = [];
        var arrData = [];
        
        function arrEvery(a1,a2) {    
            return a1.every(function (v, i) {
                return v === a2[i];
            });
        }
        
        $('#album-page h1').html(album.data[0].name);
        $('#album_description').html(album.data[0].description);

        $('#album-info li:eq(0)').find('span').html(album.data[0].name);
        $('#album-info li:eq(1)').find('span').html(album.data[0].lastUpdate);
        $('#album-info li:eq(2)').find('span').html(album.data[0].content);
        $("#titleAlbum").val(album.data[0].name);
        $("#descAlbum").val(album.data[0].description);
        $("#album-info input[value='"+album.data[0].playMode+"']").attr( 'checked', 'checked');
        $("#album-info input[type=hidden]").val(album.data[0].id);
        
        // $.each(tracks.data, function( index, track ) {
        //     //alert( index + ": " + track );
        //     // console.log(track);
        //     arrData.push('<li data-block-content-id="'+track.id+'" data-id="'+track.content.id+'" data-name="'+track.content.name+'" ><span>'+track.content.name+'</span> </li>');
        //     //$("#album-page ol").append(strList);
        // });
        
        $('#pagination-container').pagination({
            dataSource: APIWEB_URL+"block/"+idAlbum+"/content?access_token="+localStorage.getItem('access_token')+"&project_id="+localStorage.getItem('project_id'),
            prevText: '<span class="first"></span>',
            nextText: '<span class="last"></span>',
            pageRange: 1,
            pageSize: 15,
            locator: 'data.content',
            totalNumberLocator: function(response) {
                return response.data.pagination.total;
            },
            alias: {
                pageNumber: 'page',
                pageSize: 'limit'
            },
            ajax: {
                beforeSend: function() {
                    $('#spinner').css("display", "flex");
                },
                // complete: function(){
                //     $('#spinner').css("display", "");
                // }
            },
            formatAjaxError: function(jqXHR, textStatus, errorThrown) { 
                $('#spinner').css("display", "");    
            },
        
            callback: function(data, pagination) {

                var numPage = $('#pagination-container').pagination('getSelectedPageNum'),
                    numList = (numPage-1) * pagination.pageSize,
                    html = template(data);
                $('#list-album-contents').html(html).find('ol').css("counter-increment", "ordenated " + numList);
               // $(".demo li").css("counter-increment", "list " + myUnit);
                $('#spinner').css("display", "");

                $("#list-album-contents ol").sortable({
                    distance: 20,
                    tolerance: "pointer",
                    containment: $("#list-album-contents ol").parent(),
                    cursor: 'ns-resize',
                    axis: 'y',
                    start: function( event, ui ){
                        $(ui.item).parent().find('.ui-sortable-placeholder').hide();
                    },
            
                    update: function(event, ui) {
                        var pre_position = $(ui.item).data('block-content-id');
                        var new_position = $(ui.item).prev().data('block-content-id');
        
                        var name = $(ui.item).data('name');
        
                        // Si queremos que se ponga en primera posición, le pasamos ""
                        if (new_position === undefined) {
                            new_position = "";
                        }else{
                            new_position = "/"+new_position;
                        }
                        $('#spinner').css("display", "flex");
                        
                        $.when(putContentPosition(new_position, pre_position)).done(function(){
                            swal({
                                position: 'top-end',
                                type: 'success',
                                title: 'Changed!',
                                html: `The track <b>${name}</b> has changed position`,
                                showConfirmButton: false,
                                customClass: 'notify',
                                timer: 3000,
                                toast: true,
                            })
                            $('#spinner').css("display", "");
                        });
          
                    }
                });
            }
        })

        $('#spinner').css("display", "");
        if ($(window).width() > 1024) showInfo();
      
        function template(data) {
            var html = '<ol>';
            $.each(data, function(index, item){
                html +='<li data-block-content-id="'+item.id+'" data-id="'+item.content.id+'" data-name="'+$.trim(item.content.name)+'" ><span>'+$.trim(item.content.name)+'</span></li>';
            });
            html += '</ol>';
            return html;
        }

        $("#album-info button:eq(0)").on('click', function(e){
            e.preventDefault();
            if ($.trim($('#titleAlbum').val())!=="") {
                newData = [parseInt($('#idHide').val()),$.trim($('#titleAlbum').val()),$.trim($('#descAlbum').val()),parseInt($('#album-info input[name=playMode]:checked').val())] 

                if (!arrEvery(data, newData)) {
                    
                    checkToken(function(done){
                        if(done){ 
                            modifyAlbum(newData[0],newData[1],newData[2],newData[3]);
                        } 
                    });
                    
                }    
            }else{
                swal({  
                    position: 'top-end',
                    type: 'error',
                    html: 'The name field is required',
                    showConfirmButton: true,
                    customClass: 'notify',
                    toast: true,
                });
            }
        })

        chargeTyppyInput();

        $("#album-page .edit").click(function(){
            if (!$("#info_area").hasClass("showInfo")) albumInfoAreaPage(); 

        })
        


      $("#files_to_upload ul").disableSelection();
      fileInput = $('input#upload-input')[0];    
      dragToUpload();
      
      tipLeft();
        
     var strTabs =
            '<li><button class="tablink active">tracks</button></li>'+
            '<li><button class="tablink">albums</button></li>';
        $(".tabs").html(strTabs);
        setTimeout(function(){
            tabs($('button:contains("tracks")'), 'tracks');
            $(".tabs").addClass("active");
          },100);
     
    });
   
    $('main').load( window.location.protocol+"/route/album-page/album-page.html", function() { d_Main.resolve(); });
    $( "#info_area" ).load( window.location.protocol+"/route/album-info/album-info.html", function() { d_Info.resolve(); });

}

function schedulePage() {


    var d_Main = $.Deferred();
    var d_Info = $.Deferred();
    $('#infoPag').html("Schedule Detail");
    $('.nav ').removeClass("active");
    $('.schedules.nav ').addClass("active");
    $( "nav" ).removeClass( "visible" ); 

    /////////////////////////////////////////////////////
    //Si el usuario accede con la url directa #schedule-page o ha retrocedido con el navagedor y se acaba de eliminar una schedule, rederigimos a scheduleList
    if (idSchedule === ""){
        window.location.hash = '#schedule-list';
        return false;
    }
    ///////////////////////////////////////////////////

    $.when(getSchedule(), getSchedulePlaylist(), d_Main, d_Info).done(function(schedule, schedulePlaylist) {
        $('#spinner').css("display", "flex"); 
      
        if ( $("#info_area").hasClass("showInfo")) hideInfo();
      
        schedule = schedule[0];
        schedulePlaylist = schedulePlaylist[0];
        
        var ajaxReqsPlayList = [];
        
        var idsPlaylistSchedule = {};

        var daysNameWeek = ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"];
        
        //ordeanamos el data que recibimos de las playlists dentro del schedule, por la propiedad week para que vaya de lunes a domingo
        schedulePlaylist.data.sort(function(a, b) {
            var weekA = a.week;
            var weekB = b.week;
            if (weekA > weekB) {
                return -1;
            }
            if (weekA < weekB) {
                return 1;
            }

            // names must be equal
            return 0;
            });
        $.each(schedulePlaylist.data, function( index, playlist ) {

            idsPlaylistSchedule[daysNameWeek[index]] = playlist.playlist.id;
     
            ajaxReqsPlayList.push(  
                $.ajax({
                    
                    type:'GET',
                    dataType: "json",
                    crossDomain: true,
                    url: APIWEB_URL+"playlist/"+playlist.playlist.id+"/content?access_token="+localStorage.getItem('access_token')+"&project_id="+localStorage.getItem('project_id'),      
            
                 })
            ); 
            
        });

        $.when.apply($, ajaxReqsPlayList).then(function(Mon,Tue,Wed,Thu,Fri,Sat,Sun){
            
            var events = [];

            for(var i=0; i < arguments.length; i++){
               
               // console.log(i, arguments[i][0].data);
               $.each(arguments[i][0].data, function( index, content ) {

                // console.log(index, content)

                    if (content.contentType === 1) { // si el contenido es tipo block

                        events.push(
                            {
                                idContent: content.id,
                                idBlock: content.content.id,
                                title: content.content.name,
                                start: daysOfWeek[daysNameWeek[i]]+'T'+moment().startOf('day').add(content.startHour, 'minutes').format('HH:mm:ss'),
                                end: daysOfWeek[daysNameWeek[i]]+'T'+moment().startOf('day').add(content.endHour, 'minutes').format('kk:mm:ss'),
                                dragged: false
    
                            }
                        );     
                     } 
                                                            
                }); 
               
            }

            loadSchedule(events, idsPlaylistSchedule); //funcion encargada del pintar de fullcalendar, params el array de los eventos un objecto con el id de la playlist para cada semana
        });

        //dos arrays para comparar si hay disferencía en la propiedades del schedule. A continuación está la función que las compara
        var data = [schedule.data[0].id,schedule.data[0].name,schedule.data[0].description];
           
        var newData = [];
        
        function arrEvery(a1,a2) {    
                return a1.every(function (v, i) {
                    return v === a2[i];
                });
        }
        $('#schedule-page h1').html(schedule.data[0].name);
        $('#schedule-page h2').html(schedule.data[0].description);
        $('#schedule-info li:eq(0)').find('span').html(schedule.data[0].name);
        $('#schedule-info li:eq(1)').find('span').html(schedule.data[0].lastUpdate);
        $("#titleSchedule").val(schedule.data[0].name);
        $("#descSchedule").val(schedule.data[0].description);
        $("#schedule-info input[type=hidden]").val(schedule.data[0].id);
        
        $('#schedule-page button.edit').click(function(){
            scheduleInfoAreaPage();  
            
        });    

        $("#schedule-info button:eq(0)").on('click', function(e){
            e.preventDefault();
            if ($.trim($('#titleSchedule').val())!=="") {

                newData = [parseInt($('#idHideS').val()),$.trim($('#titleSchedule').val()),$.trim($('#descSchedule').val())] 

                if (!arrEvery(data, newData)) {
                    
                   modifySchedule(newData[0],newData[1],newData[2])
                }   
            }else{
                swal({  
                    position: 'top-end',
                    type: 'error',
                    html: 'The name field is required',
                    showConfirmButton: true,
                    customClass: 'notify',
                    toast: true,
                });

            }            
        })
        chargeTyppyInput();

        tipLeft();

        var strTabs =
            '<li><button class="tablink active">albums</button></li>'+
            '<li><button class="tablink active">schedules</button></li>';
        $(".tabs").html(strTabs);
        setTimeout(function(){
            tabs($('button:contains("albums")'), 'albums');
            $(".tabs").addClass("active");
          },100);

   
        
    });
   
    $( "main" ).load( window.location.protocol+"/route/schedule-page/schedule-page.html", function() { d_Main.resolve(); });
    $( "#info_area" ).load( window.location.protocol+"/route/schedule-info/schedule-info.html", function() { d_Info.resolve(); });

    
}

function errorPage() {
    
    if ( $("#info_area").hasClass("showInfo")) hideInfo();
    $('#spinner').css("display", "flex");
    var d_Main = $.Deferred();
    $.when(d_Main).done(function() {
        $('#spinner').css("display", "");
    });
    $( "main" ).load( window.location.protocol+"/route/error-page/error-page.html", function() { d_Main.resolve(); });    
}

//secciones indivuales info area
function trackInfoAreaPage() {
    hideInfo();
    $('#spinner').css("display", "flex");
    var d_Info = $.Deferred();
    $.when(getContent(), d_Info).done(function(content) {

        content = content[0];
        
        // jsmediatags.read('https://apilb.admira.com/videos/original/'+localStorage.getItem('project_id')+'/'+idTrack+'/'+content.data[0].filename, {
        //     onSuccess: function(metadata) {
        //          console.log(metadata);
        //         var tags = metadata.tags;
        //         var withTagString = false; //solo mostraremos tooltip de metadatos si en tags, ya encontramos los metadatos (si hay que buscarlos dentro de otro objeto, no lo mostramos)
        //         $.each (tags, function(key,tag){
                   
        //             if (typeof(tag)!== "string") return;
        //             if (!withTagString) withTagString = true;
        //             key = key.charAt(0).toUpperCase() + key.slice(1);
        //             $('#metadata ul').append('<li><span>'+key+':</span>'+tag+'</li>');
        //         });
        //         if( "picture" in tags ) {
        //             var image = tags.picture;
        //             var base64String = "";
        //             for (var i = 0; i < image.data.length; i++) {
        //                 base64String += String.fromCharCode(image.data[i]);
        //             }
        //          //   $('#metadata ul').append('<li class="img"></li>');
        //             $('<img>').attr({
        //                 src: 'data:' + image.format + ';base64,' + window.btoa(base64String),
        //                 alt: 'Artwork'
        //             }).css({
        //                 'display':'flex',
        //                 'width': '100%',
        //                 'height': 'auto',
        //                 'max-width': '150px'
        //             }).appendTo('#metadata');
        //             // $('#art').attr('src', 'data:' + image.format + ';base64,' + window.btoa(base64String));
        //             // $('#art').css({'display':'block',
        //             //                 'width': '100%',
        //             //                 'height': 'auto'
        //             //             });
        //         } 
        //         $('#spinner').css("display", "");
              
             
        //         if (withTagString){
        //             tippy('#btn_meta', { 
        //                 html: document.getElementById('metadata'),
        //                 size: 'medium',
        //                 arrow: true,
        //                 placement: 'right',
        //             });
                    
        //             $('#btn_meta').css("display", "flex");
        //         }

        //     },
        //     onError: function(error) {
        //         console.log(error);
        //         $('#spinner').css("display", "");
        //     }
        // });
        
        var duration = moment().startOf('day').seconds(content.data[0].duration).format('H') !== "0" ? moment().startOf('day').seconds(content.data[0].duration).format('HH:mm:ss') : moment().startOf('day').seconds(content.data[0].duration).format('mm:ss');

        var data = [content.data[0].id,content.data[0].title];
           
        var newData = [];
        
        function arrEvery(a1,a2) {    
                return a1.every(function (v, i) {
                    return v === a2[i];
                });
        }
            var extension = content.data[0].filename.slice((content.data[0].filename.lastIndexOf(".") - 1 >>> 0) + 2);

            $('#track-info li:eq(0)').html(content.data[0].title+"."+extension);
            $('#track-info li:eq(1)').append(extension.charAt(0).toUpperCase() + extension.slice(1));
            $("#titleContent").val(content.data[0].title);
            $('#track-info input:eq(2)').val(duration);
             

            $("#track-info .buttons button:eq(0)").on('click', function(e){
                e.preventDefault();
                   
                if ($.trim($('#titleContent').val())!=="") {

                    newData = [parseInt($('#idHideC').val()),$.trim($('#titleContent').val())] 
    
                    if (!arrEvery(data, newData)) {
                        
                       modifyContent(newData[0],newData[1])
                    }   
                }else{
                    swal({  
                        position: 'top-end',
                        type: 'error',
                        html: 'The title field is required',
                        showConfirmButton: true,
                        customClass: 'notify',
                        toast: true,
                    });
    
                }               
            })

            $("#track-info button:eq(1)").on('click', function(e){
                e.preventDefault();
                   
                    assingTrack();
                               
            })
            
            $('#track-info button:eq(2)').click(function(){

                //Creamos un blow del contenido para usarlo para descarga (saveAs) , para evitar problemas CORS
                var blob = new Blob(['https://apilb.admira.com/videos/original/'+localStorage.getItem('project_id')+'/'+idTrack+'/'+content.data[0].filename], {type: 'audio/mpeg'});

                saveAs(blob, content.data[0].title+'.'+extension); 

             })

             $("#track-info button:eq(3)").on('click', function(e){
                e.preventDefault();
                   
                deleteTrack();
                               
            })
             
           
             showInfo();
            // tabs($('button:contains("albums")'), 'albums');

        chargeTyppyInput();    

        $('#spinner').css("display", "");
    });
   
   
          $( "#info_area" ).load( window.location.protocol+"/route/track-info/track-info.html", function() { d_Info.resolve(); });
}

function albumInfoAreaPage() {

    $('#spinner').css("display", "flex");
    var d_Info = $.Deferred();
    $.when(getAlbumBlock(), d_Info).done(function(album) {

       album = album[0];

       //dos arrays para comparar si hay diferencía en la propiedades del álbum y la función que las compara
       var data = [album.data[0].id,album.data[0].name,album.data[0].description,album.data[0].playMode];
           
       var newData = [];
       
       function arrEvery(a1,a2) {    
            return a1.every(function (v, i) {
                return v === a2[i];
            });
       }

            $('#album-info li:eq(0)').find('span').html(album.data[0].name);
            $('#album-info li:eq(1)').find('span').html(album.data[0].lastUpdate);
            $('#album-info li:eq(2)').find('span').html(album.data[0].content);
            $("#titleAlbum").val(album.data[0].name);
            $("#descAlbum").val(album.data[0].description);
            $("#album-info input[value='"+album.data[0].playMode+"']").attr( 'checked', 'checked');
            $("#album-info input[type=hidden]").val(album.data[0].id);
             
            $('#spinner').css("display", "");
            showInfo();

            $("#album-info button:eq(0)").on('click', function(e){
                e.preventDefault();
                if ($.trim($('#titleAlbum').val())!=="") {
                    newData = [parseInt($('#idHide').val()),$.trim($('#titleAlbum').val()),$.trim($('#descAlbum').val()),parseInt($('#album-info input[name=playMode]:checked').val())] 

                    if (!arrEvery(data, newData)) {
                        
                       modifyAlbum(newData[0],newData[1],newData[2],newData[3])
                    }    
                }else{
                    swal({  
                    position: 'top-end',
                    type: 'error',
                    html: 'The name field is required',
                    showConfirmButton: true,
                    customClass: 'notify',
                    toast: true,
                });
                }
            })
            chargeTyppyInput();
    });
   
   
    $( "#info_area" ).load( window.location.protocol+"/route/album-info/album-info.html", function() { d_Info.resolve(); });

}

function scheduleInfoAreaPage() {

    $('#spinner').css("display", "flex");
    var d_Info = $.Deferred();
    $.when(getSchedule(), d_Info).done(function(schedule) {

        schedule = schedule[0];

        //dos arrays para comparar si hay diferencía en la propiedades del schedule. A continuación está la función que las compara
        var data = [schedule.data[0].id,schedule.data[0].name,schedule.data[0].description];
           
        var newData = [];
        
        function arrEvery(a1,a2) {    
                return a1.every(function (v, i) {
                    return v === a2[i];
                });
        }
 
        $('#schedule-info li:eq(0)').find('span').html(schedule.data[0].name);
        $('#schedule-info li:eq(1)').find('span').html(schedule.data[0].lastUpdate);
        $("#titleSchedule").val(schedule.data[0].name);
        $("#descSchedule").val(schedule.data[0].description);
        $("#schedule-info input[type=hidden]").val(schedule.data[0].id);
       
             
        $('#spinner').css("display", "");
        showInfo();

        $("#schedule-info button:eq(0)").on('click', function(e){
            e.preventDefault();
           
            newData = [parseInt($('#idHideS').val()),$.trim($('#titleSchedule').val()),$.trim($('#descSchedule').val())] 

            if (!arrEvery(data, newData)) {
                
               modifySchedule(newData[0],newData[1],newData[2])
            }                
        })

        $("#schedule-info button:eq(1)").on('click', function(e){
            e.preventDefault();
           
            assingScheduleMultiple();      
        })

        chargeTyppyInput();
    });
   
   
    $( "#info_area" ).load( window.location.protocol+"/route/schedule-info/schedule-info.html", function() { d_Info.resolve(); });

}

function playerInfoAreaPage() {
    
    $('#spinner').css("display", "flex");
    
    var d_Info = $.Deferred();
    $.when(getPlayer(), getInfoPlayer(), getConfPlayer(), d_Info).done(function(player, player_info, player_conf) {
        player= player[0];
        player_info = player_info[0];
        player_conf = player_conf[0];

        var data = [player.data[0].id,player.data[0].name,player_info.data[0].location,player.data[0].nick, player_conf.data.volume, player_conf.data.advancedVideoSmoothing];
        
        var newData = [];
        
        function arrEvery(a1,a2) {    
                return a1.every(function (v, i) {
                    return v === a2[i];
                });
        }

        $("#player-info input:eq(0)").val(player.data[0].name);
        $("#player-info input:eq(1)").val(player_info.data[0].location);
        $("#player-info textarea").val(player.data[0].nick);
        $("#player-info input[type=hidden]").val(player.data[0].id);

        $("#player-info button:eq(0)").on('click', function(e){
            
            e.preventDefault();

            if ( $.trim($('#namePlayer').val())==="" || $.trim($('#descPlayer').val())==="") {
                swal({  
                    position: 'top-end',
                    type: 'error',
                    html: 'The name and description field are required.',
                    showConfirmButton: true,
                    customClass: 'notify',
                    toast: true,
                });                
               
            }else{
                var crossfade;

                if ( $('#crossfadeSwitch').is(':checked') ) {
                    crossfade = parseFloat($('#valCross').html())*1000;
                } else {
                    crossfade = 0; 
                }

              
                newData = [parseInt($('#idHideP').val()),$.trim($('#namePlayer').val()),$.trim($('#locationPlayer').val()),$.trim($('#descPlayer').val()),parseInt($('#valVolume').html()),crossfade] 
              

                if (!arrEvery(data, newData)) {
                    modifyPlayer(newData[0],newData[1],newData[2],newData[3],newData[4],newData[5])
                }         

            }
        })

        chargeTyppyInput();

        var valueVolume = player_conf.data.volume;
        var valueCrossfade = player_conf.data.advancedVideoSmoothing;

        if(player_conf.data.advancedVideoSmoothing > 1) {
            $('#crossfadeSwitch').prop('checked', true );
        } else {
            valueCrossfade = 0;
            $('.slider:eq(2)').css('display','none');
        }
      
        sliders(valueVolume, valueCrossfade);

        $('#spinner').css("display", "");
        showInfo();
    });
   
    $( "#info_area" ).load( window.location.protocol+"/route/player-info/player-info.html", function() { d_Info.resolve(); });
}

function sourceArea () {
    var d_SourceArea = $.Deferred();
    
    //Funcion para eliminar contenido duplicado (para pintar los contenidos del proyecto)
    function removeDuplicatesBy(keyFn, array) {
        var mySet = new Set();
        return array.filter(function(x) {
          var key = keyFn(x),
          isNew = !mySet.has(key);
          if (isNew) mySet.add(key);
          return isNew;
        });
      
      } 
    
    //controlamos en que vista estamos para listar el contenido necesario en los tabs
    switch(window.location.hash){
        default:
        case "#player-list":
            //solo listo schedules    
            $.when(getSchedules(), d_SourceArea).done(function(schedules) {
 
                $("#schedules > div").html("");
                
                schedules = schedules[0];
                
                $.each(schedules.data, function( index, schedule ) {
                    //alert( index + ": " + value );
                    var strList =

                        '<ul class="contextSourceSchedule" data-id="'+schedule.id+'" data-name="'+schedule.name+'">'+
                            '<div></div>'+
                            '<hl>'+schedule.name+'</hl>'+
                        '</ul>';
                    
                   
                    $("#schedules > div").append(strList);
                }); 
        
                $('.contextSourceSchedule').click(function(e){
                    e.preventDefault();
                    idSchedule = $(this).data("id");
                    localStorage.setItem('idSchedule', idSchedule);
                    nameSchedule = $(this).data("name");
                    localStorage.setItem('nameSchedule', nameSchedule);   
                    checkToken(function(done){
                        if(done){ 
                            if (window.location.hash !== "#schedule-page") {
                                window.location.hash = '#schedule-page';
                            }else{ // si ya estamos en #schedule-page, no habrá el evento hashchange, así que tenemos que llamar a la función
                                schedulePage();
                            }
                        } 
                    });                    
                });

                $("#schedules").contextMenu({
                    selector: 'ul', 
                    callback: function(key, options) {
                        idSchedule = options.$trigger.data("id");
                        nameSchedule = options.$trigger.data("name");
                        if(key=="open"){
                            localStorage.setItem('idSchedule', idSchedule);
                            localStorage.setItem('nameSchedule', nameSchedule);
                            checkToken(function(done){
                                if(done){ 
                                    if (window.location.hash !== "#schedule-page") {
                                        window.location.hash = '#schedule-page';
                                    }else{ // si ya estamos en #schedule-page, no habrá el evento hashchange, así que tenemos que llamar a la función
                                        schedulePage();   
                                    }
                                } 
                            });        
                        }
                        if(key=="edit"){
                            localStorage.setItem('idSchedule', idSchedule);
                            localStorage.setItem('nameSchedule', nameSchedule);
                            checkToken(function(done){
                                if(done){ 
                                    scheduleInfoAreaPage();
                                } 
                            });
                        }
                        if(key=="delete"){
        
                            checkToken(function(done){
                                if(done){ 
                                    deleteSchedule(idSchedule);
                                } 
                            });    
                        }
                    },
                    items: {
                        "open": {name: "Open"}, 
                        "edit": {name: "Edit"},   
                        "delete": {name: "Delete"},
                    }
                });
        //        return true;
             
            });     
        break;

        case "#player-page":
            //solo listo schedules    
            $.when(getSchedules(), d_SourceArea).done(function(schedules) {
 
                $("#schedules > div").html("");
                
                schedules = schedules[0];
                
                $.each(schedules.data, function( index, schedule ) {
                    //alert( index + ": " + value );
                    var strList =

                        '<ul class="contextSourceSchedule" data-id="'+schedule.id+'" data-name="'+schedule.name+'">'+
                            '<div></div>'+
                            '<hl>'+schedule.name+'</hl>'+
                            '<div class="dragelement"></div>'+
                        '</ul>';
                    
                   
                    $("#schedules > div").append(strList);
                }); 
        
                $('.contextSourceSchedule').click(function(e){
                    e.preventDefault();
                    idSchedule = $(this).data("id");
                    localStorage.setItem('idSchedule', idSchedule);
                    nameSchedule = $(this).data("name");
                    localStorage.setItem('nameSchedule', nameSchedule);   
                    checkToken(function(done){
                        if(done){ 
                            if (window.location.hash !== "#schedule-page") {
                                window.location.hash = '#schedule-page';
                            }else{ // si ya estamos en #schedule-page, no habrá el evento hashchange, así que tenemos que llamar a la función
                                schedulePage();   
                            }
                        } 
                    });                    
                });

                $('#schedules .dragelement').each(function() {
               
                    // // store data so the calendar knows to render an event upon drop
                    // $(this).data('event', {
                    //   title: $.trim($(this).parent().text()), // use the element's text as the event title
                    //   stick: true, // maintain when user navigates (see docs on the renderEvent method)
                    //   idAD: $(this).parent().data("id")
                    // });
              
                    // make the event draggable 
                    $(this).draggable({
                      zIndex: 9999,
                      helper: function(){
                        return $('<div class="drag-schedule"><span>'+$(this).parent().data("name")+'</span></div>');
                      },
                      start: function() {
                        if (!$('.dropzone').hasClass('assigned')){  
                            $('.dropzone').css('background-color','rgba(255, 192, 84, 0.055)'); 
                        }    
                      },
                      stop: function (){
                        $('.dropzone').css({'background-color':''}); 
                      },
                      scroll: false,  
                      appendTo: 'body',
                      revert: 'true',
                      opacity: "0.8",
                      revertDuration: 200,
                        
                    });
                   
              
                  }); 
        
                  
                $("#schedules").contextMenu({
                    selector: 'ul', 
                    callback: function(key, options) {
                        idSchedule = options.$trigger.data("id");
                        nameSchedule = options.$trigger.data("name");
                        if(key=="open"){
                            localStorage.setItem('idSchedule', idSchedule);
                            localStorage.setItem('nameSchedule', nameSchedule);
                            checkToken(function(done){
                                if(done){ 
                                    if (window.location.hash !== "#schedule-page") {
                                        window.location.hash = '#schedule-page';
                                    }else{ // si ya estamos en #schedule-page, no habrá el evento hashchange, así que tenemos que llamar a la función
                                        schedulePage();   
                                    }
                                } 
                            });        
                        }
                        if(key=="edit"){
                            localStorage.setItem('idSchedule', idSchedule);
                            localStorage.setItem('nameSchedule', nameSchedule);
                            checkToken(function(done){
                                if(done){ 
                                    scheduleInfoAreaPage();
                                } 
                            });
                        }
                        if(key=="delete"){
        
                            checkToken(function(done){
                                if(done){ 
                                    deleteSchedule(idSchedule);
                                } 
                            });    
                        }
                    },
                    items: {
                        "open": {name: "Open"}, 
                        "edit": {name: "Edit"},   
                        "delete": {name: "Delete"},
                    }
                });
        //        return true;
             
            });     
        break;

        case "#album-list":
            //solo tracks
            $.when(getContents(), d_SourceArea).done(function(contents) {
 
                $("#albums").html("");
                
                contents = contents[0];
               
                var decode = function(text){
                 //  alert( decodeURIComponent(escape(text)) );
                }
     
                //   console.log(contents.data);
                //  console.log(removeDuplicatesBy(function(x) { 
                //       return x.fileHash; }, contents.data));
                
                $.each(removeDuplicatesBy(function(x) { 
                    return x.fileHash; }, contents.data), function( index, content ) {
                    var strList =
                    '<li>'+
                        '<span data-id="'+content.id+'" data-name="'+content.title+'">'+
                            content.title+
                       '</span>'+
                    '</li>';   
                    $("#tracks ul").append(strList);
                });
             
            });  
        break;

        case "#album-page":
            //tracks y albums
            $.when(getAlbumsBlock(), getContents(), d_SourceArea).done(function(albums, contents) {
 
                $("#albums").html("");
                
                albums = albums[0];
                contents = contents[0];

                $.each(removeDuplicatesBy(function(x) { 
                    return x.fileHash; }, contents.data), function( index, content ) {
                    var strList =
                    '<li>'+
                        '<span data-id="'+content.id+'" data-name="'+content.title+'">'+
                            content.title+
                       '</span>'+
                    '</li>';   
                    $("#tracks ul").append(strList);
                });
                
                $.each(albums.data, function( index, album ) {
                    //alert( index + ": " + value );
                    var strList =
                    '<div class="accordion">'+
                        '<ul class="accordion-toggle" data-id="'+album.id+'" data-name="'+album.name+'">'+
                            '<div class="img secondaryColor"><span></span></div>'+
                            '<hl>'+album.name+'</hl>'+
                       '</ul>'+
                            '<ol class="accordion-content" data-id="'+album.id+'">'+  
                            '</ol>'+
                    '</div>';   
                    $("#albums").append(strList);
                }); 
        
                $('.accordion').find('.accordion-toggle').click(function(e){
                    e.preventDefault();
                    if (accordionCanPush) {
                        if($(this).next().css("display")=="none") {
                            accordionCanPush = false;   
                            var id_playlist=$(this).data("id");
                            idAlbum = id_playlist;
                            localStorage.setItem('idAlbum', idAlbum);
                            nameAlbum = $(this).data("name");
                            localStorage.setItem('nameAlbum', nameAlbum);
                            var albumAccordion = $(this);
                            checkToken(function(done){
                                if(done){ 
                                     $('#spinner').css("display", "flex");
                                     getTracksForAccordion(albumAccordion);
                                }
                            });        
                            
                        }else{
                            //Hide panels
                            $(this).next().stop().slideUp('slow');
            
                        }
                        $(".accordion-toggle").each(function(){
                            $(this).css('background-color','');
                        })
                                
                        // //Expand or collapse this panel
                        // $(this).next().stop().slideToggle('slow');
            
                        // //Hide the other panels
                        $(".accordion-content").not($(this).next()).stop().slideUp('fast');
                    }     
                                     
                });
        
                  
                $("#albums").contextMenu({
                    selector: 'ul', 
                    callback: function(key, options) {
                        idAlbum = options.$trigger.data("id");
                        nameAlbum = options.$trigger.data("name");
                        if(key=="open"){
                            localStorage.setItem('idAlbum', idAlbum);
                            localStorage.setItem('nameAlbum', nameAlbum);
                            checkToken(function(done){
                                if(done){ 
                                    if (window.location.hash !== "#album-page") {
                                        window.location.hash = '#album-page';
                                    }else{ // si ya estamos en #album-page, el no hará el evento hashchange, así que tenemos que llamar a la función
                                        albumPage();   
                                    }
                                } 
                            });        
                        }
                        if(key=="edit"){
                            localStorage.setItem('idAlbum', idAlbum);
                            localStorage.setItem('nameAlbum', nameAlbum);
                            checkToken(function(done){
                                if(done){ 
                                    albumInfoAreaPage();
                                } 
                            });
                        }
                        if(key=="delete"){
        
                            deleteAlbum(idAlbum);
        
                        }
                    },
                    items: {
                        "open": {name: "Open"}, 
                        "edit": {name: "Edit"},   
                        "delete": {name: "Delete"},
                    }
                });
        //        return true;
             
            });  
        break;

        case "#schedule-list":
            //solo albums
            $.when(getAlbumsBlock(), d_SourceArea).done(function(albums) {
 
                $("#albums").html("");
                
                albums = albums[0];
                
                $.each(albums.data, function( index, album ) {
                    //alert( index + ": " + value );
                    var strList =
                    '<div class="accordion">'+
                        '<ul class="accordion-toggle" data-id="'+album.id+'" data-name="'+album.name+'">'+
                            '<div class="img secondaryColor"><span></span></div>'+
                            '<hl>'+album.name+'</hl>'+
                       '</ul>'+
                            '<ol class="accordion-content" data-id="'+album.id+'">'+  
                            '</ol>'+
                    '</div>';   
                    $("#albums").append(strList);
                }); 
        
                $('.accordion').find('.accordion-toggle').click(function(e){
                    e.preventDefault();
                    if (accordionCanPush) {
                        if($(this).next().css("display")=="none") {
                            accordionCanPush = false;   
                            var id_playlist=$(this).data("id");
                            // console.log(id_playlist);
                            idAlbum = id_playlist;
                            localStorage.setItem('idAlbum', idAlbum);
                            nameAlbum = $(this).data("name");
                            localStorage.setItem('nameAlbum', nameAlbum);
                            var albumAccordion = $(this);
                            checkToken(function(done){
                                if(done){ 
                                    $('#spinner').css("display", "flex");
                                     getTracksForAccordion(albumAccordion);
                                }
                            });        
                            
                        }else{
                            //Hide panels
                            $(this).next().stop().slideUp('slow');
            
                        }
                        $(".accordion-toggle").each(function(){
                            $(this).css('background-color','');
                        })
                                
                        // //Expand or collapse this panel
                        // $(this).next().stop().slideToggle('slow');
            
                        // //Hide the other panels
                        $(".accordion-content").not($(this).next()).stop().slideUp('fast');
                    }     
                                     
                });
                      
                $("#albums").contextMenu({
                    selector: 'ul', 
                    callback: function(key, options) {
                        idAlbum = options.$trigger.data("id");
                        nameAlbum = options.$trigger.data("name");
                        if(key=="open"){
                            localStorage.setItem('idAlbum', idAlbum);
                            localStorage.setItem('nameAlbum', nameAlbum);
                            checkToken(function(done){
                                if(done){ 
                                    if (window.location.hash !== "#album-page") {
                                        window.location.hash = '#album-page';
                                    }else{ // si ya estamos en #album-page, el no hará el evento hashchange, así que tenemos que llamar a la función
                                        albumPage();   
                                    }
                                } 
                            });        
                        }
                        if(key=="edit"){
                            localStorage.setItem('idAlbum', idAlbum);
                            localStorage.setItem('nameAlbum', nameAlbum);
                            checkToken(function(done){
                                if(done){ 
                                    albumInfoAreaPage();
                                } 
                            });
                        }
                        if(key=="delete"){
        
                            deleteAlbum(idAlbum);
        
                        }
                    },
                    items: {
                        "open": {name: "Open"}, 
                        "edit": {name: "Edit"},   
                        "delete": {name: "Delete"},
                    }
                });
        //        return true;
             
            });    
        break;
        
        case "#schedule-page":
            //albums y schedules
            $.when(getAlbumsBlock(), getSchedules(), d_SourceArea).done(function(albums, schedules) {
 
                $("#albums").html("");
                $("#schedules > div").html("");
                
                albums = albums[0];
                schedules = schedules[0];
                
                // console.log(schedules)
                //bloque álbums
                $.each(albums.data, function( index, album ) {
                    //alert( index + ": " + value );
                    var strList =
                    '<div class="accordion">'+
                        '<ul class="accordion-toggle" data-id="'+album.id+'" data-name="'+album.name+'">'+
                            '<div class="img secondaryColor"><span></span></div>'+
                            '<hl>'+album.name+'</hl>'+
                            '<div class="dragelement"></div>'+
                       '</ul>'+
                            '<ol class="accordion-content" data-id="'+album.id+'">'+  
                            '</ol>'+
                    '</div>';   
                    $("#albums").append(strList);
                }); 
        
                $('#albums .dragelement').each(function() {
               
                    // store data so the calendar knows to render an event upon drop
                    $(this).data('event', {
                      title: $.trim($(this).parent().text()), // use the element's text as the event title
                      stick: true, // maintain when user navigates (see docs on the renderEvent method)
                      idBlock: $(this).parent().data("id"),
                      dragged: true
                    });
              
                    // make the event draggable 
                    $(this).draggable({
                      zIndex: 9999,
                      helper: function(){
                        return $('<div class="drag-schedule"><span>'+$(this).parent().data("name")+'</span></div>');
                      },
                      start: function() {
                        $('.dropzone').css({'background-color':'#fffcef'}); 
                      },
                      scroll: false,  
                      appendTo: 'body',
                        revert: 'true',
                        opacity: "0.8",
                        revertDuration: 200,
                        
                    });
                   
              
                  }); 
                
                $('.accordion').find('.accordion-toggle').click(function(e){
                    e.preventDefault();
                    if (accordionCanPush) {
                        if($(this).next().css("display")=="none") {
                            accordionCanPush = false;   
                            var id_playlist=$(this).data("id");
                            // console.log(id_playlist);
                            idAlbum = id_playlist;
                            localStorage.setItem('idAlbum', idAlbum);
                            nameAlbum = $(this).data("name");
                            localStorage.setItem('nameAlbum', nameAlbum);
                            var albumAccordion = $(this);
                            checkToken(function(done){
                                if(done){ 
                                    $('#spinner').css("display", "flex");
                                     getTracksForAccordion(albumAccordion);
                                }
                            });        
                            
                        }else{
                            //Hide panels
                            $(this).next().stop().slideUp('slow');
            
                        }
                        $(".accordion-toggle").each(function(){
                            $(this).css('background-color','');
                        })
                                
                        // //Expand or collapse this panel
                        // $(this).next().stop().slideToggle('slow');
            
                        // //Hide the other panels
                        $(".accordion-content").not($(this).next()).stop().slideUp('fast');
                    }     
                                     
                });
            
                  
                $("#albums").contextMenu({
                    selector: 'ul', 
                    callback: function(key, options) {
                        idAlbum = options.$trigger.data("id");
                        nameAlbum = options.$trigger.data("name");
                        if(key=="open"){
                            localStorage.setItem('idAlbum', idAlbum);
                            localStorage.setItem('nameAlbum', nameAlbum);
                            checkToken(function(done){
                                if(done){ 
                                    if (window.location.hash !== "#album-page") {
                                        window.location.hash = '#album-page';
                                    }else{ // si ya estamos en #album-page, el no hará el evento hashchange, así que tenemos que llamar a la función
                                        albumPage();   
                                    }
                                } 
                            });        
                        }
                        if(key=="edit"){
                            localStorage.setItem('idAlbum', idAlbum);
                            localStorage.setItem('nameAlbum', nameAlbum);
                            checkToken(function(done){
                                if(done){ 
                                    albumInfoAreaPage();
                                } 
                            });
                        }
                        if(key=="delete"){
        
                            deleteAlbum(idAlbum);
        
                        }
                    },
                    items: {
                        "open": {name: "Open"}, 
                        "edit": {name: "Edit"},   
                        "delete": {name: "Delete"},
                    }
                });
             
         

            //bloque schedules
            $.each(schedules.data, function( index, schedule ) {
                //alert( index + ": " + value );
                var strList =

                    '<ul class="contextSourceSchedule" data-id="'+schedule.id+'" data-name="'+schedule.name+'">'+
                        '<div></div>'+
                        '<hl>'+schedule.name+'</hl>'+
                    '</ul>';
                
               
                $("#schedules > div").append(strList);
            }); 
     
            $('.contextSourceSchedule').click(function(e){
                e.preventDefault();
                idSchedule = $(this).data("id");
                localStorage.setItem('idSchedule', idSchedule);
                nameSchedule = $(this).data("name");
                localStorage.setItem('nameSchedule', nameSchedule);   
                checkToken(function(done){
                    if(done){ 
                        if (window.location.hash !== "#schedule-page") {
                            window.location.hash = '#schedule-page';
                        }else{ // si ya estamos en #schedule-page, no habrá el evento hashchange, así que tenemos que llamar a la función
                            schedulePage();   
                        }
                    } 
                });                    
            });
            
            $("#schedules").contextMenu({
                selector: 'ul', 
                callback: function(key, options) {
                    idSchedule = options.$trigger.data("id");
                    nameSchedule = options.$trigger.data("name");
                    if(key=="open"){
                        localStorage.setItem('idSchedule', idSchedule);
                        localStorage.setItem('nameSchedule', nameSchedule);
                        checkToken(function(done){
                            if(done){ 
                                if (window.location.hash !== "#schedule-page") {
                                    window.location.hash = '#schedule-page';
                                }else{ // si ya estamos en #album-page, no habrá el evento hashchange, así que tenemos que llamar a la función
                                    schedulePage();   
                                }
                            } 
                        });        
                    }
                    if(key=="edit"){
                        localStorage.setItem('idSchedule', idSchedule);
                        localStorage.setItem('nameSchedule', nameSchedule);
                        checkToken(function(done){
                            if(done){ 
                                scheduleInfoAreaPage();
                            } 
                        });
                    }
                    if(key=="delete"){
    
                        checkToken(function(done){
                            if(done){ 
                                deleteSchedule(idSchedule);
                            } 
                        });    
                    }
                },
                items: {
                    "open": {name: "Open"}, 
                    "edit": {name: "Edit"},   
                    "delete": {name: "Delete"},
                }
            });
        });       
        break;
    } //fin switch
    
    $( "#source_area" ).load( window.location.protocol+"/source-area.html", function() { d_SourceArea.resolve(); });

}


//funciones relacionadas con la carga de diferentes partes de la página

function getTracksForAccordion(album){
    // console.log(album)
    
    $.when( getSourceTracksBlock() ).done(function(tracks) {

        $(".accordion-content[data-id='"+idAlbum+"']").html("");

        if (tracks.data.content.length>0){
              
                $.each(tracks.data.content, function( index, track ) {
                    //alert( index + ": " + track );
                    var strList='<li data-block-content-id="'+track.id+'" data-id="'+track.content.id+'" data-name="'+$.trim(track.content.name)+'" ><span>'+$.trim(track.content.name)+'</span></li>';

                    $(".accordion-content[data-id='"+idAlbum+"']").append(strList);

                });
        }else{
            $(".accordion-content[data-id='"+idAlbum+"']").append("<div class='void'><div class='wrapper'><div class='error-img'></div><h4>Nothing here!</h4></div><p>This album it's empty</p><p><a href='#album-page'>Click here</a> to add music<p></div>");
        }
       
        $('#spinner').css("display", "");
       
        //Controlamos acordeon de albumes en el source area
        //Expand  this panel
        album.next().stop().slideDown('slow', function(){
            album.css('background-color','rgba(61, 61, 61, 0.041)');   
            accordionCanPush = true;   
        });
        
        $(".void a").click (function(){
            // getInfoAlbum();
            // getSourceAlbum(id);
            checkToken(function(done){
                    if(done){ 
                        if (window.location.hash === "#album-page") // si ya estamos en #album-page, no hará el evento hashchange, así que tenemos que llamar a la función
                            albumPage();   
                    } 
                }); 

        });
        
        $("#albums").contextMenu({
            selector: 'li', 
            callback: function(key, options) {
                idTrack = options.$trigger.data("id");
                nameTrack = options.$trigger.data("name");
                var block_content_id = options.$trigger.data("block-content-id");
                if(key=="play"){
                    $.when(getContent()).done(function(content) {
                    //    content = content[0];
                       var audio = content.data[0].filename;
                        $('#audio').addClass('visible');
                        var srcTrack = 'https://apilb.admira.com/videos/original/'+localStorage.getItem('project_id')+'/'+idTrack+'/'+audio;
                        $('#music').attr('src', srcTrack);
                        togglePlay(); //esta es la función play del script del player html5
                        $('.wrapper h4').html(nameTrack);
                    });    
                }
                if(key=="edit"){
                    checkToken(function(done){
                        if(done){ 
                            trackInfoAreaPage();
                        } 
                    });
                 }
                // if(key=="hit"){
                //     notifyHit();
                //     console.log("hit"); 
                // }
                if(key=="delete"){
                    deleteTrack(block_content_id);
                    //$( "#modalDeleteTrack" ).dialog( "open" );
                }
            },
            items: {
                "play": {name: "Play"}, 
                "edit": {name: "Edit"}, 
                // "hit": {name: "It's a hit!"},  
                "delete": {name: "Delete"},
            }
        });
    })
}