Kineticjs Object Handling & Event Listener

I sell custom equipment and on my site, I have a flash tool where customers can assign colors to glove parts and see what it will look like.

I've been working on a HTML5 version of this tool, so the iPad crowd can do the same thing. Click here for what I've done,

I took kineticjs multiple picture loader and hacked it to load all the pics necessary to stage and the color buttons, which are multiple instances of the same image. In their example, it was only 2 images, so they var name each image, which were manipulative. My goal is to dynamically create variable, based on image name.

I'm using a for loop and if statements to position the parts according to their type. If the image being loaded is a button, the original instance is not added to the stage, but another for loop, with a counter, creates instances and put on the stage. The variable is part string+n (wht0). From here I initiate an eventlistener, when clicked is suppose to hide all glove parts pertaining to the option and show the appropriate color. That code I have already in my AS.

I created an eventlistener on the white buttons (first button) that when clicked, I set it to hide one of the white leather part of glove. But when I click the button, I get the error in console that the glove part (ex wlt_wht), I get an error stating that the object is not defined. But when the image was loaded the variable name came from the current array object being loaded.

I added another variable before the callback call, to convert the content of the array to a string and used the document.write to confirm that the object name is correct, but after creating the object its now [object object]. In flash, you manually assign the movie clip name and target.name is available if you call it.

How can I write the Image obj so I can control the object? In the doc there is a reference for id and name as properties of the object, but when I set these, it did not work with me. Sure, I could have manually created each Kinetic.Image(), but there's no fun in that.. especially with 191 images. Any tip on how I can get around this problem?

Checkout http://jsfiddle.net/jacobsultd/b2BwU/6/ to examine and test script.

function loadImages(sources, callback) {
    var assetDir = 'http://dev.nystixs.com/test/inf/';
    var fileExt = '.png';
    var images = {};
    var loadedImages = 0;
    var numImages = 0;
    for (var src in sources) {
        numImages++;
    }
    for (var src in sources) {

        images[src] = new Image();

        images[src].onload = function () {
            var db = sources[src].toString();

            var dbname = db.slice(-0, -4);


            if (++loadedImages >= numImages) {
                callback(images, dbname);
            }
        };
        images[src].src = assetDir + sources[src];
        //images[src].src = assetDir+sources[src]+".png";

    }
}

function initStage(images, db) {

    var shapesLayer = new Kinetic.Layer();
    var messageLayer = new Kinetic.Layer();


    //Loading Images

    var xpos = 0;
    var ypos = 200;
    for (var i in images) {
        var glvP = i.slice(0, 3);
        db = new Kinetic.Image({
            image: images[i],
            x: xpos,
            y: ypos
        });

        if (glvP == "wlt") {
            shapesLayer.add(db);
            db.setPosition(186.95, 7.00);

            //db.hide();
            shapesLayer.draw();
        } else if (glvP == "lin") {

            shapesLayer.add(db);
            db.setPosition(204.95, 205.00);
        } else if (glvP == "plm") {
            shapesLayer.add(db);
            db.setPosition(311.95, 6.00);
        } else if (glvP == "web") {
            shapesLayer.add(db);
            db.setPosition(315.95, 7.00);
        } else if (glvP == "lce") {
            shapesLayer.add(db);
            db.setPosition(162.95, 3.00);
        } else if (glvP == "thb") {
            shapesLayer.add(db);
            db.setPosition(63.00, 28.60);
        } else if (glvP == "bfg") {
            shapesLayer.add(db);
            db.setPosition(167.95, 7.00);
        } else if (glvP == "wst") {
            shapesLayer.add(db);
            db.setPosition(208.95, 234.00);
        } else if (glvP == "fpd") {
            shapesLayer.add(db);
            db.setPosition(252.95, 82.00);
        } else if (glvP == "bac") {
            shapesLayer.add(db);
            db.setPosition(0, 0);
        } else if (glvP == "bnd") {
            shapesLayer.add(db);
            db.setPosition(196.95, 164.00);
        } else {}


        var rect = new Kinetic.Rect({
            x: 710,
            y: 6,
            stroke: '#555',
            strokeWidth: 5,
            fill: '#ddd',
            width: 200,
            height: 325,
            shadowColor: 'white',
            shadowBlur: 10,
            shadowOffset: [5, 5],
            shadowOpacity: 0.2,
            cornerRadius: 10
        });
        shapesLayer.add(rect);


        // End of Glove Parts Tabs

        //Load Color Buttons

        if (glvP == "wht") {

            xpos = -5.00;
            bpos = 375;
            var zpos = -5.00;
            var tpos = -5.00;
            db.setPosition(xpos, bpos);
            //shapesLayer.add(db);

            var n = 0;
            for (n = 0; n < 12; n++) {
                if (n < 4) {
                    var glvB = "wht" + n;
                    var btn = glvB;

                    glvB = new Kinetic.Image({
                        image: images[i],
                        width: 18,
                        height: 18,
                        id: 'wht0'
                    });

                    glvB.on('mouseout', function () {
                        blankText('');
                    });
                    glvB.on('mouseover', function () {
                        writeColors('White', btn);
                    });
                    glvB.on('click', function () {
                        console.log(glvB + " clicked");
                        wht.hide();
                        shapesLayer.draw();
                    });

                    glvB.setPosition((xpos + 20), bpos);
                    shapesLayer.add(glvB);
                    xpos = (xpos + 230);

                }

You can use your .png image filenames to automate your color-button coding efforts.

No need to manually code 10 glove components X 21 colors per component (210 color buttons).

Assume you’ve split the each image URL (filename) to get the color and glove-type.

Then you can create all 210 color buttons with one piece of reusable code.

Demo: http://jsfiddle.net/m1erickson/H5FDc/

Example Code:

// Usage:

addColorButton(100,100,"red","fingers");

// 1 function to add 210 color-buttons

function addColorButton(x,y,color,component){

    // create this button

    var button=new Kinetic.Image({
        x:x,
        y:y,
        image: imageArray[ color+"-color-button" ],        
    });

    // save the color as a property on this button

    button.gloveColor=color;

    // save the glove component name as a property on this button

    button.gloveComponent=component; // eg, "fingers"

    // resuable click handler
    // Will change the gloves "#fingers" to "red-fingers-image"

    button.on("click",function(){

        // eg. get the image "red-fingers-image"
        var newImage = imageArray[this.gloveColor+"-"+this.gloveComponent+"-image"];

        // eg. get the Kinetic.Image with  id:”finger” 
        var glovePart = layer.find("#"+this.gloveComponent”][0];

        // change the Kinetic id:finger’s image
        // to the red-fingers-image
        glovePart.setImage(newImage);

        layer.draw();
    });

    layer.add(button);
}