gistfile1.js

// JPLAYER 
$(document).ready(function() {

  $(document).pjax('a',{
    container: '[data-pjax-container]',
    timeout: 5000
  })
  $('form.navbar-search').submit(function(event) {
    $.pjax.submit(event, {
      container: '[data-pjax-container]}',
      timeout: 5000
    });
    $('#typehead_query').val('')
  }); 

  if ($('#user_list li').length == 0) {  
    $('#footer').hide()
  }
    
  var currentTrack = 0;
  var playList = []
  
  // ACTUAL PLAYER
  $("#jquery_jplayer_1").jPlayer({
    ready: function () {
      playListChange(0);    
      $(this).jPlayer("setMedia", {               
        mp3: ''
      })
    },
    oggSupport: false,
    solution: "flash,html",     
    supplied: "mp3",
    swfPath: "/assets",
    ended: function() {     
      playListNext()      
    }
  })

  // Refrescar la lista de mp3 e inicia la musica si hay 1 cancion
  function refreshPlayList () {   
    playList = []   
    var lis = $('#user_list li')
    lis.each(function() {
      var nombre = $(this).find('.playList').data('nombre')
      var mp3 = $(this).find('.playList').data('cancion-url')
      var item_id = $(this).data('random')
      playList.push({ nombre: nombre, mp3: mp3, item_id: item_id })       
    })  
    if (playList.length == 1) {           
      $("#jquery_jplayer_1").jPlayer("play");        
      $('.jp-title ul li').text(playList[0].nombre)
      $('#jquery_jplayer_1').jPlayer("setMedia", {
        mp3: playList[0].mp3
      })
    }     
  }

  // Play siguiente cancion
  function playListNext() {
    refreshPlayList()
    var index = (currentTrack + 1 < playList.length) ? currentTrack + 1 : 0;    
    cambiar_activo_y_reproducir(playList[index].item_id)
  } 
  function playListPrev() {
    refreshPlayList()
    var index = (currentTrack - 1 >= 0) ? currentTrack - 1 : playList.length - 1;   
    cambiar_activo_y_reproducir(playList[index].item_id)
  }

  $("#jplayer_prev").click(function() { playListPrev(); }); // Listen for Previous Track button click
  $("#jplayer_next").click(function() { playListNext(); }); // Listen for Next Track button click   

  // Seleccionar la cancion y el nombre de la cancion para reproducir
  function playListChange(index) {
    currentTrack = index
    $('#jquery_jplayer_1').jPlayer("setMedia", {
          mp3: playList[currentTrack].mp3
       });
    $("#jquery_jplayer_1").jPlayer("play");        
    $('.jp-title ul li').text(playList[currentTrack].nombre)    
  }

  function reproducir_ultimo() {
    var ultima_cancion = playList[playList.length - 1].item_id
    cambiar_activo_y_reproducir(ultima_cancion)
  }
  
  // Cambiar el activo Y reproducir cancion
  function cambiar_activo_y_reproducir(id) {
    var lis = $('#user_list li')
    var item_id = id
    lis.each(function(index) {
      $(this).removeClass('active')
      if ($(this).data('random') == item_id ) {
        playListChange(index)
        $(this).addClass('active')
      }
    })      
  } 

  // Live funcion para agregar musica y refrescar la lista de mp3s.
  $('.reproducir').live('click',function(e) {
    var cancion_id = $(this).data('cancion-id')   
    if ($('#user_list li').length == 0) {  
      $('#footer').show(function() {
        ajax_call(cancion_id)
      })
    }else{
      ajax_call(cancion_id)
    }
    e.preventDefault()
    return false;     
  })
  
  $('.en_lista').live('click',function(e) {
    refreshPlayList()
    var id = $(this).parent().data('random')    
    cambiar_activo_y_reproducir(id)
    e.preventDefault()
  })


  $('.cargar').live('click',function(e) { 
    var cancion_id = $(this).data('cancion-id')
    $.ajax({
      type: 'POST',
      url: '/player/crear',
      data: { cancion_id: cancion_id },
      success: function(data) {
        refresjsp(data)
        refreshPlayList()       
      }
    })    
    e.preventDefault()    
  })
  
  /* REFRESCAR LISTA */
  function refresjsp (data) {
    var pane = $('#user_list')
    var api = pane.data('jsp')
    api.getContentPane().append(data)
    api.reinitialise()
  }  

  function ajax_call (id) {
    $.ajax({
      type: 'POST',
      url: '/player/crear',
      data: { cancion_id: id },
      success: function(data) {
        refresjsp(data)
        refreshPlayList()
        reproducir_ultimo()
      }
    })    
  }
})