pixelcanvas

//returns an array of objects in format [{id: 3, value: 30}, {id: 6, value: 43}] etc.
var list = [];
for(a = 0; a < document.getElementsByClassName('statusbox').length; a++) {
//by percentage
    //list.push({id: a, value: +document.getElementsByClassName('statusbox')[a].innerText.split("\n")[1].slice(0, -1)});
//by pixels
    list.push({id: a, value: +document.getElementsByClassName('statusbox')[a].innerText.split("\n")[2].slice(1, -3)});
}
list.sort(function (a, b) {
    return (a.value - b.value);
});
console.log(list);

//sorts via the list
var result = "";
for (a = 0; a < list.length; a++) {
    result += document.getElementById('leftPane').getElementsByTagName('div')[(list[a].id*6)+1].outerHTML;
    for (b = 0; b < 2; b++) {
        var temp = "";
        temp += document.getElementById('leftPane').getElementsByTagName('div')[(list[a].id*6)+3+b].children[0].outerHTML;
        temp = temp.substr(0, temp.indexOf("><")) + " src=\"" + document.getElementById('leftPane').getElementsByTagName('div')[(list[a].id*6)+3+b].children[0].toDataURL() + "\">";
        temp = temp.replace("canvas", "img");
        result += temp;
    }
    result += document.getElementById('leftPane').getElementsByTagName('div')[(list[a].id*6)+5].outerHTML;
}
document.getElementById('leftPane').innerHTML = result;