Kinetic image does not display
<p>The setupStage display the images but the handleButtonClick function
does not display the images.
What do I do wrong. Here is the code</p>

<p></p>

<pre><code>&lt;html&gt;&lt;head&gt;
&lt;meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"&gt;

&lt;style&gt;
    body { margin:0px; padding:0px; background:#666; }
&lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;div id="container"&gt;

&lt;button onclick="handleButtonClick('selection1')"&gt;Selection1&lt;/button&gt;
&lt;button onclick="handleButtonClick('selection2')"&gt;Selection2&lt;/button&gt;
&lt;button onclick="resetLayer(window.NettieData.clothesLayer)"&gt;Reset&lt;/button&gt;

&lt;/div&gt;

&lt;script src="kinetic-v4.3.0-beta2.js"&gt;&lt;/script&gt;

&lt;script&gt;
function loadImages(backgroundImages, callback) {
var images = {};
var loadedImages = 0;
var numImages = 0;
for(var src in backgroundImages) { numImages++; }
for(var src in backgroundImages) {
images[src] = new Image();
images[src].onload = function() {
if(++loadedImages &gt;= numImages) {
callback(images);
}
};
images[src].src = backgroundImages[src];
}
}

function loadImages1(clothImages, callback) {
var images = {};
var loadedImages = 0;
var numImages = 0;
for(var src in clothImages) { numImages++; }
for(var src in clothImages) {
images[src] = new Image();
images[src].onload = function() {
if(++loadedImages &gt;= numImages) {
callback(images);
}
};



images[src].src = clothImages[src];
}

}

function setupStage(images) {
var stage = new Kinetic.Stage({ container:'container', width:1290, height:600 });
var layer = new Kinetic.Layer();
var xpub = 347;
var ypub = 454; // Pub
var x = 10;
var y = 10;

// BG
var bgImg = new Kinetic.Image({
image:images.bg,
x:0,
y:y-5,
width:1200,
height:600,
draggable:false,  

});
layer.add(bgImg);

// Menu
var menuImg = new Kinetic.Image({
image:images.menu,
x:x+10,
y:y+50,
width:403,
height:403,
draggable:true,
stroke:'yellow',
strokeWidth:2,
strokeEnabled:true

});
layer.add(menuImg);

// Nettie
var nettieImg = new Kinetic.Image({
image:images.nettie,
x:520,
y:100,
width:203,
height:394,
draggable:false,

});
layer.add(nettieImg);

// Pub
var pubImg = new Kinetic.Image({
image:images.pub,
x:x+820,
y:y+50,
width:xpub,
height:ypub,
draggable:true,
stroke:'yellow',
strokeWidth:2,
strokeEnabled: false
});
layer.add(pubImg);

stage.add(layer);

}

function resetLayer(layer){
layer.clear(); 
}

function handleButtonClick(select, images){

var layer = new Kinetic.Layer();
var x = 10;
var y = 10;

if ( select == "selection1" ) {
</code></pre>

<p>// BG
    var bgImg = new Kinetic.Image({
    image:images.bg,
    x:x+50,
    y:y+50,
    width:403,
    height:403,
    draggable:true,
    stroke:'blue',
    strokeWidth:2,
    strokeEnabled:true</p>

<p>});
    layer.add(bgImg);</p>

<pre><code>var menuImg = new Kinetic.Image({
image:images.menu,
x:x+10,
y:y+50,
width:403,
height:403,
draggable:true,
stroke:'yellow',
strokeWidth:2,
strokeEnabled:true

});
layer.add(menuImg);

var n101Img = new Kinetic.Image({
image:images.n101,
x:x+50,
y:y+50,
width:55,
height:55,
draggable:true,
stroke:'blue',
strokeWidth:2,
strokeEnabled:true

});
layer.add(n101Img);

}
if ( select == "selection2" ) {
</code></pre>

<p>// BG
    var bgImg = new Kinetic.Image({
    image:images.bg,
    x:x+50,
    y:y+50,
    width:403,
    height:403,
    draggable:true,
    stroke:'blue',
    strokeWidth:2,
    strokeEnabled:true</p>

<pre><code>});
layer.add(bgImg);

var n200Img = new Kinetic.Image({
image:images.n200,
x:x+50,
y:y+50,
width:55,
height:55,
draggable:true,
stroke:'blue',
strokeWidth:2,
strokeEnabled:true

});
layer.add(n200Img);

var n201Img = new Kinetic.Image({
image:images.n201,
x:x+50,
y:y+50,
width:55,
height:55,
draggable:true,
stroke:'blue',
strokeWidth:2,
strokeEnabled:true

});
layer.add(n201Img);

}
stage.add(layer); }

var backgroundImages = {

bg:"bg.gif",
menu:"menu.gif",
nettie:"010a.gif",
pub:"pub1.jpg",
};
loadImages(backgroundImages, setupStage);

var clothImages = {

bg:"bg.gif",
n100:"100.gif",
n101:"101.gif",
n200:"200.gif",
n201:"201.gif",
};
loadImages1(clothImages, handleButtonClick);
&lt;/script&gt;

&lt;/body&gt;&lt;/html&gt;
</code></pre>
