// JavaScript Document

/**
  *
  * 
  *
  */

/*
 * @param autoPlay:Boolean = comienza a reproducir el contenido automáticamente
 * @param containerWidth:Number = ancho del contenedor
 * @param containerHeight:Number = alto del contenedor
 * @param buttonWidth:Number = ancho de los botones de navegación
 * @param buttonHeight:Number = alto de los botones de navegación
 * @param marginWidth:Number = margen entre los botones de navegación
 * @param intervalPlay:Number = intervalo de tiempo entre contenidos (1000 = 1 segundo)
 * @param direction:String ('horizontal' | 'vertical') = dirección de movimiento del contenido
 *
 */
(function($){
	var instances = 0;
	$.fn.bannerSlider = function(settings){
		options = $.extend({
						   containerWidth:600,
						   containerHeight:200,
						   buttonWidth:20,
						   buttonHeight:20,
						   marginWidth:1,
						   onClick:false,
						   autoPlay:false,
						   intervalPlay:3000,
						   direction:'horizontal',
						   arrows:false,
						   basePath: './scripts/'
						   },settings);
		
		$this = $(this);
		
		var _direction = options.direction;
		var _name = $this.attr('id');
		var items = $(this).children('.slider-container').children('.slide');
		var _containerWidth = options.containerWidth;
		var _containerHeight = options.containerHeight;
		var _containerTotalWidth = 0;
		var _containerTotalHeight = 0;
		var _marginWidth = options.marginWidth;
		var itemsTotalWidth = (items.length*(options.buttonWidth+(options.marginWidth*2)));
		var itemsTotalHeight = options.buttonHeight;
		var isPlaying = false;
		var _autoPlay = options.autoPlay;
		var _intervalPlay = options.intervalPlay;
		var _onClick = options.onClick;
		var intervalID = 0;
		var prev = 0;
		var next = 0;
		var selected = 0;
		var counter = 0;
		var arrows = options.arrows;
		var basePath = options.basePath;
		
		var _containerName = _name+'_container';
		
		_config();
		
		function _config()
		{
			_containerTotalWidth = _direction == 'horizontal' ? (items.length*_containerWidth) : _containerWidth;
			_containerTotalHeight = _direction == 'horizontal' ? _containerHeight : (items.length*_containerHeight);
			
			//configuramos el tamaño del slider
			$this.css({'overflow':'hidden',width:_containerWidth+'px',height:_containerHeight+'px'});
			//configuramos el contenedor de items
			$this.children('.slider-container').css({width:_containerTotalWidth+'px',height:_containerTotalHeight+'px'}).attr('id',_containerName);
			
			if(items.length > 1){
				var sliderWidth = itemsTotalWidth;
				if(arrows){
					sliderWidth = itemsTotalWidth + 32 + (_marginWidth*2);
				}
				$this.after('<div id="'+_name+'_nav" class="slider-nav" style="width:'+_containerWidth+'px;"><ul style="width:'+sliderWidth+'px; height:'+itemsTotalHeight+'px; position:relative; margin:0 auto;"></ul></div>');
				//agregamos la flecha izquierda
				if(arrows){
					$('#'+_name+'_nav ul').append('<li id="'+_name+'_btn_left" style="margin-right:'+_marginWidth+'px"><img src="'+basePath+'jquery-banner-slider-1.0.0/arrow_left.png" width="16" height="16" /></li>');
				}
				
				//obtengo cada item con la clase slide
				items.each(function(){
					//configuro el margen para los botones
					var margin = (items.length-1 > counter || arrows) ? margin = _marginWidth : 0;
					//configuro el ancho y alto del contenido del item
					$(this).css({width:_containerWidth+'px',height:_containerHeight+'px'}).attr('id',_name+'_item_'+counter);
					if(_direction == 'horizontal'){
						$(this).css({float:'left'});
					}
					
					$('#'+_name+'_nav ul').append('<li id="'+_name+'_btn_'+counter+'" style="margin-right:'+margin+'px"><span>'+(counter+1)+'</span></li>');
					
					var _item = $('#'+_name+'_nav ul li#'+_name+'_btn_'+counter);
					//_item.css({'margin-right':margin+'px'});
					
					if(_onClick){
						_item.click(function(){_itemEvent($(this)); _stop();});
					}else{
						//_item.mouseover(function(){_itemEvent($(this)); _stop();});
						_item.bind('mouseover',_itemEvent);
					}
					counter++;
				});
				//agregamos la flecha derecha
				if(arrows){
					$('#'+_name+'_nav ul').append('<li id="'+_name+'_btn_right" style="margin-right:'+_marginWidth+'px"><img src="'+basePath+'jquery-banner-slider-1.0.0/arrow_right.png" width="16" height="16" /></li>');
				}
				
				$('#'+_name+'_nav ul li#'+_name+'_btn_0').addClass('selected');
				if(_autoPlay){
					_play();
				}
			}
			
		}
		
		function _play()
		{
			intervalID = setInterval(function(){_nextItem();},_intervalPlay);
		}
		
		function _stop()
		{
			if(intervalID){
				clearInterval(intervalID);
			}
		}
		
		function _nextItem()
		{
			next++;
			if(next > items.length-1){
				next = 0;
			}
			var _item = $('li#'+_name+'_btn_'+next);
			_moveItem(_item);
		}
		
		function _itemEvent(ev)
		{
			_moveItem($(this));
			_stop();
		}
		
		function _moveItem(obj)
		{
			prev = selected;
			var parts = obj.attr('id').split('_');
			var name = parts[0];
			var id = parts[2];
			var left = $('.slider').width() * id;
			var top = $('.slider').height() * id;
			var property = null;
			if(parseInt(prev) != parseInt(id)){
				property = _direction == 'horizontal' ? {left:-left} : {top:-top};
				$('#'+_name+'_container').animate(property,500,function(){});
				_highlightButton(obj);
				selected = id;
			}
		}
		
		function _highlightButton(obj)
		{
			obj.parent().find('li#'+_name+'_btn_'+prev).removeClass('selected');
			obj.addClass('selected');
			obj.css({cursor:'default'});
		}
		instances++;
	}//end $.fn.bannerSlider
})(jQuery);