window.addEvent('domready', function(){
  initialize();
});



// initialize
var initialize = function() {

	/*
	 *  GLOBALS VARIABLES & OBJECTS
	*/
	images = imageList.split(',');
	images.pop(); // supprime la derniere (donnŽe vide)
	// images = shuffle(images);
	images.sort();
	images.reverse();
	
	/*images = Array(
		'boule.jpg', 
		'dragon_fly_ososphere.jpg',
		'agencement-mural_7.jpg'
	);
	*/
	
	var gallery = $('gallery');
	var next = $('next');
	var previous = $('previous');
				
	var w = 700;
	var h = 590;
	
	gallery.style.width = w*(images.length+1) + 'px';
	index = 0;
	
	var scroll = new Fx.Scroll($('gallery-wraper'), {
		wait: false,
		duration: 500,
		offset: {'x': 0, 'y': 0},
		transition: Fx.Transitions.Quad.easeInOut
	});

	
	/*
	 *  CONTACT FORM
	*/
	var slide_contact = new Fx.Slide('contact');
	slide_contact.hide();

	response = $('contact_response');
	var slide_response = new Fx.Slide(response);
	slide_response.hide();
	
	var slide_gallery = new Fx.Slide('gallery-wraper');
	
	show = function(href){
		href = href.split('#').pop();
		switch(href){
			case 'contact':
				slide_contact.toggle();
			break;
			case 'a_propos':
				slide_gallery.toggle();
			break;								
		}
	}
	
	$('contactform').addEvent('submit', function(e) {
		
		// Prevent the submit event
		new Event(e).stop();
		
		// clear response content
		response.empty().addClass('loading');			
		
		// send form
		$('contactform').send({
			update: response,
			onComplete: function() {
				response.removeClass('loading');
				slide_contact.slideOut();
				slide_response.slideIn();		
			}
		});

	});
	
	clearContactResponse = function(){
		slide_response.slideOut();
	}
	
	
	
	
	/*
	 *  EVENTS BUTTONS
	*/
	next.addEvent('click', function(e) {
		// prevent default
		new Event(e).stop(); 
		// scroll right
		index++;
		if (index > images.length-1) index=0;
		scroll.scrollTo(w*index,0);
		
		updateCounter(index);
		
	});	
	
	previous.addEvent('click', function(e) {
		// prevent default
		new Event(e).stop(); 
		// scroll left			
		index--;
		if (index < 0) index=images.length-1;		
		scroll.scrollTo(w*index,0);
		
		updateCounter(index);

		
	});		

	
		
	/*
	 *  GALLERY
	*/
	for (i=0; i<images.length; i++){
			
		var imgContainer = document.createElement('DIV');
		imgContainer.className = "img loading";
		imgContainer.id = "imgContainer"+i;
	
		
		var newImg = document.createElement('IMG');
		newImg.className = 'image';
		newImg.id = 'img_'+i;
		newImg.style.display = 'none';
	

		imgContainer.appendChild(newImg);
		gallery.appendChild(imgContainer);
	}
	
	loadImage(0);
	updateCounter(0);	

};


updateCounter = function(index){
	$('num_page').innerHTML = "image "+ (index+1) + "/" + (images.length);
}

loadImage = function(i){
	
	if (i < images.length) {
	
		var newImg = $('img_'+i);	
		var src = images[i];
		var folder = '';
	
			
		newImg.src = folder+ src; 
			
		newImg.onload = function(){
			$(this.id).style.display='';
			
			var id = this.id.split('img_').pop();
			$('imgContainer'+id).className = 'img';
			loadImage(parseInt(id)+1);
			

		}
	}

}


shuffle = function(o){ //v1.0
	for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
	return o;
};



// our ajax istance 
/*
var ajax = new Ajax(url, { 
	update: log,
	method: 'get',
	onComplete: function() {
		// when complete, we remove the spinner
		log.removeClass('ajax-loading'); 
	},
	onCancel: function() {
		// when we stop timed ajax while it's requesting
		// we forse to cancel the request, so here we
		// just remove the spinner
		log.removeClass('ajax-loading'); 
	}
});
*/