Task 1 - Javascript 2 - Practice

function createCalendar(selector, events) {
    var calendarDiv = document.querySelector(selector),
        daysOfWeekArray = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];

    calendarDiv.style.width = "1200px";
    calendarDiv.style.marginLeft = "20px";

    function createDateBlocks() {
        var blocksFragment = document.createDocumentFragment(),
            block = document.createElement("div"),
            blockTitle = document.createElement("div");

        // Block Styles
        block.style.cssFloat = "left";
        block.style.width = "150px";
        block.style.height = "150px";
        block.style.border = "1px solid black";

        // Block Title Styles
        blockTitle.style.height = "20px";
        blockTitle.style.textAlign = "center";
        blockTitle.style.background = "#cccccc";
        blockTitle.style.fontWeight = "bold";
        blockTitle.className = "blockTitle";
        blockTitle.style.borderBottom = "1px solid black";

        for (var i = 0; i < 30; i++) {
            block.setAttribute("id", i + 1);

            while (block.firstChild) {
                block.removeChild(block.firstChild);
            }

            blockTitle.innerHTML = daysOfWeekArray[i % 7] + " " + (i + 1) + " June 2014";

            block.appendChild(blockTitle.cloneNode(true));

            var clonedBlock = block.cloneNode(true);

            clonedBlock.addEventListener("click", clickDate);
            clonedBlock.addEventListener("mouseover", hoverIn);
            clonedBlock.addEventListener("mouseout", hoverOut);

            blocksFragment.appendChild(clonedBlock);
        }

        return blocksFragment;
    }

    function addEventsToCalendar() {
        for (var i = 0; i < events.length; i++) {
            var currentEvent = events[i];
            var currentEventBlock = document.getElementById(currentEvent.date);

            // Yeah yeah there are smarter ways im on exam and i want to do it fast;
            var textToBlock = "<p style='margin:0'>";
            textToBlock += currentEvent.hour + "h. ";
            textToBlock += currentEvent.title + " ";
            textToBlock += "</p>";

            currentEventBlock.innerHTML += textToBlock;
        }
    }

    function hoverIn() {
        title = this.getElementsByClassName("blockTitle")[0];
        title.style.background = "#999";
    }

    function hoverOut() {
        title = this.querySelector(".blockTitle");
        if (title.parentNode.className != "selected") {
            title.style.background = "#ccc";
        } else {
            title.style.background = "#fff";
        }
    }

    function clickDate() {
        // Select previously selected items and remove style
        var selectedElement = document.getElementsByClassName("selected")[0],
            selectedElementID = 0; // Enabling Deselect of block;

        if (selectedElement != undefined) {
            var titleElement = selectedElement.getElementsByClassName("blockTitle")[0];
            titleElement.style.background = "#ccc";
            selectedElement.setAttribute('class', '');
            selectedElementID = selectedElement.getAttribute('id');
        }

        if (selectedElementID !== this.id) {
            // Set this item style
            this.setAttribute('class', 'selected');
            titleElement = this.getElementsByClassName("blockTitle")[0];
            titleElement.style.background = "#fff";
        }
    }

    // Add blocks to main div
    calendarDiv.appendChild(createDateBlocks());

    // Add Events to calendar
    addEventsToCalendar();
}