Handling Layers

In our first workshop we showed you how to create the nine menu layers. To simplify their management, we will create for each one a 'token', i.e. an intermediate element, that will be easier to handle and address. This is done on lines 219-230 through the layerObject function:

218: case 'layerSetup' :
219:     contentLyr = new layerObject('contentLayer',20,40);
220:     scrollerLyr = new layerObject('scrollerLayer',available_width-50,50);
221:     
222:     startLyr = new layerObject('startLayer',5,5);
223:     parentLyr = new layerObject('parentLayer',parseInt(startLyr.left),parseInt(startLyr.top)+26);
224:     child1Lyr = new layerObject('child1Layer',parseInt(parentLyr.left)+210,parseInt(parentLyr.top)+22);

         [...]

230:     child7Lyr = new layerObject('child7Layer',parseInt(parentLyr.left)+210,parseInt(parentLyr.top)+154);

Like the imageObject function described earlier, the layerObject function directly changes our layers' properties. What is the advantage of using it? It helps us to easily change the sub-menu's coordinates! Each layer receives two values for its horizontal and vertical positioning. While the horizontal positioning value remains fixed, the vertical positioning value is increased by 22 pixels for each successive sub-menu:

parseInt(parentLyr.top)+22
parseInt(parentLyr.top)+44
[...]
parseInt(parentLyr.top)+154


Once our nine layers are in position, we can move to the next step. We are not going to fill in our menu yet (be patient, we will get to it very soon), but we will now define the hierarchy.