<?xml version="1.0" encoding="UTF-8"?>
<Module> 
<ModulePrefs author="LabPixies"
author_email="info@labpixies.com" 
description="__MSG_desc__" 
screenshot="http://www.labpixies.com/campaigns/phonebook/images/screenshot.jpg" 
title="__MSG_title__" 
directory_title="Phonebook" 
title_url="http://www.labpixies.com" 
thumbnail="http://www.labpixies.com/campaigns/phonebook/images/thumbnail.jpg" 
height="320" 
render_inline="never">  
<Locale  messages="http://www.labpixies.com/campaigns/phonebook/i19/all_all.xml"/>
<Locale lang="de" messages="http://www.labpixies.com/campaigns/phonebook/i19/de_all.xml"/>
<Locale lang="es" messages="http://www.labpixies.com/campaigns/phonebook/i19/es_all.xml"/>		
<Locale lang="fr" messages="http://www.labpixies.com/campaigns/phonebook/i19/fr_all.xml"/>
<Locale lang="it" messages="http://www.labpixies.com/campaigns/phonebook/i19/it_all.xml"/>
<Locale lang="ja" messages="http://www.labpixies.com/campaigns/phonebook/i19/ja_all.xml"/>
<Locale lang="nl" messages="http://www.labpixies.com/campaigns/phonebook/i19/nl_all.xml"/>
<Locale lang="pl" messages="http://www.labpixies.com/campaigns/phonebook/i19/pl_all.xml"/>
<Locale lang="pt-PT" messages="http://www.labpixies.com/campaigns/phonebook/i19/pt_all.xml"/>
<Locale lang="pt-BR" messages="http://www.labpixies.com/campaigns/phonebook/i19/pt_all.xml"/>
<Locale lang="zh-CN" messages="http://www.labpixies.com/campaigns/phonebook/i19/zh_cn_all.xml"/>	

<Require feature="setprefs"/>
<Require feature="analytics" /> 
<Require feature="dynamic-height"/> 	
</ModulePrefs>
<UserPref name="k1" datatype="hidden" default_value=""/>
<UserPref name="k2" datatype="hidden" default_value=""/>
<UserPref name="k3" datatype="hidden" default_value=""/>
<UserPref name="stored_contacts" datatype="hidden" default_value=""/>
<UserPref name="last_letter" datatype="hidden" default_value=""/>
<Content type="html">
<![CDATA[
<!-- 
 Phonebook Gadget
 Design & Code: LabPixies
 All subsequent code and resources used are proprietary of LabPixies unless directly stated otherwise.
 Copyright (C) 2008 LabPixies.    
 www.labpixies.com
 
 This work is licensed under the Creative Commons Attribution-NonCommercial-NoDerivs 2.5 License.
 To view a copy of this license, visit http://creativecommons.org/licenses/by-nc-nd/2.5/ or
 send a letter to Creative Commons, 543 Howard Street, 5th Floor, San Francisco, California, 94105, USA.
 -->

<title>Phonebook</title>

<style  type="text/css">
body {
	text-align:center;
	padding: 0;
	margin: 0;
}

#lp_main_container a {
	text-decoration:none;
}
#lp_main_container a:link {
	color: #59483f;
	text-decoration:none;
}   
#lp_main_container a:visited {
	color: #59483f;
	text-decoration:none;
}  
#lp_main_container a:hover {
	color: #dc4a20;
	text-decoration:none;
}  
#lp_main_container a:active {
	color: #dc4a20;
	text-decoration:none;
}


.page_title {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #dc4a20;
}
.text10_lightbrown {
	font-family: Arial, Helvetica, sans-serif;
	/*font-size: 10px;	*/
	font-size: __MSG_edit_font__px;	
	color: #887b72;	
}
.text10_lightbrown_spec {
	font-family: Arial, Helvetica, sans-serif;	
	font-size: __MSG_btn_font__px;
	color: #887b72;	
}
.text11_brown {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #59483f;
	text-decoration:none;	
}
.buttons_text {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FFFFFF;
}
.contacts_letters {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: bold;
	color: #dc4a20;
}
.text12_brown {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #59483f;
}

.delete_table_border {
	background-color: #FFFFFF;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #f0bf7d;
	border-right-color: #c79e68;
	border-bottom-color: #c79e68;
	border-left-color: #f0bf7d;
}

.text11_orangebold {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #dc4a20;
	font-weight: bold;
}

.contact_row {
	height: 19px;
}

.sys_btn_left_off
{
	height:12px;
	width:7px;
	cursor:pointer;
}
.sys_btn_right_off
{
	height:12px;
	width:7px;
	cursor:pointer;
}

.sys_btn_text_off
{
	background-color: #97897f;
	font-family: Arial, Helvetica, sans-serif;
	/*font-size: 9px;*/
	font-size:__MSG_sys_btn_font__px;
	color: #FFFFFF;
	height:12px;
	text-align:center;
	cursor:pointer;
}

.sys_btn_left_roll
{
	height:12px;
	width:7px;
	cursor:pointer;
}
.sys_btn_right_roll
{
	height:12px;
	width:7px;
	cursor:pointer;
}										
.sys_btn_text_roll
{
	background-color: #dc4a20;
	font-family: Arial, Helvetica, sans-serif;
	/*font-size: 9px;*/
	font-size:__MSG_sys_btn_font__px;
	color: #FFFFFF;
	height:12px;
	text-align:center;
	cursor:pointer;
}

.notebook_background
{
	
}

.add_background
{
	
}
.search_background
{
	
	background-repeat:no-repeat;
}

.index_roll
{
	
}

.index_off
{
	
}

.index_on
{
	
}
.add_input
{
	height:18px;
	width:92px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #59483f;
	border-left:none;
	border-right:none;
	border-top:none;
	border-bottom:dashed 1px #cdc8c5;
}

.index_table
{
	background-repeat:no-repeat;
	width:46px;
	height:245px;
}

.index_row
{		
	width:23px;
	height:15px;		
}

.index_row_no
{		
	width:23px;
	height:15px;		
}

.index_row_empty
{		
	width:23px;
	height:2px;		
}

.index_row_bottom
{
	width:23px;		
	/*height:48px;*/
	height:33px;
}

.holder {
	float: left;			
}

.scroll-pane {	
	overflow: auto;	
	float: left;
	height: 218px;
}

.pb_scroll .jScrollPaneTrack {

}

.pb_scroll .jScrollPaneDrag {
	background: url();
	background-repeat: repeat-y;
	background-position:center;	
}

.pb_scroll .jScrollPaneDrag:hover {
	background-position:center;			
}

.pb_scroll .jScrollPaneDragTop {

}
.pb_scroll .jScrollPaneDragTop:hover {

}
.pb_scroll .jScrollPaneDragBottom {
	
}
.pb_scroll .jScrollPaneDragBottom:hover {

}
.pb_scroll a.jScrollArrowUp {
	height: 8px;
}
.pb_scroll a.jScrollArrowUp:hover {
	height: 8px;
}

.pb_scroll .jScrollArrowDown {
	height: 8px;
}
.pb_scroll a.jScrollArrowDown:hover {
	height: 8px;
}

/* IE SPECIFIC HACKED STYLES */
* html .pb_scroll .jScrollPaneDragBottom {
	bottom: -1px;
}
/* /IE SPECIFIC HACKED STYLES */

/********* SCROLLING ******************/
.jScrollPaneContainer {
	position: relative;
	overflow: hidden;
	z-index: 1;
}

.jScrollPaneTrack {
	position: absolute;
	cursor: pointer;
	right: 0;
	top: 0;
	height: 100%;
	background: #aaa;
}
.jScrollPaneDrag {
	position: absolute;
	background: #666;
	cursor: pointer;
	overflow: hidden;
}
.jScrollPaneDragTop {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
}
.jScrollPaneDragBottom {
	position: absolute;
	bottom: 0;
	left: 0;
	overflow: hidden;
}
a.jScrollArrowUp {
	display: block;
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	text-indent: -2000px;
	overflow: hidden;
	height: 9px;
}
a.jScrollArrowUp:hover {
}

a.jScrollArrowDown {
	display: block;
	position: absolute;
	z-index: 1;
	bottom: 0;
	right: 0;
	text-indent: -2000px;
	overflow: hidden;
	height: 9px;
}
a.jScrollArrowDown:hover {

}
a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {
	
}
/********* /SCROLLING ******************/
</style>
<!-- PUT THIS TAG IN THE head SECTION -->
<script type="text/javascript" src="http://partner.googleadservices.com/gampad/google_service.js">
</script>
<script type="text/javascript">
  GS_googleAddAdSenseService("ca-pub-8123415297019784");
  GS_googleEnableAllServices();
</script>
<script type="text/javascript">
  GA_googleAddSlot("ca-pub-8123415297019784", "phonebook_txt");
</script>
<script type="text/javascript">
  GA_googleFetchAds();
</script>
<!-- END OF TAG FOR head SECTION -->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script src="http://www.google-analytics.com/ga.js" type="text/javascript"></script>

<script type="text/javascript">
var $lp=jQuery.noConflict();
var _gadgetID=75;

var mSCRIPT = _IG_GetCachedUrl("http://cdn.labpixies.com/infra/js/lp_data.js");
document.write('<scr'+'ipt type="text/javascript" src="'+mSCRIPT+'"></scr'+'ipt>');

mSCRIPT = _IG_GetCachedUrl("http://cdn.labpixies.com/infra/jquery/jquery.tablesorter.js");
document.write('<scr'+'ipt type="text/javascript" src="'+mSCRIPT+'"></scr'+'ipt>');

mSCRIPT = _IG_GetCachedUrl("http://cdn.labpixies.com/infra/jquery/jquery.mousewheel.js");
document.write('<scr'+'ipt type="text/javascript" src="'+mSCRIPT+'"></scr'+'ipt>');

mSCRIPT = _IG_GetCachedUrl("http://cdn.labpixies.com/infra/jquery/jscrollpane.js");
document.write('<scr'+'ipt type="text/javascript" src="'+mSCRIPT+'"></scr'+'ipt>');

mSCRIPT = _IG_GetCachedUrl("http://cdn.labpixies.com/infra/js/json_parser.js");
document.write('<scr'+'ipt type="text/javascript" src="'+mSCRIPT+'"></scr'+'ipt>');

var pageTracker;

var contact_fields = {name:0, lastname:1, mobile:2, home:3, office:4, email:5, status:6};
var ITEMS_SEPARATOR = '_I_';
var FIELDS_SEPARATOR = '_F_';
var my_phonebook;
var index_letters = '';	
var MAX_DATA_LEN = 1400;
var max_len = 20;
var prefs = new _IG_Prefs();
var GADGET_BASE = 'http://cdn.labpixies.com/campaigns/phonebook/';

var gadget_data = null;

/*------------------------------------------------------------------------------------*/	
// register onLoad events
_IG_RegisterOnloadHandler(labpixies_gadget_load);
/*------------------------------------------------------------------------------------*/
	
/*------------------------------------------------------------------------------------*/
jQuery.preloadImages = function()
{
  for(var i = 0; i<arguments.length; i++)
  {
    jQuery("<img>").attr("src", arguments[i]);
  }
}
/*------------------------------------------------------------------------------------*/

function lp_isSafari()
{
	return(navigator.userAgent.indexOf("Safari")!= -1);
}

function json_esc(a) {
	return window.encodeURIComponent ? encodeURIComponent(a) : escape(a);
}	

function trackEvent(eventName)
{		
	try { 
		pageTracker._trackEvent('Phonebook', eventName);		
		reported=true; 
	}
	catch(e){}
}

function get_image_url(src)
{
	return _IG_GetCachedUrl(src);
	//return src;
}
	
/*------------------------------------------------------------------------------------*/
// on load - init phonebook and environment
function labpixies_gadget_load()
{					
	lpgadgets.lp.data.init(labpixies_gadget_load_callback);	
}
/*------------------------------------------------------------------------------------*/

function labpixies_gadget_load_callback()
{
	pageTracker = _gat._getTracker("UA-345375-1");
	pageTracker._initData();				
	my_phonebook = new phonebook('#pb_sorting_table', '#contacts_display', 'stored_contacts');		
	my_phonebook.init_phonebook();			
}

/*------------------------------------------------------------------------------------*/
// handles enter on various forms (save, search ...)
function onKeyHandle(e,action){
	var keynum;
	var keychar;
	var numcheck;
	
	// IE
	if(window.event) 
	{
		keynum = e.keyCode;
	}
	// Netscape/Firefox/Opera
	else if(e.which) 
	{
		keynum = e.which;
	}

	if (keynum == 13) 
	{			
		eval(action);
		return false;
	}
	
	return true;
}
/*------------------------------------------------------------------------------------*/

/*------------------------------------------------------------------------------------*/
// strips HTML tags from inputs
function removeHTMLTags(str)
{
	return str.replace(/<\/?[^>]+(>|$)/g, ""); 		
}
/*------------------------------------------------------------------------------------*/

/*------------------------------------------------------------------------------------*/
// wraps long data strings	
function wrap_long_data(str, max_str_len)
{	
	var ret;
	
	if (str.length > max_str_len)	
		ret = str.substring(0,max_str_len) + '...';	
	else	
		ret = str;	
	
	return ret;
}
/*------------------------------------------------------------------------------------*/

/*------------------------------------------------------------------------------------*/
function break_str(str)
{	
	var i;
	var new_str = '';
	
	for (i=0;i<str.length;i++)
	{		
		new_str = new_str + str.substr(i,1);
	
		if (((i+1)%15)==0)
			new_str = new_str + '<br/>';
	
	}
	return new_str;
}
/*------------------------------------------------------------------------------------*/

/*------------------------------------------------------------------------------------*/
// display error message instead of the gadget, in case of lp data error
function gadget_data_error()
{	

	$lp('#top_level_cont').hide();	
	$lp('#err_div').html('<center><div style="text=align:center;width:245px;height:274px;font-family: Arial, Helvetica, sans-serif;font-size:11px; line-height:15px; color:#363636"><img src="http://cdn.labpixies.com/images/oops_data_icon.png" width="150" height="74" style="margin-top:15px;margin-bottom:15px"/><br/>__MSG_data_err1__<br/>__MSG_data_err2__</div></center>');	
}
/*------------------------------------------------------------------------------------*/

/*------------------------------------------------------------------------------------*/
// phone book object - handles contacts data and the phonebook gui	
function phonebook(container_area, contacts_area, contacts_storage)
{
	this.contacts = new Array();
	this.container_area = container_area;
	this.contacts_area = contacts_area;	
	this.contacts_storage = contacts_storage;		
	var current_contact_id;	
	var	last_data_key = -1;
	var OTHERS_LETTER = 'index_letter_91';
	var curr_index_letter='';	
			
	/*------------------------------------------------------------------------------------*/
	// inits the gadget upon creation
	this.init_phonebook = function()
	{			
		this.load_images_first();
		this.display_loading();
		// load data from lp data engine		
		lpgadgets.lp.data.get([], my_phonebook.data_init_callback);				
	}
	/*------------------------------------------------------------------------------------*/				
				
	/*------------------------------------------------------------------------------------*/		
	// fired after thi initial data is loaded
	this.data_init_callback = function(data)
	{								
		if (data.success)
		{									
			gadget_data	= data;		
			
			my_phonebook.init_gui();		
			my_phonebook.preload_gui_images();			
			// if no contacts - display "Add contact" panel
			if (my_phonebook.contacts.length == 0) {
				$lp('#pb_btn_add').click();
			}
						
			if (gadget_data.data.last_letter)
			{
				$lp('#'+gadget_data.data.last_letter).click();		
				
				/*****/
				/*
				if (gadget_data.data.last_letter == OTHERS_LETTER)
				{
					curr_index_letter = '';
					$lp('#'+gadget_data.data.last_letter).click();								
				}
				*/
			}
			$lp('#pb_alert_loading').hide();
		}
		else
		{			
			gadget_data_error();			
		}
	}
	/*------------------------------------------------------------------------------------*/	
		
	/*------------------------------------------------------------------------------------*/
	// loads contacts from saved data
	this.load_contacts = function()
	{				
		this.load_contacts_callback(gadget_data);
	}
	/*------------------------------------------------------------------------------------*/

	/*------------------------------------------------------------------------------------*/	
	// loads contacts from data keys into phonebook array
	this.load_contacts_callback = function(data)
	{				
		var cur_contact;	
		var i;			
		var string_data = prefs.getString(this.contacts_storage);			
		var contacts_json = {};
		var x;
			
		if (data.success)
		{						
			this.make_sortable();	
			
			// if new format			
			if (string_data.length == 0)
			{			
				for (x in data.data)				
				{			
					if (!x.match('last_letter'))
					{													
						curr_contact = JSON.parse(data.data[x]);
						
						this.add_contact(curr_contact.name,
											 curr_contact.lastname, 
											 curr_contact.mobile, 
											 curr_contact.home, 
											 curr_contact.office, 
											 curr_contact.email, 
											 1,
											 false,
											 false,
											 x);													
												
						if (parseInt(x) > last_data_key)
							last_data_key = parseInt(x);											 
					}
				}
			
				this.display_panel('pb_contacts_panel');								
				$lp('.contact_row').css('background-image','url('+_IG_GetCachedUrl(GADGET_BASE+'images/contacts/dotted_line_19height.gif')+')');									 
			}
			
			// if in one of twol old formats
			else
			{		
				string_data = string_data.replace(/\|/g, '"');					
				
				// if the data is in old (string with dilimiters format - load it into array
				if (string_data.match(ITEMS_SEPARATOR) && string_data.match(FIELDS_SEPARATOR))
				{		
					var contacts_from_str = string_data.split(ITEMS_SEPARATOR); 
					var curr_key = -1;
				
					if (contacts_from_str.length > 1)
		            {
		                for (i=1; i<contacts_from_str.length; i++)
		                {                       
		                    cur_contact = _unesc(contacts_from_str[i]).split(FIELDS_SEPARATOR);                                                                                                    
		                   
							// save curr contact
		                    this.add_contact(cur_contact[contact_fields.name],
		                                     cur_contact[contact_fields.lastname],
		                                     cur_contact[contact_fields.mobile],
		                                     cur_contact[contact_fields.home],
		                                     cur_contact[contact_fields.office],
		                                     cur_contact[contact_fields.email],
		                                     1,
		                                     true,
		                                     -1); 																										
		                }
						
						// delete old data format
						prefs.set(this.contacts_storage ,'');
						lpgadgets.lp.data.set('last_letter', prefs.getString('last_letter'), null, 'last_letter');	
						gadget_data.data.last_letter = prefs.getString('last_letter');				
						prefs.set('last_letter', '');
		            } 		         
				}			
				
				// if data in pref json format
				else
				{					
					if (string_data.length > 0)
					{				
						// load contacts from json																					
						contacts_json =  JSON.parse(string_data);					
						if (contacts_json.contacts.length > 0)
						{
							for (i=0; i<contacts_json.contacts.length; i++)
							{									
								cur_contact = contacts_json.contacts[i];	
								// save curr contact								
								this.add_contact(cur_contact.n,
												 cur_contact.l, 
												 cur_contact.m, 
												 cur_contact.h, 
												 cur_contact.o, 
												 cur_contact.e, 
												 1,
												 true,
												 -1);											 																								 							
							}
						}
						// delete old data format
						prefs.set(this.contacts_storage ,'');	
						lpgadgets.lp.data.set('last_letter', prefs.getString('last_letter'), null, 'last_letter');	
						gadget_data.data.last_letter = prefs.getString('last_letter');
						prefs.set('last_letter', '');						
					}					
				}
			}
			
			this.refresh_view();	
			_IG_AdjustIFrameHeight();
			this.set_scroller_images();		
		}
		else
		{		
			gadget_data_error();
		}
	}
	/*------------------------------------------------------------------------------------*/	
	
	/*------------------------------------------------------------------------------------*/	
	this.count_items = function()
	{
		var ret = 0;		
		for (var i=0;i<this.contacts.length;i++)
		{						
			if (this.contacts[i].status == 1)
				ret = ret+1;
		}		
		return ret;
	}	
	/*------------------------------------------------------------------------------------*/	

	/*------------------------------------------------------------------------------------*/	
	// returns key for given contact, to use with lpdata
	this.get_contact_key = function(contact_id)
	{
		return contact_id;
	}
	/*------------------------------------------------------------------------------------*/	
	
	/*------------------------------------------------------------------------------------*/	
	// saves given contact using lpdata
	this.save_contact_remote = function(contact_id)
	{		
		var string_to_save = JSON.stringify(this.contacts[contact_id]);				
		var data_key = this.contacts[contact_id].data_key;
		var data_descriptor = this.contacts[contact_id].name.substr(0,1).toUpperCase().charCodeAt(0);		
		lpgadgets.lp.data.set(data_key, string_to_save, my_phonebook.save_contact_remote_callback, data_descriptor);
	}
	/*------------------------------------------------------------------------------------*/	
	
	/*------------------------------------------------------------------------------------*/	
	// fired after the contact is saved
	this.save_contact_remote_callback = function(data)
	{		
		if (data.success)
		{
			//console.log('Contact saved');
		}
		else
		{			
			gadget_data_error();
		}
	}
	/*------------------------------------------------------------------------------------*/		
									
	/*------------------------------------------------------------------------------------*/
	// adds a new contact
	this.add_contact = function (name, lastname, mobile, home, office, email, status, is_refresh, is_save, data_key)
	{						
		var new_data_key;
		var is_display = false;
		
		if (is_save)
		{					
			last_data_key = last_data_key+1;
			new_data_key = last_data_key;
		}
		else
			new_data_key = data_key;

		if (is_save)	
		{
			this.contacts[this.contacts.length] = new contact(this.contacts.length, 
														  removeHTMLTags(name), 
														  removeHTMLTags(lastname), 
														  removeHTMLTags(mobile), 
														  removeHTMLTags(home),
														  removeHTMLTags(office), 
														  removeHTMLTags(email), 
														  status,
														  new_data_key);			
		}		
		else
		{
			this.contacts[this.contacts.length] = new contact(this.contacts.length, 
														  name, 
														  lastname, 
														  mobile, 
														  home,
														  office, 
														  email, 
														  status,
														  new_data_key);			
		}
		
		this.contacts[this.contacts.length-1].display(this.contacts_area);	
		
				
		// if new contact is added by user
		if (is_save)							
		{
			trackEvent('AddContact');
			this.save_contact_remote(this.contacts.length-1);												
						
			this.display_panel('pb_contacts_panel');							
			$lp('.contact_row').css('background-image','url('+_IG_GetCachedUrl(GADGET_BASE+'images/contacts/dotted_line_19height.gif')+')');									 
			
			this.clean_fields();
		}
		
		if (is_refresh)		
		{							
			this.refresh_view();	
			my_phonebook.set_scroller_images();				
		}		
	}
	/*------------------------------------------------------------------------------------*/				
	
	/*------------------------------------------------------------------------------------*/	
	// fired after contact is removed
	this.remove_contact_callback = function(data)
	{		
		if (data.success)
		{
			//console.log('Contact removed');
		}
		else
		{
			gadget_data_error();		
		}
	}
	/*------------------------------------------------------------------------------------*/	
	
	/*------------------------------------------------------------------------------------*/
	// removes a contact
	this.remove_contact = function()
	{		
		trackEvent('RemoveContact');
		
		this.contacts[current_contact_id].status = 0;
		$lp('#contact_'+current_contact_id).remove();	
		$lp('#pb_contact_'+current_contact_id).remove();				
		// set index letters on the right
		this.update_index_letters('');	
		// back to contacts list panel
		this.display_panel('pb_contacts_panel');
		// refresh scroll bar
		if (my_phonebook.count_items()>0)		
			$lp('#pb_scroll_holder').jScrollPane({showArrows:true, scrollbarWidth: 12, arrowSize: 8});								
		// remove key		
		lpgadgets.lp.data.deletekey(this.contacts[current_contact_id].data_key,my_phonebook.remove_contact_callback);		
	}
	/*------------------------------------------------------------------------------------*/
			
	/*------------------------------------------------------------------------------------*/
	// updates a contact
	this.update_contact = function(name, lastname, mobile, home, office, email)
	{					
		trackEvent('UpdateContact');
		
		// update data in array	
		this.contacts[current_contact_id].name = removeHTMLTags(name);
		this.contacts[current_contact_id].lastname = removeHTMLTags(lastname);
		this.contacts[current_contact_id].mobile = removeHTMLTags(mobile);
		this.contacts[current_contact_id].home = removeHTMLTags(home);
		this.contacts[current_contact_id].office = removeHTMLTags(office);
		this.contacts[current_contact_id].email = removeHTMLTags(email);
		
		// update contact name in the list					
		$lp('#pb_contact_name_'+current_contact_id).text(wrap_long_data(name + ' ' + lastname, max_len));
											
		this.save_contact_remote(current_contact_id);
		
		// in case all contacts in a letter are removed - remove letter panel
		// if no letter panel exists - create a letter panel	
		this.update_index_letters(name.substring(0,1).toUpperCase());	

		this.search_contact('');
									
		// back to contacts list tpanel	
		this.display_panel('pb_contacts_panel');

		this.refresh_view();		
	}
	/*------------------------------------------------------------------------------------*/
	
	/*------------------------------------------------------------------------------------*/
	// sets the state of index letters
	this.update_index_letters = function(first_letter)
	{		
		var curr_first_letter;
		var curr_index_cell;
		var html = '';
		var curr_first_letter_charcode;
						
		$lp('.pb_contact_letter').hide();
		$lp('.index_row').css('cursor','');
		index_letters = '';
								
		$lp('.pb_contact_item').hide().filter(function (index) {	
			curr_first_letter = $lp(this).find('a').text().toUpperCase().substring(0,1);	
							
			$lp('#pb_index_letter_' + curr_first_letter.charCodeAt(0)).show()			
			
			if (!my_phonebook.is_other_first_letter(curr_first_letter))
			{
				index_letters = index_letters + curr_first_letter;
				curr_first_letter_charcode = curr_first_letter.charCodeAt(0);
			}
			else
			{
				if (!index_letters.match('@'))	
				{
					index_letters = index_letters + '@';	
					curr_first_letter_charcode = 91;
				}
			}			
			$lp('#index_letter_'+curr_first_letter_charcode).css('cursor','pointer');
												 									
	    	return (true);
	  	}).show();
	  		  		  		  
	  	// add a capital letter panel, if there is no one	  	
	  	if (first_letter != '')
	  	{
		  	var curr_panel = '#pb_index_letter_'+first_letter.charCodeAt(0);
			if ($lp(curr_panel+':visible').size()==0)	
			{	
				html = '<tr id="' + curr_panel +'" class="pb_contact_letter">'+
					   '<td class="contacts_letters">'+first_letter+'</td></tr>';
				$lp('#pb_contacts_list').append(html);
				var tmp_panel = $lp(curr_panel);
				tmp_panel.click();							
			}			
	  	}
	  	$lp('.contact_row').css('background-image','url('+_IG_GetCachedUrl(GADGET_BASE+'images/contacts/dotted_line_19height.gif')+')');	  				
	}
	/*------------------------------------------------------------------------------------*/
		
	/*------------------------------------------------------------------------------------*/		
	// display update pannel with all the values filled in
	this.display_update_panel = function()
	{			
		// fill update fields
		$lp('#pb_add_first_name').val(this.contacts[current_contact_id].name);
		$lp('#pb_add_last_name').val(this.contacts[current_contact_id].lastname);
		$lp('#pb_add_mobile').val(this.contacts[current_contact_id].mobile);
		$lp('#pb_add_home').val(this.contacts[current_contact_id].home);
		$lp('#pb_add_office').val(this.contacts[current_contact_id].office);
		$lp('#pb_add_email').val(this.contacts[current_contact_id].email);
					
		this.display_panel('pb_add_contact_panel');
	}
	/*------------------------------------------------------------------------------------*/
			
	/*------------------------------------------------------------------------------------*/
	// register the contacts table as sortable
	this.make_sortable = function()
	{		
		$lp(this.container_area).tablesorter();						
	}
	/*------------------------------------------------------------------------------------*/
	
	/*------------------------------------------------------------------------------------*/
	// refreshing the phone book after add/delete/init
	this.refresh_view = function()
	{		
		var sorting = [[0,0]]; 
		if (this.contacts.length > 1) 
		{			
			$lp(this.container_area).trigger('update');
			$lp(this.container_area).trigger('sorton', [sorting]);					
			
			if (typeof($lp('#pb_scroll_holder').jScrollPane) == 'function') 	
				$lp('#pb_scroll_holder').jScrollPane({showArrows:true, scrollbarWidth: 12, arrowSize: 8});
		}		
	}
	/*------------------------------------------------------------------------------------*/
	
	/*------------------------------------------------------------------------------------*/
	// clean input fields after adding a contact
	this.clean_fields = function()
	{
		$lp('.add_input').val('');
	}
	/*------------------------------------------------------------------------------------*/
			
	/*------------------------------------------------------------------------------------*/
	this.unicodeEscape = function(pstrString) 
	{
		if (pstrString == "") 
		{
			return "";
		}
		var iPos = 0;
		var strOut = "";
		var strChar;
		var strString = escape(pstrString);
		while (iPos < strString.length) 
		{
			strChar = strString.substr(iPos, 1);
			if (strChar == "%") 
			{
				strNextChar = strString.substr(iPos + 1, 1);
				if (strNextChar == "u") 
				{
					strOut += strString.substr(iPos, 6);
					iPos += 6;
				}
				else 
				{
					strOut += "%U00" +
					strString.substr(iPos + 1, 2);
					iPos += 3;
				}
			}
			else 
			{
				strOut += strChar;
				iPos++;
			}
		}
		return strOut;
	}
	/*------------------------------------------------------------------------------------*/
			
	/*------------------------------------------------------------------------------------*/
	// perform search contact
	this.search_contact = function(search_term, src)
	{		
		var patt;
	
		var search_text = search_term;
		search_text = search_text.replace(/\*/g,'');
		search_text = search_text.replace(/\\/g,'');		
		//search_text = escape(search_text.toUpperCase());		
		//search_text = this.unicodeEscape(search_text.toUpperCase());
		
		//search_text = search_text.toUpperCase();
		//alert('search_text: ' + search_text);
			
		trackEvent('SearchContact');
		
		switch (src)
		{
			case 'index':
				search_text = escape(search_text.toUpperCase());	
				patt = new RegExp("^"+search_text);
			break;
			
			case 'others':
				search_text = escape(search_text.toUpperCase());	
				patt = /^[^a-zA-Z]/g;
			break;
			
			default:
				search_text = search_text.toUpperCase();			
				patt = search_text;							
				//patt = new RegExp(search_text);							
		}
								
		$lp('#pb_search_term').val('');
		$lp('#pb_search_panel').hide();	
		
		$lp('.pb_contact_letter').hide();
		$lp('.pb_contact_item').hide().filter(function (index) {
								// display first letter pabels	
									/*
								if (my_phonebook.unicodeEscape($lp(this).find('a').text().toUpperCase()).match(patt))									
									$lp('#pb_index_letter_' + $lp(this).find('a').text().toUpperCase().charCodeAt(0)).show()									
              				    return (my_phonebook.unicodeEscape($lp(this).find('a').text().toUpperCase()).match(patt));
								*/
																
								switch (src)
								{
									case 'index':
										if (my_phonebook.unicodeEscape($lp(this).find('a').text().toUpperCase()).match(patt))									
											$lp('#pb_index_letter_' + $lp(this).find('a').text().toUpperCase().charCodeAt(0)).show()									
										return (my_phonebook.unicodeEscape($lp(this).find('a').text().toUpperCase()).match(patt));
									break;
									
									case 'others':
										if (my_phonebook.unicodeEscape($lp(this).find('a').text().toUpperCase()).match(patt))									
											$lp('#pb_index_letter_' + $lp(this).find('a').text().toUpperCase().charCodeAt(0)).show()									
										return (my_phonebook.unicodeEscape($lp(this).find('a').text().toUpperCase()).match(patt));
									
									break;
									
									default:
										if ( $lp(this).find('a').text().toUpperCase().indexOf(patt) != -1)									
											$lp('#pb_index_letter_' + $lp(this).find('a').text().toUpperCase().charCodeAt(0)).show()									
										return ($lp(this).find('a').text().toUpperCase().indexOf(patt) != -1);								
								}
																							
              				  }).show();
							  
		if($lp('.pb_contact_item:visible').size()==0)
		{			
			$lp('#pb_msg_text').text('__MSG_no_found__');
			this.display_panel('pb_message_panel');
		}  
		else
		{            				  
			this.display_panel('pb_contacts_panel');								  						  								  											  								
			this.refresh_view();
		}
			
		if ( (src != "index") && (src != "others") )
		{
			$lp('#'+curr_index_letter).css('background-image','');
			$lp('#'+curr_index_letter).removeClass('index_roll');	
			$lp('#'+curr_index_letter).removeClass('index_on');
		}
				
		my_phonebook.set_scroller_images();								  							 
	}
	/*------------------------------------------------------------------------------------*/
			
	/*------------------------------------------------------------------------------------*/
	// display "confirm delete" box
	this.display_confirm_delete = function()
	{
		var dialog_left =($lp('#lp_main_container').width() - $lp('#pb_confirm_delete').width())/2;
		var dialog_top = ($lp('#lp_main_container').height() - $lp('#pb_confirm_delete').height()) / 2;		
		dialog_top = dialog_top + $lp('#lp_main_container').offset().top;
				
		$lp("#pd_confirm_delete_name").text(wrap_long_data(this.contacts[current_contact_id].name + ' ' + this.contacts[current_contact_id].lastname, 16));
					
		$lp('#pb_confirm_delete').css({
			'top': dialog_top,
			'left': dialog_left
		});
		$lp('#pb_confirm_delete').toggle();				
	}
	/*------------------------------------------------------------------------------------*/
	
	/*------------------------------------------------------------------------------------*/
	// display "alert" box
	this.display_alert = function(str, is_show)
	{
		var dialog_left =($lp('#lp_main_container').width() - $lp('#pb_alert').width())/2;
		var dialog_top = ($lp('#lp_main_container').height() - $lp('#pb_alert').height()) / 2;		
		dialog_top = dialog_top + $lp('#lp_main_container').offset().top;
											
		$lp('#pb_alert').css({
			'top': dialog_top,
			'left': dialog_left
		});
		
		if (is_show)
			$lp('#pb_alert').show();				
		else
			$lp('#pb_alert').hide();						
	}
	/*------------------------------------------------------------------------------------*/
	
	/*------------------------------------------------------------------------------------*/
	// display "loading" box
	this.display_loading = function(str)
	{
		var dialog_left =($lp('#lp_main_container').width() - $lp('#pb_alert_loading').width())/2;
		var dialog_top = ($lp('#lp_main_container').height() - $lp('#pb_alert_loading').height()) / 2;		
		dialog_top = dialog_top + $lp('#lp_main_container').offset().top;
											
		$lp('#pb_alert_loading').css({
			'top': dialog_top,
			'left': dialog_left
		});
		$lp('#pb_alert_loading').toggle();				
	}
	/*------------------------------------------------------------------------------------*/
		
	/*------------------------------------------------------------------------------------*/
	// display "search" box
	this.display_search_box = function()
	{
		var dialog_left =($lp('#lp_main_container').width() - $lp('#pb_search_panel').width())/2;
		var dialog_top = ($lp('#lp_main_container').height() - $lp('#pb_search_panel').height()) / 2;
		dialog_top = dialog_top + $lp('#lp_main_container').offset().top;
				
		$lp('#pb_search_panel').css({
			'top': dialog_top,
			'left': dialog_left
		});
																
		$lp('#pb_search_panel').toggle();			
		$lp('#pb_search_term').focus();				
	}
	/*------------------------------------------------------------------------------------*/
	
	/*------------------------------------------------------------------------------------*/
	// displays the given panel and hides all the rest
	this.display_panel = function(panel_id)
	{		
		$lp('#pb_confirm_delete').hide();
		$lp('.phonebook_panel').hide().filter(function (index) {													
              				    return ($lp(this).attr('id').match(panel_id));
								}).show();   	
								$lp('#pb_search_panel').hide();	
								
		if (panel_id == 'pb_add_contact_panel')
			this.set_add_button(false);
		else	
			this.set_add_button(true);
									        				  	              				 		             				  			 
	}
	/*------------------------------------------------------------------------------------*/

	/*------------------------------------------------------------------------------------*/
	// return contact's location in the array, based on it's id
	this.get_contact_location = function(contact_id)
	{
		var i;
		for (i=0;i<this.contacts.length;i++)
		{
			if (this.contacts[i].id == contact_id)
				return i;		
		}
		return -1;
	}
	/*------------------------------------------------------------------------------------*/
	
	/*------------------------------------------------------------------------------------*/
	// fills the "Single contact" panel wtih data and display it		
	this.display_single_contact = function(contact_id)
	{
		var count_rows = 0;
		
		current_contact_id = contact_id;				
		
		// fill contact's data		
		$lp('#pb_single_contact_name_div').html(break_str(this.contacts[contact_id].name) + ' ' + break_str(this.contacts[current_contact_id].lastname));		
		$lp('#pb_single_contact_name').attr('title',this.contacts[contact_id].name + ' ' + this.contacts[contact_id].lastname);
		$lp('#pb_single_contact_mobile').html(wrap_long_data(this.contacts[contact_id].mobile, max_len));
		$lp('#pb_single_contact_mobile').attr('title',this.contacts[contact_id].mobile);
		$lp('#pb_single_contact_home').html(wrap_long_data(this.contacts[contact_id].home, max_len));
		$lp('#pb_single_contact_home').attr('title',this.contacts[contact_id].home);
		$lp('#pb_single_contact_office').html(wrap_long_data(this.contacts[contact_id].office, max_len));
		$lp('#pb_single_contact_office').attr('title',this.contacts[contact_id].office);
		$lp('#pb_single_contact_email_cont').html('<a href="mailto:'+ 
					this.contacts[contact_id].email +'" class="text12_brown" title="'+this.contacts[contact_id].email+'">'+
					wrap_long_data(this.contacts[contact_id].email,max_len)+'</a>');
					
		// hide panels with no data		
		$lp('.pb_single_contact_data_holder').hide().filter(function (index) {									
								if ($lp( '.pb_single_contact_row',this).text().length <= 0)
									count_rows = count_rows + 1;										
              				    return ($lp( '.pb_single_contact_row',this).text().length > 0);								
								}).show();	 												               				  			
		
		// this is a IE workaround :(	
		$lp('#pb_single_contact_spring').css('height', count_rows * 24);
		
		// display single contact data	
		this.display_panel('pb_single_contact_panel');
	}
	/*------------------------------------------------------------------------------------*/
	
	this.preload_gui_images = function()
	{
		
	}
	/*------------------------------------------------------------------------------------*/
	
	/*------------------------------------------------------------------------------------*/
	this.load_images_first = function()
	{
		$lp('#img_notebook_left').attr('src', _IG_GetCachedUrl(GADGET_BASE+'images/interface/notebook_left.gif'));
		$lp('#img_add_contact_off').attr('src', _IG_GetCachedUrl(GADGET_BASE+'images/icons/add_contact_off.gif'));
		$lp('#img_search_off').attr('src', _IG_GetCachedUrl(GADGET_BASE+'images/icons/search_off.gif'));
		$lp('#img_mobile_icon').attr('src', _IG_GetCachedUrl(GADGET_BASE+'images/display_contact/mobile_icon.gif'));
		$lp('#img_home_icon').attr('src', _IG_GetCachedUrl(GADGET_BASE+'images/display_contact/home_icon.gif'));
		$lp('#img_office_icon').attr('src', _IG_GetCachedUrl(GADGET_BASE+'images/display_contact/office_icon.gif'));
		$lp('#img_email_icon').attr('src', _IG_GetCachedUrl(GADGET_BASE+'images/display_contact/email_icon.gif'));
		$lp('#img_back_off').attr('src', _IG_GetCachedUrl(GADGET_BASE+'images/icons/back_off.gif'));		
		$lp('#img_edit_contact_off').attr('src', _IG_GetCachedUrl(GADGET_BASE+'images/icons/edit_contact_off.gif'));
		$lp('#img_delete_contact_off').attr('src', _IG_GetCachedUrl(GADGET_BASE+'images/icons/delete_contact_off.gif'));
		$lp('#img_add_contact_left').attr('src', _IG_GetCachedUrl(GADGET_BASE+'images/add_contact/add_contact_left.gif'));
		$lp('#img_mobile_icon_add').attr('src', _IG_GetCachedUrl(GADGET_BASE+'images/add_contact/mobile_icon.gif'));
		$lp('#img_home_icon_add').attr('src', _IG_GetCachedUrl(GADGET_BASE+'images/add_contact/home_icon.gif'));
		$lp('#img_office_icon_add').attr('src', _IG_GetCachedUrl(GADGET_BASE+'images/add_contact/office_icon.gif'));
		$lp('#img_email_icon_add').attr('src', _IG_GetCachedUrl(GADGET_BASE+'images/add_contact/email_icon.gif'));
		$lp('#img_add_contact_right').attr('src', _IG_GetCachedUrl(GADGET_BASE+'images/add_contact/add_contact_right.gif'));		

		// CSS		
		$lp('.contact_row').css('background-image','url('+_IG_GetCachedUrl(GADGET_BASE+'images/contacts/dotted_line_19height.gif')+')');
		$lp('.notebook_background').css('background-image','url('+_IG_GetCachedUrl(GADGET_BASE+'images/interface/notebook_background.gif')+')');
		$lp('.add_background').css('background-image','url('+_IG_GetCachedUrl(GADGET_BASE+'images/add_contact/add_contact_background.gif')+')');
		$lp('.search_background').css('background-image','url('+_IG_GetCachedUrl(GADGET_BASE+'images/interface/search_plate2.gif')+')');
		
		
		$lp('.index_roll').css('background-image','url('+get_image_url(GADGET_BASE+'images/interface/notebook_index_2_roll.gif')+')');
		$lp('.index_off').css('background-image','url('+get_image_url(GADGET_BASE+'images/interface/notebook_index_2_off.gif')+')');		
		$lp('.index_on').css('background-image','url('+get_image_url(GADGET_BASE+'images/interface/notebook_index_2_on.gif')+')');
		$lp('.index_table').css('background-image','url('+get_image_url(GADGET_BASE+'images/interface/notebook_index_2_off.gif')+')');		
		
	}
	/*------------------------------------------------------------------------------------*/
	
	/*------------------------------------------------------------------------------------*/
	// load gadget images, using urls from porting layer
	this.load_images = function()
	{						
		// buttons css
		this.set_button_images();	
		
		// scroller css
		this.set_scroller_images();	
	}
	/*------------------------------------------------------------------------------------*/
	
	/*------------------------------------------------------------------------------------*/
	this.set_button_images = function()
	{
		$lp('.sys_btn_left_off').css('background-image','url('+_IG_GetCachedUrl(GADGET_BASE+'images/icons/button_plate_left_off.gif')+')');
		$lp('.sys_btn_right_off').css('background-image','url('+_IG_GetCachedUrl(GADGET_BASE+'images/icons/button_plate_right_off.gif')+')');
		$lp('.sys_btn_left_roll').css('background-image','url('+_IG_GetCachedUrl(GADGET_BASE+'images/icons/button_plate_left_roll.gif')+')');
		$lp('.sys_btn_right_roll').css('background-image','url('+_IG_GetCachedUrl(GADGET_BASE+'images/icons/button_plate_right_roll.gif')+')');		
	}
	/*------------------------------------------------------------------------------------*/
	
	/*------------------------------------------------------------------------------------*/
	// load gadget scroller images, using urls from porting layer
	this.set_scroller_images = function() 
	{
		$lp('a.jScrollArrowUp').css('background-image','url('+_IG_GetCachedUrl(GADGET_BASE+'images/contacts/scroll_up_off.gif')+')');
		$lp('a.jScrollArrowDown').css('background-image','url('+_IG_GetCachedUrl(GADGET_BASE+'images/contacts/scroll_down_off.gif')+')');
		$lp('.jScrollPaneTrack').css('background','url('+_IG_GetCachedUrl(GADGET_BASE+'images/contacts/scroll_background.gif')+') repeat-y');
		$lp('.jScrollPaneDrag').css('background','url('+_IG_GetCachedUrl(GADGET_BASE+'images/contacts/scroller_middle_off3.gif')+')');		
	}
	/*------------------------------------------------------------------------------------*/	
	
	/*------------------------------------------------------------------------------------*/		
	this.set_scroll_to = function(index_letter)
	{		
		var char_letter;
		var tmp;
		
		/****/
		/*		
		if ((curr_index_letter == OTHERS_LETTER) && (index_letter == OTHERS_LETTER))
			return true;
			
		if (curr_index_letter == index_letter)
			return true;

		curr_index_letter = index_letter;			
		lpgadgets.lp.data.set('last_letter', curr_index_letter, null, 'last_letter');		
		*/	
	
		tmp = index_letter.split("_");
		char_letter = String.fromCharCode(tmp[2]);

		if (index_letter != OTHERS_LETTER)
			this.search_contact(char_letter, 'index');
		else		
			this.search_contact('', 'others');									
	}
	/*------------------------------------------------------------------------------------*/		
	
	/*------------------------------------------------------------------------------------*/	
	this.set_index_letters = function()
	{
		var curr_bg = '';		
		var browser_fix;
		if (lp_isSafari())
			browser_fix = 7;
		else
			browser_fix = 0;	
		
		// implement rollover of letters index	
		$lp('.index_row').unbind('hover');		
		$lp('.index_row').hover(
			function()
			{	
				curr_bg = $lp(this).css('background-image');
						
				if (($lp(this).css('cursor') == 'pointer') && ( $lp(this).attr('id') != curr_index_letter) )
				{								
					var bg_offset = '-' + ($lp(this).offset().left-$lp('#pb_index_table').offset().left) + 'px -' + ($lp(this).offset().top - $lp('#pb_index_table').offset().top - browser_fix) + 'px';														
					$lp(this).css({'background-image':'url('+get_image_url(GADGET_BASE+'images/interface/notebook_index_2_roll.gif')+')',
					             'background-position':bg_offset});
							
					$lp(this).addClass('index_roll');				             
					$lp(this).css({'background-position':bg_offset});
				}							             																 								
			} ,
			function()
			{							 				
				 if ( $lp(this).attr('id') != curr_index_letter)
				 {
				 	$lp(this).css('background-image',curr_bg);				 
				 }							
			}  
		);
		
		// implement click of letters index	
		$lp('.index_row').unbind('click');
		$lp('.index_row').click(
			function()
			{
				if ($lp(this).css('cursor') == 'pointer')
				{										
					var curr_index; 
					var tmp, char_index;	
					var bg_offset;
					
					curr_index = '#'+curr_index_letter;
								
					$lp('#pb_alert').hide();
					$lp('#pb_alert_size').hide();
											
					tmp = curr_index.split('_');
					
					if (tmp.length > 1)
					{
						if (tmp[2] == 91)
							tmp[2] = 64;
					
						if(!index_letters.match(String.fromCharCode(tmp[2])))
						{
							bg_offset = '-' + ($lp(curr_index).offset().left-$lp('#pb_index_table').offset().left) + 'px -' + ($lp(curr_index).offset().top - $lp('#pb_index_table').offset().top - browser_fix) + 'px';																
							$lp(curr_index).css({'background-image':'url('+get_image_url(GADGET_BASE+'images/interface/notebook_index_2_dis.gif')+')',
						             'background-position':bg_offset});

						}
						else
						{
							$lp(curr_index).css('background-image','');
						}
					}
														
				 	$lp(curr_index).removeClass('index_roll');	
				 	$lp(curr_index).removeClass('index_on');					 					 					 	
									 
					tmp = $lp(this).attr('id').split("_");
					char_index = tmp[2];
										
					my_phonebook.set_index_letters_bg(parseInt(char_index));
				 	
					/****/
					
					curr_index_letter = $lp(this).attr('id');					
					lpgadgets.lp.data.set('last_letter', curr_index_letter, null, 'last_letter');
					
					
					bg_offset = '-' + ($lp(this).offset().left-$lp('#pb_index_table').offset().left) + 'px -' + ($lp(this).offset().top - $lp('#pb_index_table').offset().top - browser_fix) + 'px';																
					$lp(this).css({'background-image':'url('+get_image_url(GADGET_BASE+'images/interface/notebook_index_2_on.gif')+')',
					             'background-position':bg_offset});
					$lp(this).addClass('index_on');				             
					$lp(this).css({'background-position':bg_offset});	
										
					my_phonebook.set_scroll_to($lp(this).attr('id'));																										
										
					my_phonebook.display_panel('pb_contacts_panel');											
				}									
			}					
		);									
	}
	/*------------------------------------------------------------------------------------*/
	
	/*------------------------------------------------------------------------------------*/
	// return TRUE if the first letter of a contact is non english (a-z, A-Z)
	// return FALSE if it is
	this.is_other_first_letter = function(str)
	{
		var str_first_letter = str.substring(0,1).toUpperCase();
		var first_char_code = str_first_letter.charCodeAt(0);
		var ret;

		if ( (first_char_code>=65) && (first_char_code<=90) )
			ret = false;
		else
			ret = true;
					
		return ret;
	}
	/*------------------------------------------------------------------------------------*/
	
	/*------------------------------------------------------------------------------------*/
	this.set_index_letters_bg = function(char_index)
	{		
		var i;
		var bg_offset;	
		var start_loop = 65;
		var stop_loop = 91;		
						
		var browser_fix;
		
		if (lp_isSafari())
			browser_fix = 7;
		else
			browser_fix = 0;	
			
		if (!isNaN(char_index))
		{
			start_loop = char_index;
			stop_loop = char_index;
		}					
					
		for(i=start_loop;i<=stop_loop;i++)
		{				
			if (i<stop_loop)
			{
				if (index_letters.match(String.fromCharCode(i)))			
					curr_bg = 'notebook_index_2_off.gif';				
				else				
					curr_bg = 'notebook_index_2_dis.gif';
			}
			else
			{				
				if (index_letters.match('@'))			
					curr_bg = 'notebook_index_2_off.gif';				
				else				
					curr_bg = 'notebook_index_2_dis.gif';
			}
									
			curr_index_cell = '#index_letter_'+i;															
			
			bg_offset = '-' + ($lp(curr_index_cell).offset().left-$lp('#pb_index_table').offset().left) + 'px -' + ($lp(curr_index_cell).offset().top - $lp('#pb_index_table').offset().top - browser_fix) + 'px';										
			
			$lp(curr_index_cell).css({'background-image':'url('+get_image_url(GADGET_BASE+'images/interface/'+curr_bg)+')',
										'background-position':bg_offset});										
		}	
	}
	/*------------------------------------------------------------------------------------*/
	
	/*------------------------------------------------------------------------------------*/
	this.set_add_button = function(is_enable)
	{
		if (is_enable)
		{
			$lp('#pb_btn_add').click(function() {	
			   			$lp('#pb_btn_edit_perform').hide();		   		
						$lp('#pb_btn_add_perform').show();									
						my_phonebook.display_panel('pb_add_contact_panel');
						my_phonebook.clean_fields();
						$lp('#pb_add_first_name').focus();
						my_phonebook.set_add_button(false);
					})	;
			$lp('#pb_btn_add').css('cursor','pointer');						
		}
		else
		{
			$lp('#pb_btn_add').unbind('click');
			$lp('#pb_btn_add').css('cursor','default');						
		}	
	}
	/*------------------------------------------------------------------------------------*/
		
	/*------------------------------------------------------------------------------------*/
	// init gui options and events	
	this.init_gui = function()
	{		   
		my_phonebook.load_images();
		
		if (lp_isSafari())
			$lp("#pb_sorting_table").attr("width","187");
		else
			$lp("#pb_sorting_table").attr("width","100%");		
		
	   /*-- SEARCH ---------------------------------------------------------------*/
	   // init search by enter key
	   $lp("#pb_search_term").keypress(function(event) {
	    	onKeyHandle(event,'my_phonebook.search_contact($lp(\'#pb_search_term\').val())');				
	   });	
	   
	   // set "display search panel" button	- to show/hide search panel 
	   $lp('#pb_btn_search').click(function() {my_phonebook.display_search_box();})	
	   
	   // set "cancel search" button - to close search panel
	   $lp('#pb_btn_cancel_search').click(function() {$lp('#pb_search_panel').hide();})	  
	   
	   // set "perform search" button - to actually perform the search
	   $lp('#pb_btn_perform_search').click(function() {my_phonebook.search_contact($lp('#pb_search_term').val());}) 
	   /*-------------------------------------------------------------------------*/
	  
	  
	   /*-- ADD ---------------------------------------------------------------*/		  	  
	   // set "add contact" button - to show "Add contact" panel	 
	   $lp('#pb_btn_add').click(function() {	
	   			$lp('#pb_btn_edit_perform').hide();		   		
				$lp('#pb_btn_add_perform').show();									
				my_phonebook.display_panel('pb_add_contact_panel');
				my_phonebook.clean_fields();
				$lp('#pb_add_first_name').focus();
				my_phonebook.set_add_button(false);
			}
		)		
		
		// set "add" button - to add the new contact   
	    $lp("#pb_btn_add_perform").click(function() {				
	    	if ($lp('#pb_add_first_name').val().replace(/ /g,'').length > 0)
	    	{			    									
				var first_letter = 	$lp('#pb_add_first_name').val().substring(0,1).toUpperCase();										
				my_phonebook.add_contact($lp('#pb_add_first_name').val(),
									 $lp('#pb_add_last_name').val(),
									 $lp('#pb_add_mobile').val(),
									 $lp('#pb_add_home').val(),
									 $lp('#pb_add_office').val(),
									 $lp('#pb_add_email').val(),
									 1,true,true,-1);
							
				my_phonebook.set_index_letters_bg();
								
				if (!my_phonebook.is_other_first_letter(first_letter))
					$lp('#index_letter_'+first_letter.charCodeAt(0)).click();										
				else
					$lp('#index_letter_91').click();
				
				my_phonebook.display_single_contact(my_phonebook.contacts.length-1);																
	    	}
	    	else
	    	{	    			    		
	    		my_phonebook.display_alert('ALERT', true);
	     		$lp('#pb_add_first_name').focus();
	    	}
			
			my_phonebook.set_add_button(true);
	   });
	   
	   // set "cancel add" button - to get back to conatcts list panel
	   $lp('#pb_btn_add_cancel').click(function() {
			$lp('#pb_alert').hide();
			$lp('#pb_alert_size').hide();
			my_phonebook.display_panel('pb_contacts_panel');
			my_phonebook.set_add_button(true);
			})	
	   /*-------------------------------------------------------------------------*/
		
	
		/*-- EDIT ---------------------------------------------------------------*/ 		  
		// set "edit" button on single contact panel - to open edit panel
	    $lp('#pb_btn_edit').click(function() {
		   		$lp('#pb_btn_add_perform').hide();
				$lp('#pb_btn_edit_perform').show();
		   		my_phonebook.display_update_panel();
				$lp('#pb_add_first_name').focus();
			}
		 );		   
		 
		 // set "save" button - to save the edited contact   
	     $lp("#pb_btn_edit_perform").click(function() {			 
	     	if ($lp('#pb_add_first_name').val() != '')
	     	{		 		     		
				var first_letter = 	$lp('#pb_add_first_name').val().substring(0,1).toUpperCase();
				
				my_phonebook.update_contact($lp('#pb_add_first_name').val(),
										$lp('#pb_add_last_name').val(),
										$lp('#pb_add_mobile').val(),
										$lp('#pb_add_home').val(),
										$lp('#pb_add_office').val(),
										$lp('#pb_add_email').val());															    	
				my_phonebook.set_scroller_images();
				my_phonebook.set_index_letters_bg(); 
											
				if (!my_phonebook.is_other_first_letter(first_letter))
					$lp('#index_letter_'+first_letter.charCodeAt(0)).click();										
				else
					$lp('#index_letter_91').click();	

				my_phonebook.display_single_contact(current_contact_id);											
	     	}
	     	else
	     	{
	     		my_phonebook.display_alert('ALERT', true);	     	
	     		$lp('#pb_add_first_name').focus();
	     	}	     											   											
	    });
	    /*-------------------------------------------------------------------------*/
	  
	  
	  	/*-- VIEW ---------------------------------------------------------------*/	 
	    // set "back" button on single contact panel - to get back to contacts list
	    $lp('#pb_btn_back').click(function() {my_phonebook.display_panel('pb_contacts_panel')})	
			   		  
	   /*-------------------------------------------------------------------------*/
	  	
		
	   	/*-- DELETE ---------------------------------------------------------------*/
		// set "delete" button on single contact panel						  
	    $lp('#pb_btn_delete').click(function() {my_phonebook.display_confirm_delete()});
		
		// set "confirm delete" button on single contact panel - to perform contact delete
	    $lp('#pb_btn_confirm_delete').click(function() {
	   			my_phonebook.remove_contact(); 
				$lp('#pb_btn_back').click();		
				my_phonebook.set_scroller_images(); 
				my_phonebook.set_index_letters_bg();

				var first_letter = my_phonebook.contacts[current_contact_id].name.substr(0,1).toUpperCase();
				var first_letter_index_id = first_letter.charCodeAt(0);
				var click_index_id = first_letter_index_id;
				if (my_phonebook.is_other_first_letter(first_letter))
				{
					first_letter = '@';
					first_letter_index_id = 64;
					click_index_id = 91;
				}
				
				if(index_letters.match(String.fromCharCode(first_letter_index_id)))
					$lp('#index_letter_'+click_index_id).click();
				
				// if no contacts - display "add" panel
				if (my_phonebook.count_items()==0)		
					$lp('#pb_btn_add').click();	
	    	}			
		);
		
		// set "cancel delete" button on single contact panel - to close the "confirm delete" panel				  
	    $lp('#pb_btn_cancel_delete').click(function() {$lp('#pb_confirm_delete').hide();});
		/*-------------------------------------------------------------------------*/	 
		
		/*-- ALERT ---------------------------------------------------------------*/
		$lp('#pb_btn_cancel_alert').click(function() {$lp('#pb_alert').hide();});
		/*-------------------------------------------------------------------------*/	
		
		/*-- ALERT SIZE------------------------------------------------------------*/
		$lp('#pb_btn_cancel_alert_size').click(function() {$lp('#pb_alert_size').hide();});
		/*-------------------------------------------------------------------------*/	 
	   
	   	   
	  	/*-- GENERAL GUI ---------------------------------------------------------------*/	  				   		  		  
	   // implement rollover for image buttons
	   $lp('.rollover').hover(
			function()
			{
				if($lp('.rollover_img', this).attr("src").indexOf("_roll") == -1) 
				{						
					var newSrc = $lp('.rollover_img', this).attr("src").replace("_off.gif","_roll.gif");						
					$lp('.rollover_img', this).attr("src",newSrc);									
				}
			},
			function()
			{
				if($lp('.rollover_img', this).attr("src").indexOf("_roll.gif") != -1) 
				{
					var oldSrc = $lp('.rollover_img', this).attr("src").replace("_roll.gif","_off.gif");
					$lp('.rollover_img', this).attr("src",oldSrc);
				}
			}
		);
		
	   // implement rollover for text buttons
	   $lp('.rollover_btn').hover(
			function()
			{										
				if($lp('td', this).attr('class').indexOf("_roll") == -1) 
				{							
					$lp('.sys_btn_left_off', this).attr('class', 'sys_btn_left_roll');						
					$lp('.sys_btn_text_off', this).attr('class', 'sys_btn_text_roll');
					$lp('.sys_btn_right_off', this).attr('class', 'sys_btn_right_roll');
					my_phonebook.set_button_images();	
				}									
			},
			function()
			{
				if($lp('td', this).attr('class').indexOf("_roll") != -1) 
				{				
					$lp('.sys_btn_left_roll', this).attr('class', 'sys_btn_left_off');						
					$lp('.sys_btn_text_roll', this).attr('class', 'sys_btn_text_off');
					$lp('.sys_btn_right_roll', this).attr('class', 'sys_btn_right_off');
					my_phonebook.set_button_images();	
				}
			}
		);					
				
		my_phonebook.set_index_letters();
		
		my_phonebook.load_contacts();	
		my_phonebook.set_index_letters_bg();		
	}
	/*-------------------------------------------------------------------------*/	 

}
/*------------------------------------------------------------------------------------*/

/*------------------------------------------------------------------------------------*/
// contact object	
function contact(id, name, lastname, mobile, home, office, email, status, data_key)
{			
	this.id=id;
	this.name=name;
	this.lastname=lastname;
	this.mobile=mobile;
	this.home=home;
	this.office=office;
	this.email=email;	
	this.status=1;
	this.data_key=data_key;
		
	/*------------------------------------------------------------------------------------*/
	// disaply a contact	
	this.display = function(contacts_area)
	{
		var html;		
		var contact_id = this.id;
		var first_letter =  this.name.substr(0,1).toUpperCase();	
		//var first_letter =  escape(this.name).substr(0,1).toUpperCase();	
		var contact_title;
		var html;	
		var first_letter_charcode;
		
		//alert(first_letter);
		
		//if (!index_letters.match(first_letter))	
		if (index_letters.indexOf(first_letter) == -1)	
		{		
			if(my_phonebook.is_other_first_letter(this.name))
			{
				if (!index_letters.match('@'))	
				{
					index_letters = index_letters + '@';	
					first_letter_charcode = 91;
				}
			}
			else	
			{			
				index_letters = index_letters + first_letter;	
				first_letter_charcode = first_letter.charCodeAt(0);	
			}
			
			// set link to index letter			
			$lp('#index_letter_'+first_letter_charcode).css('cursor','pointer');
						
			var panel_td = document.createElement('td');		
			panel_td.className = 'contacts_letters';
			panel_td.width = 185;
			panel_td.innerHTML = first_letter;
			
			var panel_tr = document.createElement('tr');
			panel_tr.id = 'pb_index_letter_' + first_letter.charCodeAt(0);
			panel_tr.className = 'pb_contact_letter';
			panel_tr.appendChild(panel_td);
			
			document.getElementById('pb_contacts_list').appendChild(panel_tr);			
		}	
		
		
		//  add the contact			
		var tmp  = this.name + ' ' + this.lastname;
		if (tmp.length > 25)
			contact_title = this.name + ' ' + this.lastname;
		else
			contact_title = '';
				
		// LINK
		var contact_link = document.createElement('a');	
		contact_link.id = 'pb_contact_name_'+contact_id;
		contact_link.className = 'text11_brown';
		contact_link.href = 'javascript:void(0)';
		contact_link.title = contact_title;		
		contact_link.innerHTML = wrap_long_data(this.name + ' ' + this.lastname, 18);

		// TD
		var contact_td = document.createElement('td');		
		contact_td.className = 'contact_row';
		
		//TR
		var contact_tr = document.createElement('tr');		
		contact_tr.id = 'pb_contact_'+contact_id;
		contact_tr.className = 'pb_contact_item';
		
		contact_td.appendChild(contact_link);
		contact_tr.appendChild(contact_td);		
		document.getElementById('pb_contacts_list').appendChild(contact_tr);
						
		var contact = $lp('#pb_contact_'+contact_id);
		contact.click(function(){my_phonebook.display_single_contact(contact_id)});	
												
		contact.css('cursor','pointer');
		contact.hover(
				function()
				{
					$lp('a', this).css('color','#dc4a20');
				},
				function()
				{
					$lp('a', this).css('color','#59483f');
				}
			);			
	}			
	/*------------------------------------------------------------------------------------*/				
}		
/*------------------------------------------------------------------------------------*/
</script>

<div id="err_div"></div>

<div id="top_level_cont">

<div style='height:10px;font-size:1px;'></div>

<table id="lp_main_container" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
	<td align="center">
	<div id="_menu"></div>
	<div id="data_len"></div>
<div id="_mainHolder" style="margin-left:auto;margin-right:auto;width:274px;margin-top:5px;">
<table id="pb_phonebook" width="274" height="245" border="0" cellspacing="0" cellpadding="0">    
  <!-- TOP BUTTONS -->
  <tr>
  	<td colspan="3" align="right">
		<table border="0" cellspacing="0" cellpadding="0">
  			<tr>
    			<td>
					<table border="0" cellspacing="0" cellpadding="0">
      					<tr>							
							<td><a href="javascript:void(0)" class="text10_lightbrown rollover" id="pb_btn_add"><img id="img_add_contact_off" width="17" height="13" border="0" class="rollover_img">__MSG_btn_add_contact__ </a></td>
      					</tr>
    				</table>
				</td>
    			<td width="10"> </td>
    			<td>
					<table border="0" cellspacing="0" cellpadding="0">
      					<tr>							
							<td><a href="javascript:void(0)" class="text10_lightbrown rollover" id="pb_btn_search"><img id="img_search_off" width="13" height="13" border="0" class="rollover_img">__MSG_btn_search_contact__ </a></td>							
      					</tr>
    				</table>
				</td>											
  			</tr>
		</table>	
	</td>	
  </tr>
  <!-- /TOP BUTTONS -->
  
  <tr>
    <td width="30" align="left" valign="top"><img id="img_notebook_left" width="30" height="245"></td>
    <td width="198" height="245" align="center" valign="middle" class="notebook_background">
		<table width="100%" height="228" border="0" cellpadding="0" cellspacing="0">
      		<tr>				
				<td width="12" valign="top"> </td>
				
				<!-- MAIN AREA -->
        		<td valign="top" align="left">	
				
					<!-- CONTACTS -->								
					<span id="pb_contacts_panel" style="display:inline;margin-top:10px;margin-bottom:10px" class="phonebook_panel holder pb_scroll">
						<span id="pb_scroll_holder" class="scroll-pane">
							
							<table id="pb_sorting_table" width="185" border="0" cellspacing="0" cellpadding="0">
								<thead style="display:none">
									<th>Name</th>							
								</thead>
								
								<!-- CONTACTS ARE ADDED HERE -->
								<tbody id="pb_contacts_list" align="left" valign="top">			
									<!--						
									<tr id="pb_contact_a" class="pb_contact_item" style="height:1px;color:#f3ebde;font-size:1px;">
										<td class="contact_row" style="height:1px">
											<a id="pb_contact_name_a"  href="javascript:void(0)">.</a>
										</td>
									</tr>
									-->
								</tbody>						
		        			</table>
						</span>
					</span>		
					<!-- /CONTACTS -->
					
					<!-- SINGLE CONTACT -->        		
	        		<span id="pb_single_contact_panel" style="display:none;overflow:hidden" class="phonebook_panel">
						<table width="95%" height="228" border="0" cellpadding="0" cellspacing="0">
		          			<tr>
		            			<td height="25"> </td>
		          			</tr>
		          			<tr>
		            			<td height="25" class="page_title" id="pb_single_contact_name" align="left"><div id="pb_single_contact_name_div" style="overflow:hidden;height:35px;">NAME</div></td>
		          			</tr>
		          			<tr class="pb_single_contact_data_holder" height="24">
		            			<td height="24">
									<table width="100%" border="0" cellspacing="0" cellpadding="0">
			              				<tr>
			                				<td width="20"><img id="img_mobile_icon" width="16" height="24"></td>
			                				<td class="text12_brown pb_single_contact_row" id="pb_single_contact_mobile" align="left">MOBILE</td>
			              				</tr>
		            				</table>
								</td>
		          			</tr>					
		          			<tr class="pb_single_contact_data_holder" height="24">
			            		<td height="24">
									<table width="100%" border="0" cellspacing="0" cellpadding="0">
			              				<tr>
			                				<td width="20"><img id="img_home_icon" width="16" height="24"></td>
			                				<td class="text12_brown pb_single_contact_row" id="pb_single_contact_home" align="left">HOME</td>
			              				</tr>
			            			</table>
								</td>
		          			</tr>
		          			<tr class="pb_single_contact_data_holder" height="24">
		            			<td height="24">
									<table width="100%" border="0" cellspacing="0" cellpadding="0">
		              					<tr>
		                					<td width="20"><img id="img_office_icon" width="16" height="24"></td>
		                					<td class="text12_brown pb_single_contact_row" id="pb_single_contact_office" align="left">OFFICE</td>
		             					</tr>
		            				</table>
								</td>
		          			</tr>
		          			<tr class="pb_single_contact_data_holder" height="24">
			            		<td height="24">
									<table width="100%" border="0" cellspacing="0" cellpadding="0">
			              				<tr>
			                				<td width="20"><img id="img_email_icon" width="16" height="24"></td>
			                				<td class="text12_brown pb_single_contact_row" align="left" id="pb_single_contact_email_cont"><a id="pb_single_contact_email" href="" class="text12_brown">EMAIL</a></td>
			              				</tr>
			            			</table>
								</td>
		          			</tr>							
							<tr>
								<td id="pb_single_contact_spring" style="height:0"></td>
							</tr>							
		          			<tr>
		            			<td valign="bottom">
									<table width="100%" border="0" cellspacing="0" cellpadding="0">
		              					<tr>
		                					<td valign="middle" height="22"><a href="javascript:void(0)" class="text10_lightbrown_spec rollover" id="pb_btn_back"><img id="img_back_off" name="back" width="14" height="22" border="0" align="absmiddle" class="rollover_img"> __MSG_btn_back__</a></td>
											<td width="__MSG_btn_spacer__"> </td>
											<td valign="middle" height="22"><a href="javascript:void(0)" class="text10_lightbrown_spec rollover" id="pb_btn_edit"><img id="img_edit_contact_off" name="edit" width="20" height="22" border="0" align="absmiddle" class="rollover_img"> __MSG_btn_edit__</a></td>
											<td width="__MSG_btn_spacer__"> </td>
											<td valign="middle" height="22"><a href="javascript:void(0)" class="text10_lightbrown_spec rollover" id="pb_btn_delete"><img id="img_delete_contact_off" name="delete" width="21" height="22" border="0" align="absmiddle" class="rollover_img"> __MSG_btn_delete__</a></td>											
		              					</tr>
		            				</table>
								</td>
		          			</tr>
		        		</table>
					</span>
					<!-- /SINGLE CONTACT -->
					
					<!-- MESSAGES -->        		
	        		<span id="pb_message_panel" style="display:none" class="phonebook_panel">
						<table width="95%" height="228" border="0" cellpadding="0" cellspacing="0">
		          			<tr>
		            			<td height="25"> </td>
		          			</tr>
		          			<tr>
		            			<td align="center" valign="top" class="page_title" id="pb_msg_text"> </td>
		          			</tr>
		        		</table>
					</span>
					<!-- /MESSAGES -->
					
					<!-- ADD or EDIT CONTACT -->
					<span id="pb_add_contact_panel" style="display:none" class="phonebook_panel">
						<table width="90%" height="199" border="0" cellpadding="0" cellspacing="0">						
		          			<tr>
		            			<td coslpan="3" height="15"> </td>
		          			</tr>
				      		<tr>
				        		<td width="8"><img id="img_add_contact_left" width="8" height="199"></td>
				        		<td valign="top" class="add_background">
									<table id="pb_save_all" width="100%" border="0" cellspacing="0" cellpadding="0">
				          				<tr>
				            				<td height="22" valign="bottom" class="page_title">__MSG_edit_title__ </td>
				          				</tr>
				          				<tr>
				            				<td height="24">
												<table width="100%" height="24" border="0" cellpadding="0" cellspacing="0">
				              						<tr>
				                						<td width="58" class="text10_lightbrown">__MSG_first_name__: </td>
				                						<td valign="middle" align="right"><input class="add_input" maxlength="25" type="text" id="pb_add_first_name"></td>
				              						</tr>
				            					</table>
											</td>
				          				</tr>
				          				<tr>
				            				<td height="24">
												<table width="100%" height="24" border="0" cellpadding="0" cellspacing="0">
				              						<tr>
				                						<td width="58" class="text10_lightbrown">__MSG_last_name__: </td>
				                						<td valign="middle" align="right"><input class="add_input" maxlength="25" type="text" id="pb_add_last_name"></td>
				              						</tr>
				            					</table>
											</td>
				          				</tr>
				          				<tr>
				            				<td height="24">
												<table width="100%" height="24" border="0" cellpadding="0" cellspacing="0">
					              					<tr>
					                					<td width="58" class="text10_lightbrown">
<img id="img_mobile_icon_add" width="11" height="24" align="absmiddle"> __MSG_mobile__: </td>
					                					<td valign="middle" align="right"><input class="add_input" maxlength="25" type="text" id="pb_add_mobile"></td>
					              					</tr>
				            					</table>
											</td>
				          				</tr>
				          				<tr>
					            			<td height="24">
												<table width="100%" height="24" border="0" cellpadding="0" cellspacing="0">
					              					<tr>
					                					<td width="58" class="text10_lightbrown">
<img id="img_home_icon_add" width="11" height="24" align="absmiddle"> __MSG_home__: </td>
					                					<td valign="middle" align="right"><input class="add_input" maxlength="25" type="text" id="pb_add_home"></td>
					              					</tr>
					           					</table>
											</td>
				          				</tr>
				          				<tr>
				            				<td height="24">
												<table width="100%" height="24" border="0" cellpadding="0" cellspacing="0">
				              						<tr>
				                						<td width="58" class="text10_lightbrown">
<img id="img_office_icon_add" width="11" height="24" align="absmiddle"> __MSG_office__: </td>
				                						<td valign="middle" align="right"><input class="add_input" maxlength="25" type="text" id="pb_add_office"></td>
				              						</tr>
				            					</table>
											</td>
				          				</tr>
				          				<tr>
				            				<td height="24">
												<table width="100%" height="24" border="0" cellpadding="0" cellspacing="0">
					              					<tr>
					                					<td width="58" class="text10_lightbrown">
<img id="img_email_icon_add" width="11" height="24" align="absmiddle"> __MSG_email__: </td>
					                					<td valign="middle" align="right"><input class="add_input" maxlength="50" type="text" id="pb_add_email"></td>
					              					</tr>
				            					</table>
											</td>
				          				</tr>
				          				<tr>
					            			<td height="26" align="center">
												<table width="135" border="0" cellspacing="0" cellpadding="0">
					              					<tr>
					                					<!--<td width="__MSG_btn_width__" align="right">-->
														<td width="60" align="right">
															<table id="pb_btn_add_cancel" height="12" border="0" cellpadding="0" cellspacing="0">																				
																<tr class="rollover_btn">											
												                	<td class="sys_btn_left_off"></td>
												                    <td class="sys_btn_text_off"> __MSG_btn_cancel__ </td>
												                    <td class="sys_btn_right_off"></td>											
									        					</tr>
															</table>	
														</td>					
					                					<td width="10"> </td>
					                					<td>
															<table id="pb_btn_add_perform" height="12" border="0" cellpadding="0" cellspacing="0">																				
																<tr class="rollover_btn">											
												                	<td class="sys_btn_left_off"></td>
												                    <td class="sys_btn_text_off" id="pb_add_action"> __MSG_btn_add__ </td>
												                    <td class="sys_btn_right_off"></td>											
									        					</tr>
															</table>
															
															<table id="pb_btn_edit_perform" height="12" border="0" cellpadding="0" cellspacing="0">																				
																<tr class="rollover_btn">											
												                	<td class="sys_btn_left_off"></td>
												                    <td class="sys_btn_text_off" id="pb_save_action"> __MSG_btn_save__ </td>
												                    <td class="sys_btn_right_off"></td>											
									        					</tr>
															</table>
														</td>
					              					</tr>
					            				</table>
											</td>
				          				</tr>
				        			</table>
								</td>
				        		<td width="8"><img id="img_add_contact_right" width="8" height="199"></td>
				      		</tr>
				    	</table>
					</span>
					<!-- /ADD or EDIT CONTACT -->												
				</td>
				<!-- /MAIN AREA -->												  											
      		</tr>
    	</table>
    </td>
	
	<!-- LETTER INDEX -->	
    <td width="46" align="left" valign="top">
		<table id="pb_index_table" class="index_table" cellpadding="0" cellspacing="0" border="0">
			<tr>
				<td class="index_row_empty"></td>
				<td class="index_row_empty"></td>				
			</tr>
			<!--
			<tr>
				<td class="index_row" id="index_letter_65"></td>
				<td class="index_row" id="index_letter_66"></td>				
			</tr>
			<tr>
				<td class="index_row" id="index_letter_67"></td>
				<td class="index_row" id="index_letter_68"></td>				
			</tr>
			<tr>
				<td class="index_row" id="index_letter_69"></td>
				<td class="index_row" id="index_letter_70"></td>				
			</tr>
			<tr>
				<td class="index_row" id="index_letter_71"></td>
				<td class="index_row" id="index_letter_72"></td>				
			</tr>
			<tr>
				<td class="index_row" id="index_letter_73"></td>
				<td class="index_row" id="index_letter_74"></td>				
			</tr>
			<tr>
				<td class="index_row" id="index_letter_75"></td>
				<td class="index_row" id="index_letter_76"></td>				
			</tr>
			<tr>
				<td class="index_row" id="index_letter_77"></td>
				<td class="index_row" id="index_letter_78"></td>				
			</tr>
			<tr>
				<td class="index_row" id="index_letter_79"></td>
				<td class="index_row" id="index_letter_80"></td>				
			</tr>
			<tr>
				<td class="index_row" id="index_letter_81"></td>
				<td class="index_row" id="index_letter_82"></td>				
			</tr>
			<tr>
				<td class="index_row" id="index_letter_83"></td>
				<td class="index_row" id="index_letter_84"></td>				
			</tr>
			<tr>
				<td class="index_row" id="index_letter_85"></td>
				<td class="index_row" id="index_letter_86"></td>				
			</tr>
			<tr>
				<td class="index_row" id="index_letter_87"></td>
				<td class="index_row" id="index_letter_88"></td>				
			</tr>
			<tr>
				<td class="index_row" id="index_letter_89"></td>
				<td class="index_row" id="index_letter_90"></td>				
			</tr>
			-->
			<tr>
				<td class="index_row" id="index_letter_65"></td>
				<td class="index_row" id="index_letter_78"></td>				
			</tr>			
			<tr>
				<td class="index_row" id="index_letter_66"></td>
				<td class="index_row" id="index_letter_79"></td>				
			</tr>
			<tr>
				<td class="index_row" id="index_letter_67"></td>
				<td class="index_row" id="index_letter_80"></td>				
			</tr>
			<tr>
				<td class="index_row" id="index_letter_68"></td>
				<td class="index_row" id="index_letter_81"></td>				
			</tr>
			<tr>
				<td class="index_row" id="index_letter_69"></td>
				<td class="index_row" id="index_letter_82"></td>				
			</tr>
			<tr>
				<td class="index_row" id="index_letter_70"></td>
				<td class="index_row" id="index_letter_83"></td>				
			</tr>
			<tr>
				<td class="index_row" id="index_letter_71"></td>
				<td class="index_row" id="index_letter_84"></td>				
			</tr>
			<tr>
				<td class="index_row" id="index_letter_72"></td>
				<td class="index_row" id="index_letter_85"></td>				
			</tr>
			<tr>
				<td class="index_row" id="index_letter_73"></td>
				<td class="index_row" id="index_letter_86"></td>				
			</tr>
			<tr>
				<td class="index_row" id="index_letter_74"></td>
				<td class="index_row" id="index_letter_87"></td>				
			</tr>
			<tr>
				<td class="index_row" id="index_letter_75"></td>
				<td class="index_row" id="index_letter_88"></td>				
			</tr>
			<tr>
				<td class="index_row" id="index_letter_76"></td>
				<td class="index_row" id="index_letter_89"></td>				
			</tr>
			<tr>
				<td class="index_row" id="index_letter_77"></td>
				<td class="index_row" id="index_letter_90"></td>				
			</tr>
			<tr>
				<td class="index_row" id="index_letter_91" ></td>
				<td class="index_row_no" id="index_bottom_3"></td>				
			</tr>
			<tr>
				<td class="index_row_bottom" id="index_bottom_1"> </td>
				<td class="index_row_bottom" id="index_bottom_2"> </td>				
			</tr>
		</table>	
	</td>
	<!-- /LETTER INDEX -->
  </tr>
</table>
<!-- /CONTACTS BOOK -->

<!-- SEARCH -->
<span id="pb_search_panel" class="phonebook_panel" style="z-index: 1;display:none;position:absolute;margin-left:auto;margin:right:auto;width:135px">
	<table width="157" class="search_background" height="101" border="0" cellspacing="0" cellpadding="0">
		<tr>
			<td height="28" align="center" valign="bottom" class="page_title">__MSG_search_title__</td>
		</tr>
		<tr>
			<td height="44" align="center"><input name="searchbox" type="text" class="text11_brown" id="pb_search_term" size="22"></td>
		</tr>				          		
		<tr>
			<td height="30" align="center">
				<table border="0" cellspacing="0" cellpadding="0">
	  				<tr>
	    				<td align="right">
							<table id="pb_btn_cancel_search" height="12" border="0" cellpadding="0" cellspacing="0">																				
								<tr class="rollover_btn">											
				                	<td class="sys_btn_left_off"></td>
				                    <td class="sys_btn_text_off"> __MSG_btn_cancel__ </td>
				                    <td class="sys_btn_right_off"></td>											
	        					</tr>
							</table>																		
						</td>
	    				<td width="8"> </td>
	    				<td>
							<table id="pb_btn_perform_search" height="12" border="0" cellpadding="0" cellspacing="0">																				
								<tr class="rollover_btn">											
				                	<td class="sys_btn_left_off"></td>
				                    <td class="sys_btn_text_off" valign="middle"> __MSG_btn_search__ </td>
				                    <td class="sys_btn_right_off"></td>											
	        					</tr>            						
	    					</table>
						</td>
	  				</tr>
				</table>
			</td>
		</tr>
	</table>
</span>
<!-- SEARCH -->

<!-- CONFIRM DELETE -->
<span id="pb_confirm_delete" class="phonebook_panel" style="display:none; position:absolute;margin-left:auto;margin:right:auto;width:135px">
	<table width="135" height="60" border="0" cellpadding="0" cellspacing="0" class="delete_table_border">
		<tr>
	    	<td align="center" valign="middle">
				<table width="125" height="58" border="0" cellpadding="0" cellspacing="0">
	        		<tr>
	        			<td align="center" class="text11_orangebold">__MSG_delete_title__<br>
	          			<span id="pd_confirm_delete_name">NAME</span>?</td>
	      			</tr>
	      			<tr>
	        			<td align="center">
							<table border="0" cellspacing="0" cellpadding="0" style="margin-bottom:5px">
	          					<tr>
	            					<td>
										<table id="pb_btn_cancel_delete" height="12" border="0" cellpadding="0" cellspacing="0">																				
											<tr class="rollover_btn">											
							                	<td class="sys_btn_left_off"></td>
							                    <td class="sys_btn_text_off"> __MSG_btn_cancel__ </td>
							                    <td class="sys_btn_right_off"></td>											
		                					</tr>
	            						</table>
									</td>								
	            					<td width="5"> </td>								
	            					<td>
										<table id="pb_btn_confirm_delete" height="12" border="0" cellpadding="0" cellspacing="0">
											<tr class="rollover_btn">											
							                	<td class="sys_btn_left_off"></td>
							                    <td class="sys_btn_text_off"> __MSG_btn_delete__ </td>
							                    <td class="sys_btn_right_off"></td>											
		                					</tr>									
	            						</table>
									</td>								
	          					</tr>
	        				</table>
						</td>
	      			</tr>
	    		</table>
			</td>
		</tr>
	</table>
</span>
<!-- /CONFIRM DELETE -->

<!-- ALERT -->
<span id="pb_alert" class="phonebook_panel" style="display:none; position:absolute; top:0px; left:0px;width:135px">
	<table width="135" height="60" border="0" cellpadding="0" cellspacing="0" class="delete_table_border">
		<tr>
	    	<td align="center" valign="middle">
				<table width="125" height="58" border="0" cellpadding="0" cellspacing="0">
	        		<tr>
	        			<td align="center" class="text11_orangebold">__MSG_insert_name__</td>
	      			</tr>
	      			<tr>
	        			<td align="center">
							<table border="0" cellspacing="0" cellpadding="0">
	          					<tr>
	            					<td>
										<table id="pb_btn_cancel_alert" height="12" border="0" cellpadding="0" cellspacing="0">																				
											<tr class="rollover_btn">											
							                	<td class="sys_btn_left_off"></td>
							                    <td class="sys_btn_text_off"> __MSG_btn_cancel__ </td>
							                    <td class="sys_btn_right_off"></td>											
		                					</tr>
	            						</table>
									</td>									            												
	          					</tr>
	        				</table>
						</td>
	      			</tr>
	    		</table>
			</td>
		</tr>
	</table>
</span>
<!-- /ALERT -->

<!-- ALERT DATA SIZE -->
<span id="pb_alert_size" class="phonebook_panel" style="display:none; position:absolute; top:0px; left:0px;width:135px">
	<table width="135" height="60" border="0" cellpadding="0" cellspacing="0" class="delete_table_border">
		<tr>
	    	<td align="center" valign="middle">
				<table width="125" height="58" border="0" cellpadding="0" cellspacing="0">
	        		<tr>
	        			<td align="center" class="text11_orangebold">__MSG_data_size__</td>
	      			</tr>
	      			<tr>
	        			<td align="center">
							<table border="0" cellspacing="0" cellpadding="0">
	          					<tr>
	            					<td>
										<table id="pb_btn_cancel_alert_size" height="12" border="0" cellpadding="0" cellspacing="0">																				
											<tr class="rollover_btn">											
							                	<td class="sys_btn_left_off"></td>
							                    <td class="sys_btn_text_off"> __MSG_btn_cancel__ </td>
							                    <td class="sys_btn_right_off"></td>											
		                					</tr>
	            						</table>
									</td>									            												
	          					</tr>
	        				</table>
						</td>
	      			</tr>
	    		</table>
			</td>
		</tr>
	</table>
</span>
<!-- /ALERT DATA SIZE -->

<!-- LOADING -->
<span id="pb_alert_loading" class="phonebook_panel" style="display:none; position:absolute; top:0px; left:0px;width:135px">
	<table width="135" height="60" border="0" cellpadding="0" cellspacing="0" class="delete_table_border">
		<tr>
	    	<td align="center" valign="middle">
				<table width="125" height="58" border="0" cellpadding="0" cellspacing="0">
	        		<tr>
	        			<td align="center" class="text11_orangebold">__MSG_loading_contacts__</td>
	      			</tr>	      			
	    		</table>
			</td>
		</tr>
	</table>
</span>
<!-- /LOADING -->

</div>
</td>
</tr>	
</table>

<div style="width:100%;margin-top:5px">
	<!-- PUT THIS TAG IN DESIRED LOCATION OF SLOT phonebook_txt -->
	<script type="text/javascript">
	  GA_googleFillSlot("phonebook_txt");
	</script>
	<!-- END OF TAG FOR SLOT phonebook_txt -->
</div>

<script type="text/javascript">
	_IG_Analytics("UA-345375-1", "/phonebook");
</script>

<!-- LP footer -->
<div>
	<script type="text/javascript">
    var mMENU = _IG_GetCachedUrl("http://cdn.labpixies.com/infra/js/lp_footer.js");
    document.write('<scr'+'ipt type="text/javascript" src="'+mMENU+'"></scr'+'ipt>');
  </script>
</div>
<iframe width="1" height="1" style="width:1px; height:1px; overflow:hidden; position:absolute; visibility:hidden;" src="http://static.labpixies.com/campaigns/phonebook/analytics.html"></iframe>
</div>
]]></Content></Module>