/// <reference path="http://ajax.microsoft.com/ajax/jQuery/jquery-1.3.2.min-vsdoc.js"/>

window._emailRegex = /^[a-zA-Z][\w\.-]*[a-zA-Z0-9]@[a-zA-Z0-9][\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]$/i;
var currentSearch = false;
function clearSearchFlag() {
    currentSearch = false;
}

$(function() {
    //set the incarnate service URL
    var IncarnateServiceURL = "http://incarnate.visitmix.com/incarnate.svc/";

    //list the services you want to use for incarnation
    //note that you can get the list of services supported by the instance of the incarnate service
    //you are using by calling incarnate.svc/providers (json) or incarnate.svc/providers.xml
    var providers = ["Twitter", "MySpace", "Facebook", "Gravatar", "YouTube", "XBoxLive"];

    var avatars = [];
    //index is state variable for paging
    var index = 0;
    //global variable for the username to be incarnated
    var searchTerm;
    //for jQuery fades
    var fadeDuration = 300;
    //listen for focus on the button
    $("#IncarnateButton").focus(function() {

        if (currentSearch == true) return;
        setTimeout("clearSearchFlag();", 1000);
        currentSearch = true;
        $("#IncarnateLoader").show();
        Incarnate();
    });
    //listen for click
    $("#IncarnateButton").click(function() {
        //focus event fights w/ button click so we need semaphore
        if (currentSearch == true) return;
        setTimeout("clearSearchFlag();", 1000);
        currentSearch = true;
        $("#IncarnateLoader").show();
        Incarnate();
    });
    //if enter was hit, do the call
    $("#IncarnateUserName").keyup(function(event) {
        if (event.keyCode == 13) {
              if (currentSearch == true) return;
              setTimeout("clearSearchFlag();", 1000);
              currentSearch = true;
              $("#IncarnateLoader").show();
              Incarnate();
            }
    });
    //    //Doesn't work on all browsers, which is why we have the close button
    $("body").focus(function() {
        $("#IncarnateResultsContainer").fadeOut(fadeDuration);

    });

    function Incarnate() {

        //clear out all state
        index = 0;
        avatars = [];

        //don't search for empty string
        if ($("#IncarnateUserName").val() == "") {
            $("#IncarnateResultsContainer").fadeOut(fadeDuration);
            return;
        }
        //hold term in variable
        searchTerm = $("#IncarnateUserName").val()

        //if they gave us an email, do gravatar
        if (window._emailRegex.test(searchTerm)) {
            //do gravatar
            $.getJSON(IncarnateServiceURL + "GetHash?email=" + searchTerm + "&callback=?",
            function(data) {
                //populate img tag                
                $("#IncarnateImg").attr("src", "http://gravatar.com/avatar.php?gravatar_id=" + data + "&d=http%3A%2F%2Fwww.visitmix.com%2FContent%2Fimg%2Fdefault_gravatar.gif");
                //populate hidden field for form submit
                $("#IncarnateImgSrc").attr("value", "http://gravatar.com/avatar.php?gravatar_id=" + data + "&d=http%3A%2F%2Fwww.visitmix.com%2FContent%2Fimg%2Fdefault_gravatar.gif");
                $("#IncarnateLoader").hide();

            });
            return;
        }
        if (searchTerm.indexOf("@") > 0) {
            $("#IncarnateResultsContainer").hide();

            return;
        }
        //clear out the container
        $("#IncarnateResultsContainer").empty();
        //add the cancel UI for the container
        var cancelDiv = $('<div style="height:16px;margin:2px 2px 0 0;"><img style="margin-left:8px;" src="http://incarnate.blob.core.windows.net/images/lockup_small.png"/><span style="float:right;cursor:pointer; "><img src="http://incarnate.visitmix.com/images/close.png"/></span></div>');
        cancelDiv.click(function() {
            $("#IncarnateResultsContainer").hide();

        });
        $("#IncarnateResultsContainer").append(cancelDiv);

        //use incarnate service
        $(providers).each(function(name, value) {

            $.getJSON(IncarnateServiceURL + value + "/" + searchTerm + "?callback=?",
            function(data) {
                if (data != null) {
                    if (searchTerm == $("#IncarnateUserName").val()) {
                        $("#IncarnateResultsContainer").fadeIn(fadeDuration);
                        $("#IncarnateLoader").hide();

                        var vCardDiv = $('<div class="IncarnateResult" style="clear:both;display:none;min-height:48px"></div>');
                        vCardDiv.append('<img style="float:left;border:1px solid #333;margin:10px;" width="48" src="' + data + '" />');
                        vCardDiv.append('<img  style="margin-top:10px;float:left;border:none;" src="http://incarnate.blob.core.windows.net/images/' + value + '.png"/>');
                        vCardDiv.click(function() {
                            //clear all values

                            $("#IncarnateImgSrc").attr("value", data);
                            $("#IncarnateImg").attr("src", data);


                            $("#IncarnateResultsContainer").fadeOut(fadeDuration);

                        });


                        vCardDiv.hover(function() {
                            vCardDiv.css({ 'clear': 'both', 'background-color': '#99ccff', 'overflow':'hidden' });
                        },
                            function() {
                        vCardDiv.css({ 'clear': 'both', 'background-color': 'transparent' });

                    }

                        );




                        $("#IncarnateResultsContainer").append(vCardDiv);
                        vCardDiv.fadeIn(fadeDuration);

                    }
                }

            });
        });

    }
});

http://incarnate.visitmix.com

jquery.incarnate,js

jquery

JavaScript