Custom OpenLayers Panel and Buttons part 2

Like we said, Panel is just a parent div for button divs with some extra stuff. Let's continue with our code and create one.

    var panelButtons = [simpleBtn, simpleToggleBtn, simpleTool1Btn, simpleTool2Btn];

    panel = new OpenLayers.Control.Panel({
        displayClass: "controlPanel",
        defaultControl: panelButtons[3],
    });

    panel.addControls(panelButtons);
    
    //adding toolbar control to the map
    map.addControl(panel);

First, we created an array of buttons from previous post called 'panelButtons'.
Then we instantiated 'panel' object (OpenLayers.Control.Panel) with properties 'displayClass' and 'defaultControl' set. The first one is CSS class of panel's div and the second one is a control that will be activated by default when page loads, in our case it's the 4th one 'simpleTool2Btn'.
Next we added the array to the panel using panel's method addControls(Array).
Last we added our panel as control to our map object using map's method addControl(control object), provided that you have previously instantiated map object with the variable name 'map' (var map = new OpenLayers.Map()).
CSS setup is tedious, but simple enough. Note that for button that have displayClass set to simpleBtn you would have to use .simpleBtnItemInactive{...} and .simpleBtnItemActive{...}. The first class is for button being "idle" or not pressed and the other is when button is activated. This is used only by toggle and tool types of button.
Also note the difference between toggle and tool while using panel on the page. Toggle will stay active even when you switch tools, while only one tool can be activated at the time.

Here's how it should look at the end.

 And here is the entire code (HTML,CSS and JS).Cheers.