$(function() {
  $.ajaxSetup( {
    beforeSend: function(xhr) {xhr.setRequestHeader("Accept", "text/javascript");}
  });
  
  new SL.Controller.go(location.hash.substring(1));

  $("#menu #add-link a").click(function() {
    $(this).parents('ul').children('li').removeClass('active');
    $(this).parent('li').addClass('active');
    new SL.Controller.go('/add');
  });
  $("#menu #list-link a").click(function() {
    $(this).parents('ul').children('li').removeClass('active');
    $(this).parent('li').addClass('active');
    new SL.Controller.go('');
  });
  $("h1 a").click(function() {
    $('ul#menu').children('li').removeClass('active').filter('#list-link').addClass('active');
    new SL.Controller.go('');
  });

});

var SL = {};

SL.Controller = function() {}

SL.Controller.settings = {
  components : '#add,#list,#show'
};

/* Main dispatcher */
SL.Controller.go = function(where) {
    var loc = where.split("/"); //get rid of hash mark & split on /
    
    SL.Controller.unloadAll();
    
    if(loc[1]) {
      if (loc[1] == '') {
        new SL.Controller.Index();
      }
      else if (loc[1] == 'add') {
        new SL.Controller.Add();
      }
      else {
        console.log(loc)
        new SL.Controller.Show(loc[1],loc[2]);
      }
    }
    else {
      new SL.Controller.Index();
    }
}

SL.Controller.unloadAll = function() {
  //unload add
  $('#add input[type=button]').unbind('click');
  $('#add a').unbind('click');
  
  //unload index
  $('#list #lists .list a').unbind('click');
  
  //unload show
  $('#show span').html('');
  $('#show .description').html('');
  $('#show .buttons a').unbind('click');

  $(SL.Controller.settings.components).hide();
}

SL.Controller.Add = function() {
  $('#add input[type=button]').click(function() {
    // # username
    // self.username = playlist_link.scan(/\/user\/(\w*)\//)[0][0]
    // 
    // # list id
    // self.list = playlist_link.scan(/\/playlist\/(\w*)/)[0][0]
    // 
    // # list name
    // self.name = playlist_link.scan(/('|")(.*)('|")/)[0][1]
    
    //http://ws.spotify.com/lookup?uri=spotify:user:ehn:playlist:7pmKqL9pxpFKb3jABVPmRE
    
    var link = $('#add input[type=text]').val();
    //var name = "placeholder"; // /('|")(.*)('|")/.exec(link)[0];
    var listId = /\/playlist\/(\w*)/.exec(link)[1];
    var username = /\/user\/(\w*)\//.exec(link)[1];
    
    $.post('/list',
      {
        'list_id' : listId,
        'username' : username,
        'description' : $('#add textarea').val()
      },
      function(data) {
        $('#add textarea, #add input[type=text]').val('');
    });
    new SL.Controller.go('');
  });
    
  $('#add a').click(function() {
    new SL.Controller.go('');
  });
  
  $('#add').fadeIn(function() {
    $('#add input[type=text]').focus();    
  });
}

SL.Controller.Index = function() {
  $('#list #lists').load('/list',function(data) {
    $('#list #lists .list a').click(function() {
      SL.Controller.go(this.href.split("#")[1]);
    });
    $('#list').slideDown(500);
  })
}

SL.Controller.Show = function(user,playlist) {
  $.getJSON('/showplaylist?list_id='+playlist,function(data) {
    //(data.username + data.list)
    console.log(data)
    $("<a href='spotify:user:"+data.username+":playlist:"+data.list_id+"'>"+data.name+"</a> <span>by "+data.username+"</span>").appendTo('#show span');
    $('#show .description').html(data.description);
    $('#show').fadeIn();
  });

  $('#show .buttons a').click(function() {
    new SL.Controller.go('');
  });
}