/*
*Site.js - Simple script by Jérémy Marchand (aka Chozo-MJ)
*
*/

/*************************************************************************************************
link animation - color morphing
**************************************************************************************************
*/
function initLink(){
 	$$('a').each(function(e) {					//for all links save css color for normal state:
		e.color=e.getStyle('color'); 			
		e.effect=new Effect.Morph(e,{});		//init morphing effect (empty)
		
		//ajout de l'événement lien survolé
		e.observe('mouseover', function(event) {
			if (!e.inColor) e.inColor=e.getStyle('color');	//save hover color
			e.setStyle({'color':e.color});					//set color to normal state

			e.effect=	new Effect.Morph(e,{				//begin morphing to hover color
					style:{'color':e.inColor},
					beforeStart: function(r) {
						e.effect.cancel();					//stop other morphing
					},
					duration:0.5,
				});
			});
	 	//ajout de l'événement de sortie du lien
		e.observe('mouseout', function(event) {
			e.effect=	new Effect.Morph(e,{	// back to normal state with animation
					style:{'color':e.color},
					beforeStart: function(r) {
						e.effect.cancel();		//stop other morphing
					},
					duration:0.5,
				});
			},false);
	});
}

/*************************************************************************************************
init menu effect:
**************************************************************************************************/
function initMenu(){
	var title=$('title');
	//set animation for link
 	$$('#navigation a').each(function(e) {	
 	
 		//only set animation for non-selected link 
 		if (!e.hasClassName('current')){
 			e.setOpacity(0);

			//hover animation
			e.observe('mouseover', function(event) {
				//fade in
				e.setOpacity(0);
				e.appear({duration:0.5});
			
				//udpate title
				title.update('> '+e.readAttribute('title'));
			});	

		}
	});
	
	//show page title when mouse is over menu area
	title.effect=Effect.Fade(title);
	var menu=$('navigation');
	menu.observe('mouseover', function(event) {
			title.effect.cancel();
			title.effect=Effect.Appear(title,{duration:0.5});	
	});
	menu.observe('mouseout', function(event) {
			title.effect.cancel();
			title.effect=Effect.Fade(title);
	});
	
}

/*************************************************************************************************
Gallery  :
**************************************************************************************************
creations
*/
function creations(){		//fade animation when a creations page appears
	//fade in du bloc,
	$$('#creations .creation').each(function(e) {new Effect.Opacity(e, {from: 0.0, to: 1, duration: 1});});
			 								prepZooms();

}

/*
Ajax pagination
*/
function queryPage(event) {
	var element = Event.element(event);		
	Event.stop(event);					//unactive link
	
	new Ajax.Updater('ajax',element.readAttribute('href')+'/js:1',	//add js flag on the link
																	//(server will send page without layout)
	 							{asynchronous:true, 
	 							evalScripts:true, 
	 							onComplete:
	 								function(request, json) {
		 						
		 								//set new height for content with animation
		 								newHeight=main.getHeight();					//new height for content
		 								main.setStyle({'height': oldHeight+'px'}); 	//set to previous height
		 								main.morph('height:'+newHeight+'px');		//finally create a morphing to new the height
		 								
		 								Effect.ScrollTo.defer('navigation');
		 								
	 								}, 
	 							onLoading:
	 								function(request) {
	 									oldHeight=main.getHeight(); 				//save height before new page appear
	 									main.setAttribute('style', ''); 			//delete previous setted style
	 									}, 
	 							requestHeaders:['X-Update', 'ajax']
	 							})
	}

/*init js gallery*/
function gallery(){
	main=$('main');	
	$$('#pagination a').each(function(e) {e.observe('click', queryPage)},false);	//pour chaque lien de pagination on initialise une requète ajax
	creations();
}

/*************************************************************************************************
slide show
**************************************************************************************************/
function startSlideshow(delay) {
	var i=0;
	//get all creations, and keep only the first creation on screen
	table=new Array();
	$$('#creations .creation').each(
		function(e) {
					i++; 
				    table[i]=e;  
					if(i!=1)
						e.hide();	
		}
	);
	$('main').setStyle({'height': '540px'}); //set height for the slideshow view

   switchSlides.delay(delay,1,1,i, delay); //change the creation on screen periodically
}
                                                
function switchSlides(frame, start_frame, end_frame, delay) {
   Effect.Fade(table[frame]);
   if (frame == end_frame) { frame = start_frame; } else { frame = frame + 1; }
   Effect.Appear.delay(0.850,table[frame]);
   switchSlides.delay(delay+0.850,frame, start_frame, end_frame, delay) ;
 
}



/*************************************************************************************************
Startup
**************************************************************************************************/
Event.observe(window, 'load', function() {
  initLink(); //init effects for link
  initMenu(); //init effects for menu
  setupZoom(); //init fanzy zoom
});