// USAGE    Create a CAPTCHA UI on any DOM element
// AUTHOR   Ryan Peters @ Redhead Companies
// VERSION  0.9.1 (beta)

var Captcha = { Images: [{ "Label": "hamlet", "ImageUrl": "captcha1.png" }, { "Label": "sideshow", "ImageUrl": "captcha2.png" }, { "Label": "everest", "ImageUrl": "captcha3.png"}], AlertMessage: "The CAPTCHA does not match!", Watermark: "Type the text from the box above", CurrIndex: 0, AddImage: function(a) { if (a) this.Images.push(a) }, CycleCaptcha: function() { this.CurrIndex++; if (this.CurrIndex == this.Images.length) this.CurrIndex = 0; $("#_captchaImg").attr({ "src": "/scripts/captcha/images/" + this.Images[this.CurrIndex].ImageUrl }) }, BuildShell: function(a) { var b = a; var c = $("#" + b); if (!c.html()) c.html("<div><div><img id='_captchaImg' /></div><div><input type='text' id='_captchaField' value='" + this.Watermark + "' style='color:#999999;' /></div><div><a href='JavaScript:void(0)' onclick='Captcha.CycleCaptcha()' style='font-size:10px; font-weight:normal;'>I can't read this!</a></div></div>") }, BindMethods: function() { $("form").submit(function() { if ($.trim(Captcha.Images[Captcha.CurrIndex].Label.toLowerCase()) != $.trim($("#_captchaField").val().toLowerCase())) { $("#_captchaField").removeAttr("style").css({ "background-color": "#c94c4c", "borderColor": "#AA0000" }).val(""); Captcha.CycleCaptcha(); alert(Captcha.AlertMessage); return false } else { $("#_captchaField").removeAttr("style").css({ "background-color": "#97ee97", "borderColor": "#00AA00" }); return true } }); $("#_captchaField").focus(function() { if ($(this).val() == Captcha.Watermark) $(this).removeAttr("style").val("") }) }, CreateCaptcha: function(a) { this.BuildShell(a); this.CycleCaptcha(); this.BindMethods() } };