﻿function ExpanderViewModel(blockID) {
    var self = this;

    self.container = document.getElementById(blockID + "-expander-container")
    self.arrow = self.container.children[0].children[0];
    self.expanderContent = self.container.children[1];
    self.open = ko.observable(false);

    self.operate = function () {
        if (self.open() == false) {
            self.arrow.classList.remove('arrow-up');
            self.expanderContent.classList.remove('expander-up');

            self.arrow.classList.add('arrow-down');
            self.expanderContent.classList.add('expander-down');

            self.open(true);
        } else {
            self.arrow.classList.remove('arrow-down');
            self.expanderContent.classList.remove('expander-down');

            self.arrow.classList.add('arrow-up');
            self.expanderContent.classList.add('expander-up');

            self.open(false);
        }
    }
}

function runExpanderViewModel(blockID) {
    var el = document.getElementById("blockId-" + blockID);
    ko.cleanNode(el);

    ko.applyBindings(new ExpanderViewModel(blockID), el);
}