<script>
    // Toggle the chat panel in and out. 
    function toggleChat() {
        var chat = document.getElementById("live_support_chat");
        var toggle = document.getElementById("toggle_live_support");
        // If the chat panel is currently expanded, close it, otherwise 
        // expand it. Aldo swap out the background image of the toggle button.
        if (chat.style.width == '560px') {
            chat.style.width = '20px';
            toggle.style.background = 'url({{ STATIC_URL }}live_support/images/open_button.png)';
        }
        else {
            chat.style.width = '560px';
            toggle.style.background = 'url({{ STATIC_URL }}live_support/images/close_button.png)';
        }
    }
</script>
<style>
.chat_window {
    width: 20px;
    height: 226px;
    position: fixed;
    display: block;
    top: 50%;
    left: 0;
    z-index: 999;
    background: #fff;
    margin-top: -112px;
    overflow: hidden;
}

.chat_window .live_support {
    width: 535px;
    height: 224px;
    border: thin solid black;
    float: left;
}

.chat_window #toggle_live_support {
    cursor: pointer;
    right: 0;
    position: absolute;
    width: 20px;
    height: 226px;
    background: url({{ STATIC_URL }}live_support/images/open_button.png);
    
}
</style>

<div id="live_support_chat" class="chat_window">
    <iframe class="live_support" src="{{ url }}">
    </iframe>
    <div id="toggle_live_support" onClick="toggleChat()">
    </div>
</div>
