CLASS POP-IN AVEC EFFET SOUS JQUERY DE "CONNEXION" STYLE CS {AJAX}

/* ------------------------------------------------------------------------
	Class: ConnexionBox
	Auteur: Nementon (http://www.uwht.u7n.org || http://uwht.fr)
	Version: 1.0.0
	
	Html Box: 
	<div id="connexion_box">
		<div id="connexion_aplat">
		</div>
		<div id="connexion_conteneur">
			<div id="connexion_relative">
				<div id="connexion_close">
				</div>
				<div id="connexion_contenu">
				</div>
			</div>
		</div>
	</div>

	Html Form:
	<fieldset><legend>Authentification</legend></fieldset>	
		<form action="'+coBox.lien+'" methode="post" id="connexion_form">
			<label>Pseudo :</label>
				<input type="text" name="pseudo" id="connexion_form" />
			<label>Password :</label>
				<input type="password" name="password" id="connexion_form" /><br />
			<input type="submit" value="connexion" id="connexion_button/>
		</form>
		<div id="connexion_loader">
		</div>
	</fieldset>
 
------------------------------------------------------------------------- */

$(document).ready(function(){
	coBox.init();
});
coBox = {
	// Configure la boite;
	/////////////////
		init : function(){
			// Declarations des atribut par default;
			coBox.heightD     = 200; // Hauteur default;
			coBox.widthD      = 350; // Largeur default;
			coBox.dure        = 500; // Dure des animation par default (ms);
			coBox.opacity     = 0.7; // Opacite de l'aplat;
			coBox.redirection = "index.php" // Url de redirection apres login;
			
			$("a[rel='connexion']").click(function(){
				coBox.lien = $(this).attr("href"); // Lien vers le script php de connexion;

				//Code Html Box;
				$('body').append('<div id="connexion_box"><div id="connexion_aplat"></div><div id="connexion_conteneur"><div id="connexion_relative"><div id="connexion_close"></div><div id="connexion_contenu"></div><div id="connexion_loader"></div></div></div></div>');
				$("#connexion_conteneur").hide();
				$("#connexion_aplat").css("opacity",0).fadeTo(coBox.dure, coBox.opacity);
				coBox.anim();
				
				//Verif !empty puis ajax;
				$("form").submit(coBox.vForm);
				 
				// Loader Ajax;		
				$("#connexion_loader").ajaxStart(function(){ $(this).show(); });
				$("#connexion_loader").ajaxStop(function(){ $(this).hide(); });
				// Fermeture de la box;
				$("#connexion_close").click(coBox.close);
				$("#connexion_aplat").click(coBox.close);
				return false;
			});
	},
		
		anim : function() {
			// On commence par cacher tous le contenu;
			$("#connexion_conteneur").show();
			$("#connexion_loader").hide();
			// On Centre la box;
			$("#connexion_conteneur").css("left", ((coBox.windowW()-coBox.widthD)/2)+"px");
			$("#connexion_conteneur").css("top", (coBox.scrollY()+(coBox.windowH()-coBox.heightD)/2)+"px");
			$("#connexion_close").hide();
			// Code Formulaire;
			$("#connexion_contenu").append('<fieldset id="connexion_form" style="display:block;"><legend>Authentification</legend><form action="'+coBox.lien+'" methode="post" id="connexions_form" style="width:50%;float:left;"><label>Pseudo :</label><input type="text" name="pseudo" id="pseudo_form" value=""/><label>Password :</label><input type="password" name="password" id="password_form" value="" /><br /><br /><input type="submit"  value="connexion" id="connexion_button" /></form>  </fieldset>');

			$("#connexion_form").hide();
			// Animation;
			$("#connexion_contenu").css("opacity",0.8);
			$("#connexion_conteneur").animate({height:coBox.heightD},coBox.dure).animate({width:coBox.widthD}, coBox.dure, 'linear', function(){
				$("#connexion_close").fadeIn();
				$("#connexion_form").fadeIn();
			});
			//$("#connexion_close").show();
			
		},
		
		// On efface le code genere;
		close : function(){
			$("#connexion_box").fadeOut(coBox.dure, function(){
				$("#connexion_box").remove();
				document.location.href=coBox.redirection;
			});
		},
		
		vForm : function(){ 
			// Supression de la div rajouter en cas d'echec de login;
			$("#connexion_print").remove();
			
			// Quelques test sur "l'integritées des champs;
			coBox.champ1 = false;
			coBox.champ2 = false;
			if($("input[id='pseudo_form']").val() != "" && $("input[id='pseudo_form']").val().length >= 3) {
				 coBox.champ1 = true;
				$("input[id='pseudo_form']").css("background", "green");
			}
			if($("input[id='password_form']").val() != "" && $("input[id='password_form']").val().length >= 3) {
				coBox.champ2 = true;
				$("input[id='password_form']").css("background", "green");
			}
			if( coBox.champ1 == true && coBox.champ2 == true)
			{
				// Requete Ajax;
				$.post( coBox.lien,
					$("#connexions_form").serialize(), function(data){
						if(data == "false"){
							$("#connexion_form").append("<div id='connexion_print' style='float:right;'><font color=red> Mauvais login ou mot de passe !</font></div>");
						}
						else{
							$("#connexion_form").append("<div id='connexion_print' style='float:right;'><font color=green> Connexion effectué avec succé ! </font></div>");
							setInterval(function(){
								setInterval(coBox.close(), 4500);
							}, 5000);
						}
					});
		

				
			}
			else {
				if ( coBox.champ1 == false) {
					$("input[id='pseudo_form']").css("background", "red");
				}
				if (coBox.champ2 == false) {
					$("input[id='password_form']").css("background", "red");
				}
			}
			return false;
			
			
		},
		
		// Recupere la "hauteur" de la scrollbar;
		scrollY : function() {
		  scrOfY = 0;
		  if( typeof( window.pageYOffset ) == 'number' ) {
			//Netscape compliant;
			scrOfY = window.pageYOffset;
		  } else if( document.body && ( document.body.scrollTop ) ) {
			//DOM compliant;
			scrOfY = document.body.scrollTop;
		  } else if( document.documentElement && ( document.documentElement.scrollTop ) ) {
			//IE6 standards compliant mode;
			scrOfY = document.documentElement.scrollTop;
		  }
		  return scrOfY;
		  alert(scrOfY);
		},
		
		// Recupere la hauteur de la fenetre;
		windowH : function(){
			if (window.innerHeight) return window.innerHeight  ;
			else{return $(window).height();}
		},
		
		// recupere la Largeur de la fenetre;
		windowW : function(){
			if (window.innerWidth) return window.innerWidth  ;
			else{return $(window).width();}
		}	

	}