Ordering z-indexes in an array

Question

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]);
        }
    }    
}

Answer 1

Loops! This function will reorder affected images around it. It will work with images that have widely separated z-index values. It also does not perform any changes unless it needs to.

EDIT: added function to do the CSS work EDIT 2: Corrected problem with top/bottom functions - it wasn't moving all the images affected, now it is.

var resourceData = Array();
resourceData[0] = Array();
resourceData[0][0] = "pic1.jpg";
resourceData[0][1] = 5;

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

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

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

function _doMoveImage(ptr) {
    // Change CSS property of image
    $('#imgD' + ptr).css("z-index", resourceData[ptr][1]);
}

// Brings image to z front
function bringToFront(resourceIndex) {
    var highest_idx = 0;
    for (var i = 0; i < resourceData.length; i++) {
        // for all images except the target
        if (i != resourceIndex) {
            // preserve the highest index we encounter
            if (highest_idx < resourceData[i][1])
                highest_idx = resourceData[i][1];
            // move any images higher than the target down by one
            if (resourceData[i][1] > resourceData[resourceIndex][1]) {
                resourceData[i][1]--;
                _doMoveImage(i);
            }
        }
    }

    // now move the target to the highest spot, only if needed
    if (resourceData[resourceIndex][1] < highest_idx) {
        resourceData[resourceIndex][1] = highest_idx;
        _doMoveImage(resourceIndex);
    }

    return;
}

function bringUpOne(resourceIndex) {
    var next_idx = 2000;
    var next_ptr = false;
    for (var i =0; i < resourceData.length; i++) {
        // for all images except the target
        if (
            i != resourceIndex &&  
            next_idx > resourceData[i][1] && 
            resourceData[i][1] > resourceData[resourceIndex][1]
        ){
            next_idx = resourceData[i][1];
            next_ptr = i;
        }
    }

    // only move if needed
    if (next_ptr) {
        // target takes next's index
        resourceData[resourceIndex][1] = resourceData[next_ptr][1];
        // next's index decreases by one
        resourceData[next_ptr][1]--;
        _doMoveImage(resourceIndex);
        _doMoveImage(next_ptr);
    }
    return;
}

function bringDownOne(resourceIndex) {
    var next_idx = 0;
    var next_ptr = false;
    for (var i =0; i < resourceData.length; i++) {
        // for all images except the target
        if (
            i != resourceIndex &&  
            next_idx < resourceData[i][1] && 
            resourceData[i][1] < resourceData[resourceIndex][1]
        ){
            next_idx = resourceData[i][1];
            next_ptr = i;
        }
    }
    // only move if needed
    if (next_ptr) {
        // target takes next's index
        resourceData[resourceIndex][1] = resourceData[next_ptr][1];
        // next's index decreases by one
        resourceData[next_ptr][1]++;
        _doMoveImage(resourceIndex);
        _doMoveImage(next_ptr);
    }
}

// Send to back z
function sendToBack(resourceIndex) {
    var lowest_idx = 2000;
    for (var i = 0; i < resourceData.length; i++) {
        // for all images except the target
        if (i != resourceIndex) {
            // preserve the lowest index we encounter
            if (lowest_idx > resourceData[i][1])
                lowest_idx = resourceData[i][1];
            // move any images lower than the target up by one
            if (resourceData[i][1] < resourceData[resourceIndex][1]) {
                resourceData[i][1]++;
                _doMoveImage(i);
            }
        }
    }

    // now move the target to the lowest spot, only if needed
    if (resourceData[resourceIndex][1] > lowest_idx) {
        resourceData[resourceIndex][1] = lowest_idx;
        _doMoveImage(resourceIndex);
    }
    return;
}

Answer 2

Not tested, but how about this. For bringUpOne, bringDownOne one you can swap the z-indexes, e.g:

function bringUpOne(resourceIndex) {

    var myZIndex = resourceData[resourceIndex][1];
    var nextZIndex =  resourceData[resourceIndex + 1][1];

    resourceData[resourceIndex][1] = nextZIndex;
    resourceData[resourceIndex + 1][1] = myZindex;

}

For bringing to the front:

function bringToFront(resourceIndex) {

    var maxZIndex = resourceData[maxResourceIndex][1];
    resourceData[resourceIndex][1] = maxZIndex + 1;

}

Now that's all fine. But what happens if you want to successively set images to the back? You can either set the zIndex to 0 each time (don't know how many you'll have actually visiable at any time) or you can start with the lowest zIndex set to something like 2000 or 10000 or whatever, which will acccomodate many calls to setToBack.

Edit: This assumes the list is ordered by zIndex to start with.

Answer 3

There it is: copy your structure and have it properly ordered, or if you prefer call it indexed. When you need the picture find the proper z-index and proceed w/ the rendering.

You can do that dynamically and use heap, if you don't wish to copy the entire structure.