I have an array which looks something along the lines of

resourceData[0][0] = "pic1.jpg";
resourceData[0][1] = 5;

resourceData[1][0] = "pic2.jpg";
resourceData[1][1] = 2;

resourceData[2][0] = "pic3.jpg";
resourceData[2][1] = 900;

resourceData[3][0] = "pic4.jpg";
resourceData[3][1] = 1;

The numeric represents the z-index of the image. Minimum z-index value is 1. Maximum (not really important) is 2000.

I have all the rendering and setting z-indexes done fine. My question is, I want to have four functions:

// Brings image to z front
function bringToFront(resourceIndex) {

    // Set z-index to max + 1
    resourceData[resourceIndex][1] = getBiggestZindex() + 1;

    // Change CSS property of image to bring to front
    $('#imgD' + resourceIndex).css("z-index", resourceData[resourceIndex][1]);
}

function bringUpOne(resourceIndex) {

}

function bringDownOne(resourceIndex) {

}

// Send to back z
function sendToBack(resourceIndex) {

}

So given then index [3] (900 z):

If we send it to the back, it will take the value 1, and [3] will have to go to 2, but that conflicts with [1] who has a 2 z-index so they need to go to three etc.

Is there an easy programatical way of doing this because as soon as I start doing this it's going to get messy.

It's important that the indexes of the array don't change. We can't sort the array unfortunately due to design.

Update Thanks for answers, I'll post the functions here once they are written incase anyone comes across this in the future (note this code has zindex listed in [6])

// Send to back z
function sendToBack(resourceIndex) {

    resourceData[resourceIndex][6] = 1;
    $('#imgD' + resourceIndex).css("z-index", 1);

    for (i = 0; i < resourceData.length; i++) {
        if (i != resourceIndex) {
            resourceData[i][6]++;
            $('#imgD' + i).css("z-index", resourceData[i][6]);
        }
    }    
}