var oHighlightedFields = Array();
var oFocusFiel;

function ccCSSPopup ()
{
    this.oPopupDiv = null;                                                           // div that is the popup for this instance
    this.oFocusElement = null;                                                       // the element that shoudl receive focus once popup is closed

    this.ShowPopupDiv = function ShowPopupDiv(strTitle, strText, iWidth, iHeight, strDivID, strFocusID) {
        this.oPopupDiv = this.CreatePopup(strTitle, strText, iWidth, iHeight, strDivID, strFocusID);                        
        this.oPopupDiv.style.visibility = 'visible';
    }

    this.ClosePopupDiv = function ClosePopupDiv() {
        if (this.oPopupDiv == null)
            return;
        this.oPopupDiv.style.visibility = 'hidden';
        if (this.oFocusElement != null)
            this.oFocusElement.focus();
    }

    this.CreatePopup = function CreatePopup(strTitle, strText, iWidth, iHeight, strDivID, strFocusID) {
        var strCloseScript = "document.getElementById('" + strDivID + "').style.visibility = 'hidden';";
        if (strFocusID != null)
            strCloseScript += "document.getElementById('" + strFocusID + "').focus();";
        var strStyle = "width: " + iWidth + "px; height: " + iHeight + "px;left: " + (document.body.clientWidth / 2 - iWidth / 2) + "px;top: " + (document.body.clientHeight / 2 - iHeight / 2) + "px;";
        var oPopupDiv = this.CreateDiv(strDivID, "ccPopup", strStyle, "");
        // create the close button
        var oButtonDiv = this.CreateDiv(null, null, "position: absolute; top: " + (iHeight - 30) + "px; left: " + (iWidth / 2 - 50) + "px;", "");
        var oButton = document.createElement('input');
        oButton.setAttribute("type", "button");
        oButton.setAttribute("value", "OK");
        oButton.setAttribute("class", "ccPopupButton");
        oButton.setAttribute("onclick", strCloseScript);
        oButtonDiv.appendChild(oButton);
        // add X button
        var oCloseXDiv = this.CreateDiv(null, "ccPopupClose", null, null);
        oCloseXDiv.setAttribute("onclick", strCloseScript);
        // add title
        var oTitleDiv = this.CreateDiv(null, "ccPopupTitle", null, strTitle);
        var oIcondDiv = this.CreateDiv(null, "ccPopupWarningIcon", null, "&nbsp");
        var oMessageDiv = this.CreateDiv(null, "ccPopupMessage", null, strText);

        oPopupDiv.appendChild(oButtonDiv);
        oPopupDiv.appendChild(oCloseXDiv);
        oPopupDiv.appendChild(oTitleDiv);
        oPopupDiv.appendChild(oIcondDiv);
        oPopupDiv.appendChild(oMessageDiv);
        document.body.appendChild(oPopupDiv);        
        return oPopupDiv;
    }

    this.CreateDiv = function CreateDiv(strDivID, strDivClass, strDivStyle, strDivHTML) {
        var oReturnObject = document.createElement('div');
        if (strDivID != null)
            oReturnObject.setAttribute('id', strDivID);
        if (strDivClass != null)
            oReturnObject.setAttribute('class', strDivClass);
        if (strDivStyle != null)    
            oReturnObject.setAttribute('style', strDivStyle);
        if (strDivHTML)
            oReturnObject.innerHTML = strDivHTML;
        return oReturnObject;
    }

}

function HighlightFields(strMessageID, strPopupID) {
    var strRequiredFieldName = "highlighted";
    for (i = 0; i < oHighlightedFields.length; i++) {
        var oField = document.getElementById(oHighlightedFields[i]);        
        if (oField) {
            oField.className += " highlight";
            if (i == 0) {
                strRequiredFieldName = oField.name;
            }
        }
    }
    if (oHighlightedFields.length > 0) {
        var strMessage = "Your <strong>" + strRequiredFieldName + "</strong> is missing or invalid. Please double-check your entry and retype it in the box";
        if (strRequiredFieldName == "Conditions") {
            var strMessage = "You must agree to our terms and conditions in order to proceed!";
            document.getElementById("Conditions_Wrapper").className += " highlight";
        }
        else if (oHighlightedFields[0] == "State" || oHighlightedFields[0] == "Month_of_Birth" || oHighlightedFields[0] == "Day_of_Birth" || oHighlightedFields[0] == "Year_of_Birth") {
            document.getElementById("select" + oHighlightedFields[0]).className += " highlight";
        }
        var oPopup = new ccCSSPopup();
        oPopup.ShowPopupDiv("Delight in Denim SweepStakes - Win 10 Pairs of Designer Jeans", strMessage, 500, 100, "validator_popup", oHighlightedFields[0]);
    }    
}