Event.observe(window, 'load', function() {
		//update total friends
	function updateTotalFriends() {
		$('total-friends').update($$('.profile-friend').length);
	}

	//represents a friend; build() method returns a new row "this"
	//in the friends list
	var friend = Class.create({	
		initialize: function(userId, name, photo, status, isInvited, isConfirm)
		{
			this.id = userId;
			this.name = name;
			this.photo = photo;
			this.status = status;
			this.isInvited = isInvited;
			this.isConfirm = isConfirm;
			this.friendRow = new Element('div', {'class': 'profile-friend', id: 'id-'+this.id.gsub('.','-')});
			
			if (this.isConfirm) {
				this.friendRow.addClassName('unconfirmed-friend');
			}
		},		
		build: function()
		{
			that = this;
			isStatus = true;		
			//build avatar
			this.avatar = new Element('img', {'alt': this.name, 'class': 'profile-avatar-small'});
			if (this.photo != null)
				this.avatar.src = '/dyn/pic/' + this.id + 's/'+this.photo;
			else
				this.avatar.src = '/images/default-avatar.png';				
			//build name and status
			this.friendName = new Element('span').update(this.name);
			this.friendStatus = new Element('span');
			
			if (this.isConfirm)
			{
				this.friendName.addClassName('profile-friend-name-waiting');
                this.friendStatus.addClassName('profile-friend-waiting').update('Unconfirmed');
			}
			else if (this.isInvited)
            {
                this.friendName.addClassName('profile-friend-name-waiting');
                this.friendStatus.addClassName('profile-friend-waiting').update('Invited');
            }
			else if (this.status)
			{
				this.friendStatus.addClassName('profile-friend-status').update(this.status);
                this.friendName.addClassName('profile-friend-name');
			}
			else
			{
				this.friendName.addClassName('profile-friend-name-only');
				isStatus = false;
			}			
			
			//build clearing element
			this.clear = new Element('div', {'class': 'clear'});			
			//put it all together
			this.friendRow.appendChild(this.avatar);
			this.friendRow.appendChild(this.friendName);
			if (isStatus)
				this.friendRow.appendChild(this.friendStatus);
			this.friendRow.appendChild(this.clear);
			
			return this.friendRow;
		}
	});

	//create each friend and place them in the friend's list
	function loadFriends(friends) {
		if (friends.length > 0) {
			for (j = 0; j < friends.length; j++) {
				nextFriend = new friend(friends[j][0], friends[j][1], friends[j][2], friends[j][6], friends[j][4], friends[j][10]);
				$('friends-list').appendChild(nextFriend.build());
			}
			updateTotalFriends();
		} else {
			$('friends-list').update('<span id="profile-notice">0 Friends.</span>');
		}
	};


	//enable mouse tracking on friend's list
	function activateRow(userId, el)
	{
		el.observe('click', function(e) {
			if (e.target) {
				targ = e.target;
			} else if (e.srcElement) {
				targ = e.srcElement;
			}		
			if (targ.nodeType == 3) { // defeat Safari bug
				targ = targ.parentNode;
			}
			
			if (!targ.hasClassName('disable-click')) {
				document.location = '/dyn/prof/'+userId;
			}
		});
		el.observe('mouseover', function(event) {
			var element = Event.element(event);
			element = (element.hasClassName('profile-friend')) ? element : element.ancestors()[0];			
			element.addClassName('active-friend');
		});
		el.observe('mouseout', function(event) {
			var element = Event.element(event);
			element = (element.hasClassName('profile-friend')) ? element : element.ancestors()[0];	
			element.removeClassName('active-friend');
		});
	}

	//loop through all friends and enable mouse tracking on each
	function activateFriends() {
		friendElements = $$('.profile-friend');
		friendElements.each(function(el, j) {
			activateRow(myFriends[j][0], el);
		});
	}

	//friend search object
	var friendSearch = Class.create({
	
		initialize: function(friendsData, friendsContainer) {
			
			friendSearchObj = this;
			this.friendsContainer = friendsContainer;
			this.friendsPerPage = friendsData.length;
			this.friendsData = friendsData;
			this.friendElements = $$('.profile-friend');
			this.searchElement = $('search-friends');
			
			$('search-friends').observe('keyup', function() {
				if (this.value != 'Search friends...') {
					friendSearchObj.searchFriends(friendSearchObj.searchElement.value);
				}
			});
			
			this.searchElement.observe('focus', function() {
				if (this.value == 'Search friends...') {
					this.value = '';
					this.style.color = '#000';
				}
			});
			
			this.searchElement.observe('blur', function() {
				if (this.value == '') {
					this.value = 'Search friends...';
					this.style.color = '#999';
				}
			});	
			
		},
		
		searchFriends: function(searchStr) {
			friendSearchObj = this;
			i = 0;
			this.friendElements.each(function(el, index) {
				if (searchStr == '') {
					if (index < friendSearchObj.friendsPerPage) {
						el.show();
						$('friends-list-position').innerHTML = '';
					}
				} else {
					friendExp = searchStr.replace(' ', '|'); 
					friendExp = new RegExp(friendExp,"gi");
					currentFriend = el.childElements()[1].innerHTML.toLowerCase();
					if (currentFriend.search(friendExp) != -1) {
						el.show();
						i++;
					} else {
						el.hide();
					}
					$('friends-list-position').innerHTML = i + ' friend matches.';
				}
			});		
		}
	});				
		
	var friends = loadFriends(myFriends);
	var friendSearch = new friendSearch(myFriends, 'friends-list');
	activateFriends();

});