Untitled

<head>
    <style>
        td {
            background: #EEE;
            padding: 4px;
            cursor: pointer;
            border: 1px solid transparent;
            min-width: 50px;
        }
        td:hover {
            background: #777;
            color: #FFF;
        }
        .dashed-cell {
            border: 1px dashed #555;
        }
        .hour {
            width: 60px;
        }
        .mini {
            width: 20px;
        }
        #modal {
            border: 1px solid #AAA;
            background: #FFF;
            display: none;
            padding: 10px;
            width: 200px;
            top: 100px;
            left: 100px;
            position: absolute;
        }

    </style>
</head>
<body>
    <table id="myTable"></table>
    <div id="modal">
        <form action="#">
            Enter a company name:
            <br/>
            <input id="modalInput" type="text" />
            <br/>
            <button id="modalBtn">
                Done
            </button>
        </form>
    </div>
</body>
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
    var hours = [1, 2, 3, 4, 5, 6, 7], increment = 15, current = {};

    get('modalBtn').addEventListener('click', closeModal, false);

    var modal = get('modal'), myTable = get('myTable'), input = get('modalInput'), l = hours.reverse().length, temp = [];

    temp[0] = document.createElement('tr');
    temp[1] = temp[0].appendChild(document.createElement('td'));
    temp[1].setAttribute('class', 'mini');
    temp[2] = temp[0].appendChild(temp[1].cloneNode(true));
    temp[3] = temp[0].appendChild(temp[1].cloneNode(true));
    temp[1].setAttribute('class', 'hour');
    temp[2].innerHTML = '+';
    temp[3].innerHTML = '-';
    temp.length = 1;
    while(l--) {
        temp[1] = temp[0].cloneNode(true);
        temp[2] = temp[1].children;
        temp[2][0].innerHTML = hours[l] + ':00';
        //temp[2][1].addEventListener('click',showModal,false);
        temp[2][1].addEventListener('click', addCell, false);
        temp[2][2].addEventListener('click', removeSlot, false);
        myTable.appendChild(temp[1]);
    }

    temp.length = 0;

    function addCell() {
        var elems = this.parentNode.children, l = elems.length, tar = elems[l - 3];
        insert = tar.cloneNode(true);
        insert.innerHTML = '';
        tar.setAttribute('class', '');
        insert.setAttribute('class', 'dashed-cell');
        this.parentNode.insertBefore(insert, elems[l - 2]);
    }

    function closeModal() {
        $.post("/", {
            method_to_handle_request : "value"
        }, function(data) {
            // do something with data
        });
        var elems = current.parent.children, l = elems.length, tar = elems[l - 3];
        insert = tar.cloneNode(true);
        insert.innerHTML = input.value;
        current.parent.insertBefore(insert, elems[l - 2]);
        modal.style.display = 'none';
        input.value = '';
    }

    function removeSlot() {
        var parent = this.parentNode, elems = parent.children, l = elems.length, tar = elems[l - 3];
        if(elems.length > 3)
            parent.removeChild(tar);
    }

    function getDiaryId() (

    (
    )() {

        var path = document.location.href;
        //href  = "/Cannock/2012-02-11"
        var a = path.split('/');
        //Split the path

        var id = a[1];
        //The array is the result of the split

        //If href is a full url, then we get a wrong id here
        if(a[0] != "") {
            id = a[3];
            //If element is is empty then set the id variable to the 3 element being the site_id = Cannock
        }
        return id;
    }


    function getSlotDayId() (
    )()) {
        var path = document.location.href;
        var a = path.split('/');

        var id = a[3];

        // If href is a full url, then we get a wrong id here
        if(a[0] != "") {
            id = a[5];
        }
        return id;
        alert("Returned id");
    }

    /* you count the elements of array, you can see the date
     *
     *(and the id is what we need) is right to the diary id, by two element.
     * So, you need add 2 to every place,
     where you want to take element into "id" variable. */

    function get(a) {
        return document.getElementById(a);
    });
    }

    $.post("/" + getDiaryId() + "/slot_days/" + getSlotDayId(),

</script>