Ошибка JavaScript в Webkit

Question

Я написал скрипт, который уменьшает ширину div, если переменная равна true, а затем устанавливает его в false. Если переменная равна false, это увеличивает ширину div. Код для этого:

var open = false;
function chat() {
    if (!open) {
        document.getElementById("frameholder").innerHTML="div is wide";
        document.getElementById("window").style.width="1300px";
        document.getElementById("window").style.marginLeft="-650px";
        open = true;
    }
}
function unchat() {
    if (open) {
        setTimeout("document.getElementById('frameholder').innerHTML='div is skinny'",500);
        document.getElementById("window").style.width="900px";
        document.getElementById("window").style.marginLeft="-450px";
        open = false;
    }
}

HTML выглядит примерно так ...

<a href="#" onclick="chat()">Open chat</a><br />
<a href="#" onclick="unchat()">Close chat</a>
<div id="window">
  <div id="video">
  </div>
  <div id="frameholder">
  </div>
</div>

По какой-то причине это работает только один раз в Chrome (webkit). Я могу расширить div, затем уменьшить div, но я не могу повторно расширить его. Он отлично работает в Firefox и IE. Есть идеи почему?

РЕДАКТИРОВАТЬ: обновил мой код до текущего состояния и добавил пример HTML. К сожалению, у меня все та же проблема ...

РЕДАКТИРОВАТЬ 2: Я сдаюсь на этом. В любом случае, эта страница в основном для моего использования, и я почти исключительно использую Firefox, поэтому я полагаю, что это не такая уж большая проблема.

Answer 1

Примерно так должно быть:

var open = false,
    $button = document.getElementById('clickme'),
    $frameholder = document.getElementById('frameholder'),
    $window = document.getElementById('window'),
    timer;

function toggleChat()
{
    clearTimeout(timer);
    if (open)
    {
        timer = setTimeout(function ()
        {
            $frameholder.innerHTML="div is skinny";
        }, 500);
        $window.style.width="900px";
        $window.style.marginLeft="-450px";
    }
    else
    {
        timer = setTimeout(function ()
        {
            $frameholder.innerHTML="div is wide";
        }, 500);
        $window.style.width="1300px";
        $window.style.marginLeft="-650px";
    }
    open = !open;
}

toggleChat();

$button.addEventListener('click', toggleChat, false);

Демонстрация: http://jsfiddle.net/mattball/nuzyJ/

---

Re OP комментарий:

Похожемного дополнительного кода

Вы можете сделать это намного более кратко и аккуратно с помощью классов jQuery + CSS, и это также будет работать в более широком диапазоне браузеров.Для краткости я пропустил изменение текста в фрейме, но вот идея:

var $frameholder = $('#frameholder'),
    $window = $('#window');

$('#clickme').click(function ()
{
    $window.toggleClass('wide');
}).click();

http://jsfiddle.net/mattball/pgTJn/