// popin
// trigger : 
// onCallShow			demande d'affichage (affichage peut être stopé si popin déjà en mouvement)
// onShow				lance l'affichage
// onShown				popin affichée (evenement également levé quand passage d'une popin à une autre)
// onCallHide			demande masquage popin
// onHide				masquage popin
// onHidden				popin masquée (popin + voile noir masqué)
$(document).ready(function () {
	
	popin.init();
	
	// test events
	/*$('#popin').bind('onShown', function () {
		alert(popin.config.id);
	});*/
	
	//popin.show({id:'idContent2'});
	
	// test js bind
	/*$('#mainContent .title h1').click(function () {
		popin.show({id:'idContent2'});
		return false;
	});*/
	
});

updateCufon('#popin h2');

var popin = {
	init: function () {
		
		var container = popin.config.container();
		
		// bind hide on close
		$('.close, .shadow', container).live('click', function () {
			popin.hide();
			return false;
		});
		
		// bind show on click
		$('[class*=popin:id:]').live('click', function () {
			var elmt = $(this);
			var id = popin.extractParam(elmt, 'id');
			popin.show({id:id});
			return false;
		});
		
		// if init on container
		container.filter('[class*=popin:id:]').each(function () {
			var elmt = $(this);
			var id = popin.extractParam(elmt, 'id');
			popin.show({style: 'init', id:id});
			elmt.removeAttr('class');
		});
		
		// event resize window
		$(window).resize(function () {
			popin.updatePos();
		});
		// event scroll window
		$(window).scroll(function () {
			popin.updatePos('scroll');
		});
		
	},
	config: {
		shadowDuration: 300,
		moveDuration: 300,
		fade: .75,
		id: '',
		status: 'off',
		style: 'large',
		container: function () {return $('#popin')},
		shadow: function () {return $('.shadow', popin.config.container())},
		wrapper: function () {return $('.wrapper', popin.config.container())}
	},
	extractParam: function (elmt, type) {
		// return id value of class ex : popin:id:idValue => return idValue
		var elmt = $(elmt);
		var value = '';
		
		var elmtClass = elmt.attr('class');
		switch (type) {
			case 'style' :
				if(elmtClass.indexOf('popin:style:') > -1) {
					value = elmtClass.split('popin:style:')[1].split(' ')[0];
				}
			break;
			default :
				if(elmtClass.indexOf('popin:id:') > -1) {
					value = elmtClass.split('popin:id:')[1].split(' ')[0];
				}
			break;
		}
		return value;
	},
	updatePos: function (style) {
		// repositionne le wrapper au centre de la page
		var moveDuration = popin.config.moveDuration;
		var topValue = popin.valueCenter();
		if(topValue < 0) {topValue = 0;}
		popin.moveWrapper(topValue, moveDuration, style);
	},
	updateHtmlContent: function (params) {
		// met à jour l'html en fonction de l'id passé en parametre
		var id = params.id;
		var wrapper = popin.config.wrapper();
		
		$('div.bgWrapper', wrapper).hide();
		$('#'+id).show();
		popin.hideWrapper('init');
		popin.updateStyle(params);
	},
	showAll: function (params) {
		var id = params.id;
		var container = popin.config.container();
		var fade = popin.config.fade;
		var wrapper = popin.config.wrapper();
		var shadow = popin.config.shadow();
		
		popin.updateHtmlContent(params);
		
		var shadowDuration = popin.config.shadowDuration;
		var shadowDurationTemp = shadowDuration;
		if(params.style == 'init') {
			shadowDurationTemp = 0;
		}
		
		var moveDuration = popin.config.moveDuration;
		var moveDurationTemp = moveDuration;
		if(params.style == 'init') {
			moveDurationTemp = 0;
		}
		
		// affiche l'ombre
		shadow.one('endFade', function () {
			
			// positionne le wrapper masqué au top
			var hiddenWrapperTopValue = popin.valueHiddenTop();
			wrapper.css('top', hiddenWrapperTopValue+'px');
			
			// initialise l'affichage du wrapper
			container.css('left', '0');
			
			// déplacement du wrapper
			var shownTopValue = popin.valueCenter();
			if(shownTopValue < 0) {shownTopValue = 0;}
			wrapper.one('endMove', function () {
				// fin de l'affichage popin
				container.removeClass('move');
				popin.config.status = 'on';
				container.trigger('onShown');
			});
			popin.moveWrapper(shownTopValue, moveDurationTemp);
		});
		popin.fadeShadow(fade, shadowDurationTemp);
	},
	switchWrapper:function (params) {
		var wrapper = popin.config.wrapper();
		var container = popin.config.container();
		var count = 0;
		
		wrapper.bind('endMove', function () {
			
			if(count == 0) {
				count++;
				popin.updateHtmlContent(params);
				popin.showWrapper();
			} else {
				// fin de l'affichage popin
				container.removeClass('move');
				popin.config.status = 'on';
				wrapper.unbind('endMove');
				container.trigger('onShown');
			}
		});
		popin.hideWrapper();
		
	},
	show: function (params) {
		var container = popin.config.container();
		container.trigger('onCallShow');
		if(!container.hasClass('move')) {
			container.addClass('move');
			
			// affiche le wrapper en fonction de l'id passé en parametre
			popin.config.id = params.id;
			
			if(popin.config.status == 'on') {
					container.trigger('onSwitch');
					popin.switchWrapper(params);
			} else {
				container.trigger('onShow');
				popin.showAll(params);
			}
		}
	},
	showWrapper: function () {
		var wrapper = popin.config.wrapper();
		var topValue = popin.valueCenter();
		var moveDuration = popin.config.moveDuration;
		popin.moveWrapper(topValue, moveDuration);
	},
	hide: function () {
		var container = popin.config.container();
		container.trigger('onCallHide');
		if(!container.hasClass('move')) {
			container.addClass('move');
			
			var shadowDuration = popin.config.shadowDuration;
			var moveDuration = popin.config.moveDuration;
			var fade = 0;
			
			var wrapper = popin.config.wrapper();
			var shadow = popin.config.shadow();
			
			container.trigger('onHide');
			
			// masque le wrapper
			wrapper.one('endMove', function () {
				
				// masque l'ombre
				shadow.one('endFade', function () {
					// fin du masquage popin
					container.removeAttr('style');
					shadow.removeAttr('style');
					wrapper.removeAttr('style');
					container.removeClass('move');
					popin.config.status = 'off';
					container.trigger('onHidden');
				});
				popin.fadeShadow(fade, shadowDuration);
			});
			popin.hideWrapper();
		}
	},
	hideWrapper: function (param) {
		// masque le wrapper
		var wrapper = popin.config.wrapper();
		var topValue = popin.valueHiddenTop();
		var moveDuration = popin.config.moveDuration;
		if(param == 'init') {
			moveDuration = 0;
		}
		popin.moveWrapper(topValue, moveDuration);
	},
	moveWrapper: function (topValue, moveDurationTemp, style) {
		// déplace le wrapper à la position passée en parametre
		var wrapper = popin.config.wrapper();
		topValue = parseInt(topValue);
		if(style == 'scroll') {
			wrapper.stop().animate({
				top: topValue+'px'
			}, moveDurationTemp, function () {
				wrapper.trigger('endMove');
			});
		} else {
			wrapper.animate({
				top: topValue+'px'
			}, moveDurationTemp, function () {
				wrapper.trigger('endMove');
			});
		}
	},
	stop: function () {
		// todo : stop any action at any time
	},
	fadeShadow: function (fadeValue, fadeDuration) {
		// fade l'ombre vers la valeur passée en parametre
		var shadow = popin.config.shadow();
		
		shadow.fadeTo(fadeDuration, fadeValue, function () {
			shadow.trigger('endFade');
		});
	},
	valueHiddenTop: function () {
		// retourne la valeur top pour masquer le wrapper
		var wrapper = popin.config.wrapper();
		
		var topValue = -(wrapper.height());
		var scrollOffset = popin.scrolledTop();
		topValue = topValue + scrollOffset;
		return topValue;
	},
	valueCenter: function () {
		// retourne la valeur top pour centrer le wrapper
		var wrapper = popin.config.wrapper();
		
		var wrapperHeight = wrapper.height();
		var windowHeight = $(window).height();
		var topValue = ((windowHeight / 2) - (wrapperHeight / 2));
		var scrollOffset = popin.scrolledTop();
		topValue = topValue + scrollOffset;
		return topValue;
	},
	scrolledTop: function () {
		var top = 0;
		var top = $(window).scrollTop();
		return top;
	},
	// TODO - placer les bordures et bouton close dans le wrapper du contenu de la popin pour pouvoir supprimer les fonctions suivantes et créer une vraie popin générique
	// consequences - si cette solution est mise en place, il faudra copier coller bordures et bouton close dans chaque
	// contenu de la popin -> redondance du code de la déco de la popin -> pas top pour la maintenance si cette déco est ammenée à changer
	updateStyle: function (params) {
		var id = params.id;
		var content = $('#'+id);
		
		var style = popin.extractParam(content, 'style');
		switch (style) {
			case 'mini':
				popin.setMiniStyle();
			break;
			default:
				popin.setLargeStyle();
		}
	},
	setMiniStyle: function () {
		var wrapper = popin.config.wrapper();
		popin.config.style = 'mini';
		wrapper.removeClass('large').addClass('mini');
	},
	setLargeStyle: function () {
		var wrapper = popin.config.wrapper();
		popin.config.style = 'large';
		wrapper.removeClass('mini').addClass('large');
	}
};

(function($){
	$.fn.extend({
		removeClass2: function(options) {
			
			return this.each(function() {
				var o = options;
				
				var elmt = $(this);
				
				var classes = elmt.attr('class');
				
				var newValue = classes.replace(o, '');
				while(newValue.indexOf('  ') > -1) {
					newValue = newValue.replace('  ', ' ');
				}
				elmt.attr('class', newValue);
			});
		}
	});
})(jQuery);

(function($){
	$.fn.extend({
		addClass2: function(options) {
			
			return this.each(function() {
				var o = options;
				
				var elmt = $(this);
				
				var classes = elmt.attr('class');
				classes = classes + ' ' + options;
				
				elmt.attr('class', classes);
				
			});
		}
	});
})(jQuery);