(function( $ ){

	$.fn.bgSlider = function( options ) {  
		
		var defaults = {
			'autoPlay'		: false,
			'playSpeed'		: 500,
			'transSpeed'	: 500,
			'clickStop'		: true,
			'bgId'			: '#BgSlider',
			'panelId'		: '#Panel',
			'showCount'		: false
		};
			
		var options = $.extend(defaults, options);

		return this.each(function() {  
		
			container 	= $(this);
			panel		= $(container).find('.Panel');
			controls 	= $(container).find('.Controls');
			background	= options.bgId ? '#'+options.bgId : $('#BgSlider');
			cantPanel   = $(panel).size();
			panelId		= '#' + options.panelId;
		
			$(background).find('.img').hide();
			$(panel).hide();			
			
			createCounter ();
			createBackground ();
			initSlider ();
			
			$(controls)
					.find('a')
					.live('click', function (e) { 
						if ( options.clickStop )
								clearInterval (speed);
						e.preventDefault();
						setActive( this , false );	
					} 
			);
					
			if (options.autoPlay)
				var speed = setInterval( playSlider, options.playSpeed)
			else
				initSlider();

		});
		
		// Generar contador
		function createCounter () {
			
			if (options.showCount)
			{
				var dots = '';
				$(panel).each(function( i ) {
					dots += '<li><a href="#" rel="' + ( i + 1 ) + '"></a></li>';
				});
				$(controls).html(dots);
			}
		}
		
		// Generar backgrounds
		function createBackground () {

			var bgIMG = '';
			$(panel).each(function( i ) {
				var urlBg = '';
				urlBg = $(this).find('.Background').attr('src');
				bgIMG += '<div id="Bg' + ( i + 1 ) + '" class="img" style="background-image: url(' + urlBg + ')"></div>';
			});
			$(background)
					.css ( {
						'height' : $(document).height()	
					})
					.html(bgIMG);
			
		}
		
		// Setear el primer elemento como activo
		function initSlider () {
			
			$(panel)
					.removeClass('active')
					.hide();
			
			$('.Panel:first-child')
					.addClass('active')
					.show();
					
			$(controls)
					.find('a')
					.removeClass('active');
											
			$(controls)
					.find('a[rel="1"]')
					.addClass('active');
			
			$(background)
					.find('div')
					.removeClass('active')
					.fadeOut( options.transSpeed );
										
			$(background)
					.find('div:first-child')
					.addClass('active')
					.fadeIn( options.transSpeed );
						
								
			
		}
		
		// 
		function setActive ( elem , play ) {

			var actual = parseInt ( $(elem).attr('rel') );
			
			play ? actual++ : actual;
			
			if ( actual > cantPanel ) {
				initSlider();
				return;	
			}
			
			var nextElem = $(controls).find('a[rel="'+actual+'"]');

			$(controls)
					.find('a')
					.removeClass('active');

			$(nextElem).addClass('active');			
					
			// Panel
			var panelActive = $(container).find('.Panel.active');
			$(panelActive)
					.hide()
					.removeClass('active');
			$(panelId + actual)
					.show()
					.addClass('active');

					
			// Background
			var bgActive = $(background).find('.active');
			$(bgActive)
					.fadeOut(options.transSpeed)
					.removeClass('active');
					
			$(background).find('#Bg' + actual)
					.fadeIn(options.transSpeed)
					.addClass('active');
	
		}
		

		function playSlider() {
			
			var itemActive = $(controls).find('a.active');
			setActive ( itemActive, true );

		}
		
		function stopSlider() { // to be called when you want to stop the timer
			clearInterval(speed);
		}

	};
})( jQuery );