var timePickerElement;

function TimePicker() {
    this.selectedInputField;
    timePickerElement = this;

    this.TimePickerPanel = document.createElement("div");
    this.TimePickerPanel.id = "TimePickerPanel";
    this.TimePickerPanel.style.position = "absolute";
    this.TimePickerPanel.style.width = "174px"
    this.TimePickerPanel.style.height = "200px";
    this.TimePickerPanel.style.fontFamily = "Arial";
    this.TimePickerPanel.style.fontSize = "12px";
    this.TimePickerPanel.style.border = "1px solid #ffffff";
    this.TimePickerPanel.style.backgroundColor = "#f4f4f4";
    this.TimePickerPanel.style.display = "none";
    this.TimePickerPanel.style.zIndex = "1";

    this.TimePickerTimePanel = document.createElement("div");
    this.TimePickerTimePanel.id = "TimePickerTimePanel";
    this.TimePickerTimePanel.style.position = "absolute";
    this.TimePickerTimePanel.style.top = "8px"
    this.TimePickerTimePanel.style.left = "2px";
    this.TimePickerTimePanel.style.width = "60px"
    this.TimePickerTimePanel.style.height = "16px";
    this.TimePickerTimePanel.style.lineHeight = "16px";
    this.TimePickerTimePanel.style.fontSize = "14px";
    this.TimePickerTimePanel.style.textAlign = "center";
    this.TimePickerPanel.appendChild(this.TimePickerTimePanel);

    this.TimePickerAmPmTimePanel = document.createElement("div");
    this.TimePickerAmPmTimePanel.id = "TimePickerTimePanel";
    this.TimePickerAmPmTimePanel.style.position = "absolute";
    this.TimePickerAmPmTimePanel.style.top = "24px"
    this.TimePickerAmPmTimePanel.style.left = "2px";
    this.TimePickerAmPmTimePanel.style.width = "60px"
    this.TimePickerAmPmTimePanel.style.height = "14px";
    this.TimePickerAmPmTimePanel.style.lineHeight = "14px";
    this.TimePickerAmPmTimePanel.style.fontSize = "10px";
    this.TimePickerAmPmTimePanel.style.textAlign = "center";
    this.TimePickerPanel.appendChild(this.TimePickerAmPmTimePanel);

    this.TimePickerSaveButton = document.createElement("div");
    this.TimePickerSaveButton.id = "TimePickerSaveButton";
    this.TimePickerSaveButton.style.position = "absolute";
    this.TimePickerSaveButton.style.top = "14px"
    this.TimePickerSaveButton.style.right = "66px";
    this.TimePickerSaveButton.style.width = "50px"
    this.TimePickerSaveButton.style.height = "17px";
    this.TimePickerSaveButton.style.cursor = "pointer";
    this.TimePickerSaveButton.style.backgroundImage = "url(http://image.locallinkup.com/plink/edit_mode_save_grey_off.png)";
    this.TimePickerSaveButton.setAttribute("onmouseover", "timePickerButtonMouseOver(this, 'over');");
    this.TimePickerSaveButton.setAttribute("onmouseout", "timePickerButtonMouseOver(this, 'out');");
    this.TimePickerSaveButton.setAttribute("onclick", "setTimePickerTime();");
    this.TimePickerPanel.appendChild(this.TimePickerSaveButton);

    this.TimePickerCloseButton = document.createElement("div");
    this.TimePickerCloseButton.id = "TimePickerCloseButton";
    this.TimePickerCloseButton.style.position = "absolute";
    this.TimePickerCloseButton.style.top = "14px"
    this.TimePickerCloseButton.style.right = "8px";
    this.TimePickerCloseButton.style.width = "50px"
    this.TimePickerCloseButton.style.height = "17px";
    this.TimePickerCloseButton.style.cursor = "pointer";
    this.TimePickerCloseButton.style.backgroundImage = "url(http://image.locallinkup.com/plink/edit_mode_close_grey_off.png)";
    this.TimePickerCloseButton.setAttribute("onmouseover", "timePickerButtonMouseOver(this, 'over');");
    this.TimePickerCloseButton.setAttribute("onmouseout", "timePickerButtonMouseOver(this, 'out');");
    this.TimePickerCloseButton.setAttribute("onclick", "hideTimePickerPanel();");
    this.TimePickerPanel.appendChild(this.TimePickerCloseButton);

    this.TimePickerHoursLabelsPanel = document.createElement("div");
    this.TimePickerHoursLabelsPanel.style.position = "absolute";
    this.TimePickerHoursLabelsPanel.style.top = "40px"
    this.TimePickerHoursLabelsPanel.style.left = "10px";
    this.TimePickerHoursLabelsPanel.style.width = "88px"
    this.TimePickerHoursLabelsPanel.style.height = "20px";
    this.TimePickerHoursLabelsPanel.style.lineHeight = "20px";
    this.TimePickerHoursLabelsPanel.style.textAlign = "center";
    this.TimePickerHoursLabelsPanel.style.fontStyle = "italic";
    this.TimePickerHoursLabelsPanel.style.color = "#929497";
    this.TimePickerHoursLabelsPanel.innerHTML = "Choose: Hour";
    this.TimePickerPanel.appendChild(this.TimePickerHoursLabelsPanel);

    this.TimePickerHoursPanel = document.createElement("div");
    this.TimePickerHoursPanel.style.position = "absolute";
    this.TimePickerHoursPanel.style.top = "60px"
    this.TimePickerHoursPanel.style.left = "10px";
    this.TimePickerHoursPanel.style.width = "88px"
    this.TimePickerHoursPanel.style.height = "132px";
    this.TimePickerHoursPanel.style.backgroundColor = "#f4f4f4";
    this.TimePickerPanel.appendChild(this.TimePickerHoursPanel);

    for (var i = 0; i < 24; i++)
    {
        this.TimePickerHour = document.createElement("div");
        this.TimePickerHour.setAttribute("id", "hrs" + i);
        this.TimePickerHour.setAttribute("class", "floatLeft");
        this.TimePickerHour.style.width = "20px"
        this.TimePickerHour.style.height = "20px";
        this.TimePickerHour.style.lineHeight = "20px";
        this.TimePickerHour.style.textAlign = "center";
        this.TimePickerHour.style.border = "1px solid #ffffff";
        this.TimePickerHour.style.backgroundColor = "#f4f4f4";
        this.TimePickerHour.style.color = "#000000";
        this.TimePickerHour.style.cursor = "pointer";
        this.TimePickerHour.setAttribute("onmouseover", "timePickerButtonMouseOver(this, 'over');");
        this.TimePickerHour.setAttribute("onmouseout", "timePickerButtonMouseOver(this, 'out');");
        if (i.toString().length == 1) {
            this.TimePickerHour.innerHTML = "0" + i.toString();
            this.TimePickerHour.setAttribute("onclick", "setTimePickerHours('0" + i.toString() + "')");
        }
        else {
            this.TimePickerHour.innerHTML = i.toString();
            this.TimePickerHour.setAttribute("onclick", "setTimePickerHours('" + i.toString() + "')");
        }
        this.TimePickerHoursPanel.appendChild(this.TimePickerHour);
    }

    this.TimePickerMinutesLabelsPanel = document.createElement("div");
    this.TimePickerMinutesLabelsPanel.style.position = "absolute";
    this.TimePickerMinutesLabelsPanel.style.top = "40px"
    this.TimePickerMinutesLabelsPanel.style.left = "120px";
    this.TimePickerMinutesLabelsPanel.style.width = "44px"
    this.TimePickerMinutesLabelsPanel.style.height = "20px";
    this.TimePickerMinutesLabelsPanel.style.lineHeight = "20px";
    this.TimePickerMinutesLabelsPanel.style.textAlign = "center";
    this.TimePickerMinutesLabelsPanel.style.fontStyle = "italic";
    this.TimePickerMinutesLabelsPanel.style.color = "#929497";
    this.TimePickerMinutesLabelsPanel.innerHTML = "Minutes";
    this.TimePickerPanel.appendChild(this.TimePickerMinutesLabelsPanel);

    this.TimePickerMinutesPanel = document.createElement("div");
    this.TimePickerMinutesPanel.style.position = "absolute";
    this.TimePickerMinutesPanel.style.top = "60px"
    this.TimePickerMinutesPanel.style.left = "120px";
    this.TimePickerMinutesPanel.style.width = "44px"
    this.TimePickerMinutesPanel.style.height = "132px";
    this.TimePickerMinutesPanel.style.backgroundColor = "#f4f4f4";
    this.TimePickerPanel.appendChild(this.TimePickerMinutesPanel);

    for (var i = 0; i < 60; i += 5) {
        this.TimePickerMinute = document.createElement("div");
        this.TimePickerMinute.setAttribute("id", "mins" + i);
        this.TimePickerMinute.setAttribute("class", "floatLeft");
        this.TimePickerMinute.style.width = "20px"
        this.TimePickerMinute.style.height = "20px";
        this.TimePickerMinute.style.lineHeight = "20px";
        this.TimePickerMinute.style.textAlign = "center";
        this.TimePickerMinute.style.border = "1px solid #ffffff";
        this.TimePickerMinute.style.backgroundColor = "#f4f4f4";
        this.TimePickerMinute.style.color = "#000000";
        this.TimePickerMinute.style.cursor = "pointer";
        this.TimePickerMinute.setAttribute("onmouseover", "timePickerButtonMouseOver(this, 'over');");
        this.TimePickerMinute.setAttribute("onmouseout", "timePickerButtonMouseOver(this, 'out');");
        if (i.toString().length == 1) {
            this.TimePickerMinute.innerHTML = "0" + i.toString();
            this.TimePickerMinute.setAttribute("onclick", "setTimePickerMinutes('0" + i.toString() + "')");
        }
        else {
            this.TimePickerMinute.innerHTML = i.toString();
            this.TimePickerMinute.setAttribute("onclick", "setTimePickerMinutes('" + i.toString() + "')");
        }
        this.TimePickerMinutesPanel.appendChild(this.TimePickerMinute);
    }

    this.hideTimePicker = function () {
        this.TimePickerPanel.style.display = "none";
    }

    this.showTimePicker = function (elem) {
        this.selectedInputField = elem;
        elem.parentNode.appendChild(this.TimePickerPanel);
        this.TimePickerPanel.style.top = elem.offsetTop + elem.offsetHeight + "px";
        this.TimePickerPanel.style.left = elem.offsetLeft + elem.offsetWidth - 182 + "px";
        if (elem.tagName.toLowerCase() == "input") {
            this.TimePickerTimePanel.innerHTML = elem.value;
            var tempHour = parseInt(elem.value.split(":")[0], 10);
            var tempMins = elem.value.split(":")[1];
            if (tempHour > 12) {
                var newHour = (tempHour - 12).toString();
                timePickerElement.TimePickerAmPmTimePanel.innerHTML = newHour + ":" + tempMins + "pm";
            }
            else {
                if (tempHour == 12) {
                    timePickerElement.TimePickerAmPmTimePanel.innerHTML = tempHour + ":" + tempMins + "pm";
                }
                else {
                    if (tempHour == 0) {
                        tempHour = 12;
                    }
                    timePickerElement.TimePickerAmPmTimePanel.innerHTML = tempHour + ":" + tempMins + "am";
                }
            }
        }
        else {
            this.TimePickerTimePanel.innerHTML = elem.innerHTML;
            var tempHour = parseInt(elem.innerHTML.split(":")[0], 10);
            var tempMins = elem.innerHTML.split(":")[1];
            if (tempHour > 12) {
                var newHour = (tempHour - 12).toString();
                timePickerElement.TimePickerAmPmTimePanel.innerHTML = newHour + ":" + tempMins + "pm";
            }
            else {
                if (tempHour == 12) {
                    timePickerElement.TimePickerAmPmTimePanel.innerHTML = tempHour + ":" + tempMins + "pm";
                }
                else {
                    if (tempHour == 0) {
                        tempHour = 12;
                    }
                    timePickerElement.TimePickerAmPmTimePanel.innerHTML = tempHour + ":" + tempMins + "am";
                }
            }
        }
        this.TimePickerPanel.style.display = "inline";
    }
}

function setTimePickerTime() {
    if (timePickerElement.selectedInputField.tagName.toLowerCase() == "input") {
        timePickerElement.selectedInputField.value = timePickerElement.TimePickerTimePanel.innerHTML;
    }
    else {
        timePickerElement.selectedInputField.innerHTML = timePickerElement.TimePickerTimePanel.innerHTML;
    }
    timePickerElement.TimePickerPanel.style.display = "none";
}

function setTimePickerMinutes(mins) {
    var currentTimePickerTime = timePickerElement.TimePickerTimePanel.innerHTML;
    timePickerElement.TimePickerTimePanel.innerHTML = currentTimePickerTime.substring(0, currentTimePickerTime.indexOf(":") + 1) + mins;
    var tempHour = timePickerElement.TimePickerAmPmTimePanel.innerHTML.split(":")[0];
    var tempAmPm = timePickerElement.TimePickerAmPmTimePanel.innerHTML.split(":")[1].substring(2);
    timePickerElement.TimePickerAmPmTimePanel.innerHTML = tempHour + ":" + mins + tempAmPm;
}

function setTimePickerHours(hours) {
    var currentTimePickerTime = timePickerElement.TimePickerTimePanel.innerHTML;
    timePickerElement.TimePickerTimePanel.innerHTML = hours + currentTimePickerTime.substring(currentTimePickerTime.indexOf(":"));

    var tempHour = parseInt(hours, 10);
    var tempMins = timePickerElement.TimePickerTimePanel.innerHTML.split(":")[1];
    if (tempHour > 12) {
        var newHour = (tempHour - 12).toString();
        timePickerElement.TimePickerAmPmTimePanel.innerHTML = newHour + ":" + tempMins + "pm";
    }
    else {
        if (tempHour == 12) {
            timePickerElement.TimePickerAmPmTimePanel.innerHTML = tempHour + ":" + tempMins + "pm";
        }
        else {
            if (tempHour == 0) {
                tempHour = 12;
            }
            timePickerElement.TimePickerAmPmTimePanel.innerHTML = tempHour + ":" + tempMins + "am";
        }
    }

}

function hideTimePickerPanel() {
    timePickerElement.TimePickerPanel.style.display = "none";
}

function timePickerButtonMouseOver(elem, onOff) {
    if (onOff == "over") {
        if (elem.id == "TimePickerCloseButton") {
            elem.style.backgroundImage = "url(http://image.locallinkup.com/plink/edit_mode_close_grey_on.png)";
        }
        if (elem.id == "TimePickerSaveButton") {
            elem.style.backgroundImage = "url(http://image.locallinkup.com/plink/edit_mode_save_grey_on.png)";
        }
        if (elem.id.indexOf("mins") == 0 || elem.id.indexOf("hrs") == 0) {
            elem.style.backgroundColor = "#bde5ff";
        }
    }
    else {
        if (elem.id == "TimePickerCloseButton") {
            elem.style.backgroundImage = "url(http://image.locallinkup.com/plink/edit_mode_close_grey_off.png)";
        }
        if (elem.id == "TimePickerSaveButton") {
            elem.style.backgroundImage = "url(http://image.locallinkup.com/plink/edit_mode_save_grey_off.png)";
        }
        if (elem.id.indexOf("mins") == 0 || elem.id.indexOf("hrs") == 0) {
            elem.style.backgroundColor = "#f4f4f4";
        }
    }
}