var imPreload = [];
function preloading(){
	for (x=0; x<preloading.arguments.length; x++){
		imPreload[x] = new Image();
		imPreload[x].src = preloading.arguments[x];
	}
}

/*********************************************
*
*
*/
var ieSSS = Class.create({
	initialize:function( url ){
		this.url = url;
		this.imageLast = 3;
		this.imageFade = 1.5;
		this.currentIm = 0;
		this.imList = [];
		this.nbrIms = 0;
		
		this.imPreload = [];
		
		this.initDOMReferences();
		
		this.handleReceiveImList = this.hReceiveImList.bind( this );
		this.hFadeOut = this.fadeOut.bind( this );
		this.hSwitchImage = this.switchImage.bind( this );
		
		this.imInfos.setOpacity(0);
		this.scroller.setOpacity(0);
		
	},
	loadImList:function(){
		new Ajax.Request( this.url, { method: 'get', onSuccess : this.handleReceiveImList });
	},
	hReceiveImList : function( resp ){
		
	
		this.imList = resp.responseText.evalJSON();
		this.nbrIms = this.imList.size();
		// preload images
		this.imList.each(function( im, idx ){
			this.imPreload[idx] = new Image();
			this.imPreload[idx].src = im.image;
		}, this);
		this.setCurrentImage();
		this.fadeIn();
	},
	initDOMReferences:function(){
		this.scroller = $('scroller');
		this.imInfos = $('rightContent');
		this.imInfos.setOpacity(0);
		this.imTitle = $('imTitle');
		this.imDescription = $('imDescription');
		this.imPhotographer = $('imPhotographer');
	},
	run : function(){
		this.loadImList();
	},
	fadeOut : function(){
		new Effect.Opacity( this.imInfos, { duration: this.imageFade/2, from: 1.0, to: 0.0 } );
		new Effect.Opacity( this.scroller, { duration: this.imageFade/2, from: 1.0, to: 0.0, afterFinish: this.hSwitchImage } );
	},
	fadeIn : function(){
		new Effect.Opacity( this.scroller, { duration: this.imageFade/2, from: 0.0, to: 1.0 } );
		new Effect.Opacity( this.imInfos, { duration: this.imageFade/2, from: 0.0, to: 1.0 } );
		setTimeout( this.hFadeOut, this.imageLast*1000 );
	},
	switchImage : function(){
		if( this.currentIm < this.nbrIms-1 ){
			this.currentIm++;
		}else{
			this.currentIm=0;
		}
		this.setCurrentImage();
		this.fadeIn();
	},
	setCurrentImage : function( ){
		var lim = this.imList[this.currentIm];
		this.scroller.update( '<img alt="" border="0" src="'+ lim.image +'" />' );
		this.imageInfos();
	},
	imageInfos : function(){
		
		var curIm = this.imList[this.currentIm];

		if( curIm.title ){
			this.imTitle.update( curIm.title );
		}else{
			this.imTitle.update('');
		}
		/*
		if( curIm.description){
			this.imDescription.update( curIm.description);
		}else{
			this.imDescription.update('');
		}
		*/

		if( curIm.photographer){
			this.imPhotographer.update( 'by '+curIm.photographer);
		}else{
			this.imPhotographer.update('');
		}
	}
});
/*********************************************
*
*
*/
var alaKDKSlideShow = Class.create({
	initialize:function( url ){
		this.url = url;
		this.imageOverlap = 50;
		this.imageLast = 4;
		this.imageFade = 1.5;
		this.currentIm = 0;
		this.imList = [];
		this.nbrIms = 0;
		this.initDOMReferences();
		this.handleReceiveImList = this.hReceiveImList.bind( this );
		this.hStartSlideshow = this.startSlideShow.bind( this );
		this.hWipe = this.wipe.bind( this );
		this.hRewind = this.rewind.bind( this );
	},
	initDOMReferences:function(){
		this.scroller = $('scroller');
		this.imInfos = $('rightContent');
		this.imInfos.setOpacity(0);
		this.imTitle = $('imTitle');
		this.imDescription = $('imDescription');
		this.imPhotographer = $('imPhotographer');
	},
	loadImList:function(){
		new Ajax.Request( this.url, { method: 'get', onSuccess : this.handleReceiveImList });
	},
	hReceiveImList : function( resp ){
		this.imList = resp.responseText.evalJSON();
		this.nbrIms = this.imList.size();
		this.fillViewport();
	},
	fillViewport:function(){
		var HTML = "";
		var imageOverlap = this.imageOverlap;
		this.scroller.setStyle({opacity: 0});
		this.imList.each(function( im, idx ){
			HTML += '<div id="image_'+idx+'" class="image" style="left:'+ (idx * imageOverlap)  +'px; top:-'+ ((idx*365)) +'px; width:615px; height:365px; z-index:-'+idx+';"><img alt="" src="'+im.image+'"/></div>';
		});

		this.scroller.update( HTML );
		this.imageInfos();
		this.rewind();
	},
	rewind:function(){
		this.scroller.setStyle({left:'0px'});
		$$('.image').invoke( 'setOpacity', 1.0 );
		new Effect.Opacity( this.scroller, { duration: 2.0, from: 0.0, to: 1.0, afterFinish: this.hStartSlideshow } );
		
	},
	startSlideShow : function(){
		this.currentIm = 0;
		this.imageInfos();
		new Effect.Opacity( this.imInfos, { duration: 2.0, from: 0.0, to: 1.0 } );
		this.scrollThem();
		this.hInterval = setInterval( this.hWipe , (this.imageLast*1000) );
	},
    scrollThem : function(){
		var newX = -1*( this.nbrIms * this.imageOverlap);
		var totalTime = ( this.nbrIms * (this.imageLast));

		new Effect.Tween( this.scroller, 0, newX, { duration: totalTime,  transition: Effect.Transitions.linear},
		function(p){
			var r = Math.round( p );
			this.setStyle( {left: r+'px', position:'relative', top: '0px'} );
		} );
	},
	wipe : function (){
		var el = $('image_'+ this.currentIm );
		//el.setStyle({border:'2px solid red'});
		//el.setOpacity( 0 );
		new Effect.Opacity( el, { duration: this.imageFade, from: 1.0, to: 0 } );
		
		new Effect.Opacity( this.imInfos, { duration: this.imageFade-1.0, from: 1.0, to: 0, afterFinish: function(){
			this.imageInfos();
			new Effect.Opacity( this.imInfos, { duration: 0.5, from: 0.0, to: 1.0 });
		}.bind(this)} );
		
		
		this.currentIm++;
		
		
		if( this.currentIm == (this.nbrIms-1) ){
			clearInterval( this.hInterval );
			new Effect.Opacity( this.imInfos, { duration: 2.0, delay: this.imageLast, from: 1.0, to: 0} );
			new Effect.Opacity( this.scroller, { duration: 2.0, delay: this.imageLast, from: 1.0, to: 0, afterFinish: this.hRewind} );
		}
	},
	imageInfos : function(){

		var curIm = this.imList[this.currentIm];
		
		if( curIm.title ){
			this.imTitle.update( curIm.title );
		}else{
			this.imTitle.update('');
		}
		/*
		if( curIm.description){
			this.imDescription.update( curIm.description);
		}else{
			this.imDescription.update('');
		}
		*/
		
		if( curIm.photographer){
			this.imPhotographer.update( 'by '+curIm.photographer);
		}else{
			this.imPhotographer.update('');
		}
	},
	run:function(){
		this.loadImList();
	}
});
/*********************************************
*
*
*/
var SD = Class.create({
	initialize : function(){
		this.did = 'mysimpledebuggerwindow';
		var root = $$('BODY').first();
		var html = '<div id="'+this.did+'" style="position:absolute; top:10px; left:10px; width:200px; height:400px; z-index:9999; overflow:auto; background-color:black; text:white;"></div>'; 
		root.insert( html );
		this.el = $(this.did);
	},
	append : function( t){
		this.el.innerHTML = this.el.innerHTML + t + '<br />';
	},
	replace : function( t ){
		this.el.innerHTML = t;
	}
});
/*********************************************
*
*
*/
var myScroller = Class.create({
	initialize : function( el, min, max ){
		this.el = el;
		this.speed = 50;
		
		this.freq = 10;
		this.delta = 1;
		
		this.t = null;
		
		this.min = min;
		this.max = max;
		this.state = 0; // 0 stop, -1 scrolling left, 1 scrolling right
		//this.running = false;
		//this.dbg = new SD();
	},
	goLeft : function( delta ){
		var curLeft = this.getCurLeft();
		this.delta = delta;
		
		if( this.state == 0 ) {
			this.t = setInterval( this.scrollIt.bind(this), this.freq );
		}
		
		this.state = -1;
	},
	goRight : function( delta ){
		var curLeft = this.getCurLeft();
		this.delta = delta;
		
		if( this.state == 0 ) {
			this.t = setInterval( this.scrollIt.bind(this), this.freq );
		}
		
		this.state = 1;
	},
	stop : function(){
		if( this.t ){ 
			clearInterval(this.t);
		 	this.t = null;
		}
		this.state = 0;
	},
	delta : function( d ){
		this.delta = d;
	},
	scrollIt : function(){
		var curLeft = this.getCurLeft();
		
		if( this.state == -1 ){
			if( curLeft <= this.min ){
				this.stop();
				return;
			}
		}else if ( this.state == 1 ){
			if( curLeft >= this.max ){
				this.stop();
				return;
			}
		}
		
		var newLeft = ( this.state == 1 ? curLeft+this.delta : curLeft-this.delta);
		this.el.setStyle({ left : newLeft+'px'});
	},
	getCurLeft : function(){
		return parseInt( this.el.getStyle('left') );
	}
	
});
/*********************************************
*
*
*/
var ViewportSensor = Class.create({
	initialize : function( holderEl ){
		this.holderEl = holderEl;
		//this.dbg = new SD();
		this.isIn = false;
		
		document.observe('mousemove', this.tracking.bind( this));
		
		this.viewport = this.holderEl.cumulativeOffset();
		this.hWidth = this.holderEl.getWidth();
		this.hHeight = this.holderEl.getHeight();
		//this.dbg.append( 'viewport : ' + this.viewport + ' HxW : ' + this.hHeight +'x'+ this.hWidth  );
		
	},
	tracking : function( ev ){
		var x = ev.clientX;
		var y = ev.clientY;
		
		if( x > this.viewport.left && 
			x < (this.viewport.left + this.hWidth) && 
			y > this.viewport.top &&
			y < (this.viewport.top +  this.hHeight) )
			{
				this.isIn = true;
				this.move( ev.clientX - this.viewport.left, ev.clientY - this.viewport.top, this.hWidth, this.hHeight );
				//this.dbg.append( 'ev x : ' + x + ' ev y : ' + y );
			}
			else{
				if( this.isIn == true){
					// we leave the viewport
					this.leave();
				}
				this.isIn = false;
			}	
	},
	move : function( x, y, width, height ){
		//this.dbg.append( 'x : ' + x + ' y : ' + y + ' width ' + width + ' height ' + height);
	},
	leave : function(){
		//this.dbg.append( 'leaving'  );
	}
});
/*********************************************
*
*
*/
var SS = Class.create({
	initialize : function( url, showImage ){
		this.url = url;
		this.showImageId = showImage;
		this.showImage = null;
		this.showImageIdx = -1;
		//this.dbg = new SD();
		
		this.ssImLast = 3.0;
		this.ss = false;
		this.t = -1;
		this.sliding = false;
		
		this.imList =[];
		this.nbrIms = 0;
		this.imCurrent = 0;
		
		this.trigger = 545/2;
		this.deadzone = 150;
		this.activezone = this.trigger - this.deadzone;
		
		this.elVignetteHolder = $$('.vignettesDiaporama').first();
		this.elVignetteSlider = $$('.vignetteSlider').first();
		this.elImCounter = $$('.numeroDiaporama').first();
		this.elImInfo = $$('.rightTop').first();
		this.elImNext = $$('.next').first();
		this.elImPrevious = $$('.previous').first();
		this.elImPause = $$('.pause').first();
		//this.elPhoto = $('grandePhoto');
		this.elPhoto = $('photo');
		
		if(this.elImInfo) { this.elImInfo.setOpacity(0); }
		this.elPhoto.setOpacity(0);
		
		this.elVignetteSlider.observe('mousedown', this.clickVignette.bind(this));
		this.elImNext.observe('mousedown', this.clickNextIm.bind(this));
		this.elImPrevious.observe('mousedown', this.clickPreviousIm.bind(this));
		this.elImPause.observe('mousedown', this.clickTogglePause.bind(this));
		
		

	},
	loadImages : function(){
		new Ajax.Request( this.url, { method: 'get', onSuccess : this.receiveImages.bind(this) });
	},
	receiveImages : function( resp ){
		this.imList = resp.responseText.evalJSON();
		this.nbrIms = this.imList.size();
		this.fillVignetteSlider();
		
		if( this.showImageId > 0){
			this.chgBigIm( this.showImageIdx );
			this.goToVignette( this.showImageIdx );
		}else{
			this.chgBigIm( 0 );
			this.goToVignette( 0 );
		}
		
		this.fadeIn();
		this.startSS();
	},
	startSS : function(){
		this.t = setInterval(this.nextIm.bind(this), this.ssImLast*1000);
		//this.t = setTimeout(this.nextIm.bind(this), this.ssImLast*1000);
		this.ss = true;
	},
	stopSS : function(){
		clearInterval( this.t );
		//clearTimeout( this.t );
		this.t = -1;
		this.ss = false;
	},
	clickTogglePause : function(){
		this.toggleSS();
		this.togglePlayPauseClass();
	},
	togglePlayPauseClass : function(){
		this.elImPause.toggleClassName('pause');
		this.elImPause.toggleClassName('play');
	},
	toggleSS : function(){
		if( this.ss ){
			this.stopSS();
		}else{
			this.startSS();
		}
	},
	clickVignette : function( ev ){
		var trg = ev.element();

		while( !trg.hasClassName('vignette') ){ trg = trg.up('DIV'); }

		/*this.dbg.append( tmp + ' tagName :  ' + tmp.tagName + ' class : ' + tmp.classNames() + ' id: ' + tmp.identify() );
		if( trg.tagName == 'IMG'){
			var trg = trg.up('div');
		}
		if( !trg.hasClassName('vignette') ){
			return;
		}*/
		var reg = new RegExp('vignette_(\\d+)');
		var reRet = reg.exec( trg.identify() );
		//var reRet = /vignette_(\d+)/( trg.identify() );
		var newImIdx = parseInt(reRet[1]);
		if( newImIdx != this.imCurrent ){
			
			if( this.ss ){
				this.stopSS();
				this.imCurrent = newImIdx;
				this.fadeOut( this.swapImage.bind( this ) );
				this.startSS();
			}else{
				this.imCurrent = newImIdx;
				this.fadeOut( this.swapImage.bind( this ) );
			}
			//if( this.ss ){
			//	this.stopSS();
			//	this.togglePlayPauseClass();
			//}
			//this.imCurrent = newImIdx;
			//this.fadeOut( this.swapImage.bind( this ) );
			//if( !this.ss ){
			//	this.startSS();
			//}
		}

	},
	clickNextIm : function(){
		if( this.ss ){
			this.stopSS();
			this.togglePlayPauseClass();
		}
		this.nextIm();
	},
	clickPreviousIm : function(){
		if( this.ss ){
			this.stopSS();
			this.togglePlayPauseClass();
		}
		this.previousIm();
	},
	nextIm : function(){
		if( this.imCurrent < (this.nbrIms-1) ){
			this.imCurrent += 1;
			this.fadeOut( this.swapImage.bind( this ) );
		}else{
			this.scrolltoVignette( 0 );
			this.imCurrent = 0;
			this.fadeOut( this.swapImage.bind( this ) );
			//this.clickTogglePause();
		}
	},
	previousIm : function(){
		if( this.imCurrent > 0 ){
			this.imCurrent -= 1;
			this.fadeOut( this.swapImage.bind( this ) );
		}else{
			
		}
	},
	swapImage : function( ){
		this.chgBigIm( this.imCurrent );
		if( !this.sliding ) this.scrolltoVignette( this.imCurrent );
		this.fadeIn();
	},
	chgBigIm : function( idx ){
		this.imCurrent = idx;
		this.elPhoto.innerHTML = '<img alt="" src="' +this.imList[this.imCurrent].image+'" border="0" />';
		this.updateInfos( this.imCurrent );
	},
	updateInfos : function( idx ){
		
		var im = this.imList[idx];
		this.elImCounter.innerHTML = (idx+1)+'/'+this.nbrIms;
		if( !this.elImInfo) return;
		if(im.description){
			this.elImInfo.innerHTML = im.description.gsub(/\n|\r/, '<br />');
		}else{
			this.elImInfo.innerHTML = '';
		}
	},
	fadeOut : function( afterFinishFct ){
		if( this.elImInfo ) new Effect.Opacity( this.elImInfo, { from: 1.0, to: 0.0, duration: 0.5 } );
		if( afterFinishFct ){
			new Effect.Opacity( this.elPhoto, { from: 1.0, to: 0.0, duration: 0.5, afterFinish : afterFinishFct } );
		}else{
			new Effect.Opacity( this.elPhoto, { from: 1.0, to: 0.0, duration: 0.5 } );
		}
		
		//this.elImInfo.setOpacity(0);
		//this.elPhoto.setOpacity(0);
	},
	fadeIn : function( ){
		if( this.elImInfo ) new Effect.Opacity( this.elImInfo, { from: 0.0, to: 1.0, duration: 0.5 } );
		new Effect.Opacity( this.elPhoto, { from: 0.0, to: 1.0, duration: 0.5 } );
	},
	fillVignetteSlider : function(){
		var scrollerWidth = this.nbrIms*112;
		this.elVignetteSlider.setStyle({ width: (scrollerWidth)+'px'});
		this.scrl = new myScroller(this.elVignetteSlider, -(scrollerWidth-(5*112)), 0 );
		html = '';
		for( var x = 0; x < this.nbrIms; x++){
			if( this.showImageId > 0 && this.imList[x].id == this.showImageId ){
				this.showImage = this.imList[x];
				this.showImageIdx = x;
			}
			//html += '<div id="vignette_'+x+'" class="vignette" style="width:96px; height:64px; text-align:center; xfloat:left;"><img alt="" src="' + this.imList[x].thumb + '"/></div>';
			html += '<div id="vignette_'+x+'" class="vignette" style="width:96px; height:64px; text-align:center;">'+
						'<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%"><tr><td width="100%" height="100%" align="center" valign="middle">'+
						'<img alt="" src="' + this.imList[x].thumb + '"/>'+
						'</td></tr></table></div>';
			
		}
		this.elVignetteSlider.innerHTML = html;
		this.s = new ViewportSensor(this.elVignetteHolder);
		this.s.move = this.move.bind( this );
		this.s.leave = this.leave.bind( this );
	},
	scrolltoVignette : function( idx ){
		var newLeft = 0;

		if( idx < 3 ){
			idx = 0;
		}else if (idx > this.nbrIms-3){
			idx = this.nbrIms-5;
		}else{
			idx = idx -2;
		}
		newLeft = -(idx * 112);
		new Effect.Morph( this.elVignetteSlider, {style: "left:"+newLeft+"px;" , duration:0.5 } );
		//this.elVignetteSlider.morph( {style: "left:"+newLeft+"px;" , duration:0.5 } );
	},
	goToVignette : function( idx ){
		var newLeft = 0;
		
		if( idx < 3 ){
			idx = 0;
		}else if (idx > this.nbrIms-3){
			idx = this.nbrIms-5;
		}else{
			idx = idx -2;
		}		
		newLeft = -(idx * 112);
		this.elVignetteSlider.setStyle({ left: newLeft+'px'});
	},
	// move receive mouse move events
	// and move vignettes accordingly
	move : function(x, y, width, height ){
		this.sliding = true;
		var absPos = (Math.abs( (545/2) - x )) - this.deadzone;
		if( absPos < 0 ){
			this.scrl.stop();
		}else{
			var speed = (absPos / this.activezone)*10;
			if( x < this.trigger){
				this.scrl.goRight(speed);
			}else{
				this.scrl.goLeft(speed);
			}
		}
	},
	// called when mouse leave vignettes
	leave : function(){
		this.sliding = false;
		this.scrl.stop();
	}
});
/*********************************************
*
*
*/
var xSS = Class.create({
	initialize : function( url ){
		this.url = url;
		this.dbg = new SD();
		
		
		this.imList =[];
		this.nbrIms = 0;
		
		this.initDOMRef();
		this.initHandlers();
	},
	initDOMRef : function(){
		
		//this.elVignetteViewport = $$('.vignettesDiaporama').first();
		this.elScrollSensor = $('sensor');
		
		this.elVignetteSlider = $$('.vignetteSlider').first();
		
		//this.viewport = this.elVignetteSlider.cumulativeOffset();
		this.viewport = this.elScrollSensor.cumulativeOffset();
		this.dbg.append( 'viewport : ' + this.viewport );
	
	},
	initHandlers : function(){
		
		this.elScrollSensor.observe('mousemove', this.scrollSensorMove.bind( this ) );
		this.elScrollSensor.observe('mouseout', this.scrollSensorOut.bind( this ) );
		
	},
	scrollSensorMove : function( ev ){
		var trgel = ev.element();
		//if( trgel.tagName == 'IMG') return;
		var x = ev.clientX-this.viewport.left;
		var trigger = 545/2;
		var deadzone = 50;
		var activezone = trigger - deadzone;
	 	var absPos = (Math.abs( (545/2) - x )) - deadzone;
	
		t = "";
	
		if( absPos < 0 ){
			this.scrl.stop();
		} else{
			
			var speed = (absPos / activezone)*20;
			t +="<br /> speed : " + speed;
			
			if( x < trigger){
				this.scrl.goRight(speed);
			}else{
				this.scrl.goLeft(speed);
			}
		}
			
		return;

	},
	scrollSensorOut : function( ev ){
		var trgel = ev.element();
		//if( trgel.tagName == 'IMG') return;
		//if( ! trgel.hasClassName('vignettesDiaporama') ){ return; }
		//this.dbg.append("mouse out for " + trgel.tagName + ' ' + trgel.className  );
		this.scrl.stop();
	},
	loadImages : function(){
		new Ajax.Request( this.url, { method: 'get', onSuccess : this.receiveImages.bind(this) });
	},
	receiveImages : function( resp ){
		this.imList = resp.responseText.evalJSON();
		this.nbrIms = this.imList.size();
		this.fillVignetteSlider();
		
	},
	fillVignetteSlider : function(){
		var scrollerWidth = this.nbrIms*112;
		this.elVignetteSlider.setStyle({ width: (scrollerWidth)+'px'});
		this.scrl = new myScroller(this.elVignetteSlider, -(scrollerWidth-(5*112)), 0 );
		html = '';
		for( var x = 0; x < this.nbrIms; x++){
			html += '<div id="vignette_'+x+'" class="vignette" style="width:96px; text-align:center; float:left; ;xposition:absolute; xleft:'+((x+1)*112)+'px;" ><img alt="" src="' + this.imList[x].thumb + '"/></div>';
		}
		this.elVignetteSlider.innerHTML = html;
	}
	
});

/*********************************************
*
*
*/
var simpleSlideShow = Class.create({
	initialize:function( url , params ){
		this.url = url;
		this.params = params;
		this.initDOMReferences();
		this.initEventHandler();
		
		this.imPreload = [];
		
		this.imList = [];
		this.nbrIms = 0;
		this.currentIm = 0;
		
		this.firstVignette = 0;
		this.lastVignette = 4;
		
		this.state = 'play'; // play or pause
		this.hInterval = 0;
	},
	loadImList:function(){
		this.elScreen.setOpacity(1);
		this.elScreen.update('Loading ...');
		new Ajax.Request( this.url, { method: 'get', onSuccess : this.handleReceiveImList });
	},
	startSlideShow : function(){		
		this.hInterval = setInterval ( this.handleSlideShowNext, 2800 );
	},
	restartSlideShow : function(){
		this.handleSlideShowNext();
		this.hInterval = setInterval ( this.handleSlideShowNext, 2800 );
	},
	stopSlideShow : function(){
		clearInterval( this.hInterval ); 
	},
	initDOMReferences:function(){
		//this.elPlay = $$('.play').first();
		this.elPause = $$('.pause').first();
		this.elNext = $$('.next').first();
		this.elPrevious = $$('.previous').first();
		this.elScreen = $$('#grandePhoto').first();

		this.elDescription = $$('.rightTop').first();
		this.elVignetteHolder = $$('.vignettesDiaporama').first();
		this.elVignetteSlider = $$('.vignetteSlider').first();
		this.elCounter = $$('.numeroDiaporama').first();
	},
	initEventHandler:function(){
		this.handleReceiveImList = this.hReceiveImList.bind( this );
		this.handlePlayPause = this.hPlayPause.bind( this );
		//this.handlePause = this.hPause.bind( this );
		this.handleNext = this.hNext.bind( this );
		this.handleSlideShowNext = this.hSlideShowNext.bind( this );
		this.handlePrevious = this.hPrevious.bind( this );
		this.handleUpdateScreen = this.updateScreen.bind( this );
		this.handleRewind2 = this.hRewind2.bind( this );
		this.handleInitialStart = this.hInitialStart.bind(this);
		
		this.elNext.observe('click', this.handleNext);
		this.elPrevious.observe('click', this.handlePrevious);
		this.elPause.observe('click', this.handlePlayPause);
		this.elVignetteSlider.observe('click', this.hSliderClicked.bind(this) );
		this.elVignetteSlider.observe('mouseover',this.hSliderOver.bind(this) );
		this.elVignetteSlider.observe('mouseout',this.hSliderOut.bind(this) );
	},
	hReceiveImList : function( resp ){
		this.imList = resp.responseText.evalJSON();
		this.nbrIms = this.imList.size();
		
		this.fillVignetteSlider();
		
		// preload images of the slide show
		this.imList.each(function( im, idx ){
			this.imPreload[idx] = new Image();
			this.imPreload[idx].src = im.image;
			if( idx == 0){
				this.imPreload[0].onload = this.handleInitialStart;
			}
		}, this);
		
		//this.updateScreen();
		//this.startSlideShow();
	},
	hInitialStart : function(){
		this.elScreen.setOpacity( 0 );
		this.updateScreen();
		this.startSlideShow();
	},
	hPlayPause : function(){
		if( this.state == 'pause' ) {
			this.restartSlideShow();
			this.state = 'play';
			this.elPause.toggleClassName('play');
			this.elPause.toggleClassName('pause');
		} else {
			this.stopSlideShow();
			this.state = 'pause';
			this.elPause.toggleClassName('pause');
			this.elPause.toggleClassName('play');
		}
	},
	hPause : function(){
		if( this.state == 'play' ) {
			this.stopSlideShow();
			this.state = 'pause';
			this.elPause.toggleClassName('pause');
			this.elPause.toggleClassName('play');
		}
	},
	hSlideShowNext:function(){
		if( this.currentIm  ==  (this.nbrIms-1) ) {
			this.stopSlideShow();
			this.hRewind();
			this.startSlideShow();
		}else{
			this.displayImg( this.currentIm+1 );
		}
	},
	hNext : function(){
		
		this.hPause();
		
		if( this.currentIm ==  (this.nbrIms-1) ) {
			this.hRewind();
		}else 	if( this.currentIm <  (this.nbrIms) ) {
				this.displayImg( this.currentIm+1 );
		}
				
	},
	hPrevious : function(){
		
		this.hPause();
		
		if( this.currentIm >  0 ) {
			this.displayImg( this.currentIm-1 );
		}
	},
	hSliderClicked : function( ev ){
		
		var trg = $( ev.target );
		if( trg.tagName == 'IMG'){
			trg = trg.up('div');
		}
		
		
		if( trg.hasClassName('vignette') ){
			
			var reRet = /vignette_(\d+)/( trg.identify() );
			var newIm = parseInt(reRet[1]);
			//alert('vignette ' + trg.identify() + ' clicked '+ parseInt(reRet[1]));
			if( this.currentIm != newIm ){
				this.hPause();
				this.displayImg( parseInt(reRet[1]) ); 
			}
		}
	},
	hSliderOver : function( ev ){
		var trg = $( ev.target );
		if( trg.tagName == 'IMG'){
			trg = trg.up('div');
		}
		
		if( trg.hasClassName('vignette') ){
			//var reRet = /vignette_(\d+)/( trg.identify() );
			var reg = new RegExp('vignette_(\\d+)');
			var reRet = reg.exec( trg.identify() );
			var newIm = parseInt(reRet[1]);
			if( this.currentIm != newIm ){
				trg.setOpacity( 1 );
			}
		}
		
	},
	hSliderOut : function( ev ){
		var trg = $( ev.target );
		if( trg.tagName == 'IMG'){
			trg = trg.up('div');
		}	
		if( trg.hasClassName('vignette') ){
			//var reRet = /vignette_(\d+)/( trg.identify() );
			var reg = new RegExp('vignette_(\\d+)');
			var reRet = reg.exec( trg.identify() );
			var newIm = parseInt(reRet[1]);
			if( this.currentIm != newIm ){
				trg.setOpacity( 0.2 );
			}
		}
	},
	hRewind : function(){
		
		$$('.vignette').invoke('setStyle', {opacity: 0.2});
		
		$('vignette_'+this.firstVignette ).toggleClassName('firstVignette');
		$('vignette_'+this.lastVignette ).toggleClassName('lastVignette');
		
		this.currentIm = 0;
		this.firstVignette = 0;
		this.lastVignette = 4;
		
		$('vignette_'+this.firstVignette ).toggleClassName('firstVignette');
		$('vignette_'+this.lastVignette ).toggleClassName('lastVignette');
		
			
		//setTimeout( this.handleRewind2, (this.nbrIms-5)*5 );
		
		for( var i = (this.nbrIms-1); i > 4; i-- ){
			$('vignette_' + i).setStyle( {left : '672px'}  );
			//new Effect.Move($('vignette_' + i), { x: 672, mode:'absolute', duration:0.05, delay : ((this.nbrIms-i)*0.01) });
		}
		this.hRewind2();
		
		
	},
	hRewind2 : function(){
		
		for(var i = 4; i >= 0; i-- ){
			var newx = (i+1)*112;
			new Effect.Move($('vignette_' + i), { x: newx, mode:'absolute', duration:0.1, delay : ((4-i)*0.05) });
		}
		
		this.displayImg( this.currentIm );
	},
	updateScreen : function(){
		var im  = this.imList[this.currentIm];
		this.elCounter.update( (this.currentIm +1) + ' / ' + this.nbrIms );
		this.elScreen.update( '<img alt="" src="' +im.image+ '" border="0" />'  );
		new Effect.Opacity(this.elScreen, { duration:0.5, from :0.0, to : 1.0}  );
		if( this.elDescription ){
			
			if(im.description ){
				this.elDescription.update( im.description.gsub(/\n|\r/, '<br />') );
			}else{
				this.elDescription.update( '' );
			}
			//.gsub(/\n/, '<br />')
		}
		
		
	},
	displayImg : function( num ){
		this.sliderUnselectCurrentImage();
		
		this.currentIm = num;
		new Effect.Opacity(this.elScreen, { duration:0.5, from :1.0, to : 0.0, afterFinish : this.handleUpdateScreen }  );
		this.sliderSelectCurrentImage();
	},
	fillVignetteSlider : function(){
		var html = "";
		
		for( var x = this.firstVignette; x <= this.lastVignette; x++){
			html += '<div id="vignette_'+x+'" class="vignette" style=" width:96px; height:64px; text-align:center; position:absolute; left:'+((x+1)*112)+'px;" ><img alt="" src="' + this.imList[x].thumb + '"/></div>';
		}
		for( var x = (this.lastVignette+1); x < this.nbrIms; x++){
			html += '<div id="vignette_'+x+'" class="vignette" style=" width:96px; height:64px; text-align:center; position:absolute; left:672px;" ><img alt="" src="' + this.imList[x].thumb + '"/></div>';
		}		
		this.elVignetteSlider.update(html);
		
		$('vignette_'+this.firstVignette ).toggleClassName('firstVignette');
		$('vignette_'+this.lastVignette ).toggleClassName('lastVignette');
		
		$$('.vignette').invoke('setStyle', {opacity: 0.2});
		
		this.sliderSelectCurrentImage();
		
	},
	sliderSelectCurrentImage : function(){
		//$( 'vignette_'+this.currentIm ).setOpacity( 1 );
		new Effect.Opacity( $( 'vignette_'+this.currentIm ), {  duration:0.3, from:0.2, to:1 }  );
		if( $( 'vignette_'+this.currentIm ).hasClassName('firstVignette') &&  this.currentIm > 0){
			this.sliderMoveRight();
		}
		if( $( 'vignette_'+this.currentIm ).hasClassName('lastVignette') &&  (this.currentIm < (this.nbrIms-1))  ){
			this.sliderMoveLeft();
		}
	},
	sliderUnselectCurrentImage : function(){
		new Effect.Opacity( $( 'vignette_'+this.currentIm ), {  duration:0.3, from:1, to:0.2 }  );
		//$( 'vignette_'+this.currentIm ).setOpacity( 0.5 );
	},
	sliderMoveLeft : function(){
		$('vignette_'+this.firstVignette ).toggleClassName('firstVignette');
		$('vignette_'+this.lastVignette ).toggleClassName('lastVignette');
		for( var x=this.firstVignette; x <= this.lastVignette+1; x++){
			new Effect.Move($('vignette_' + x), { x: -112, mode:'relative', duration:0.5, delay : ((x-this.firstVignette)*0.05) });
		}
		this.firstVignette++; 
		this.lastVignette++;

		$('vignette_'+this.firstVignette ).toggleClassName('firstVignette');
		$('vignette_'+this.lastVignette ).toggleClassName('lastVignette');
	},
	sliderMoveRight : function(){
		$('vignette_'+this.firstVignette ).toggleClassName('firstVignette');
		$('vignette_'+this.lastVignette ).toggleClassName('lastVignette');
		for( var x=this.firstVignette-1; x <= this.lastVignette; x++){
			new Effect.Move($('vignette_' + x), { x: +112, mode:'relative', duration:0.5, delay : ((x-this.firstVignette)*0.05) });
		}
		this.firstVignette--; 
		this.lastVignette--;
		$('vignette_'+this.firstVignette ).toggleClassName('firstVignette');
		$('vignette_'+this.lastVignette ).toggleClassName('lastVignette');
	}
	
});

/*********************************************
*
*
*/
var HTMLRandomSwitcher = Class.create({
	initialize:function( classSelector, url ){
			//alert('create HTMLRandomSwitcher');
			this.url = url;
			this.selector = classSelector;
			this.newHTML = "";
			//this.el = null;
			//this.hideHandler = this.hide.bind(this);
			this.showHandler = this.reshow.bind(this);
	}, // initialize
	replaceBy:function( newHTML ) {

			//alert('Call HTMLRandomSwitcher::switch');

			this.newHTML = newHTML;

			var els = $A($$( this.selector ));
			var elsl = els.size();
			this.el = els[rand( elsl )];

			new Effect.Opacity( this.el, { duration:0.5, from: 1.0, to: 0.0, afterFinish: this.showHandler  });

	}, // replaceBy
	reshow:function(){
			this.el.innerHTML = this.newHTML;
			
			new Effect.Opacity( this.el, { delay: 0.3 , duration: 0.5, from: 0.0, to: 1.0 });
		}
});
/*********************************************
*
*
*/
var ImageWallSwitcher = Class.create({
	initialize : function( url ){
		this.url = url;
		this.imList = [];
		this.nbrIms = 0;
		this.imAlreadyDisplayed = [];
		this.handleReceiveImList = this.hReceiveImList.bind( this );
		this.handleSwitchImage = this.switchImage.bind(this);
		this.handleFadeIn = this.fadeIn.bind(this);
		this.switchable = $A($$('.switchable'));
		this.switchableNbr = this.switchable.size();
		this.alreadySwitched = [];
	},
	start : function(){
		this.loadImList();
	},
	loadImList:function(){
		new Ajax.Request( this.url, { method: 'get', onSuccess : this.handleReceiveImList });
	},
	hReceiveImList : function( resp ){
		this.imList = resp.responseText.evalJSON();
		this.nbrIms = this.imList.size();
		setTimeout( this.handleSwitchImage, 1500 );
	},
	switchImage : function(){
		var imIdx = rand(this.nbrIms)-1;
		var holderIdx = rand(this.switchableNbr)-1;
		var im = this.imList[imIdx];
		this.currentIm = im;
		this.holder = this.switchable[holderIdx];
		var anchor = this.holder.down('a');
		var img = anchor.down('img');
		//anchor.href = im.href;
		//img.src = im.thumb;
		//new Effect.Opacity( holder, { duration: 1.0, from: 1.0, to: 0.0, xafterFinish : this.handleFadeIn( im, holder )} );
		new Effect.Opacity( this.holder, { duration: 1.0, from: 1.0, to: 0.0, beforeStart: function(){}, afterFinish: this.handleFadeIn } );
		//setTimeout( this.handleSwitchImage, 2000 );
		
	},
	nextImage : function(){
		
	},
	nextHolder : function(){
		
	},
	fadeIn : function( ){

		var anchor = this.holder.down('a');
		var img = anchor.down('img');
		anchor.href = this.currentIm.href;
		img.src = this.currentIm.thumb;
		//alert('done !');
		new Effect.Opacity( this.holder, { duration: 1.0, from: 0.0, to: 1.0} );
		setTimeout( this.handleSwitchImage, 2000 );
	}

});
/*********************************************
*
*
*/
var LeazyHigligth = Class.create({
  initialize: function(element) {
	var links = $$('.leazyHighlight');
	$A(links).each( function(el){
		
		el.onmouseover = function(){
			elId = this.identify();
			
			this.morph('color: #8C8772;', { duration: 0.05 });
			
		};
		
		el.onmouseout = function(){
			
			this.morph('color: #D9D1B0;', { duration: 0.2, delay: 0.1 });

		};
		
	});	
  } // initialize	

});

/*********************************************
*
*
*/
document.observe('dom:loaded', function() {
  new  LeazyHigligth();
});



/*********************************************
*
*
*/
function rand ( n )
{
  return ( Math.floor ( Math.random ( ) * n + 1 ) );
}