var loginForm = new LoginForm();

function LoginForm() { }

LoginForm.prototype.curtain = null;
LoginForm.prototype.dialog = null;
LoginForm.prototype.positionInterval = null;

LoginForm.prototype.Show = function() {
    var cookieUserid = ReadCookie("userid");
    if (cookieUserid == null)
    	cookieUserid = "";

    if (this.dialog == null || this.curtain == null) {
        var form = "";
        var dropbox = Get("EntityDropbox");
        this.curtain = document.createElement("div");
        this.dialog = document.createElement("div");
        
        var dialog1 = document.createElement("div");
        var dialog2 = document.createElement("div");
        var dialog3 = document.createElement("div");
        var dialog4 = document.createElement("div");
        var dialog5 = document.createElement("div");
        
        var pageWidth = document.body.clientWidth;
        var pageHeight = (document.height != undefined) ? document.height : document.body.offsetHeight;
        if (document.documentElement.clientHeight > pageHeight) pageHeight = document.documentElement.clientHeight;
        if (pageWidth < 980) pageWidth = 980;

        this.curtain.style.position = "absolute";
        this.curtain.style.width = pageWidth + "px";
        this.curtain.style.height = pageHeight + "px";
        this.curtain.style.zIndex = 602;
        this.curtain.style.backgroundColor = "#252038";
	    this.curtain.style.opacity = 0.85;
	    this.curtain.style.filter  = "alpha(opacity=85)";
        this.curtain.innerHTML = "&nbsp";

        this.dialog.style.position = "absolute";
        this.dialog.style.width = "510px";
        this.dialog.style.height = "230px";
        this.dialog.style.zIndex = 603;
        this.dialog.className = "Dialog";
        
        dialog1.className = "Dialog-tl";
        dialog2.className = "Dialog-tr";
        dialog3.className = "Dialog-bl";
        dialog4.className = "Dialog-br";
        dialog5.className = "Dialog-padding";

        this.Position();

        form += "<div style='float:right; margin: -10px -30px 0 0;'>";
        form += "<a id=\"ACloseLogin\" href=\"#\" class=\"CloseLink\">" + Translation.Close + "</a> ";
        form += "</div>";

        form += "<h2>Log In to Metrodate</h2><br />";

        form += "<form action=\"/asp/login.aspx\" method=\"post\" style=\"display: inline;\">";
        form += "<table align=\"center\">";
        form += "<tr>";
        form += "<td align=\"right\">Member ID or E-mail:&nbsp;</td>";
        form += "<td>";
        form += "<input type=\"text\" id=\"userid\" name=\"userid\" size=\"25\" maxlength=\"128\" value=\"" + cookieUserid + "\" />";
        form += "</td>";
        form += "</tr>";
        form += "<tr>";
        form += "<td align=\"right\">Password:&nbsp;</td>";
        form += "<td>";
        form += "<input type=\"password\" id=\"password\" name=\"password\" size=\"25\" maxlength=\"25\" />";
        form += "</td>";
        form += "</tr>";
        form += "<tr>";
        form += "<td align=\"right\">&nbsp;</td>";
        form += "<td>";
        form += "<input type=\"checkbox\" id=\"rememberme\" name=\"rememberme\" checked=\"checked\" /><label for=\"rememberme\">Keep Me Logged In</label>";
        form += "</td>";
        form += "</tr>";
        form += "<tr>";
        form += "<td colspan=\"2\" align=\"center\" style='padding-top: 3px;'>";
        form += "<input type=\"submit\" value=\"Log In      \" class=\"btnPurple_100\" />";
        form += "</td>";
        form += "</tr>";
        form += "<tr>";
        form += "<td colspan=\"2\" align=\"center\" style='padding-top: 22px; font-size: 11px;'>";
        form += "<a href=\"http://www.metrodate.com/join/\" style=\"text-decoration: none;\">Create an Account</a>";
        form += "&nbsp;|&nbsp;";
        form += "<a href=\"http://www.metrodate.com/pw/\" style=\"text-decoration: none;\">Forgot Your Password?</a>";
        form += "&nbsp;|&nbsp;";
        form += "<a href=\"http://www.metrodate.com/help/\" style=\"text-decoration: none;\">Help and Support</a>";
        form += "</td>";
        form += "</tr>";
        form += "</table>";
        form += "</form>";

        dialog5.innerHTML = form;
        
        dialog4.appendChild(dialog5);
        dialog3.appendChild(dialog4);
        dialog2.appendChild(dialog3);
        dialog1.appendChild(dialog2);
        this.dialog.appendChild(dialog1);

        dropbox.appendChild(this.curtain);
        dropbox.appendChild(this.dialog);

        dropbox = null;
    }
    else {
        this.dialog.style.display = "block";
        this.curtain.style.display = "block";
    }
    
    closureThis = this;
    this.positionInterval = setInterval(function(){ closureThis.Position(); }, 500);

    Get("ACloseLogin").onclick = function() { closureThis.Hide(); return false; };
    Get((cookieUserid != null && cookieUserid.length > 0) ? "password" : "userid").focus();
}

LoginForm.prototype.Hide = function() {
    clearInterval(this.positionInterval);

    this.dialog.style.display = "none";
    this.curtain.style.display = "none";
}

LoginForm.prototype.Position = function() { 
    this.dialog.style.left = GetScreenCenteredX(510) + "px";
    this.dialog.style.top = GetScreenCenteredY(230) + "px";
}