Call feature on the polymer navigation drawer panel

I am stuck. I am playing around with polymer but I do not manage to call the togglePanel function on the drawer panel and my code looks like this:

<!DOCTYPE html>
    <!-- 1. Load platform.js for polyfill support. -->
    <script src="bower_components/platform/platform.js"></script>

    <!-- 2. Use an HTML Import to bring in the element. -->
    <link rel="import"

    <link rel="import"

    <link rel="import"

    <link rel="import"

        function openDrawer() {
            var drawer = document.getElementById("main-drawer");

    <core-drawer-panel id="main-drawer">
        <div drawer style="background-color: #FF0000;">

        <div main style="background-color: #00FF00;">
            <core-toolbar style="background-color: #8888FF;">
                <core-icon-button icon="menu" onclick="openDrawer()" on-tap="openDrawer()"></core-icon-button>
                    <div flex>PageTitle</div>

The function gets called when I click the menu button but nothing more happens, i made sure using an alert.

I guess it has something to do with the shadow DOM but I am not sure. I hope somebody knows how to call its function.

core-drawer-panel stays open all the time if the window size is less than responsiveWidth . By default it will generally stay open unless you are on a tablet device or smaller.

If you set responsiveWidth really high, you can alter the behavior so it only opens on demand.

<core-drawer-panel id="main-drawer" responsiveWidth="900em">