var Panier = Class.create({
	initialize: function(element, options) {
		if (!(this.element = $(element))) return;
		this.items = this.element.select('.panier-colonne-item');
		this.page = 0;

		this.options = Object.extend({
			nb_items: 2
		}, options || {});

		if (this.items.length <= this.options.nb_items) {
			this.element.select('.fleche').invoke('hide');
		}
		else {
			this.element.select('.fleche').invoke('show');
		}

		this.element.select('.fleche-haut').first().observe('click', this.deplacer.bindAsEventListener(this, -1));
		this.element.select('.fleche-bas').first().observe('click', this.deplacer.bindAsEventListener(this, 1));
		
		this.deplacer(null, 0);
	},
	
	deplacer: function(e, deplacement) {
		if (e) e.stop();
		if (this.items.length <= this.options.nb_items) return;
		if (this.page + deplacement < 0 || (this.page + deplacement) > ((this.items.length - 1) / this.options.nb_items)) return;
		this.page += deplacement;
		var fin = this.page * this.options.nb_items + this.options.nb_items;
		if (fin > this.items.length) {
			fin = this.items.length;
		}
		var ensemble = $R(fin - this.options.nb_items, fin, true);
		var premier = true;
		for(i = 0; i < this.items.length; i++) {
			if (ensemble.include(i)) {
				Effect.BlindDown(this.items[i], {duration:0.2});
				if (premier) {
					premier = false;
					this.items[i].next().show()
				}
				else {
					this.items[i].next().hide()
				}
			}
			else {
				Effect.BlindUp(this.items[i], {duration:0.2});
				this.items[i].next().hide()
			}
		}
	}
});

var VersionNumerique = Class.create({
	initialize: function(element) {
		if (!(this.element = $(element))) return;

		var wrapper = this.element.siblings().detect(function(ele) { return ele.hasClassName('wrapper-couverture') });
		if (!wrapper) {
			this.element.ancestors().detect(function(ele) {
				return ele.childElements().detect(function(e) {
					if (e.hasClassName('wrapper-couverture')) {
						wrapper = e;
						return true;
					}
					else {
						return false;
					}
				});
			});
		}

		if (wrapper) {
			wrapper.insert({bottom:this.element});
		}

		this.element.setStyle({position:'absolute', right:'-20px', bottom:'20px'});
		this.mutex_ouvert = true;
		this.mutex_ferme = true;
		this.element.observe('mouseover', this.ouvrir.bindAsEventListener(this));
		this.element.observe('mouseout', this.fermer.bindAsEventListener(this));
	},
	
	ouvrir: function(e) {
		if (this.mutex_ouvert) {
			this.mutex_ouvert = false;
			var url = this.element.getStyle('background-image');
			if (!url.match("_over.png")) {
				url = url.replace('.png', '_over.png')
			}
			this.element.setStyle({backgroundImage:url});
			this.element.morph('width:139px', {duration: 0.3, transition: Effect.Transitions.sinoidal, queue:{scope:this.element.identify(), position:'end'}, afterFinish:this.terminer_ouverture.bindAsEventListener(this)});
		}
	},

	terminer_ouverture: function(e) {
		this.mutex_ouvert = true;
	},

	fermer: function(e) {
		if (this.mutex_ferme) {
			this.mutex_ferme = false;
			var url = this.element.getStyle('background-image');
			if (url.match("_over.png")) {
				url = url.replace('_over.png', '.png')
			}
			this.element.morph('width:34px', {duration: 0.3, transition: Effect.Transitions.sinoidal, queue:{scope:this.element.identify(), position:'end'}, afterFinish:this.terminer_fermeture.bindAsEventListener(this, url)});
		}
	},

	terminer_fermeture: function(e, url) {
		this.element.setStyle({backgroundImage:url});
		this.mutex_ferme = true;
	}

});

var Accordeon = Class.create({
	initialize: function(element) {
		if (!(this.element = $(element))) return;
		this.mutex = new Hash();
		this.actif = null;

		this.element.select('li').each(function(li) {
			var ul = li.select('ul').first();
			if (ul) {
				li.select('> a').first().observe('click', this.ajuster.bindAsEventListener(this, ul));
				ul.hide();
				this.mutex.set(ul.identify(), $H({ouvrir:true, fermer:true}));
			}
		}, this);
	},

	prendre: function(cle, k) {
		this.mutex.get(cle).set(k, false);
	},

	donner: function(e, cle, k) {
		this.mutex.get(cle).set(k, true);
	},

	ajuster: function(e, choix) {
		e.stop();
		if (choix == this.actif) {
			this.actif.up().removeClassName('accordeon-actif');
			this.actif = null;
			if (this.mutex.get(choix.identify()).get('fermer') == true) {
				var ele = choix;
				this.prendre(ele.identify(), 'fermer');
				Effect.BlindUp(ele, {queue:{scope:ele.identify(), position:'end'}, afterFinish:this.donner.bindAsEventListener(this, ele.identify(), 'fermer')});
			}
		}
		else {
			if (this.actif && this.mutex.get(this.actif.identify()).get('fermer') == true) {
				this.actif.up().removeClassName('accordeon-actif');
				var ele = this.actif;
				this.prendre(ele.identify(), 'fermer');
				Effect.BlindUp(ele, {queue:{scope:ele.identify(), position:'end'}, afterFinish:this.donner.bindAsEventListener(this, ele.identify(), 'fermer')});
			}
			this.actif = choix;
			this.actif.up().addClassName('accordeon-actif');
			if (this.mutex.get(this.actif.identify()).get('ouvrir') == true) {
				var ele = this.actif;
				this.prendre(ele.identify(), 'ouvrir');
				Effect.BlindDown(ele, {queue:{scope:ele.identify(), position:'end'}, afterFinish:this.donner.bindAsEventListener(this, ele.identify(), 'ouvrir')});
			}
		}
	}

});

var CarrouselFleche = Class.create({
	initialize: function(element, mouvement) {
		if (!(this.element = $(element))) return;
		this.cote = 'left';
		var layout = this.element.getLayout();
		this.largeur = layout.get('width');
		this.x = this.largeur / 4;
		this.deplace = false;
		
		if (mouvement > 0) {
			this.cote = 'right';
		}
		this.depart = layout.get(this.cote);
		
		this.element.observe('mouseover', this.deplacement.bindAsEventListener(this));
		this.element.observe('mouseout', this.retour.bindAsEventListener(this));
	},
	
	deplacement: function(e) {
		if (!this.deplace) {
			this.deplace = true;
			var style = this.cote + ':' + (this.depart - this.x) + 'px; width:' + (this.largeur + this.x) + 'px';
			this.element.morph(style, {duration: 0.1, queue:{scope:this.element.identify() + "fleche", position:'end'}});
		}
	},
	retour: function(e) {
		if (this.deplace) {
			this.deplace = false;
			var style = this.cote + ':' + this.depart + 'px; width:' + this.largeur + 'px';
			this.element.morph(style, {duration: 0.1, queue:{scope:this.element.identify() + "fleche", position:'end'}});
		}
	}
	
});

var Carrousel = Class.create({
	initialize: function(element, options) {
		if (!(this.element = $(element))) return;
		this.largeur = element.up().getWidth(); /* On se fit sur le parent pour trouver la largueur du carrousel */
		this.haut = element.adjacent('> div.carrousel-controle').first(); /* S'il y a div.carrousel-controle frère à la liste */
		this.items = this.element.childElements();

		this.options = Object.extend({
			nb_items: 4,
			separateur: true,
			auto: 0
		}, options || {});

		this.element.hide();
		this.wrapper = new Element('div', {'class':'carrousel-wrapper chargement', style:"overflow:hidden; position:relative;"});
		this.element.insert({before:this.wrapper});
		this.contenant = new Element('div', {'class':'carrousel-contenant'});
		this.wrapper.insert(this.contenant);
		this.wrapper.wrap(new Element('div', {'class':'spinner'}));

		this.panneaux = new Array();
		this.panneau_visible = 1;

		var premier = true;
		var restant = 0;
		var panneau = null;

		this.items.each(function(item) {
			if (restant == 0) {
				panneau = new Element('div', {style:"float:left;display:block; width:" + this.largeur + "px"});
				this.contenant.insert(panneau);
				this.panneaux[this.panneaux.length] = panneau;
				restant = this.options.nb_items;

				var klass = "carrousel-controle-lien";
				if (premier) {
					premier = false;
					klass = klass + " carrousel-controle-lien-actif";
				}
				if (this.haut) {
					var index = this.panneaux.length;
					this.haut.insert(new Element('a', {id:this.element.identify() + '-carrousel-controle-lien-' + index, 'class':klass, href:"#"}).observe('click', this.clique.bindAsEventListener(this, index)).insert(new Element('span').update(index)));
				}
			}
			if (this.options.separateur && restant < this.options.nb_items) {
				var ele = new Element('span', {'class':'separateur-livre'});
				panneau.insert(ele);
			}
			restant--;
			var ele = item.down()
			panneau.insert(ele);
			
		}, this);
		
		if (window.fully_loaded) {
			this.ajuster_panneaux();
		}
		else {
			Event.observe(window, 'load', this.ajuster_panneaux.bindAsEventListener(this));
		}

		this.contenant.setStyle({width:(this.panneaux.length * this.largeur) + "px"})

		if (this.panneaux.length > 1) {
			var fleche = new Element('a', {id:this.element.identify() + "-precedent", 'class':"carrousel-bouton-precedent", href:"#"}).observe('click', this.deplacement.bindAsEventListener(this, -1)).insert(new Element('span').update('precedent'));
			this.wrapper.insert({after:fleche});
			new CarrouselFleche(fleche, -1);
			
			fleche = new Element('a', {id:this.element.identify() + "-suivant", 'class':"carrousel-bouton-suivant", href:"#"}).observe('click', this.deplacement.bindAsEventListener(this, 1)).insert(new Element('span').update('suivant'));
			this.wrapper.insert({after:fleche});
			new CarrouselFleche(fleche, 1);
		}

		if (this.options.auto > 0) {
			this.auto_deplacement = true;
			var ex = new PeriodicalExecuter(function(pe) {
				if (this.auto_deplacement) {
					this.deplacement(null, 1)
				}
			}.bind(this), this.options.auto);
			this.wrapper.up().observe('mouseover', function(e) { this.auto_deplacement = false; }.bindAsEventListener(this))
			this.wrapper.up().observe('mouseout', function(e) { this.auto_deplacement = true; }.bindAsEventListener(this))
		}
	},

	clique: function(e, index) {
		e.stop();
		if (index != this.panneau_visible) {
			var pixels = (this.panneau_visible - index) * this.largeur;
			this.panneau_visible = index;
			new Effect.Move(this.contenant, {x:pixels, y:0, queue:{scope:this.element.identify() + "carrousel", position:'end'}, afterFinish:this.apres_deplacement.bindAsEventListener(this, this.panneau_visible)});
		}
	},

	deplacement: function(e, direction) {
		if (e) {
			e.stop();
		}
		if (direction > 0) {
			if (this.panneau_visible + 1 <= this.panneaux.length) {
				new Effect.Move(this.contenant, {x:-this.largeur, y:0, queue:{scope:this.element.identify() + "carrousel", position:'end'}, afterFinish:this.apres_deplacement.bindAsEventListener(this, ++this.panneau_visible)});
			} else {
				index = 1;
				var pixels = (this.panneau_visible - index) * this.largeur;
				this.panneau_visible = index;
				new Effect.Move(this.contenant, {x:pixels, y:0, queue:{scope:this.element.identify() + "carrousel", position:'end'}, afterFinish:this.apres_deplacement.bindAsEventListener(this, this.panneau_visible)});
			}
		}
		else {
			if (this.panneau_visible - 1 > 0) {
				new Effect.Move(this.contenant, {x:this.largeur, y:0, queue:{scope:this.element.identify() + "carrousel", position:'end'}, afterFinish:this.apres_deplacement.bindAsEventListener(this, --this.panneau_visible)});
			} else {
				index = this.panneaux.length;
				var pixels = (this.panneau_visible - index) * this.largeur;
				this.panneau_visible = index;
				new Effect.Move(this.contenant, {x:pixels, y:0, queue:{scope:this.element.identify() + "carrousel", position:'end'}, afterFinish:this.apres_deplacement.bindAsEventListener(this, this.panneau_visible)});
			}
		}
	},

	apres_deplacement: function(e, index) {
		if (this.haut) {
			indicateurs = this.haut.select('a');
			indicateurs.each(function(indicateur) {
				indicateur.removeClassName('carrousel-controle-lien-actif');
			});
			indicateurs[index-1].addClassName('carrousel-controle-lien-actif');
		}
	},
	
	ajuster_panneaux: function() {
		this.panneaux.each(function(panneau) {
			var total = 0
			var elements = panneau.childElements();
			elements.invoke('getWidth').each(function(largeur) { total += largeur });
			var gauche = Math.floor((this.largeur - total) / 2);
			panneau.setStyle({
				'marginLeft':gauche + "px",
				'marginRight':(this.largeur - gauche - total) + "px",
				'width':total + 'px'
			});
			panneau.ajuster_hauteur();
		}, this);
		this.wrapper.removeClassName('chargement');
		this.wrapper.up().removeClassName('spinner');
	}

});

var SectionCatalogue = Class.create({
	initialize: function(element) {
		if (!(this.element = $(element))) return;
		this.effect = null;
		
		this.element.observe('mouseover', this.derouler.bindAsEventListener(this));
		this.element.observe('mouseout', this.annuler.bindAsEventListener(this));
	},

	derouler: function(e) {
		this.annuler.bind(this);
		this.element.setStyle({backgroundRepeat:"no-repeat", backgroundPosition:"-153px 0.5em"});
		this.effect = new Effect.Morph(this.element, {duration: 0.3, style:'background-position:0 0.5em'});
	},
	
	annuler: function(e) {
		if (this.effect) {
			this.effect.cancel();
			this.effect = null;
		}
	}
});

var Modal = Class.create({
	initialize: function(element) {
		if (!(this.element = $(element))) return;
		this.boundHandlerMethod = this.creer_modal.bindAsEventListener(this);
		this.element.observe('click', this.boundHandlerMethod);
		this.modal = null;
	},
	creer_modal: function(e) {
		e.stop();
		this.modal = new Control.Modal.open(this.element,{
			overlayOpacity: 0.75,
			className: 'modal',
			fade: true,
			afterOpen: function() {
				var window_close = new Element('span',{ className: 'window_close' });
				window_close.observe('click', function(e) { e.stop(); Control.Modal.close(); });
				this.container.insert(window_close);
				Event.fire(document, "acts_as_modal:open", this);
			},
			afterClose: function() {
				this.remoteContentLoaded = false;
				this.container.update("");
			}
		});
		this.element.stopObserving('click', this.boundHandlerMethod);
	}
});


var BranchementClasse = {
	remplir: function(element) {
		if (!(element = $(element))) return;

		var f = function(ele) {
			var max = parseInt(ele.up().getLayout().get('width'));
			var fontSize = parseInt(ele.getStyle('fontSize'));
			while (ele.getLayout().get('width') < max) {
				fontSize+= 4;
				ele.setStyle({'fontSize' : fontSize + 'px'});
				//$('debug-max').update(remplir++);
			}
			ele.setStyle({'fontSize' : fontSize - 5 + 'px'});
			Event.fire(document, "remplir:fini", ele);
		}

		if (!element.hasAttribute('remplir')) {
			element.writeAttribute('remplir');
			if (window.polices_actives == true) {
				f(element);
			}
			else {
				document.observe("gallimard:polices_actives", f.curry(element));
			}
		}
		return element;
	},

	accordeon: function(element) {
		if (!(element = $(element))) return;
		if (!element.hasAttribute('accordeon')) {
			new Accordeon(element);
			element.writeAttribute('accordeon');
		}
		return element;
	},
	
	ajuster_hauteur: function(element) {
		if (!(element = $(element))) return;
		if (!element.hasAttribute('ajuster_hauteur')) {
			var total = 0;
			['img.couverture', 'div.livre-detail > a:first-child'].each(function(selecteur) {
				var elements = element.select(selecteur);
				var max = elements.invoke('getHeight').max();
				elements.each(function(e) {
					var hauteur = e.getHeight();
					e.setStyle({'marginBottom':max - hauteur + 'px'});
				});
			}, this);
			element.writeAttribute('ajuster_hauteur');
		}
		return element;
	},

	acts_as_carrousel: function(element, options) {
		if (!(element = $(element))) return;
		if (!element.hasAttribute('acts_as_carrousel')) {
			element.store('carrousel', new Carrousel(element, options));
			element.writeAttribute('acts_as_carrousel');
		}
		return element;
	},

	acts_as_panier: function(element, options) {
		if (!(element = $(element))) return;
		if (!element.hasAttribute('acts_as_panier')) {
			element.store('panier', new Panier(element, options));
			element.writeAttribute('acts_as_panier');
		}
		return element;
	},

	ombre: function(element) {
		if (!(element = $(element))) return;
		if (!element.hasAttribute('ombre')) {
			element.insert({after: new Element('img', {src:"/images/livre/shadow_small.png", 'class':"livre-ombre", border:0})});
			element.insert({after: new Element('br')});
			element.writeAttribute('ombre');
		}
		return element;
	},
	
	version_numerique: function(element) {
		if (!(element = $(element))) return;
		if (!element.hasAttribute('version_numerique')) {
			new VersionNumerique(element);
			element.writeAttribute('version_numerique');
		}
		return element;
	},
	
	image_wrapper: function(element) {
		if (!(element = $(element))) return;
		if (!element.hasAttribute('image_wrapper')) {
			element.wrap('span', {'class':'wrapper-couverture'});
			element.writeAttribute('image_wrapper');
		}
		return element;
	},
	
	acts_as_modal: function(element) {
		if (!(element = $(element))) return;
		if (!element.hasAttribute('acts_as_modal')) {
			element.store('modal', new Modal(element));
			element.writeAttribute('acts_as_modal');
		}
		return element;
	},
	
	acts_as_link: function(element) {
		if (!(element = $(element))) return;
		if (!element.hasAttribute('acts_as_link')) {
			element.observe("click", function(e) {
				e.stop();
				window.location = element.readAttribute('href');
			});
			element.writeAttribute('acts_as_link');
		}
		return element;
	}
};

var Ajustement = {
	zIndexFix: function(element) {
		element.observe("mouseover", function(e) {
			this.ancestors().detect(function(ele) {return ele.hasClassName('carrousel-contenant');}).setStyle({zIndex: 100});
		});
		element.observe("mouseout", function(e) {
			this.ancestors().detect(function(ele) {return ele.hasClassName('carrousel-contenant');}).setStyle({zIndex: null});
		});
	}
}

Element.addMethods(BranchementClasse);
Element.addMethods(Ajustement);

WebFontConfig = {
	custom: {
		families: ['DubielPlainThinRegular'],
		urls: [ '/stylesheets/dubiel_plain.css']
	},
	active: function() {
		window.polices_actives = true;
		Event.fire(document, "gallimard:polices_actives")
	},
	inactive: function() {
		window.polices_actives = true;
		Event.fire(document, "gallimard:polices_actives")
	}
};
(function() {
	var wf = document.createElement('script');
/*
	wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
		'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
*/
	wf.src = '/javascripts/webfont.js';
	wf.type = 'text/javascript';
	wf.async = 'true';
	var s = document.getElementsByTagName('script')[0];
	s.parentNode.insertBefore(wf, s);
})();

function init_catalogue() {
	var ele = $('colonne-gauche-catalogue');
	var img = ele.select('a > img:first').first();
	var liste = ele.select('ul:first').first();
	var index = 0;
	img.up().observe('click', function(e) {
		e.stop();
		if (liste.visible()) {
			img.src = img.src.replace('_haut', '_bas');
			Effect.Fade(liste);
			Effect.BlindUp(liste);
		}
		else {
			img.src = img.src.replace('_bas', '_haut');
			Effect.Appear(liste);
			Effect.BlindDown(liste);
		}
	});
	liste.hide();
	liste.accordeon();

	//$$('div#colonne-gauche-catalogue ul a').each(function(element) { new SectionCatalogue(element); });
}

function init_recherche() {
	var formulaire = $('recherche');
	var champ = formulaire.select('input[type=text]').first().hide();
	var img = $$('div.zone-recherche > img').first();
	var defaut = champ.getValue();
	img.observe('click', function(e) {
		img.toggle();
		if (defaut == champ.getValue()) {
			champ.setValue('');
		}
		champ.toggle().focus();
	});
	champ.observe('blur', function(e) {
		img.toggle();
		champ.toggle();
	});
}

function init_infolettre() {
	var formulaire = $('infolettre-courriel');
	var champ = formulaire.select('input[type=text]').first();
	var defaut = champ.getValue();
	champ.observe('focus', function(e) {
		champ.setValue('');
	});
}

function init_top5() {
	var ol = $('top-5');
	var i = 0;
	ol.select('span.wrapper-couverture').each(function(ele) {
		i++;
		ele.insert({after: new Element('img', {src:"/images/colonne/top5_" + i + ".png", 'class':"top-5-position", border:0})});
	});
}

function init_nouveautes() {
	var modifier = true;
	var ex = new PeriodicalExecuter(function(pe) {
		if (modifier) {
			new Ajax.Request("/catalogue/nouveaute");
		}
	}, 15);

	$('liste-nouveautes').up().observe('mouseover', function(e) { modifier = false; });
	$('liste-nouveautes').up().observe('mouseout', function(e) { modifier = true; });
}

document.observe("acts_as_modal:open", function(e) {
	e.memo.container.select('ul.Carrousel').invoke('acts_as_carrousel');
	e.memo.container.select('.VersionNumerique').invoke('version_numerique');
	e.memo.container.select('.Ombre').invoke('ombre');
	e.memo.container.select('.bouton-confirmer').each(function(bouton) { bouton.observe('click', function(e) { $('confirmer').setValue('confirmer'); }); });
	e.memo.container.select('.lien-afficher-detail-panier').each(function(lien) {
		var element = lien.up().up().select('.detail-panier').first();
		element.hide();
		lien.observe('click', function(e) {
			if (this.hasClassName('lien-afficher-detail-panier-ouvert')) {
				this.removeClassName('lien-afficher-detail-panier-ouvert')
			}
			else {
				this.addClassName('lien-afficher-detail-panier-ouvert')
			}
			e.stop();
			Effect.toggle(element, 'blind', {duration: 0.3});
		});
	});
});

function actualiser(e) {
	url    = this.readAttribute('action');
	params = this.serialize();

	new Ajax.Request(url, {
		parameters: params
    });
}

window.remplir = 0;
document.observe("dom:loaded", function() {
	$$('img.couverture').invoke('image_wrapper');
	$$('.Modal').invoke('acts_as_modal');
	$$('.URL').invoke('acts_as_link');
	$$('ul.Carrousel').invoke('acts_as_carrousel');
	$$('.Remplir').invoke('remplir');
	$$('.Ombre').invoke('ombre');
	$$('.VersionNumerique').invoke('version_numerique');

	init_recherche();
	init_infolettre();
	init_catalogue();
	init_top5();
//	init_nouveautes();
	
	$('lien-panier-colonne').observe('click', function(e) {
		e.stop(); 
		if ($('panier-colonne-contenant').visible()) {
			this.removeClassName('ouvert');
		}
		else {
			this.addClassName('ouvert');
		}
		Effect.toggle($('panier-colonne-contenant'), 'blind', {duration: 0.3});
	});
});

document.observe("gallimard:polices_actives", function() {
});
Event.observe(window, 'load', function() {
	window.fully_loaded = true;
	$$('.AjusterHauteur').invoke('ajuster_hauteur');
});