function changeImage(config, position){
	
	if ($('#'+config["idBlock"]).attr('name') >= 0){
		var oldPosition = $('#'+config["idBlock"]).attr('name');
	} else {
		var oldPosition = 0;
	}
	$('#'+config["idBlock"]).css('background-image', 'url('+config["directory"]+'/'+config["allImg"][position]+')');
	$('#'+config["idBlock"]).html('<div class="effect"><img src="'+config["directory"]+'/'+config["allImg"][oldPosition]+'"></div>');
	
	var idBlockWidth = $('#'+config["idBlock"]).width();
	var idBlockHeight = $('#'+config["idBlock"]).height();
	
	
	
	// APPLYING EFFECTS
	switch(config["effect"][0]){
		case "slide":
			if (config["effect"][2]){
				var speed = config["effect"][2];
			} else {
				var speed = 'slow';
			}
			
			if (!config["effect"][1] || config["effect"][1] == "left"){
				$('#'+config["idBlock"]+' .effect').animate({"marginLeft": "-="+idBlockWidth+""}, speed);
			} else if (config["effect"][1] == "right"){
				$('#'+config["idBlock"]+' .effect').animate({"marginLeft": "+="+idBlockWidth+""}, speed);
			} else if (config["effect"][1] == "down") {
				$('#'+config["idBlock"]+' .effect').animate({"marginTop": "+="+idBlockHeight+""}, speed);
			} else if (config["effect"][1] == "up") {
				$('#'+config["idBlock"]+' .effect').animate({"marginTop": "-="+idBlockHeight+""}, speed);
			}
			
			break;
			
		case "fade":
			if (config["effect"][1]){
				var speed = config["effect"][1];
			} else {
				var speed = 'slow';
			}
			if (config["effect"][2]){
				var easing = config["effect"][2];
			} else {
				var easing = 'linear';
			}
				$('#'+config["idBlock"]+' .effect').fadeOut(speed, easing);
		
			break;
			
		case "stretch":
			if (config["effect"][1]){
				var multiple = config["effect"][1];
			} else {
				var multiple = 4;
			}
			if (config["effect"][2]){
				var speed = config["effect"][2];
			} else {
				var speed = 'slow';
			}
			
			var marginLeft = ((idBlockWidth*multiple)-idBlockWidth)/2;
			var marginTop =  ((idBlockHeight*multiple)-idBlockHeight)/2;
			
			$('#'+config["idBlock"]+' .effect img').animate({
				
				marginLeft:"-="+marginLeft,
				marginTop:"-="+marginTop,
				
				width:idBlockWidth*multiple,
				height:idBlockHeight*multiple,
				
				opacity: "toggle",
			  }, speed);

		
			break;
			
		case "shrink":
			if (config["effect"][2]){
				var speed = config["effect"][2];
			} else {
				var speed = 'slow';
			}
			if (config["effect"][1]){
				var shrink = config["effect"][1];
			} else {
				var shrink = 'in';
			}
			
			var multiple = 1.2;
			
			var marginLeft = ((idBlockWidth*multiple)-idBlockWidth)/2;
			var marginTop =  ((idBlockHeight*multiple)-idBlockHeight)/2;
						
			$('#'+config["idBlock"]+' .effect img').animate({
				
				marginLeft:"-="+marginLeft,
				marginTop:"-="+marginTop,
				
				width:idBlockWidth*multiple,
				height:idBlockHeight*multiple
				
			}, speed, function(){
				
				var widthBlock = $('#'+config["idBlock"]+' .effect').width();
				var heightBlock = $('#'+config["idBlock"]+' .effect').height();
				
				var newMarginLeft = (widthBlock/2)+marginLeft;
				var newMarginTop = (heightBlock/2)+marginTop;
				if (shrink == 'in'){
					$('#'+config["idBlock"]+' .effect img').animate({
						marginLeft:"+="+newMarginLeft,
						marginTop:"+="+newMarginTop,
						
						height:"0px",
						width:"0px",
					});
				} else {
					$('#'+config["idBlock"]+' .effect img').animate({
						marginLeft:"-="+newMarginLeft,
						marginTop:"-="+newMarginTop,
						
						height:"0px",
						width:"0px",
					});
				}
			});

		
			break;
			
		case "wipe":
			if (config["effect"][2]){
				var speed = config["effect"][2];
			} else {
				var speed = 'slow';
			}
			
			if (!config["effect"][1] || config["effect"][1] == "left"){
				
				$('#'+config["idBlock"]+' .effect').animate({
					"width": "-="+idBlockWidth+"",
					"marginLeft": "+="+idBlockWidth+""
				}, speed);
				$('#'+config["idBlock"]+' .effect img').animate({"marginLeft": "-="+idBlockWidth+""}, speed);
				
			} else if (config["effect"][1] == "right"){
				
				$('#'+config["idBlock"]+' .effect').animate({
					"width": "-="+idBlockWidth+"",
					"marginLeft": "-="+idBlockWidth+""
				}, speed);
				$('#'+config["idBlock"]+' .effect img').animate({"marginLeft": "+="+idBlockWidth+""}, speed);
				
			} else if (config["effect"][1] == "up") {
				
				$('#'+config["idBlock"]+' .effect').animate({
					"height": "-="+idBlockHeight+"",
					"marginTop": "-="+idBlockHeight+""
				}, speed);
				$('#'+config["idBlock"]+' .effect img').animate({"marginTop": "+="+idBlockHeight+""}, speed);
				
			} else if (config["effect"][1] == "down") {
				
				$('#'+config["idBlock"]+' .effect').animate({
					"height": "+="+idBlockHeight+"",
					"marginTop": "+="+idBlockHeight+""
				}, speed);
				$('#'+config["idBlock"]+' .effect img').animate({"marginTop": "-="+idBlockHeight+""}, speed);
				
			} else if (config["effect"][1] == "center") {
				
				$('#'+config["idBlock"]+' .effect').animate({"width": "-="+idBlockWidth+""}, speed);
				$('#'+config["idBlock"]+' .effect img').animate({"marginLeft": "+="+idBlockWidth+""}, speed);		
						
			}
			
			break;
	}
	
	$('#'+config["idBlock"]).attr('name', position);

}


/*----------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------*/

function ImageSlide() {
	
	/**
	 * HOWTO USE THIS CLASS :
	 * 
	 * 1- Ensure to link this script in your HTML page
	 * 
	 * 2- Create a div dedicated to your slider, with a specific id
	 * 		(called 'your_container' in the following of this HOWTO)
	 * 
	 * 3- Inside #your_container, create a new div with the class 'slider'
	 * 
	 * 4- Inside .slider, create as much div with the class 'slide' as needed
	 * 		(remember all slides will have the same dimensions)
	 * 
	 * 5- In your HTML page, construct a ImageSlide typed object, with :
	 * 		your_slider = new ImageSlide();
	 * 		(the object will be called 'your_slider' in the following of this HOWTO)
	 * 
	 * 6- Configure it with it dedicated function :
	 * 		your_slider.config(<your parameters>);
	 * 		(see l.83 for further information)
	 * 
	 * 7- If needed, bind the next and previous functions to javascript events :
	 * 		onclick="your_slider.next()";
	 * 
	 * 8- Your slider is ready !
	 **/
	
	var container;
	var speed;
	var autoTimer;
	var autoSpeed;
	var busy;
	
	/**
	 * Private function - Must not be called by the user
	 * Setter : this.container
	 * @param container Slider container
	 **/
	this.setContainer = function(container) {
		this.container = container;
	}
	
	/**
	 * Private function - Must not be called by the user
	 * Setter : this.speed
	 * @param speed Switching animation duration (ms)
	 **/
	this.setSpeed = function(s) {
		this.speed = s;
	}
	
	/**
	 * Private function - Must not be called by the user
	 * Setter : this.autoSpeed
	 * @param autoSpeed Automatic mode switching delay (ms)
	 **/
	this.setAutoSpeed = function(s) {
		this.autoSpeed = s;
	}
	
	/**
	 * Private function - Must not be called by the user
	 * Setter : this.busy
	 * @param busy True during a switching animation, False otherwise
	 **/
	this.setBusy = function(b) {
		this.busy = b;
	}
	
	/**
	 * Private function - Must not be called by the user
	 * Sets slides width
	 * @param container width Slides width
	 **/
	this.setImgWidth = function(w) {
		$("#" + this.container + " .slide").each(function() {
			$(this).css('width', w);
		});
	}
	
	/**
	 * Config fonction - Needed to be call by the user at first
	 * @param imgWidth Slides width - Necessary parameter
	 * @param container Slider container's #id (html one) - Necessary parameter
	 * @param imgNumber Number of slides to display at once - Necessary parameter
	 * @param speed Switching animatimation duration (ms) - Unnecessary parameter
	 * @param autoSpeed Automatic mode switching delay (ms) - Unnecessary parameter
	 **/
	this.config = function(imgWidth, container, imgNumber, speed, autoSpeed) {
			    		
		/** Init **/
		this.setContainer(container);
		if(speed == undefined) {
			this.setSpeed(500);
		} else {
			this.setSpeed(speed);
		}
		if(autoSpeed == undefined) {
			this.setAutoSpeed(0);
		} else {
			this.setAutoSpeed(autoSpeed);
		}
		this.setBusy(false);
		this.setImgWidth(imgWidth);
		
		/** CSS Config **/
		var totalNumber = $("#" + this.container + " .slider .slide").length;
		var firstImg = $("#" + this.container + " .slider .slide:first");
		var lastImg = $("#" + this.container + " .slider .slide:last");
		var thisAlias = this;
		$("#" + this.container).css('width', imgNumber * imgWidth);
		$("#" + this.container + " .slider").css({'width' : totalNumber * imgWidth});
		$("#" + this.container + " .slider .slide").css('width', imgWidth);
		$("#" + this.container + " .slider .slide").css('float', 'left');
		$("#" + this.container + " .slider .slide").css('overflow', 'hidden');
		$("#" + this.container).css('overflow', 'hidden');
		$("#" + this.container + " .slider .slide").css({'marginLeft' : 0});
		firstImg.before(lastImg);
		$("#" + this.container + " .slider").css({'marginLeft' : -parseInt(imgWidth)});
				
		
		/** Automatic mode, if needed **/
		if(this.autoSpeed != 0) {
			var thisAlias = this;
			
			this.autoTimer = setTimeout(function() {
				thisAlias.autoSlide();
			}, this.autoSpeed);
		}
	}
	
	/**
	 * Next fonction - Should be called by the user
	 * Can be called with an 'onclick' event to display the next slide
	 **/
	this.next = function() {
		this.setAutoSpeed(0);
		this.displayNext();
	}
	
	/**
	 * Previous fonction - Should be called by the user
	 * Can be called with an 'onclick' event to display the previous slide
	 **/
	this.previous = function() {
		this.setAutoSpeed(0);
		this.displayPrevious();
	}
	
	/**
	 * Private function - Must not be called by the user
	 * Next slide displaying animation
	 **/
	this.displayNext = function() {
		if(!this.busy) {
			this.setBusy(true);
			
			var imgWidth = $("#" + this.container + " .slider .slide").css('width');
			var firstImg = $("#" + this.container + " .slider .slide:first");
			var lastImg = $("#" + this.container + " .slider .slide:last");
			var thisAlias = this;
			
			$("#" + this.container + " .slider").animate({
				'marginLeft' : -2.0 * parseInt(imgWidth)
			}, this.speed, function() {
				lastImg.after(firstImg);
				$(this).css({'marginLeft' : -parseInt(imgWidth)});
				thisAlias.setBusy(false);
			});
		}
	}
	
	/**
	 * Private function - Must not be called by the user
	 * Previous slide displaying animation
	 **/
	this.displayPrevious = function() {
		if(!this.busy) {
			this.setBusy(true);
			
			var imgWidth = $("#" + this.container + " .slider .slide").css('width');
			var firstImg = $("#" + this.container + " .slider .slide:first");
			var lastImg = $("#" + this.container + " .slider .slide:last");
			var thisAlias = this;
			
			$("#" + this.container + " .slider").animate({
				'marginLeft' : 0
			}, this.speed, function() {
				firstImg.before(lastImg);
				$(this).css({'marginLeft' : -parseInt(imgWidth)});
				slider_busy = false;
				thisAlias.setBusy(false);
			});
		}
	}
	
	/**
	 * Private function - Must not be called by the user
	 * Automatic mode management
	 **/
	this.autoSlide = function() {
		if(this.autoSpeed != 0) {
			var thisAlias = this;
			
			clearTimeout(this.autoTimer);
			this.displayNext();
			this.autoTimer = setTimeout(function() {
				thisAlias.autoSlide();
			}, this.autoSpeed);
		}
	}
}