olsg.js

// embed the Reveal script - better than trying to minify it all here -- i'll eat the cache request
document.write("<script type='text/javascript' src='http://cache.university-bound.com/olsg-script/jquery.reveal.js'></script>");

// the DOM structure to build out the modal window - keep some formatting please so when we inspect it - it doesnt look like complete markup vomit.
var ModalCode = '<div id="schoolGuideModal" class="reveal-modal large">\n\t\t<form>\n\t\t\t <img class="sg-ebook" src="http://cache.university-bound.com/olsg-script/img_sg-ebook.png" alt="Online School Guide"/>\n\t\t     <h2>Frustrated By All The Online School Choices?</h2>\n\t\t     <ul class="sg-list">\n\t\t     \t<li>What program should you choose?</li>\n\t\t     \t<li>What are the classes like?</li>\n\t\t     \t<li>What are the financial aid options?</li>\n\t\t     </ul>\n\t\t     <div class="sg-form-body">\n\t\t     \n\t\t     \t<p>Start Here</p>\n\t\t     \t<label for="fname">First Name</label>\n\t\t     \t<input type="text" name="fname" placeholder="First Name"/>\n\t\t     \t<label for="lname">Last Name</label>\n\t\t     \t<input type="text" name="lname" placeholder="Last Name"/>\n\t\t     \t<label for="email">Email Address</label>\n\t\t     \t<input type="text" name="email" placeholder="Email Address"/>\n\t\t     \t<label for="phone">Phone Number</label>\n\t\t     \t<input type="text" name="phone" placeholder="Phone Number"/>\t     \t\n\t\t     </div>\n\t\t     <br class="br-clear"/>\n\t\t     <button class="sg-submit" type="submit">Free Download</button>\n\t\t </form>\n\t     <a class="close-reveal-modal">&#215;</a>\n\t</div>\n\t';

// append the stylesheet as well - gotta keep things looking pretty
document.write('<link rel="stylesheet" href="http://cache.university-bound.com/olsg-script/reveal.css">');

// embed the modal dialogue in the page
document.write(ModalCode);

//sentinal to display the modal only once - dont frame the users on form submit
  var showModal = true;
   
// this is known to be problematic - be aware the issues are probably because we used JQUERY to bind on the window beforeunload event. Subscription with JQuery is not the end-all-be-all of javascript.
    $(window).bind('beforeunload', function() {
    if (showModal) {
       $('#schoolGuideModal').reveal();
       showModal = false;
       // Unfortunately we cant override in firefox -  and messages like this always turn me off - but what hte hell -- we gotta display SOMETHING to actually stop the browser. Otherwise it gets ugly finicky -- need to meet a real JS hacker to see how people prevent this
      return '>>>>>Before You Go<<<<<<<< \n Why not sign up for your FREE copy of our Online School Guide?';
    }
   });

// Not sure why i stuck this in an anonymous function - but what the heck - seems like the thing to do.
$(function () {

    
    // Bind all the form prettyness - like moving glowing focus rings and removing placeholder text // for non HTML5 compliant browsers
    $("'[placeholder]'").focus(function () {
        var a = $(this);
        if (a.val() == a.attr("'placeholder'")) {
            a.val("''");
            a.removeClass("'placeholder'")
        }
    }).blur(function () {
        var a = $(this);
        if (a.val() == "''" || a.val() == a.attr("'placeholder'")) {
            a.addClass("'placeholder'");
            a.val(a.attr("'placeholder'"))
        }
    }).blur();
    $("'[placeholder]'").parents("'form'").submit(function () {
        $(this).find("'[placeholder]'").each(function () {
            var a = $(this);
            if (a.val() == a.attr("'placeholder'")) {
                a.val("''")
            }
        })
    })
})