// Temp - debugging 
var echo = function(msg) {
	if($('outMsg') == null) {
		var out = new Element('div',{'id': 'outMsg','style': 'position:absolute; z-index:99999; padding:0 4px; background:#FFF; color:#000;'});
		out.inject($('headerWrapper'),'top');
	}
	$('outMsg').appendText(msg);
	var br = new Element('br');
	$('outMsg').grab(br);
};
// Oi Project pour la gestion automatique de l'affichage des projets
var oiProject = new Class({
	initialize: function(container) {
		this.imageContainer = container;
		this.piContainer = this.imageContainer.getParent();
		this.projectHeader = this.piContainer.getElement('#projectHeader');
		this.projectListe = this.piContainer.getElement('#projectList');
		// Si on a du texte, on wrap le tout dans un wrapper général pour adapter le visuel
		var textContainer = $('projectTextContainer');
		if(textContainer!=null) {
			this.textContainer = textContainer;
			this.projectWrap = new Element('div',{'id':'projectWrap'});
			this.projectWrap.inject(this.textContainer,'before');
			this.projectWrap.adopt([this.projectHeader, this.textContainer, this.imageContainer, this.projectListe]);
		}
		
		this.imageContainerWrap = new Element('div', {'id':'projectImageContainerWrap'});
		this.imageContainerWrap.wraps(this.imageContainer);
		var tabImageBox = this.imageContainer.getElements('div.projectImage');
		this.nbImages = tabImageBox.length;
		
		this.tabDescFx = new Array();
		this.indexImage = 1;
		this.imageWidth = 0;
		tabImageBox.each(function(imageBox,index) {
			// On prend la largeur d'une zone image
			if(index == 0) {
				var size = imageBox.getSize();
				this.imageWidth = size.x;
			}
			// On ajoute la classe pour dire que la partie JS est ok
			imageBox.addClass('imageProjectJsOk');
			// On gère la description
			var imageDesc = imageBox.getElement('div.description');
			var isEmpty = (imageDesc.get('html').length == 0);
			var descWrap = new Element('div', {'class':'descriptionWrap'});
			descWrap.wraps(imageDesc);
			if(isEmpty) {
				imageDesc.addClass('vide');
				this.tabDescFx.extend([false]);
			} else {
				var fx = new Fx.Slide(imageDesc, {'duration':400,'onComplete':this.slideDescComplete.bind(this)}).hide(); //.toggle();
				if(index == 0) {
					fx.toggle();
				}
				this.tabDescFx.extend([fx]);
			}
		}.bind(this));
		this.imageContainer.setStyle('width',(this.nbImages*this.imageWidth)+'px');
		
		// Pour plus de 4 projets, on affiche les boutons de slide
		this.projectListeUl = this.projectListe.getElement('ul');
		var listeLi = this.projectListeUl.getElements('li');
		if(listeLi.length > 4) {
			this.projectListeWrap = new Element('div', {'class':'wrap'});
			this.projectListeWrap.wraps(this.projectListeUl);
			var largeurUl = 0;
			var largeurLi = 0;
			var indexActif = 0;
			listeLi.each(function(li,index) {
				var size = li.getSize();
				largeurUl = largeurUl + size.x;
				largeurLi = size.x;
				if(li.getElement('a.actif') != null) {
					indexActif = index;
				}
			});
			this.projectListeUl.setStyle('width',largeurUl+'px');
			
			// Création des boutons de slide des projets
			this.projectListeLeftBtn = new Element('a', {'href':'#','class':'btnLeft'});
			this.projectListeRightBtn = new Element('a', {'href':'#','class':'btnRight'});
			this.projectListeLeftBtn.inject(this.projectListeWrap,'before');
			this.projectListeRightBtn.inject(this.projectListeWrap,'after');
			// On calcule la position initiale en fonction du Li actif
			var initPos = indexActif*largeurLi;
			// Fx
			this.projectListeUlFx = new Fx.Tween(this.projectListeUl, {'property':'left','transition':Fx.Transitions.linear,'duration':900,'onComplete':this.listeSlideLoopEvent.bind(this)}).set(0);
			var largeurWrap = this.projectListeWrap.getSize().x;
			this.projectListeUlMaxPos = (-1*largeurUl)+largeurWrap;
			this.projectListeUlFxActive = false;
			this.projectListeUlFxRightToLeft = true;
			this.projectListeBasePos = largeurLi;
			if(initPos == 0) {
				this.projectListeUlFxRightToLeft = false;
			}
			this.listeSlideLoopEnd(initPos);
			
			// Les events sur les boutons
			this.projectListeLeftBtn.addEvent('mouseenter', function(e) {
				e.stop();
				this.projectListeUlFxActive = true;
				this.projectListeUlFxRightToLeft = false;
				this.listeSlideLoop();
			}.bind(this));
			this.projectListeLeftBtn.addEvent('mouseleave', function(e) {
				e.stop();
				this.projectListeUlFxActive = false;
				this.listeSlideLoopEnd();
			}.bind(this));
			this.projectListeRightBtn.addEvent('mouseenter', function(e) {
				e.stop();
				this.projectListeUlFxActive = true;
				this.projectListeUlFxRightToLeft = true;
				this.listeSlideLoop();
			}.bind(this));
			this.projectListeRightBtn.addEvent('mouseleave', function(e) {
				e.stop();
				this.projectListeUlFxActive = false;
				this.listeSlideLoopEnd();
			}.bind(this));
		}
		
		// Bouton d'affichage du texte
		this.linkDesc = new Element('a', {'href':'#','class':'btnDesc'});
		this.linkDesc.inject($('projectHeader'),'top');
		this.linkDescHighlight = new Element('span', {'class':'highlight','html':' '});
		this.linkDescHighlight.inject(this.linkDesc);
		this.fxHighlight = new Fx.Tween(this.linkDescHighlight, {'property':'opacity','duration':400}).set(0);
		
		// Le event sur le bouton desc
		this.linkDesc.addEvent('click', function(e) {
			e.stop();
			this.descHighlight();
			this.slideDesc();
		}.bind(this));
		this.linkDesc.addEvent('mouseenter', function(e) {
			this.descHighlight();
		}.bind(this));
		//this.linkDesc.addEvent('mouseleave', this.slideDescComplete.bind(this));
		
		// Selecteur d'images :
		this.imageSelector = new Element('div', {'class':'imageSelector'});
		this.imageSelector.inject(this.imageContainerWrap,'after');
		
		// Effet de slide des pages
		this.fxImageContainer = new Fx.Tween(this.imageContainer, {'property':'margin-left','duration':700,'onComplete':this.changerImageComplete.bind(this)});
		
		// Les liens de navigation dans les images
		this.lesLiens = new Array();
		tabImageBox.each(function(image, index) {
			var link = new Element('a', {'href':'#','html':' '});
			link.inject(this.imageSelector);
			if(index == 0) {
				link.addClass('actif');
			}
			link.addEvent('click', function(e) {
				e.stop();
				this.changerImage(index+1);
			}.bind(this));
			this.lesLiens.include(link);
		}.bind(this));
		this.changerImage(this.indexImage);
		
		// Zoom sur les vignettes des travaux
		this.initListeZoom();
		
		this.cacherDesc();
	},
	listeSlideLoopEvent: function(e) {
		this.listeSlideLoop();
	},
	listeSlideLoop: function() {
		this.projectListeUlFx.options.transition = Fx.Transitions.linear;
		var basePos = this.projectListeBasePos;
		if(this.projectListeUlFxActive) {
			this.projectListeLeftBtn.removeClass('gris');
			this.projectListeRightBtn.removeClass('gris');
			var pos = this.projectListeUl.getStyle('left').toInt();
			if(this.projectListeUlFxRightToLeft) {
				pos = pos-basePos;
				if(pos > (this.projectListeUlMaxPos+1)) {
					this.projectListeUlFx.start(pos);
				} else {
					this.projectListeUlFxActive = false;
					this.listeSlideLoopEnd();
				}
			} else {
				pos = pos+basePos;
				if(pos < (0-1)) {
					this.projectListeUlFx.start(pos);
				} else {
					this.projectListeUlFxActive = false;
					this.listeSlideLoopEnd();
				}
			}
		}
	},
	listeSlideLoopEnd: function(position) {
		var basePos = this.projectListeBasePos;
		if(position) {
			basePos = position;
		}
		var pos = this.projectListeUl.getStyle('left').toInt();
		this.projectListeUlFx.cancel();
		if(this.projectListeUlFxRightToLeft) {
			pos = pos-basePos;
			if(pos < (this.projectListeUlMaxPos+1)) {
				pos = this.projectListeUlMaxPos;
				this.projectListeRightBtn.addClass('gris');
			}
			this.projectListeUlFx.options.transition = Fx.Transitions.Sine.easeOut;
			this.projectListeUlFx.start(pos);
		} else {
			pos = pos+basePos;
			if(pos > (0-1)) {
				pos = 0;
				this.projectListeLeftBtn.addClass('gris');
			}
			this.projectListeUlFx.options.transition = Fx.Transitions.Sine.easeOut;
			this.projectListeUlFx.start(pos);
		}
		
	},
	initListeZoom: function() {
		var projectList = $('projectList');
		if(projectList != null) {
			var lesVignettes = projectList.getElements('img');
			lesVignettes.each(function(vignette,index) {
				var link = vignette.getParent();
				if(!link.hasClass('actif')) {
					var fx = new Fx.Morph(vignette, {'duration':300}).set('.imgOut');
					vignette.addEvent('mouseenter', function(e) {
						fx.cancel();
						fx.start('.imgIn');
					});
					vignette.addEvent('mouseleave', function(e) {
						fx.cancel();
						fx.start('.imgOut');
					});
				}
			});
		}
	},
	descHighlight: function() {
		this.fxHighlight.set(0.6).start(0);
	},
	slideDescComplete: function(e) {
		if(!this.tabDescFx[this.indexImage-1].open) {
			(function() { this.descHighlight(); }).delay(100,this);
		}
	},
	slideDesc: function() {
		var index = this.indexImage-1;
		if(this.tabDescFx[index]) {
			//this.tabDescFx[index].options.onComplete = null;
			this.tabDescFx[index].cancel();
			this.tabDescFx[index].toggle();
		}
	},
	slideDescHide: function() {
		var index = this.indexImage-1;
		if(this.tabDescFx[index]) {
			if(this.tabDescFx[index].open) {
				this.tabDescFx[index].cancel();
				this.tabDescFx[index].slideOut();
			}
		}
	},
	slideDescShow: function() {
		var index = this.indexImage-1;
		if(this.tabDescFx[index]) {
			this.tabDescFx[index].cancel();
			this.tabDescFx[index].slideIn();
		}
	},
	cacherDesc: function() {
		var index = this.indexImage-1;
		if(this.tabDescFx[index]) {
			//this.tabDescFx[index].options.onComplete = this.slideDescComplete.bind(this);
			(function() {
				if(this.tabDescFx[index].open) {
					this.tabDescFx[index].slideOut();
				}
			}).delay(3000,this);
		}
	},
	changerImageComplete: function(e) {
		this.slideDescShow();
		this.cacherDesc();
	},
	changerImage: function(image) {
		if(this.indexImage != image) {
			if(image >= 1 && image <= this.nbImages) {
				this.slideDescHide();
				this.indexImage = image;
				this.sliderImage();
				this.lesLiens.each(function(lien,index) {
					lien.removeClass('actif');
					if(index == (image-1)) {
						lien.addClass('actif');
					}
				}.bind(this));
			}
		}
		if(!this.tabDescFx[this.indexImage-1]) {
			this.linkDesc.addClass('gris');
		} else {
			this.linkDesc.removeClass('gris');
		}
	},
	sliderImage: function() {
		this.fxImageContainer.cancel();
		this.fxImageContainer.start('-'+((this.indexImage-1)*this.imageWidth)+'px');
	}
});
// Initialisation de la couche JS :
function oiInit() {
	//var myOiMenu = new oiMenu();
	// Les travaux
	var projectContainer = $('projectImageContainer');
	if(projectContainer != null) {
		var myOiProject = new oiProject(projectContainer);
	}
}
window.addEvent('domready',function() {
	oiInit();
});