// -----------------------------------------------------------------------
// UserInterface object
// -----------------------------------------------------------------------
// 
// This manages the user interface logic.

(
  function(window) {
    var UserInterface = window.UserInterface = {};

    function updateUI() {
      $(".screen").hide();
      $("#" + Config.value.state).show();
      switch (Config.value.state) {
      case "login":
        break;
      case "wait-for-verify":
        break;
      case "logged-in":
        $(".login-email").text(Config.value.email);
        break;
      }
    }

    function isUrlSafe(url) {
      if (typeof(url) != "string")
        return false;
      return (url.match("^https?://") != null);
    }

    function normalizeUserInfo(userInfo) {
      if (!(userInfo.interests && jQuery.isArray(userInfo.interests)))
        userInfo.interests = [];

      ["profileImageURL",
       "websiteURL"].forEach(
         function(prop) {
           if (prop in userInfo)
             if (!isUrlSafe(userInfo[prop]))
               delete userInfo[prop];
         });
    }

    function fillUserInfo() {
      var userInfo = Attendees.currentUser;
      if (!userInfo)
        userInfo = {};
      normalizeUserInfo(userInfo);

      // Fill out the form.
      $(".usr").each(
        function() {
          var prop = this.id.match(/usr_(.+)/)[1];
          $(this).val(userInfo[prop] || "");
        });
      $("#usr_interests input").each(
        function() {
          var label = $.trim($(this.parentNode).text());
          this.checked = (userInfo.interests.indexOf(label) != -1);
        });

      // Build list of all attendees.
      var everyone = $("#everyone-info .attendees");
      everyone.empty();
      for (userID in Attendees.all) {
        var person = Attendees.all[userID];
        normalizeUserInfo(person);

        var elem = $("#templates .attendee").clone();
        elem.find(".name").text(person.name || "Anonymous Human");
        var profileImageURL = person.profileImageURL;
        if (!profileImageURL && person.twitterScreenName) {
          // This used to be:
          //   "http://api.twitter.com/1/users/profile_image/" +
          //   screenName + ".xml?size=normal"
          // But Twitter's API is rate-limited and/or slow, so we're
          // using Joe Stump's awesome service instead.

          profileImageURL = ("http://img.tweetimag.es/i/" +
                             person.twitterScreenName + "_n");
        }

        if (profileImageURL)
          elem.find(".headshot img").attr("src", profileImageURL);

        if (person.websiteURL) {
          var websiteLink = document.createElement("a");
          websiteLink.href = person.websiteURL;
          websiteLink.target = "_blank";
          elem.find(".name").wrapInner(websiteLink);
        }

        if (person.twitterScreenName) {
          var twitterLink = document.createElement("a");
          twitterLink.href = "http://twitter.com/" + person.twitterScreenName;
          twitterLink.target = "_blank";
          twitterLink.textContent = "@" + person.twitterScreenName;
          elem.find(".twitter").append(twitterLink);
        } else
          elem.find(".twitter").remove();

        if (person.bugzillaEmail) {
          var bugzillaLink = document.createElement("a");
          bugzillaLink.href = ("https://hg.mozilla.org/users/" +
                               "avarma_mozilla.com/" +
                               "bugzilla-dashboard/raw-file/v2/" +
                               "index.html#username=" +
                               encodeURI(person.bugzillaEmail));
          bugzillaLink.target = "_blank";
          elem.find(".bugzilla").wrapInner(bugzillaLink);
        } else
          elem.find(".bugzilla").remove();

        if (person.interests.length > 0) {
          var interests = elem.find(".interests ul");
          person.interests.forEach(
            function(interest) {
              var item = document.createElement("li");
              item.textContent = interest;
              interests.append(item);
            });
        } else
          elem.find(".interests").remove();

        if (person.bio) {
          var converter = new Showdown.converter();
          var unsafeHtml = converter.makeHtml(person.bio);
          var safeHtml = html_sanitize(
            unsafeHtml,
            function urlPolicy(url) {
              return isUrlSafe(url) ? url : null;
            });
          elem.find(".bio").html(safeHtml);
        } else
          elem.find(".bio").remove();

        everyone.append(elem);
      }
    }

    Attendees.observers.push(fillUserInfo);
    Config.observers.push(updateUI);

    function initUI() {
      $("#logged-in").tabs();

      $(".start-over").submit(
        function(event) {
          event.preventDefault();
          Config.wipe();
        });

      $("#login form").submit(
        function(event) {
          event.preventDefault();
          $("#login .error").hide();
          Ajax.postJSON(
            "api/challenge/request",
            {email: $(this).find("#email").val() },
            function(success, data) {
              if (success) {
                Config.setValue({state: "wait-for-verify"});
              } else {
                $("#login .error").slideDown();
              }
            });
        });

      $("#logged-in form").submit(
        function(event) {
          event.preventDefault();
          $("#logged-in .success").hide();
          $("#logged-in .error").hide();

          var contents = {};

          $(".usr").each(
            function() {
              var prop = this.id.match(/usr_(.+)/)[1];
              contents[prop] = this.value;
            });

          contents.interests = [];

          $("#usr_interests input").each(
            function() {
              if (this.checked)
                contents.interests.push($.trim($(this.parentNode).text()));
            });

          Ajax.postJSON(
            "api/profile",
            {token: Config.value.token,
             contents: contents},
            function(success, data) {
              if (success) {
                $("#logged-in .success").slideDown();
                // Do a full round-trip to refresh our cached information
                // about ourselves. Not efficient at all, but it'll work
                // for now.
                Attendees.refresh();
              } else {
                $("#logged-in .error").slideDown();
              }
            });
        });

      function checkHash() {
        var verify = window.location.hash.match(/#verify=(.+)/);
        if (verify) {
          if (Config.value.state == "logged-in") {
            window.location.hash = "";
            return;
          }
          verify = verify[1];
          Config.setValue({state: "wait-for-verify"});
          Ajax.postJSON(
            "api/challenge/respond",
            {token: verify},
            function(success, data) {
              window.location.hash = "";
              updateUI();
              if (success) {
                Config.setValue({state: "logged-in",
                                 token: data.token,
                                 userID: data.user_id,
                                 email: data.email});
              } else {
                $("#wait-for-verify .error").slideDown();
              }
            });
        }
      }

      checkHash();
      window.setInterval(checkHash, 500);
      updateUI();
    }

    $(window).ready(initUI);
  }
)(window);