﻿var gCONTACT_BOX = null;
$( document ).ready( function(){
	

	$( this ).find( "div.ContactBox" ).each( function(  ){
		gCONTACT_BOX = new ContactBox( this );
	} )
} )

var gTIMER_CONTACT_BOX = null;
function ContactBoxStartAutoScroll(  )
{
	if( gCONTACT_BOX.contacts.length > 1 )
	{
		if( !gCONTACT_BOX.disabledAutoScroll )
		{
			gCONTACT_BOX.ScrollNext(  );
			gTIMER_CONTACT_BOX = setTimeout( "ContactBoxStartAutoScroll(  )", g_TIMER_AUTO_SCROLL );
		}
	}
}
function ContactBoxStopAutoScroll(  )
{
	clearTimeout( gTIMER_CONTACT_BOX );
	gTIMER_CONTACT_BOX = null;
}





function AltediaContact( p_oXmlNode )
{
	this.ID = $( p_oXmlNode ).attr( "ID" );
	
	this.LOGO_URL = $( p_oXmlNode ).find( "LOGO_URL" ).text();
	this.LOGO_WIDTH = parseInt( $( p_oXmlNode ).find( "LOGO_WIDTH" ).text() );
	this.LOGO_HEIGHT = parseInt($( p_oXmlNode ).find( "LOGO_HEIGHT" ).text() );
	this.TITRE = $( p_oXmlNode ).find( "TITRE" ).text();
	
	this.NOM = $( p_oXmlNode ).find( "NOM" ).text();
	this.PRENOM = $( p_oXmlNode ).find( "PRENOM" ).text();
	this.TEL = $( p_oXmlNode ).find( "TEL" ).text();
	this.EMAIL = $( p_oXmlNode ).find( "EMAIL" ).text();
	this.ENTITE = $( p_oXmlNode ).find( "ENTITE" ).text();
	this.PRESENTATION = $( p_oXmlNode ).find( "PRESENTATION" ).text();
	
	
	this.PHOTO_URL = $( p_oXmlNode ).find( "PHOTO_URL" ).text();
	this.PHOTO_WIDTH = parseInt( $( p_oXmlNode ).find( "PHOTO_WIDTH" ).text() );
	this.PHOTO_HEIGHT = parseInt($( p_oXmlNode ).find( "PHOTO_HEIGHT" ).text() );	
	
	
}

var g_TIMER_AUTO_SCROLL = 4000;

function ContactBox( node )
{
	this.node = node;
	this.id = null;
	this.rubrique_id = null;
	this.contenu_id = null;
	
	this.contacts = new Array();
	this.currentContact = 0;
	
	this.buttonBefore = null;
	this.buttonNext = null;
	this.presentationPanel = null;
	
	this.LogoMaxHeight = 60;
	this.LogoMaxWidth = 168;
	
	//Permet de savoir si l'action de Slide est en cours
	this.isSliding = false;

	this.disabledAutoScroll = false;
	
	this.init(  );
}

ContactBox.prototype.init = function( )
{
	this.id = $( this.node ).attr( "id" );
	this.rubrique_id = $( this.node ).attr( "rubrique_id" );
	this.contenu_id = $( this.node ).attr( "contenu_id" );
	this.loadContacts(  );
}

ContactBox.prototype.loadContacts = function( )
{
	
	$( this.node ).html( "<table width='100%' height='100%'><tr><td valign='middle' align='center'><img src='images/icones/loading.gif'/></td></tr></table>" );
	
	var _this = this;
	var sUrl  = "/web-services/Contact/contact.aspx?id="+ this.id+ "&rubrique_id=" + _this.rubrique_id;
	if( _this.contenu_id )
	{
		sUrl += "&contenu_id=" + _this.contenu_id;
	}
	
	$.ajax({ 
		url: sUrl, 
		type: "GET",
		cache: false,
		data: "xml",
		success: function( xml ){
			
			_this.contacts = new Array();
			_this.currentContact = 0;
			$( xml ).find( "CONTACT" ).each( function(){
				_this.contacts[ _this.contacts.length ] = new AltediaContact( this );
			} );
			
			_this.buildContacts(  );
			
			//Survol du contactbox ==> Arrêt de l'auto scrool
			$( _this.node ).mouseover( function(){
				ContactBoxStopAutoScroll(  );
			} )
			$( _this.node ).mouseout( function(){
					gTIMER_CONTACT_BOX = setTimeout( "ContactBoxStartAutoScroll(  )", g_TIMER_AUTO_SCROLL );
			} )				
			
			
			//Lance l'auto scrolling
			setTimeout( "ContactBoxStartAutoScroll(  )", g_TIMER_AUTO_SCROLL );
			
		}
	});	
}

ContactBox.prototype.buildContacts = function( )
{
	var _this = this
	
	if( _this.contacts.length == 0 )	
	{
		$( _this.node ).html( "" );
		return;
	}
	
	_this.currentContact = 0;
	
	var sHTML = "";
	sHTML += "<table cellspacing='0' cellpadding='0' width='240' style='border:0px solid red;'>";
	
	/*SLIDE des logos*/
	
	sHTML += "<tr height='"+ _this.LogoMaxHeight +"'>";
	sHTML += "	<td align='left' width='26'	valign='middle'><img class=\"ButtonScrollBefore\" 	src=\"images/contact/contact-nav-left.gif\" style=\"cursor:pointer;\" /></td>";
	sHTML += "	<td align='center' valign='middle'>";
	sHTML += "		<div class=\"ContainerLogo\" style=\"display:block;width:"+ _this.LogoMaxWidth +"px;height:"+ _this.LogoMaxHeight +"px;border:0px solid red;overflow-x:hidden;overflow-y:hidden;\">";
	sHTML += "			<div style=\"width:2000px;border:0px solid green;margin-left:0px;\">";
	sHTML += "			<table class=\"ListeLogo\" cellspacing=\"0\" cellpadding=\"0\" height=\""+ _this.LogoMaxHeight +"\" style=\"float:left;margin-left:0px;\">";
	sHTML += "				<tr>";
	
	
	for( var i=0; i<_this.contacts.length; i++ )
	{
		var iWidth = _this.contacts[ i ].LOGO_WIDTH;
		var iHeight = _this.contacts[ i ].LOGO_HEIGHT;
		
		var oDimension = GetImageDimensionRatioSlide( _this.contacts[ i ].LOGO_WIDTH, _this.contacts[ i ].LOGO_HEIGHT, _this.LogoMaxWidth, _this.LogoMaxHeight );
		
		sHTML += "				<td width=\""+ _this.LogoMaxWidth +"\" valign=\"middle\" align=\"center\" index=\"1\"><img width='"+ oDimension.WIDTH +"' height='"+ oDimension.HEIGHT +"' src=\""+ _this.contacts[ i ].LOGO_URL +"\"/></td>";
	}
	
	sHTML += "				</tr>";
	sHTML += "			</table>";
	sHTML += "			</div>";
	sHTML += "		</div>";
	sHTML += "	</td>";
	sHTML += "	<td align='right' width='26' 	valign='middle'><img class=\"ButtonScrollNext\" 	src=\"images/contact/contact-nav-right.gif\" style=\"cursor:pointer;\" /></td>";
	sHTML += "</tr>";
	
	/*PANEL PRESENTATION CONTACT*/
	sHTML += "<tr height=\"10\"><td></td></tr>";
	sHTML += "<tr style='cursor:pointer;'>";
	sHTML += "	<td colspan=\"3\" >";
	sHTML += "		<table class='PresentationContact' width='100%' cellspacing=\"0\" cellpadding=\"0\" border=\"0\" style=\"margin-left:0px;\">";
	sHTML += "			<tr>";
	sHTML += "				<td align='left'><h4 class='titre'></h4></td>";
	sHTML += "				<td width=\"10\"></td>";
	sHTML += "				<td rowspan=\"4\" align='right'><img open_presentation='1' class='photo' src=\"images/blank.gif\" style=\"border:1px solid #d4d4d6;\"/></td>";
	sHTML += "			</tr>";
	sHTML += "			<tr><td  width='180' align='left' open_presentation='1' class='nom_prenom'></td></tr>";
	sHTML += "			<tr><td align='left' open_presentation='1' class='tel'></td></tr>";
	sHTML += "			<tr><td align='left'><img class='buttonOpenPresentation' src=\"images/btn_biographie.jpg\" title='Voir la biographie' style=\"cursor:pointer;\"/></td></tr>";
	sHTML += "			<tr><td align='left'><img class='buttonOpenContact' width='108' src=\"images/contact/contact-button.gif\" title='Contacter par mail' style=\"cursor:pointer;\"/></td></tr>";
	sHTML += "		</table>";
	sHTML += "	</td>";
	sHTML += "</tr>";
	

	sHTML += "</table>";
	$( _this.node ).html( sHTML );
	
	
	//Ouverture du détail
	$( _this.node ).find( "img.buttonOpenPresentation" ).click( function(){ 
		OpenDescriptionContact( _this.contacts[ _this.currentContact ] );
		
	} )
	
	
	/*ACTIONS SUR BUTTONS*/
	this.buttonBefore = $( _this.node ).find( "img.ButtonScrollBefore" )[ 0 ];
	this.buttonNext = $( _this.node ).find( "img.ButtonScrollNext" )[ 0 ];
	this.presentationPanel = $( _this.node ).find( "table.PresentationContact" )[ 0 ];
	
	$( this.buttonBefore ).click( function(){ _this.ScrollBefore() } );
	$( this.buttonNext ).click( function(){ _this.ScrollNext() } );
	
	
	_this.ActiveButtons();
	_this.buildPanelPresentation();
}

var oDialogBoxContactDescription = null;
function OpenDescriptionContact( p_oContact )
{	
	gCONTACT_BOX.disabledAutoScroll = true;
	
	if( oDialogBoxContactDescription == null  )
	{
		ContactBoxStopAutoScroll(  );
		oDialogBoxContactDescription = new dialogBox({
						parent :		document.body,
						title :			"",
						height :		290,
						width :			560,
						zIndex : 		10000000,
						templateHTML :  FRONT_DIALOGBOX_TEMPLATE_DETAILS_HTML,
						close : function(){ 
							
							oDialogBoxContactDescription.remove(); 
							gCONTACT_BOX.disabledAutoScroll = false;;
							gTIMER_CONTACT_BOX = setTimeout( "ContactBoxStartAutoScroll(  )", g_TIMER_AUTO_SCROLL ); 
							
							oDialogBoxContactDescription = null;
						}
						});		
		$( oDialogBoxContactDescription.oDialogboxFooter ).hide();
		oDialogBoxContactDescription.show();						
	}
	
	var sHTML = "";
	sHTML += "<div class='ButtonPrev' style='position:absolute;margin-top:125px;'><img src='/images/slide-nav-left.gif' style='cursor:pointer;'/></div>"
	sHTML += "<div class='ButtonNext' style='position:absolute;margin-top:125px;margin-left:523px;'><img src='/images/slide-nav-right.gif' style='cursor:pointer;'/></div>";
	
	sHTML += "<div style='margin:10px;margin-top:40px;margin-left:40px;'>";
	sHTML += "<table  cellspacing='0' cellpadding='5' width='470'>";
	sHTML += "	<tr height='40'><td rowspan='10' valign='top' width='120'><img border='1px solid #414042;' width='120' src='"+ p_oContact.PHOTO_URL +"'/></td><td valign='top' width='310'><div style='color:#DE0B2B;font-weight:bold;font-size:14px;'>"+ p_oContact.PRENOM + " " + p_oContact.NOM.toUpperCase() +"</div><div style='margin-top:5px;color:#DDDDDD;text-transform:uppercase;font-weight:bold;font-size:15px;'>"+ p_oContact.ENTITE +"</div></td></tr>";
	sHTML += "	<tr><td height='5'></td></tr>";
	sHTML += "	<tr><td style='color:#414042;text-align:left;' valign='top'>"+ p_oContact.PRESENTATION +"</td></tr>";
	sHTML += "</table>";
	sHTML += "</div>";
	
	$( oDialogBoxContactDescription.oDialogboxContent ).html( sHTML );
	
	$( oDialogBoxContactDescription.oDialogboxContent ).find( ".ButtonPrev" ).click( function(){
		gCONTACT_BOX.ScrollBefore( function(){ OpenDescriptionContact( gCONTACT_BOX.contacts[ gCONTACT_BOX.currentContact ]  ) }  );
		;
	} )
	
	$( oDialogBoxContactDescription.oDialogboxContent ).find( ".ButtonNext" ).click( function(){
		gCONTACT_BOX.ScrollNext( function(){ OpenDescriptionContact( gCONTACT_BOX.contacts[ gCONTACT_BOX.currentContact ]  ) } );
	} )	
	
	

}

/*
	CHARGEMENT PANEL CONTACT
*/
ContactBox.prototype.buildPanelPresentation= function(  )
{
	var _this = this;
	var oContact = _this.contacts[ _this.currentContact ];
	
	var iWidthMax = 75;
	var iHeightMax = 84;
	var oDimension = GetImageDimensionRatioSlide( oContact.PHOTO_WIDTH, oContact.PHOTO_HEIGHT, iWidthMax, iHeightMax );
			
	$( _this.presentationPanel ).find( ".titre" ).html( oContact.TITRE );
	$( _this.presentationPanel ).find( ".nom_prenom" ).html( oContact.PRENOM + " " + oContact.NOM.toUpperCase() );
	$( _this.presentationPanel ).find( "img.photo" ).attr( "src", oContact.PHOTO_URL ).attr( "height", oDimension.HEIGHT ).attr( "width", oDimension.WIDTH );
	$( _this.presentationPanel ).find( ".tel" ).html( "Tél : " + oContact.TEL );
	
	$( _this.presentationPanel ).find( "img.buttonOpenContact" ).unbind( "click" ).click( function(){
		OpenFormContactBox( oContact )
	} );
}

function OpenFormContactBox( oContact )
{
	OpenFrontFormContact( { sujet : "Contacter l'interlocuteur "+ oContact.PRENOM + " " + oContact.NOM.toUpperCase() +" " } );
}

ContactBox.prototype.ActiveButtons = function(  )
{
	var _this = this;
	var oListeLogo = $( _this.node ).find( "table.ListeLogo" )[ 0 ];
	
	//alert( _this.currentContact );
	if( _this.currentContact == 0 )		$( this.buttonBefore ).hide();
	else								$( this.buttonBefore ).show();
	
	if( _this.currentContact == _this.contacts.length-1 )		$( this.buttonNext ).hide();
	else													$( this.buttonNext ).show();	
}



ContactBox.prototype.ScrollBefore = function( p_oFnCall )
{	
	var _this = this;
	
	if( !_this.isSliding )
	{
		var iContainerWidth = $( _this.node ).find( "div.ContainerLogo" ).width();
		var oListeLogo = $( _this.node ).find( "table.ListeLogo" )[ 0 ];
		
		var iMarginLeft = $( oListeLogo ).css( "margin-left" );
		if( iMarginLeft.indexOf( "px" ) )	iMarginLeft = parseInt( iMarginLeft.replace( "px", "" ) );
		iMarginLeft += iContainerWidth;
		
		_this.isSliding = true;
		$( oListeLogo ).animate(
			{ marginLeft : iMarginLeft }, 500 , function(  ){ 
				_this.currentContact = _this.currentContact-1;
				_this.ActiveButtons(  );
				_this.buildPanelPresentation(  );
				_this.isSliding = false;
				
				if( typeof p_oFnCall != "undefined" )
				{
					p_oFnCall.call();
				}				
			}
		);	
	}
}
ContactBox.prototype.ScrollNext = function( p_oFnCall )
{	
	var _this = this;
	
	//Si en bout de chaine ==> On revient sur zle 1er
	if( _this.currentContact == _this.contacts.length-1 )	
	{
		_this.buildContacts(  );
		return;
	}
	
	if( !_this.isSliding )
	{	
		var iContainerWidth = $( _this.node ).find( "div.ContainerLogo" ).width();
		var oListeLogo = $( _this.node ).find( "table.ListeLogo" )[ 0 ];
		
		var iMarginLeft = $( oListeLogo ).css( "margin-left" );
		if( iMarginLeft.indexOf( "px" ) )	iMarginLeft = parseInt( iMarginLeft.replace( "px", "" ) );
		iMarginLeft -= iContainerWidth;
		
		_this.isSliding = true;
		$( oListeLogo ).animate(
			{ marginLeft : iMarginLeft }, 500 , function(  ){ 
				_this.currentContact = _this.currentContact+1;
				_this.ActiveButtons(  );
				_this.buildPanelPresentation(  );
				_this.isSliding = false;
				if( typeof p_oFnCall != "undefined" )
				{
					p_oFnCall.call();
				}				
			}
		);	
	}
}






function GetImageDimensionRatioSlide( p_iSrcImgWidth, p_iSrcImgHeight, p_iMaxWidth, p_iMaxHeight )
{
	//Si image plus petit que container on renvoie l'image
	if( p_iSrcImgHeight < p_iMaxHeight && p_iSrcImgWidth < p_iMaxWidth )	return  { WIDTH :p_iSrcImgWidth, HEIGHT : p_iSrcImgHeight  };
	
	var iImgHeight = p_iSrcImgHeight;
	var iImgWidth = p_iSrcImgWidth;		
	
	if( iImgWidth == 0 )	iImgWidth = p_iMaxWidth;
	
	var iMaxWidth = p_iMaxWidth;
	var iMaxHeight = p_iMaxHeight;

	var ratio = 1.0;
	//Image paysage
	if( iImgWidth > iImgHeight )
	{
		ratio = iMaxWidth / iImgWidth;
		iImgWidth = iImgWidth * ratio;
		iImgHeight = iImgHeight * ratio;
		
		if( iImgHeight > iMaxHeight )
		{
			ratio = iMaxHeight / iImgHeight;
			iImgHeight = iMaxHeight;
			iImgWidth = iImgWidth * ratio;
		}
	}
	else
	{
		ratio = iMaxHeight / iImgHeight;
		iImgWidth = iImgWidth * ratio;
		iImgHeight = iImgHeight * ratio;
		
		if( iImgWidth > iMaxWidth )
		{
			ratio = iMaxWidth / iImgWidth;
			iImgWidth = iMaxWidth;
			iImgHeight = iImgHeight * ratio;
		}						
	}
	iImgWidth = Math.floor( iImgWidth )
	iImgHeight = Math.floor( iImgHeight )
	return { WIDTH :iImgWidth, HEIGHT : iImgHeight  };
	
}




