var currentId = null;

function timMixcloud(src){

    console.log("var is " + currentId);

    var audioStream = document.getElementById("player");

    //auto prepei na paei sto document ready





    // base64 encode src to get a unique id for the player (remove special char =)
    var id = btoa(src).replace(/=/gi,'');



    // if clicked current playing mix, do nothing
    if (currentId === id) {

       console.log("EDW DUSTUXWS" + currentId);
       const widget = Mixcloud.PlayerWidget(document.getElementById(currentId));
       widget.ready.then( () => {
         // ...pause
         widget.togglePlay();
         widget.events.pause.on(pauseListener);
               function pauseListener() {

                console.log('is paused...')
                jQuery('span.icon-podcast').addClass('fa-play');
                    jQuery('span.icon-podcast').removeClass('fa-pause');


                   }

                   widget.events.play.on(playListener);
               function playListener() {

                   console.log('is playing...')

                   jQuery('span.icon-podcast').removeClass('fa-play rotating');
                    jQuery('span.icon-podcast').addClass('fa-pause');

    audioStream.pause();

jQuery('.play-icon').removeClass('invisible');
jQuery('.stop-icon').addClass('invisible');
jQuery('.radio-text').text('Tune Now');
jQuery('.pulsate-css').addClass('invisible');
                   }

                   widget.events.buffering.on(bufferingListener);
                   function bufferingListener() {

                    console.log('is buffering...')
                    jQuery('span.icon-podcast').removeClass('fa-play rotating');
                    jQuery('span.icon-podcast').removeClass('fa-pause rotating');
                    jQuery('span.icon-podcast').addClass('fa-refresh rotating ');


                       }
       });

       return;
     }


    // if something else is playing
    if (currentId !== null) {
        console.log("DEN THA EPREPE");
      // get access programmatically...
      const widget = Mixcloud.PlayerWidget(document.getElementById(currentId));
      widget.ready.then( () => {
        // ...pause
        widget.pause();

      });
      // ...and hide
      jQuery(`#mixcloud-container #${currentId}`).remove();



    }



    // if player for new mix does not exist already
    if ( jQuery(`#mixcloud-container #${id}`).length === 0) {

        console.log("EDW MPAINW");
      // create iframe
      const iframe = jQuery('<iframe>', {
        id: id,
        width: '100%',
        height: '60',
        src: `https://www.mixcloud.com/widget/iframe/?hide_cover=1&mini=1&dark=1&feed=${encodeURIComponent(src)}`,
        frameboder: 0
      });

      // hide and append to footer

      iframe.appendTo('#mixcloud-container');

      const widget = Mixcloud.PlayerWidget(document.getElementById(id));




       jQuery(`#mixcloud-container #${id}`).show();
       jQuery(`.mixcloud-component`).show();

     // now we sure the player exist
    // show the footer, change the current id to the new and play with programmatic api


  }


  currentId = id;

   const widget = Mixcloud.PlayerWidget(document.getElementById(id));
   widget.ready.then( () => {
    // ...pause
   widget.play();
});




    audioStream.pause();

    jQuery('.play-icon').removeClass('invisible');
    jQuery('.stop-icon').addClass('invisible');
    jQuery('.radio-text').text('Tune Now');
    jQuery('.pulsate-css').addClass('invisible');





    jQuery('.play-podcast-icon').addClass('invisible');
    jQuery('.pause-podcast-icon').removeClass('invisible');
    console.log(jQuery('iframe').attr('src'));




  }


  /*

  jQuery('button#mixcloud-close-button').click( (e) => {
        jQuery(`#mixcloud-container #jQuery{currentId}`).remove();
        currentId = null;
        jQuery(`.mixcloud-component`).hide();
        jQuery('span.icon-podcast').addClass('fa-play');
                    jQuery('span.icon-podcast').removeClass('fa-pause');


      });
      */