View source for PhoneNumber control

= Introduction =
We already have a phone number control worked for long time. it works however it contains some potential things:
* Code, code behind and domain layer, is to complex which is not necessary at all.
* Java Script is not good.
* Fail on FireFox.

Once there is a bug, it is difficult to fix and also hard to maintain the code.

The goal of refactoring it is to make the code nicer, work well in all well -  known browsers: IE, FF and improve the performance.

= Being used in =
Currently the phone number is being used in these places:
# User, Company, and correct user info: here are the place which use all features of phone number control: displaying value, adding/editing, validating the format.
# CATI, at CatiFormExpand.aspx: Only use to show the current available phone number of a project questionnaire or user. It has 2 parts: The type of phone, and a textbox to show the full values of selected phone type. No validation, no editing.
# Search Page, for User or Company resource: Nearly the same as in CRD.

= New implementation =
== Server Side ==
We need a common object which can be serialized/deserialized between server and client. The PhoneNumberInfo class comes in:
<source lang="csharp">
   /// <summary>
   /// Keep the basic information about a phone number
   /// </summary>
   [Serializable]
   public class PhoneNumberInfo
   {
      public int CountryID { get; set; }
      public String AreaCode { get; set; }
      public String Number { get; set; }
      /// <summary>
      /// The extension of phone number
      /// Format: # or * follow by digist
      /// </summary>
      public String Extension { get; set; }
      /// <summary>
      /// The phone number which cannot be converted into new format. it exists since we have had bad data.
      /// </summary>
      public String LegacyPhoneNumber { get; set; }
      public PhoneNumberType PhoneNumberType { get; set; }
      public PhoneNumberStatus Status { get; set; }
      /// <summary>
      /// Property to use on client side coding only. True if one of its properties has changed value on client side.
      /// </summary>
      public bool IsChangedOnClientSide { get; set; }
      public String DisplayOnGUI
      {
         get
         {
            return PhoneNumberFormater.DisplayOnGUI(this);
         }
      }

      public PhoneNumberInfo()
      {
      }

      public PhoneNumberInfo(int countryid, String areaCode, String number, String extension, String legacyPhoneNumber)
         : this(countryid, areaCode, number, extension, legacyPhoneNumber, PhoneNumberType.NotIdentified, PhoneNumberStatus.Working)
      {
      }

      private PhoneNumberInfo(String areaCode, String number, String extension, String legacyPhoneNumber, PhoneNumberType phoneNumberType, PhoneNumberStatus status)
      {
         AreaCode = areaCode;
         Number = number;
         Extension = extension;
         LegacyPhoneNumber = legacyPhoneNumber;
         PhoneNumberType = phoneNumberType;
         Status = status;
      }

      public PhoneNumberInfo(int countryid, String areaCode, String number, String extension, String legacyPhoneNumber, PhoneNumberType phoneNumberType, PhoneNumberStatus status)
         :this(areaCode, number, extension, legacyPhoneNumber, phoneNumberType, status)
      {
         CountryID = countryid;
      }
   }
</source>

By serializing it we have an object on client side to work with.
== Client Side ==
For the JavaScript things, please refer to UserControls/Scripts/PhoneNumberControlEx.js. The code is made in OOP way using jQuery and AJAX.

Beside the code to build up and manage phonenumber control internally, there are some public API which is used to work with phonenumber from other places:
* '''cg_getPhoneNumberById(pnId)''': return the phone number control object by its ClientID
* '''cg_getCurrentPhoneNumber(pnId)''': return the phone number info object. It is a convenient way to get the needed phone number information without knowing the control code.