function createSlider(sliderName, slidesContainer, transition, animVel, width, buttons, effect)
{

  var currentPosition 	= 0;
  var slideWidth 		= width;
  var slides 			= jQuery(sliderName + ' .slide');
  var numberOfSlides 	= slides.length;
  
  var timeTransition 	= (transition * 1000);
  var interval;
  var intervalAux;
  var showButtons		= buttons;
  var transitionEffect	= effect;
  var animationVel		= animVel * 1000;
  
  var firstAnimate		= true;
  
  /*jQuery("#slidebg").animate({
	    opacity: 0
	  }, 1 );
  
  jQuery("#slidebg-2").animate({
	    opacity: 0
	  }, 1 );
  
  jQuery("#slidebg-3").animate({
	    opacity: 0
	  }, 1 );
  
  jQuery("#slidebg-4").animate({
	    opacity: 0
	  }, 1 );*/
	  
	if(firstAnimate)
	{
		firstAnimate = false;
		imgOnLoad();
	}
  
  if( transitionEffect == "opacity")
  {
	  slides.css("position","absolute");
  }
  
  function createInterval()
  {
	interval = setInterval(transitionHandler, timeTransition);
	
	if(firstAnimate)
	{
		firstAnimate = false;
		imgOnLoad();
	}
	  //transitionHandler()
	  //animateItemSlider(0);
	transitionHandler();
  }
  
  function stopInterval()
  {
	clearInterval(interval);
  }
  
  function transitionHandler()
  {
	
	currentPosition += 1;
    
	if(currentPosition >= numberOfSlides)
	{
		currentPosition = 0;
	}
	
	if(currentPosition < 0)
	{
		currentPosition = numberOfSlides - 1;
	}
	
    manageControls(currentPosition);
    
    effectTransition();
  }
  
	
  
  function effectTransition()
  {
	  if( transitionEffect == "opacity")
		{
	    	var i = 0;
	        for(i; i <numberOfSlides; i++)
	    	{
	        	if(i != currentPosition)
	    		{	        		
	        		jQuery(sliderName + ' .num_' + i).fadeOut(animationVel);
	        		
	    		}else
	    		{
	    			jQuery(sliderName + ' .num_' + i).fadeIn(animationVel);
	    			
	    			
	    			
	    			animateItemSlider(currentPosition);
	    		}
	    	}
		}else
		{
			jQuery(sliderName + ' .slideInner').animate({
		      'marginLeft' : slideWidth*(-currentPosition)
		    },animationVel, function() {
		        // Animation complete.
		    	//animateItemSlider(currentPosition);
		    });
		}
	  
	 
  }

  // Remove scrollbar in JS
  jQuery(sliderName + ' ' + slidesContainer).css('overflow', 'hidden');

  // Wrap all .slides with .slideInner div
  slides
    .wrapAll('<div class="slideInner"></div>')
    // Float left to display horizontally, readjust .slides width
	.css({
      'float' : 'left',
      'width' : slideWidth
    });

  // Set .slideInner width equal to total width of all slides
  jQuery(sliderName + ' .slideInner').css('width', slideWidth * numberOfSlides);

  
  // Insert controls in the DOM
  if(buttons)
  {
	  jQuery(sliderName)
	    .prepend('<span class="control leftControl" >Clicking moves left</span>')
	    .append('<span class="control rightControl" >Clicking moves right</span>');
  }
  

  // Hide left arrow control on first load
  manageControls(currentPosition);

  // Create event listeners for .controls clicks
  jQuery(sliderName + ' .control')
    .bind('click', function(){
	
	stopInterval();
	clearInterval(intervalAux);
	intervalAux = setInterval(transitionHandlerAux, 2000);
  
    // Determine new position
	currentPosition = (jQuery(this).hasClass('rightControl')) ? currentPosition+1 : currentPosition-1;
    
	if(currentPosition >= numberOfSlides)
	{
		currentPosition = 0;
	}
	
	if(currentPosition < 0)
	{
		currentPosition = numberOfSlides - 1;
	}
	
    manageControls(currentPosition);
    
    
    
    effectTransition();
    
  });
  
  function transitionHandlerAux()
  {
	clearInterval(intervalAux);
	createInterval();
  }

  // manageControls: Hides and Shows controls depending on currentPosition
  function manageControls(position)
  {
	//alert(position);
    // Hide left arrow if position is first slide
	if(position==0)
	{ 
		//jQuery('#leftControl').hide();
	} else
	{ 
		jQuery(sliderName + ' #leftControl').show();
	}
	// Hide right arrow if position is last slide
    if(position==numberOfSlides-1)
	{ 
		//jQuery('#rightControl').hide();
	} else
	{ 
		jQuery(sliderName + ' #rightControl').show();
	}
  }	
  
  
  createInterval();
  
  }


function animateItemSlider(numItemActive)
{
	resetItemSlider();
	   switch(numItemActive)
	   {
		   case 0:
			   jQuery("#slidebg").animate({
				    opacity: 1
				  }, 1 );
			  
			   jQuery("#slide1").animate({
				      opacity: 1,
				    left:-50,
				    top:1
				    }, 1500 );
				    
				    jQuery("#imagen1").animate({
				      opacity:1,
				    width:485,
				    height:465
				    }, 1 );
				    
				     jQuery("#slide2").animate({
				      opacity:1
				    }, 2500 );
				    
				       jQuery("#slide3").animate({
				      opacity:1,
				    left:430
				    }, 2500 );
				    
				      jQuery("#slide4").animate({
				      opacity:1,
				    top:220
				    }, 3000 );
		   break;
		   case 1:
			   
			  jQuery("#slidebg-2").animate({
				    opacity: 1
				  }, 1 );
			  
			   jQuery("#slide1-2").animate({
				      opacity: 1,
				    left:2,
				    top:33
				    }, 1500 );
				    
				     jQuery("#imagen2").animate({
				      opacity:1,
				    width:275,
				    height:409
				    }, 1500 );
				   
				    
				     jQuery("#slide2-2").animate({
				      opacity:1
				    }, 2500 );
				    
				       jQuery("#slide3-2").animate({
				      opacity:1,
				    left:370
				    }, 2500 );
				    
				      jQuery("#slide4-2").animate({
				      opacity:1,
				    top:250
				    }, 3000 );
		   break;
		   case 2:

			  jQuery("#slidebg-3").animate({
				    opacity: 1
				  }, 1 );
			  

			  
			   jQuery("#slide1-3").animate({
				      opacity: 1,
				    left:-0,
				    top:65
				    }, 1500 );
				    
				     jQuery("#imagen3").animate({
				      opacity:1,
				    width:405,
				    height:430
				    }, 1500 );
				   
				    
				     jQuery("#slide2-3").animate({
				      opacity:1
				    }, 2500 );
				    
				       jQuery("#slide3-3").animate({
				      opacity:1,
				    left:400
				    }, 2500 );
				    
				      jQuery("#slide4-3").animate({
				      opacity:1,
				    top:250
				    }, 3000 );
		   break;
		   case 3:
			   
		
			  
			  jQuery("#slidebg-4").animate({
				    opacity: 1
				  }, 1 );
			  
			   jQuery("#slide1-4").animate({
				      opacity: 1,
				    left:-20,
				    top:0
				    }, 1500 );
				    
				     jQuery("#imagen4").animate({
				      opacity:1,
				    width:400,
				    height:465
				    }, 1500 );
				   
				    
				     jQuery("#slide2-4").animate({
				      opacity:1
				    }, 2500 );
				    
				       jQuery("#slide3-4").animate({
				      opacity:1,
				    left:385
				    }, 2500 );
				    
				      jQuery("#slide4-4").animate({
				      opacity:1,
				    top:270
				    }, 3000 );
		   break;
	   }
}

function resetItemSlider()
{
	jQuery("#slide1").animate({
	      opacity: 0,
	    left:0,
	    top:-25
	    }, 1 );
	    
	    jQuery("#imagen1").animate({
	      opacity:0,
	    width:685,
	    height:665
	    }, 1 );
	    
	     jQuery("#slide2").animate({
	      opacity:0
	    }, 1 );
	    
	       jQuery("#slide3").animate({
	      opacity:0,
	    left:1000
	    }, 1 );
	    
	      jQuery("#slide4").animate({
	      opacity:0,
	    top:600
	    }, 1 );
	
	// 2
	jQuery("#slide1-2").animate({
	      opacity: 0,
	    left:0,
	    top:0
	    }, 1 );
	    
	     jQuery("#imagen2").animate({
	      opacity:0,
	    width:475,
	    height:609
	    }, 1 );
	   
	    
	     jQuery("#slide2-2").animate({
	      opacity:0
	    }, 1 );
	    
	       jQuery("#slide3-2").animate({
	      opacity:0,
	    left:1000
	    }, 1 );
	    
	      jQuery("#slide4-2").animate({
	      opacity:0,
	    top:600
		    }, 1 );
	      
	// 3
	jQuery("#slide1-3").animate({
	      opacity: 0,
	    left:0,
	    top:0
	    }, 1 );
	    
	     jQuery("#imagen3").animate({
	      opacity:0,
	    width:605,
	    height:630
	    }, 1 );
	   
	    
	     jQuery("#slide2-3").animate({
	      opacity:0
	    }, 1 );
	    
	       jQuery("#slide3-3").animate({
	      opacity:0,
	    left:1000
	    }, 1 );
	    
	      jQuery("#slide4-3").animate({
	      opacity:0,
	    top:600
	    }, 1 );
	
	// 4
		jQuery("#slide1-4").animate({
	      opacity: 0,
	    left:0,
	    top:0
	    }, 1 );
	    
	     jQuery("#imagen4").animate({
	      opacity:0,
	    width:600,
	    height:665
	    }, 1 );
	   
	    
	     jQuery("#slide2-4").animate({
	      opacity:0
	    }, 1 );
	    
	       jQuery("#slide3-4").animate({
	      opacity:0,
	    left:1000
	    }, 1 );
	    
	      jQuery("#slide4-4").animate({
	      opacity:0,
	    top:600
	    }, 1 );

}