$(document).ready(function(){
	
	$("a[rel='lightbox']").colorbox({width:"60%", inline:true, href:"#inline_example1"});
	
	//Gestion du contenu
	var tabContenu = new Array();
	tabContenu[0] = '<div style="background-color:#000;"><img alt="" src="../images/references/grande/ackerman.png" width="555" height="416" align="middle" style="margin:auto;" /></div>'+
					'<div style="background-color:#fff;text-align:left;margin:10px;height:65px;">Strat&eacute;gie de communication et de marketing, Cyr&egrave;s a engag&eacute; un accompagnement complet de la phase de '+
					'r&eacute;flexion jusqu&acute;au d&eacute;veloppement '+
					'web.<br />Positionnement de la marque, strat&eacute;gie d&acute;information, r&eacute;alisation du site Internet, r&eacute;daction, prises de vues et vid&eacute;os, animations Flash, vente en ligne,'+
					'CMS et Web Marketing.</div>'+
					'<br />';
	tabContenu[1] = '<div style="background-color:#000;"><img alt="" src="../images/references/grande/3M.png" width="555" height="416" align="middle" style="margin:auto;" /></div>'+
					'<div style="background-color:#fff;text-align:left;margin:10px;"><b>Lancement de produit</b><BR />'+
					'Dans le cadre de l&acute;offre Papier photo Post it &laquo; R&eacute;veillez vos photos &raquo;, Cyr&egrave;s &agrave; con&ccedil;u une animation flash pour le compte de 3M avec offre promotionnelle et inscription en ligne.</div>'+
					'<br />';
	tabContenu[2] = '<div style="background-color:#000;"><img alt="" src="../images/references/grande/eram.png" width="555" height="416" align="middle" style="margin:auto;" /></div>'+
					'<div style="background-color:#fff;text-align:left;margin:10px;"><b>D&eacute;veloppement du site Internet</b> <br />'+
					'Cr&eacute;ation des bases de donn&eacute;es et du Back Office permettant la gestion compl&egrave;te et autonome du contenu du site Web par le client. Gestion des droits d&acute;acc&egrave;s avec restrictions selon les profils.</div>'+
					'<br />';
	tabContenu[3] = '<div style="background-color:#000;"><img alt="" src="../images/references/grande/opcassur.png" width="555" height="416" align="middle" style="margin:auto;" /></div>'+
					'<div style="background-color:#fff;text-align:left;margin:10px;"><b>Cr&eacute;ation d&acute;une vid&eacute;o corporate.</b><br />  Elaboration du synopsis et storyboard. '+
					'R&eacute;alisation de l&acute;habillage de la vid&eacute;o (textes / photos fournis par le client). De-rushage, montage, cr&eacute;ation des effets sp&eacute;ciaux avec After Effects.'+
					'</div>'+
					'<br />';
	tabContenu[4] = '<table cellspacing="0" cellpadding="0" border="0" style="width:100%"><tr><td style="background-color:#fff;float:left;width:299px;height:157px;text-align:center;">'+
					'<img alt="" src="../images/references/grande/logos_sncf.jpg" width="279" height="137" align="middle" style="margin:auto;" /></td>'+
					'<td style="background-color:#000;color:#fff;text-align:left;padding:10px;height:157px;text-align:center;"><div style="margin:30px;">Projet interactif en cours de r&eacute;alisation.</div></td></tr></table>';
	tabContenu[5] = '<div style="background-color:#000;"><img src="../images/references/grande/maaf.png" width="555" height="416" align="middle" style="margin:auto;" /></div>'+
					'<div style="background-color:#fff;text-align:left;margin:10px;">Afin d&acute;attirer des visiteurs cibl&eacute;s pour faire connaitre ses services en ligne et de d&eacute;charger les centres d&acute;appel, Cyr&egrave;s a mis en place '+
				    'un site informatif coupl&eacute; d&acute;un jeu-concours en ligne et s&acute;est charg&eacute; du d&eacute;veloppement et du pilotage des dotations. Gestion des tirages au sort.</div>'+
					'<br />';
	tabContenu[6] = '<div style="background-color:#000;"><img alt="" src="../images/references/grande/mattel.png" width="555" height="416" align="middle" style="margin:auto;" /></div>'+
					'<div style="background-color:#fff;text-align:left;margin:10px;">Le scrabble a f&ecirc;t&eacute; son 60&egrave;me anniversaire en 2008. Cyr&egrave;s a d&eacute;velopp&eacute; un site &eacute;v&eacute;nementiel proposant aux visiteurs de jouer en ligne au '+
					'Scrabble et de participer &agrave; un jeu-concours.<br />Op&eacute;ration de e-marketing: e-mailing, e-cards, r&eacute;f&eacute;rencement ...</div>'+
					'<br />';
	tabContenu[7] = '<div style="background-color:#000;"><img alt="" src="../images/references/grande/macif.png" width="555" height="416" align="middle" style="margin:auto;" /></div>'+
					'<div style="background-color:#fff;text-align:left;margin:10px;"><b>Op&eacute;ration BtoC</b>, Cyr&egrave;s a accompagn&eacute; la MACIF sur l&acute;ensemble de ce projet : faire participer ses soci&eacute;taires &agrave; l&acute;&eacute;volution des produits et services MACIF . La mission s&acute;est traduite par l&acute;&eacute;laboration d&acute;un forum de discussion autour des th&eacute;matiques de l&acute;entreprise.</div>'+
					'<br />';
	tabContenu[8] = '<div style="background-color:#000;"><img alt="" src="../images/references/grande/poujoulat.png" width="555" height="416" align="middle" style="margin:auto;" /></div>'+
					'<div style="background-color:#fff;text-align:left;margin:10px;">Afin de faciliter la construction de projet (produit, cotation, devis, mesure, contraintes...) Cyr&egrave;s a d&eacute;velopp&eacute; une application pour '+
					'le Bureau d&acute;Etude Poujoulat.<br />Application pas &agrave; pas avec animation 3D et moteur de calcul automatique.</div>'+
					'<br />';
	tabContenu[9] = '<div style="background-color:#000;"><img alt="" src="../images/references/grande/edf.png" width="555" height="416" align="middle" style="margin:auto;" /></div>'+
					'<div style="background-color:#fff;text-align:left;margin:10px;">Pour r&eacute;pondre au besoin d&acute;une solution de facturation, Cyr&egrave;s a con&ccedil;u une solution de facturation permettant : la gestion des dossiers '+
					'des clients EDF et des prestations &agrave; facturer, cr&eacute;ation automatique de facture, gestion des encaissements, des relances, cr&eacute;ation des &eacute;critures comptables et mise en place de virements automatis&eacute;s...</div>'+
					'<br />';
	tabContenu[10] = '<div style="background-color:#000;"><img alt="" src="../images/references/grande/imh.png" width="555" height="416" align="middle" style="margin:auto;" /></div>'+
					'<div style="background-color:#fff;text-align:left;margin:10px;">Suite &agrave; une croissance tr&egrave;s forte de l&acute;activit&eacute; d&acute;IMH, Cyr&egrave;s &agrave; mis en place un extranet permettant de rendre autonome le prestataire '+
					'depuis le primo-rendez-vous (pour &eacute;tablissement d&acute;un devis) jusqu&acute;&agrave; la signature du PV de fin de travaux.</div>'+
					'<br />';
	tabContenu[11] = '<div style="background-color:#000;"><img alt="" src="../images/references/grande/effico.png" width="555" height="416" align="middle" style="margin:auto;" /></div>'+
					'<div style="background-color:#fff;text-align:left;margin:10px;height:65px;">Refonte de site internet suite &agrave; changement de structure juridique.<br />Cyr&egrave;s a opt&eacute; pour une approche marketing : offres packag&eacute;es, relation avec les '+
					'visiteurs optimis&eacute;e, navigation intuitive... Conception du  site Internet, cr&eacute;ation graphique et e-marketing.</div>'+
					'<br />';
	tabContenu[12]= '<div style="background-color:#000;"><img alt="" src="../images/references/grande/bouygue.png" width="555" height="416" align="middle" style="margin:auto;" /></div>'+
					'<div style="background-color:#fff;text-align:left;margin:10px;">Cyr&egrave;s a con&ccedil;u une application web pour le Bureau d&acute;&Eacute;tude de Bouygues Construction. Cette application permet de : <br />'+
					'- Consulter des indicateurs d&acute;aide &agrave; la d&eacute;cision de r&eacute;pondre et de financer un projet.<br />'+
					'- Echanger interne et avec l&acute;ext&eacute;rieur des documents informatiques volumineux dans le respect de la politique de s&eacute;curit&eacute; des donn&eacute;es.<br />'+
					'- G&eacute;rer tous les litiges rentrant dans le cadre des garanties d&eacute;cennales.</div>'+
					'<br />';
	tabContenu[13]= '<div style="background-color:#000;"><img alt="" src="../images/references/grande/partner_jouet.png" width="555" height="416" align="middle" style="margin:auto;" /></div>'+
					'<div style="background-color:#fff;text-align:left;margin:10px;">Partner Jouet a souhait&eacute; mettre en place une plateforme d&acute;&eacute;change sp&eacute;cialis&eacute;e CE afin de pr&eacute;senter son offre et alimenter'+
					' son fichier de contacts.<br />Cyr&egrave;s a  D&eacute;velopp&eacute; un site vitrine valorisant la d&eacute;marche Partner jouet.<br /> La mission de Cyr&egrave;s s&acute;est inscrite dans le cadre d&acute;un projet complet audit, conseil, '+
					'strat&eacute;gique, d&eacute;veloppement web et Web-Marketing.</div>'+
					'<br />';
	tabContenu[14]= '<table cellspacing="0" cellpadding="0" border="0" style="width:100%"><tr><td style="background-color:#fff;float:left;width:299px;height:157px;text-align:center;">'+
					'<img alt="" src="../images/references/grande/vignerons_independants.jpg" width="192" height="137" align="middle" style="margin:auto;" /></td>'+
					'<td style="background-color:#000;color:#fff;text-align:left;padding:10px;height:157px;"><div style="margin:30px;">Accompagnement global dans cette mission de notori&eacute;t&eacute;, productivit&eacute;, promotionnelle et d&acute;image.<br />'+
					'Assistance &agrave; Maitrise d&acute;Ouvrage, &eacute;tablissement du Cahier des Charges, prise en charge de l&acute;appel d&acute;offre, accompagnement.<br />'+
					'Prise en charge des projets &laquo; Gestion des concours &raquo; et &laquo; Gestion des salons &raquo;.</div></td></tr></table>';
	tabContenu[15] = '<table cellspacing="0" cellpadding="0" border="0" style="width:100%"><tr><td style="background-color:#fff;float:left;width:299px;height:157px;text-align:center;">'+
					'<img alt="" src="../images/references/grande/gerard_darel.jpg" width="279" height="137" align="middle" style="margin:auto;" /></td>'+
					'<td style="background-color:#000;color:#fff;text-align:left;padding:10px;height:157px;"><div style="margin:30px;">Cyr&egrave;s h&eacute;berge des comptes de messageries Exchange<br />'+
					'- Prise en charge des messages HTML et r&eacute;cup&eacute;ration rapide<br />- Prise en charge des indicateurs de suivi <br />- Informations des participants aux r&eacute;unions<br />- Recherche Exchange optimis&eacute;e ;<br />'+
					'- S&eacute;curit&eacute; de l&acute;h&eacute;bergement.</div></td></tr></table>';
	tabContenu[16] = '<table cellspacing="0" cellpadding="0" border="0" style="width:100%"><tr><td style="background-color:#fff;float:left;width:299px;height:157px;text-align:center;">'+
					'<img alt="" src="../images/references/grande/logos_labanquemondiale.jpg" width="279" height="137" align="middle" style="margin:auto;" /></td>'+
					'<td style="background-color:#000;color:#fff;text-align:left;padding:10px;height:157px;"><div style="margin:30px;">Cyr&egrave;s h&eacute;berge des comptes de messageries Exchange<br />'+
					'- Prise en charge des messages HTML  et  r&eacute;cup&eacute;ration rapide<br />- Prise en charge des indicateurs de suivi <br />- Informations des participants aux r&eacute;unions<br />- Recherche Exchange optimis&eacute;e ;<br />'+
					'- S&eacute;curit&eacute; de l&acute;h&eacute;bergement.</div></td></tr></table>';
	tabContenu[17] = '<table cellspacing="0" cellpadding="0" border="0" style="width:100%"><tr><td style="background-color:#fff;float:left;width:299px;height:157px;text-align:center;">'+
					'<img alt="" src="../images/references/grande/logos_ademe.jpg" width="279" height="137" align="middle" style="margin:auto;" /></td>'+
					'<td style="background-color:#000;color:#fff;text-align:left;padding:10px;height:157px;"><div style="margin:30px;">Cyr&egrave;s a conceptualis&eacute; l&acute;architecture pour l&acute;h&eacute;bergement de l&acute;Ademe. '+
					'Infog&eacute;rance de l&acute;architecture haute disponibilit&eacute; pour des applications m&eacute;tiers sp&eacute;cifiques<br />- Observatoire des fluides frigorig&egrave;nes<br />- Observatoire des piles et accumulateurs<br />'+
					'5 serveurs d&eacute;di&eacute;s sont sous surveillance constante.</div></td></tr></table>';
	tabContenu[18] = '<table cellspacing="0" cellpadding="0" border="0" style="width:100%"><tr><td style="background-color:#fff;float:left;width:299px;height:157px;text-align:center;">'+
					'<img alt="" src="../images/references/grande/logos_sne.jpg" width="279" height="137" align="middle" style="margin:auto;" /></td>'+
					'<td style="background-color:#000;color:#fff;text-align:left;padding:10px;height:157px;"><div style="margin:30px;">Cyr&egrave;s  h&eacute;berge et g&egrave;re des comptes de messageries collaboratives pour le compte '+
					'du Syndicat national de l&acute;&eacute;dition.</div></td></tr></table>';
	tabContenu[19] = '<table cellspacing="0" cellpadding="0" border="0" style="width:100%"><tr><td style="background-color:#fff;float:left;width:299px;height:157px;text-align:center;">'+
					'<img alt="" src="../images/references/grande/logos_crci.jpg" width="279" height="137" align="middle" style="margin:auto;" /></td>'+
					'<td style="background-color:#000;color:#fff;text-align:left;padding:10px;height:157px;"><div style="margin:30px;">Cyr&egrave;s  h&eacute;berge et g&egrave;re des comptes de messageries collaboratives pour le compte '+
					'de la CRCI  haute Normandie</div></td></tr></table>';
	tabContenu[20] = '<table cellspacing="0" cellpadding="0" border="0" style="width:100%"><tr><td style="background-color:#fff;float:left;width:299px;height:157px;text-align:center;">'+
					'<img alt="" src="../images/references/grande/logos_tenesol.jpg" width="279" height="137" align="middle" style="margin:auto;" /></td>'+
					'<td style="background-color:#000;color:#fff;text-align:left;padding:10px;height:157px;"><div style="margin:30px;">Cyr&egrave;s a mis en &oelig;uvre une architecture d&acute;h&eacute;bergement sp&eacute;cifique  pour le compte '+
					'de T&eacute;n&eacute;sol.<br />Des serveurs &laquo;haute disponibilit&eacute; &raquo;, s&eacute;curis&eacute;s et d&eacute;di&eacute;s comprenant des espaces disques cons&eacute;quents ont &eacute;t&eacute; install&eacute;s.  Une prestation de migration a &eacute;t&eacute; prise en charge dans sa '+
					'totalit&eacute;.</div></td></tr></table>';
	tabContenu[21] = '<table cellspacing="0" cellpadding="0" border="0" style="width:100%"><tr><td style="background-color:#fff;float:left;width:299px;height:157px;text-align:center;text-align:center;">'+
					'<img alt="" src="../images/references/grande/logos_assurland.jpg" width="279" height="137" align="middle" style="margin:auto;" /></td>'+
					'<td style="background-color:#000;color:#fff;text-align:left;padding:10px;height:157px;"><div style="margin:30px;">Cyr&egrave;s  h&eacute;berge et g&egrave;re des comptes de messageries collaboratives pour le compte '+
					'd&acute;Assurland. </div></td></tr></table>';
	tabContenu[22] = '<table cellspacing="0" cellpadding="0" border="0" style="width:100%"><tr><td style="background-color:#fff;float:left;width:299px;height:157px;text-align:center;">'+
					'<img alt="" src="../images/references/grande/logos_digiplug.jpg" width="279" height="137" align="middle" style="margin:auto;" /></td>'+
					'<td style="background-color:#000;color:#fff;text-align:left;padding:10px;height:157px;"><div style="margin:30px;">Cyr&egrave;s  h&eacute;berge et g&egrave;re des comptes de messageries collaboratives pour le compte '+
					'de DIGIPLUS.<br />Une architecture d&eacute;di&eacute;e haute disponibilit&eacute; &agrave; &eacute;t&eacute; mise en place.</div></td></tr></table>';
	tabContenu[23] = '<table cellspacing="0" cellpadding="0" border="0" style="width:100%"><tr><td style="background-color:#fff;float:left;width:299px;height:157px;text-align:center;">'+
					'<img alt="" src="../images/references/grande/logos_ipanema.jpg" width="279" height="137" align="middle" style="margin:auto;" /></td>'+
					'<td style="background-color:#000;color:#fff;text-align:left;padding:10px;height:157px;text-align:center;"><div style="margin:30px;">Cyr&egrave;s a mis en &oelig;uvre une architecture compl&egrave;te d&eacute;di&eacutee; pour le compte d&acute;IPANEMA. '+
					'H&eacute;bergement d&acute;une application Sharepoint, intranet s&eacute;curis&eacute;, GED et messagerie collaborative via 5 serveurs d&eacute;di&eacute;s.</div></td></tr></table>';
					tabContenu[24] = '<div style="background-color:#000;"><img alt="" src="../images/references/grande/actiforce.png" width="555" height="416" align="middle" style="margin:auto;" /></div>'+
					'<div style="background-color:#fff;text-align:left;margin:10px;"><b>Actiforces</b><BR />'+
					/*'Refonte du site<br />strat&eacute;gie d&acute;optimisation des ressources humaines<br />r&eacute;alisation PHP </div>'+*/
					'Afin de valoriser le savoir faire d&rsquo;Actiforces, cabinet conseil en recrutement, formation, emploi et mobilit&eacute;, Cyr&egrave;s a proc&eacute;d&eacute; &agrave; la refonte totale du site. Une application flash d&egrave;s la page d&rsquo;accueil, aura permis d&rsquo;apporter une touche de modernisme tout en valorisant les diff&eacute;rents p&ocirc;les m&eacute;tiers d&rsquo;Actiforces. La mise en avant des diff&eacute;rentes agences (page d&eacute;di&eacute;e, valorisation d&egrave;s la page d&rsquo;accueil) contribue &agrave; favoriser le r&eacute;f&eacute;rencement de mani&egrave;re g&eacute;olocalis&eacute;e.</div>'+
					'<br />';
					tabContenu[25] = '<table cellspacing="0" cellpadding="0" border="0" style="width:100%"><tr><td style="background-color:#fff;float:left;width:299px;height:157px;text-align:center;">'+
					'<img alt="" src="../images/references/grande/mgen.jpg" width="279" height="137" align="middle" style="margin:auto;" /></td>'+
					'<td style="background-color:#000;color:#fff;text-align:left;padding:10px;height:157px;text-align:center;"><div style="margin:30px;">MGEN</div></td></tr></table>';
					tabContenu[26] = '<table cellspacing="0" cellpadding="0" border="0" style="width:100%"><tr><td style="background-color:#fff;float:left;width:299px;height:157px;text-align:center;">'+
					'<img alt="" src="../images/references/grande/celio.jpg" width="279" height="137" align="middle" style="margin:auto;" /></td>'+
					'<td style="background-color:#000;color:#fff;text-align:left;padding:10px;height:157px;text-align:center;"><div style="margin:30px;">Celio</div></td></tr></table>';
					tabContenu[27] = '<div style="background-color:#000;"><img alt="" src="../images/references/grande/interloire.png" width="555" height="416" align="middle" style="margin:auto;" /></div>'+
					'<div style="background-color:#fff;text-align:left;margin:10px;"><b>Vins de loire</b><BR />'+
					'Refonte du site de la 3&egrave;me r&eacute;gion viticole fran&Ccedil;aise <BR />Conception et r&eacute;alisation de l&acute;architecture du site, cr&eacute;ation et r&eacute;alisation graphique. Int&eacute;gration animations <BR />Webmarketing &ndash; R&eacute;alisation applis Iphone </div>'+
					'<br />';
	
	//hover
	var nbRef= 28;
	for(i=1;i<=nbRef;i++)
	{
		$('#ref_'+i).hover(
		  function () 
		  {
			  var idRef = $(this).attr("id");
			  var numId = new Array();
			  numId = idRef.split("_");
			  //alert(numId[1]);
			  $('#inline_example1').html(tabContenu[numId[1]-1]);
			  $('#titre_'+idRef).fadeTo("fast",0,function(){});
		 }, 
		  function () {
			 var idRef = $(this).attr("id");
			 $('#titre_'+idRef).fadeTo("fast",0.75);
		  }
		);
	}
});
