<!-- 

	All content on this website (including text, images, source
	code and any other original works), unless otherwise noted,
	is licensed under a Creative Commons License.
	
	http://creativecommons.org/licenses/by-nc-sa/2.5/
	
	Copyright (C) 2004-2010 Open-Xchange, Inc.
	Mail: info@open-xchange.com 
	
	@author Suphi Basdemir <suphi.basdemir@open-xchange.com>

 -->

<div xmlns:ox="http://localhost/html/dtd/ox.dtd" id="contactDetails" style="display: none;" ox:align="stretch">	

<ox:popupwindow id="contactPreviewMapDiv" class="background-color-content contactMapsDiv" style="display:none;" xmlns:ox="http://localhost/html/dtd/ox.dtd" caption="Route Planning">

	<form onsubmit="return false;" action="" id="routingForm" style="padding:0px;margin:0px;">
     <div class="greywrapper">
      <div class="columnLeft">
          <div class="font-weight-high" ox:i18n="">Start</div>
		  <div class="inputFields">
	     	  <input type="text" onblur="if (this.value == '') this.value = _('Street');" onfocus="if (this.value == _('Street')) this.value = '';" value="" id="station0.street" name="station[0].street"/><br/>
	     	  <input type="text" style="width:5em" onblur="if (this.value == '') this.value = _('ZIP');" onfocus="if (this.value == _('ZIP')) this.value = '';" value="" id="station0.zip" name="station[0].zip"/>
	     	  <input type="text" onblur="if (this.value == '') this.value = _('City');" onfocus="if (this.value == _('City')) this.value = '';" value="" id="station0.city" name="station[0].city"/><br/>
		  </div>
        </div>
        <div class="columnRight">
          <div class="font-weight-high" ox:i18n="">Destination</div>
		  <div class="inputFields">
	     	  <input type="text" onblur="if (this.value == '') this.value = _('Street');" onfocus="if (this.value == _('Street')) this.value = '';" value="" id="station1.street" name="station[1].street"/><br/>
	     	  <input type="text" style="width:5em" onblur="if (this.value == '') this.value = _('ZIP');" onfocus="if (this.value == _('ZIP')) this.value = '';" value="" id="station1.zip" name="station[1].zip"/>
	     	  <input type="text" onblur="if (this.value == '') this.value = _('City');" onfocus="if (this.value == _('City')) this.value = '';" value="" id="station1.city" name="station[1].city"/><br/>
		  </div>
        </div>
		<div class="cleaner" />
        <div class="columnLeft"><div id="station0.country"></div></div>
        <div class="columnRight"><div id="station1.country"></div></div>
		<div class="cleaner" />
      	<div class="lineSeperator background-color-toolbar"></div>
		<div class="cleaner" />
        <div class="columnLeft"><div id="comboRoutingPlanning"></div></div>
        <div class="columnRight"><img id="routeplannerLogo" src="themes/default/img/dummy.gif" width="16" height="16" alt="" title="route planner" ox:i18n="title"/>&#xa0;</div>
		<div class="cleaner" />
        <div style="float:right;"><ox:button class="blueground" name="but_get_directions_cancel" ox:i18n="" style="width:7em;float:right;" onclick="closeMapsDivs();">Cancel</ox:button><ox:button class="blueground" name="but_get_directions" ox:i18n="" style="width:13em;float:right;" onclick="objRoutingPlanner.sendRoutingRequest();">Get directions</ox:button></div>
		<div class="cleaner" />
   </div>
    </form>
</ox:popupwindow>

	<ox:border ox:align="top" ox:size="27px" type="cpheader" dir="2">
		<div ox:align="stretch" style="height:100%">
			<table cellpadding="0" cellspacing="0" border="0" class="headercontenttable border-color-design">
				<tr>
					<td style="width:90%" class="headercontentarea font-style-headline">
						<span id="headDisplayname">Detail</span>
					</td>
					<td style="width:10%" class="padding7px">
						<img id="arrowForConDetailOptions" src="themes/default/img/arrows/arrow-down.gif" alt="" class="configurationJumpArrowView" title="Options" ox:i18n="title"/>
					</td>
				</tr>
			</table>
		</div>
	</ox:border>
	
	<ox:border type="cpbottom" ox:align="bottom" ox:size="1.5em" dir="2" id="bottomContactSplit">
		<div class="smallpopupbordertop border-color-design">		
			<div class="optTaskFooter font-color-default" id="cont_detail_bot"></div>
		</div>
	</ox:border>
	
	<ox:border type="cpbody" dir="2" ox:align="stretch">
		<div ox:align="stretch">
			<div class="processDiv background-color-content" id="contactDetailProcessDiv"/>
			<div class="processDivAnimation background-color-content" id="contactDetailProcessDivAnimation"/>	
			<div id="tabPanelsContact" ox:align="top" ox:size="2.2em" ox:margin="0px 0px 1px 0px" class="tabPanelBackground background-color-additional-content border-color-design">
				<div id="panelContactDetail0" ox:help="Contact overview" class="tabPanelFirst tabPanelColors font-color-disabled background-color-additional-content border-color-design font-weight-default" onClick="changeTab('tabContactDetail0', 'panelContactDetail0')"><span class="dlTab">&#xa0;</span><span ox:i18n="">Overview</span></div>
				<div id="panelContactDetail1" ox:help="Contact overview" class="tabPanelFirst tabPanelColors font-color-disabled background-color-additional-content border-color-design font-weight-default" onClick="changeTab('tabContactDetail1', 'panelContactDetail1')" style="display:none"><span class="contactTab">&#xa0;</span><span ox:i18n="">Overview</span></div>
				<div id="panelContactDetail2" ox:help="View all attachments" class="tabPanel tabPanelColors font-color-disabled background-color-additional-content border-color-design font-weight-default" onClick="changeTab('tabContactDetail2', 'panelContactDetail2')"><span class="attachmentTab">&#xa0;</span><span ox:i18n="">Attachments</span> (<span id="contact_d_count_attachment">0</span>)</div>
				<div id="tagContactDetail" class="tabPanelIconDiv"><img id="tagImgContactDetail" src="themes/default/img/menu/tag_0.gif" width="16" height="16" /></div>
				<div id="privateflagContactDetail" class="tabPanelIconDiv"><img id="privateflagImgContactDetail" src="themes/default/img/dummy.gif" width="16" height="16" /></div>
				<div class="cleaner"></div>
			</div>		
								
			<div ox:align="stretch" class="yScroller">				
				<div id="tabContactDetail1" label="Overview" style="display:none; overflow: hidden;">
					<table cellpadding="0" cellspacing="0" border="0" class="inputGridTable" STYLE="table-layout:fixed;padding-left:4px">
						<colgroup>
						    <col width="20%" />
						    <col width="1%" />
						    <col width="20%" />
						    <col width="4%" />
						    <col width="20%" />
						    <col width="1%" />
						    <col width="18%" />
						    <col width="15%" />
						    <col width="1%" />
						</colgroup>
						<tr> 
							<td class="lableDetailText font-style-lable" ox:i18n="">Display name</td>
							<td></td>
							<td><div class="clipDetailTextWhite"><div class="background-color-content detailTextWhite" id="abstact_display_name">&#xa0;</div></div></td>
							<td></td>
							<td class="lableDetailText font-style-lable" ox:i18n="">Company</td>
							<td></td> 
							<td><div class="clipDetailTextWhite"><div class="background-color-content detailTextWhite detailNarrow" id="abstact_company">&#xa0;</div></div></td>
							<td rowspan="4" valign="top">
								<div id="imageContactDetailTd" class="contactDummyImage border-color-default" style="margin-right:20px; margin-top:5px;"><img id="imageElementContactDetail" src="themes/default/img/contacts/dummypicture.gif" class="border-color-content-default" alt=""/></div>													
							</td>
							<td class="spaceright" rowspan="99">&#xa0;</td>
						</tr>
						<tr>
							<td class="lableDetailText font-style-lable" ox:i18n="">salutation|Title</td>
							<td></td>
							<td><div class="clipDetailTextWhite"><div class="detailTextWhite" id="abstact_title">&#xa0;</div></div></td>
							<td></td>
							<td class="lableDetailText font-style-lable" ox:i18n="">Department</td>
							<td></td>
							<td><div class="clipDetailTextWhite"><div class="background-color-content detailTextWhite detailNarrow" id="abstact_department">&#xa0;</div></div></td>
						</tr>
						<tr>
							<td class="lableDetailText font-style-lable" ox:i18n="">First name</td>
							<td></td>
							<td><div class="clipDetailTextWhite"><div class="background-color-content detailTextWhite" id="abstact_first_name">&#xa0;</div></div></td>
							<td></td>
							<td class="lableDetailText font-style-lable" ox:i18n="">Position</td>
							<td></td>
							<td><div class="clipDetailTextWhite"><div class="background-color-content detailTextWhite detailNarrow" id="abstact_position">&#xa0;</div></div></td>
						</tr>
						<tr>
							<td class="lableDetailText font-style-lable" ox:i18n="">Middle name</td>
							<td></td>
							<td><div class="clipDetailTextWhite"><div class="background-color-content detailTextWhite" id="abstact_second_name">&#xa0;</div></div></td>
							<td></td>
							<td class="lableDetailText font-style-lable" ox:i18n="">Room number</td>
							<td></td>
							<td><div class="clipDetailTextWhite"><div class="background-color-content detailTextWhite detailNarrow" id="room_number">&#xa0;</div></div></td>
						</tr>
						<tr>
							<td class="lableDetailText font-style-lable" ox:i18n="">Last name</td>
							<td></td>
							<td><div class="clipDetailTextWhite"><div class="background-color-content detailTextWhite" id="abstact_last_name">&#xa0;</div></div></td>
							<td></td>
							<td class="lableDetailText font-style-lable" ox:i18n="">Profession</td>
							<td></td>
							<td colspan="2"><div class="clipDetailTextWhite"><div class="background-color-content" id="profession">&#xa0;</div></div></td>
						</tr>
						<tr>
							<td class="lableDetailText font-style-lable" ox:i18n="">Suffix</td>
							<td></td>
							<td><div class="clipDetailTextWhite"><div class="background-color-content detailTextWhite" id="abstact_suffix">&#xa0;</div></div></td>
							<td></td>
							<td class="lableDetailText font-style-lable" ox:i18n="">Branches</td>
							<td></td>
							<td><div class="clipDetailTextWhite"><div class="background-color-content detailTextWhite detailNarrow" id="branches">&#xa0;</div></div></td>
						</tr>
						<tr>
							<td class="lableDetailText font-style-lable" ox:i18n="">Nickname</td>
							<td></td>
							<td><div class="clipDetailTextWhite"><div class="background-color-content detailTextWhite" id="nickname">&#xa0;</div></div></td>
							<td></td>
							<td class="lableDetailText font-style-lable" ox:i18n="">Employee ID</td>
							<td></td>
							<td colspan="2"><div class="clipDetailTextWhite"><div class="background-color-content detailTextWhite" id="number_of_employees">&#xa0;</div></div></td>
						</tr>
						
						<tr>
							<td colspan="9"><div class="lineSeperator background-color-toolbar"></div></td>
						</tr>
					
						<tr>
							<td class="lableDetailText font-style-lable" ><div id="combo_telephone_business1"></div></td>
							<td></td>
							<td><div class="clipDetailTextWhite"><div class="background-color-content" id="abstact_telephone_business1">&#xa0;</div></div></td>
							<td></td>
							<td class="lableDetailText font-style-lable" ><div id="combo_privat_tel"></div></td>
							<td></td>
							<td colspan="2"><div class="clipDetailTextWhite"><div class="background-color-content detailTextWhite" id="abstact_telephone_home1">&#xa0;</div></div></td>
						</tr>
						<tr>
							<td class="lableDetailText font-style-lable"><div id="combo_email1" style="margin:0px;"></div></td>
							<td></td>
							<td><div class="clipDetailTextWhite"><div id="abstact_email1" class="background-color-content linkInView" onClick="triggerEvent('sendMailToContact')">&#xa0;</div></div></td>
							<td></td>
							<td class="lableDetailText font-style-lable" ><div id="combo_fax_home"></div></td>
							<td></td>
							<td colspan="2"><div class="clipDetailTextWhite"><div class="background-color-content detailTextWhite" id="abstact_fax_home">&#xa0;</div></div></td>
						</tr>
						<tr>
							<td class="lableDetailText font-style-lable" ><div id="combo_instant_messenger1"></div></td>
							<td></td>
							<td><div class="clipDetailTextWhite"><div class="background-color-content detailTextWhite" id="instant_messenger1">&#xa0;</div></div></td>						
							<td></td>						
							<td class="lableDetailText font-style-lable" ><div id="combo_telephone_ip"></div></td>
							<td></td>
							<td colspan="2"><div class="clipDetailTextWhite"><div class="background-color-content detailTextWhite" id="telephone_ip">&#xa0;</div></div></td>
						</tr>
						<tr>
							<td class="lableDetailText font-style-lable" ><div id="combo_mobile_tel"></div></td>
							<td></td>
							<td><div class="clipDetailTextWhite"><div class="background-color-content detailTextWhite" id="cellular_telephone1">&#xa0;</div></div></td>	
							<td></td>						
							<td class="lableDetailText font-style-lable" ><div id="combo_birthday_status"></div></td>
							<td></td>
							<td colspan="2"><div class="clipDetailTextWhite"><div class="background-color-content detailTextWhite" id="birthday_status">&#xa0;</div></div></td>
						</tr>
					
						<tr>
							<td colspan="9"><div class="lineSeperator background-color-toolbar"></div></td>
						</tr>
					
						<tr>
							<td class="lableDetailText font-style-lable detailAddressWhite" ><div id="combo_private_address"></div><div id="combo_private_address_mapIcon"><img id="contactImgShowMap0" class="mapLinkActive" src="themes/default/img/menu/adress1_n.gif" width="16" onClick="objRoutingPlanner.showForm(0)" /></div></td>
							<td></td>
							<td><div style="overflow:auto;" id="private_address">&#xa0;</div></td>
							<td></td>
							<td class="lableDetailText font-style-lable detailAddressWhite" ><div id="combo_business_address"></div><div id="combo_business_address_mapIcon"><img id="contactImgShowMap1" class="mapLinkActive" src="themes/default/img/menu/adress1_n.gif" width="16" onClick="objRoutingPlanner.showForm(1)" /></div></td>
							<td></td> 
							<td colspan="2"><div style="overflow:auto;" id="business_address">&#xa0;</div></td>
						</tr>
								
						<tr>
							<td colspan="9"><div class="lineSeperator background-color-toolbar"></div></td>
						</tr>
								
						<tr>
							<td class="lableDetailText font-style-lable" ox:i18n="">Comments</td>
							<td></td>
							<td colspan="6"><div class="textareaDetailObject background-color-content" id="note">&#xa0;</div></td>
						</tr>
						<tr>
							<td colspan="9"><div class="lineSeperator background-color-toolbar"></div></td>
						</tr>
						<tr>
							<td class="lableDetailText font-style-lable" ><div id="combo_dynamic1"></div></td>
							<td></td>
							<td><div class="clipDetailTextWhite"><div class="background-color-content detailTextWhite" id="userfield01">&#xa0;</div></div></td>
							<td></td>
							<td class="lableDetailText font-style-lable" ><div id="combo_dynamic4"></div></td>
							<td></td>
							<td colspan="2"><div class="clipDetailTextWhite"><div class="background-color-content detailTextWhite" id="userfield04">&#xa0;</div></div></td>
						</tr>
						<tr>
							<td class="lableDetailText font-style-lable" ><div id="combo_dynamic2"></div></td>
							<td></td>
							<td><div class="clipDetailTextWhite"><div class="background-color-content detailTextWhite" id="userfield02">&#xa0;</div></div></td>
							<td></td>
							<td class="lableDetailText font-style-lable" ><div id="combo_dynamic5"></div></td>
							<td></td>
							<td colspan="2"><div class="clipDetailTextWhite"><div class="background-color-content detailTextWhite" id="userfield05">&#xa0;</div></div></td>
						</tr>
						<tr>
							<td class="lableDetailText font-style-lable" ><div id="combo_dynamic3"></div></td>
							<td></td>
							<td><div class="clipDetailTextWhite"><div class="background-color-content detailTextWhite" id="userfield03">&#xa0;</div></div></td>
							<td></td>
							<td class="lableDetailText font-style-lable" ><div id="combo_dynamic6"></div></td>
							<td></td>
							<td colspan="2"><div class="clipDetailTextWhite"><div class="background-color-content detailTextWhite" id="userfield06">&#xa0;</div></div></td>
						</tr>
								
						<tr>
							<td colspan="9"><div class="lineSeperator background-color-toolbar"></div></td>
						</tr>
								
						<tr>
							<td class="lableDetailText font-style-lable" ox:i18n="">Categories</td>
							<td></td>
							<td class="textWhiteColspan background-color-content" colspan="6">
							     <div id="contact_categories" style="min-height: 1.9em; max-height: 3.8em; width: 90%; overflow: hidden; overflow-y: auto;"></div>
							</td>
						</tr>
					
					</table>		
				</div>
				
				<div id="tabContactDetail2" label="Attachments(0)" ox:align="stretch" style="Overflow: hidden; display:none;">
					<div id="contact_d_AttachmentsHeader" ox:align="top" ox:size="1.6em"></div>
					<div id="contact_d_Attachments" style="overflow: auto" ox:align="stretch"></div>
				</div>				
			</div>
	
			<div id="tabContactDetail0" label="Overview" ox:align="stretch" style="Overflow: hidden; display:none;">
				<div ox:align="top" ox:size="1.6em" id="contact_d_DLHeader"></div>
				<div ox:align="stretch" style="overflow: auto" id="contact_d_DL"></div>
			</div>	
		</div>
		
	</ox:border>	

</div>