function RefreshNowPlaying() {

var req = new XMLHttpRequest();

req.onreadystatechange = function () {
  if (this.readyState != 4 || this.status != 200) return;
  document.getElementById('nowplaying_content').innerHTML=this.responseText;
};

req.open("GET", "ajax/trackinfo.php", true);
req.send();

}

function RefreshTitle() {

var req = new XMLHttpRequest();

req.onreadystatechange = function () {
  if (this.readyState != 4 || this.status != 200) return;
  document.title='MPD Player: '+this.responseText;
};

req.open("GET", "ajax/trackname.php", true);
req.send();
}

function RefreshPlayerState() {

var req = new XMLHttpRequest();

req.onreadystatechange = function () {
  if (this.readyState != 4 || this.status != 200) return;
  if (this.responseText=="play") {
    document.getElementById('playpausebutton').innerHTML="<span onclick=\"Command('pause')\"><img class=\"button\" src=\"images/pause.png\"></span>";
  } else {
    document.getElementById('playpausebutton').innerHTML="<span onclick=\"Command('play')\"><img class=\"button\" src=\"images/play.png\"></span>";
  }
};

req.open("GET", "ajax/playerstate.php", true);
req.send();

}

function RefreshRepeatState() {

var req = new XMLHttpRequest();

req.onreadystatechange = function () {
  if (this.readyState != 4 || this.status != 200) return;
  if (this.responseText=="1") {
    document.getElementById('repeatstate').innerHTML="<img src=\"images/repeaton.png\"></a>";
  } else {
    document.getElementById('repeatstate').innerHTML="<img src=\"images/repeatoff.png\"></a>";
  }
};

req.open("GET", "ajax/repeatstate.php", true);
req.send();

}

function RefreshVolume() {

var req = new XMLHttpRequest();

req.onreadystatechange = function () {
  if (this.readyState != 4 || this.status != 200) return;
  document.getElementById('volume_total').innerHTML="<div id=\"volume_actual\" style=\"width:"+this.responseText+"%\">";
};

req.open("GET", "ajax/volume.php", true);
req.send();

}

function RefreshPageStatus() {

  RefreshTitle();
  RefreshNowPlaying();
  RefreshPlayerState();
  RefreshRepeatState();
  RefreshVolume();

}

function RefreshPlaylist() {

var req = new XMLHttpRequest();

req.onreadystatechange = function () {
  if (this.readyState != 4 || this.status != 200) return;
  document.getElementById('playlist').innerHTML=this.responseText;
};

req.open("GET", "ajax/playlist.php", true);
req.send();

}

function EditPlayList(dir) {

var req = new XMLHttpRequest();

req.onreadystatechange = function () {
  if (this.readyState != 4 || this.status != 200) return;
  document.getElementById('playlist').innerHTML=this.responseText;
};

if (!dir) { dir = ''; };

req.open("GET", "ajax/editplaylist.php?dir="+dir, true);
req.send();

}

function LoadPlayList() {

var req = new XMLHttpRequest();

req.onreadystatechange = function () {
  if (this.readyState != 4 || this.status != 200) return;
  document.getElementById('playlist').innerHTML=this.responseText;
};

req.open("GET", "ajax/playlists.php", true);
req.send();

}

function RefreshPageContent() {

  RefreshPageStatus();
  RefreshPlaylist();

}

function Command(cmd) {

var req = new XMLHttpRequest();

req.onreadystatechange = function () {
  if (this.readyState != 4 || this.status != 200) return;
  RefreshPageStatus();
};

req.open("GET", "ajax/command.php?task="+cmd, true);
req.send();

}

function PlaylistCommand(cmd,item) {

var req = new XMLHttpRequest();

req.onreadystatechange = function () {
  if (this.readyState != 4 || this.status != 200) return;
  RefreshPageContent();
};

req.open("GET", "ajax/playlist-command.php?item="+item+"&task="+cmd, true);
req.send();

}

function PlaylistCommandRefStatus(cmd,item) {

var req = new XMLHttpRequest();

req.onreadystatechange = function () {
  if (this.readyState != 4 || this.status != 200) return;
  RefreshPageStatus();
};

req.open("GET", "ajax/playlist-command.php?item="+item+"&task="+cmd, true);
req.send();

}

function PlaylistEditCommand(cmd,item) {

var req = new XMLHttpRequest();

req.onreadystatechange = function () {
  if (this.readyState != 4 || this.status != 200) return;
  RefreshPageStatus();
};

req.open("GET", "ajax/playlist-command.php?item="+item+"&task="+cmd, true);
req.send();

}

function PlaylistEditCommandRefFull(cmd,item) {

var req = new XMLHttpRequest();

req.onreadystatechange = function () {
  if (this.readyState != 4 || this.status != 200) return;
  RefreshPageContent();
};

req.open("GET", "ajax/playlist-command.php?item="+item+"&task="+cmd, true);
req.send();

}


function PlaylistItemsCommand(cmd) {

var req = new XMLHttpRequest();

var selected = [].filter.call(document.getElementsByName('itemlist[]'), function(c) {
  return c.checked;
}).map(function(c) {
  return c.value;
});
  
req.onreadystatechange = function () {
  if (this.readyState != 4 || this.status != 200) return;
  RefreshPageContent();
};

params=selected.map(function(el) {
        //Map each field into a name=value string, make sure to properly escape!
        return 'itemlist[]=' + encodeURIComponent(el);
    }).join('&');

req.open("POST", "ajax/playlist-command.php?task="+cmd, true);
req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
req.send(params);

}

function PlaylistEditItemsCommand(cmd,dir) {

var req = new XMLHttpRequest();

var selected = [].filter.call(document.getElementsByName('itemlist[]'), function(c) {
  return c.checked;
}).map(function(c) {
  return c.value;
});
  
params=selected.map(function(el) {
        //Map each field into a name=value string, make sure to properly escape!
        return 'itemlist[]=' + encodeURIComponent(el);
    }).join('&');

req.onreadystatechange = function () {
  if (this.readyState != 4 || this.status != 200) return;
  RefreshPageStatus();
};

req.open("POST", "ajax/playlist-command.php?dir="+dir+"&task="+cmd, true);
req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
req.send(params);

}

setInterval(RefreshPageStatus, 10000);