/* JavaScript source for the Show demo. */

var msie = apprisant.Toolkit.msie;

var diagram;

window.onload = function() {

    diagram = new apprisant.Diagram('diagram');
    diagram.buildDiagram
	({ bgImage:'hall.png', 
	   map:true, // create an image map from the elements
	   dim:{ w:609, h:289 }, 
	   rollover:true, 
	   selectCB:showSelection  // selection handler
	});

    // Booth label annotation
    var boothRen = new apprisant.SpanRen({
	content:'@id', styleClass:'booth', align:'C' });
    
    // Image and label for selection
    var selImage = new apprisant.ImgRen({
	    src:'showmarker.png', dim:{ w:39, h:39 }, align:'C',
	    state:'select', shared:true
	});
    var selLabel = new apprisant.SpanRen({
	    content:'@id', styleClass:'booth', align:'C',
	    state:'select', shared:true
	});

    // Rollover panel
    var rollPanel = new apprisant.SpanRen({
	    content:'@name', styleClass:'rollPanel',
	    offset: { x:6, y:-8 }, align:'SW',
	    state:'focus', shared:true, parent:'document',
	    fade:(msie && msie < 9) ? null : { dur:150, rate:30 }
	});

    diagram.addRenderers([ boothRen, selImage, selLabel, rollPanel ]);

    // Configure and add the elements
    calcPos(elements);
    diagram.add(elements);
    diagram.render(elements);
}

// Selection handler populates the edit fields
function showSelection(args) {
    var e = args.element;
    document.getElementById('label').innerHTML = e ? e.id : '';
    document.getElementById('vendor').value = e ? e.name : '';
}

// Change button's handler changes the booth name
function setBooth() {
    var e = diagram.getSelection();
    if (e) e.name = document.getElementById('vendor').value;
}

// Calculates the position of each element as the center point of the area
function calcPos(ee) {
    var a, i;
    for (i = 0; i < ee.length; i++) {
	var e = ee[i];
	a = e.getArea();
	e.pos = { x:(a.x + a.w/2), y:(a.y + a.h/2) };
    }
}


// Data
var E = apprisant.Element;
var elements = 
    [   new E({ id:'M2', name:'Forefront Products', 
		area:{ x:307, y:180, w:44, h:41 } }),
	new E({ id:'M1', name:'Midnight Light', 
		area:{ x:307, y:83, w:44, h:41 } }),
	new E({ id:'D17', name:'At Last The End', 
		area:{ x:401, y:179, w:30, h:12 } }),
	new E({ id:'D16', name:'Curios', 
		area:{ x:435, y:179, w:28, h:12 } }),
	new E({ id:'D15', name:'Rats Nest Antiques', 
		area:{ x:467, y:179, w:28, h:12 } }),
	new E({ id:'D14', name:'Cotton Press', 
		area:{ x:499, y:179, w:28, h:12 } }),
	new E({ id:'D13', name:'Games, games, games', 
		area:{ x:499, y:161, w:28, h:13 } }),
	new E({ id:'D12', name:'Gifts Galore', 
		area:{ x:467, y:161, w:28, h:13 } }),
	new E({ id:'D11', name:'The Fudge Factory', 
		area:{ x:435, y:161, w:28, h:13 } }),
	new E({ id:'D10', name:'Dogs and Cats', 
		area:{ x:401, y:161, w:30, h:13 } }),
	new E({ id:'C17', name:'Helens Housewares', 
		area:{ x:401, y:115, w:30, h:12 } }),
	new E({ id:'C16', name:'Smiths Antiques', 
		area:{ x:435, y:115, w:28, h:12 } }),
	new E({ id:'C15', name:'Furnishings from Yore', 
		area:{ x:467, y:115, w:28, h:12 } }),
	new E({ id:'C14', name:'Here and Now', 
		area:{ x:499, y:115, w:28, h:12 } }),
	new E({ id:'C13', name:'Antiques from Antiquity', 
		area:{ x:499, y:98, w:28, h:12 } }),
	new E({ id:'C12', name:'Ribbons n Things', 
		area:{ x:467, y:98, w:28, h:12 } }),
	new E({ id:'C11', name:'Country Cottage', 
		area:{ x:435, y:98, w:28, h:12 } }),
	new E({ id:'C10', name:'The Little Mermaid', 
		area:{ x:401, y:98, w:30, h:12 } }),
	new E({ id:'B17', name:'Hanging Lanterns', 
		area:{ x:114, y:179, w:28, h:12 } }),
	new E({ id:'B16', name:'Nine Lives Houseplants', 
		area:{ x:146, y:179, w:30, h:12 } }),
	new E({ id:'B15', name:'Greener Than Thou', 
		area:{ x:178, y:179, w:30, h:12 } }),
	new E({ id:'B14', name:'Hard Rock Landscaping', 
		area:{ x:212, y:161, w:22, h:29 } }),
	new E({ id:'B13', name:'Lights Aglow', 
		area:{ x:178, y:162, w:30, h:12 } }),
	new E({ id:'B12', name:'Sports Galore', 
		area:{ x:146, y:162, w:30, h:12 } }),
	new E({ id:'B11', name:'Surfer Tricks', 
		area:{ x:114, y:162, w:28, h:12 } }),
	new E({ id:'B10', name:'Ocean Plus', 
		area:{ x:81, y:161, w:28, h:29 } }),
	new E({ id:'A17', name:'Oriental Imports', 
		area:{ x:114, y:115, w:28, h:12 } }),
	new E({ id:'A16', name:'Western Lighting', 
		area:{ x:146, y:115, w:30, h:12 } }),
	new E({ id:'A15', name:'Doorway Signs', 
		area:{ x:178, y:115, w:30, h:12 } }),
	new E({ id:'A14', name:'The Middle Initial', 
		area:{ x:212, y:98, w:22, h:26 } }),
	new E({ id:'A13', name:'Merry Mingling', 
		area:{ x:178, y:98, w:30, h:12 } }),
	new E({ id:'A12', name:'Jungle Craft', 
		area:{ x:146, y:98, w:30, h:12 } }),
	new E({ id:'A11', name:'The Pottery Barn', 
		area:{ x:114, y:98, w:28, h:12 } }),
	new E({ id:'A10', name:'Silver Surprises', 
		area:{ x:81, y:98, w:28, h:26 } }),
	new E({ id:'E14', name:'Brandywine', 
		area:{ x:561, y:178, w:29, h:28 } }),
	new E({ id:'E13', name:'Dinnerware Etc.', 
		area:{ x:561, y:147, w:29, h:27 } }),
	new E({ id:'E12', name:'Pots and Pans', 
		area:{ x:561, y:114, w:29, h:28 } }),
	new E({ id:'E11', name:'The Kitchen Store', 
		area:{ x:561, y:82, w:29, h:28 } }),
	new E({ id:'S15', name:'Le Chocolaterie', 
		area:{ x:530, y:211, w:59, h:59 } }),
	new E({ id:'S14', name:'Chocolate Teddy', 
		area:{ x:466, y:241, w:62, h:29 } }),
	new E({ id:'S13', name:'Bears Den Fudge', 
		area:{ x:408, y:241, w:54, h:29 } }),
	new E({ id:'S12', name:'Candy Tufts', 
		area:{ x:147, y:241, w:51, h:29 } }),
	new E({ id:'S11', name:'Fairy Floss', 
		area:{ x:82, y:241, w:61, h:29 } }),
	new E({ id:'S10', name:'Southern Cactus', 
		area:{ x:20, y:211, w:55, h:59 } }),
	new E({ id:'W14', name:'West Hills', 
		area:{ x:20, y:178, w:25, h:28 } }),
	new E({ id:'W13', name:'Chocolate Cream Soldier', 
		area:{ x:20, y:147, w:25, h:27 } }),
	new E({ id:'W12', name:'Pea Pod Pearl', 
		area:{ x:20, y:114, w:25, h:28 } }),
	new E({ id:'W11', name:'Prairie Moon', 
		area:{ x:20, y:82, w:25, h:28 } }),
	new E({ id:'N20', name:'Twenty Questions', 
		area:{ x:530, y:20, w:59, h:55 } }),
	new E({ id:'N19', name:'Classic Creamery', 
		area:{ x:499, y:20, w:27, h:25 } }),
	new E({ id:'N18', name:'Handy Man', 
		area:{ x:467, y:20, w:28, h:25 } }),
	new E({ id:'N17', name:'Heidy and Howdy', 
		area:{ x:403, y:20, w:60, h:25 } }),
	new E({ id:'N16', name:'Northwest Confections', 
		area:{ x:339, y:20, w:60, h:25 } }),
	new E({ id:'N15', name:'Milky Way', 
		area:{ x:275, y:20, w:60, h:25 } }),
	new E({ id:'N14', name:'The Ice Cream Store', 
		area:{ x:211, y:20, w:60, h:25 } }),
	new E({ id:'N13', name:'Lucky 13', 
		area:{ x:147, y:20, w:60, h:25 } }),
	new E({ id:'N12', name:'Frozen Ice Co.', 
		area:{ x:115, y:20, w:27, h:25 } }),
	new E({ id:'N11', name:'Peter Pan', 
		area:{ x:83, y:20, w:26, h:25 } }),
	new E({ id:'N10', name:'NorthCorner Company', 
		area:{ x:20, y:20, w:55, h:55 } })
    ];