//I considered making use of the YUI module, but since the JavaScript is minimal decided to use a closure instead
$(function(){
  
  //Create references for better performance
  var contactsWidgetRef = $('#contact-widget li');
  var contactsContainerRef = $('#contacts');

  //Events
  contactsWidgetRef.mouseover(function(){
    $(this).addClass('s');
    $(this).removeClass('h');
    contactsContainerRef.toggleClass('a');
  });

  contactsWidgetRef.mouseout(function(){
    $(this).removeClass('s');
    $(this).addClass('h');
    contactsContainerRef.toggleClass('a');
  });

  //Events: Take care of the DOM manipulation when the select element is changed
  $('#contact-widget select').change(function() {
    $('#contact-widget li.h').each(function(i, item){
      var emailRef = $(item).find('.e');
      var phoneRef = $(item).find('.p');

      if(phoneRef.parent().is('ul')){
        phoneRef.wrap('<li></li>').replaceWith(emailRef.clone(false));
      } else {
        phoneRef.replaceWith(emailRef.clone(false));
      }
      if(emailRef.parent().is('li.h')){
        emailRef.replaceWith('<span class="p">' + phoneRef.text() + '</span>');
      } else {
        emailRef.parent().replaceWith('<li class="p">' + phoneRef.text() + '</li>');
      }
    });
  });
  
  //This could have been cloned from the DOM or rendered server-side, but considering the small amount of markup. Let's keep it simple right?
  function renderPartial(contact){
    var partial = '';
    partial += '<div>';
    partial += '<img src="' + contact.avatar + '" /><ul><li class="p">' + contact.phone + '</li>';
    partial += '<li>' + contact.address + ' - <a href="">map</a></li>';
    partial += '<li>' + contact.city + ' ' + contact.provinceState + ' ' + contact.postalZipCode + '</li>';
    partial += '<li><a href="">Chats</a> - <a href="">Emails</a></li></ul>';
    partial += '</div>';
    return partial;
  }

  contactsWidgetRef.each(function(i, item) { 
    $(item).append(renderPartial(contacts[i]));
  });

  contactsWidgetRef.addClass('h');
  
});