(function() {
	'use strict';
	/*
		Se reposicionan los puntos cuando carga la pagina y cuando se redimensiona
	*/
	function _positionHotspots(options) {
		var nombreImagen = $(this).attr('name');
		
		$(options.selector).each(function() {
			
			if( $(this).parent().attr('name') == nombreImagen ) {
				
				var imageWidth = $('.image_selector[name='+ nombreImagen +']').prop('naturalWidth')
				var imageHeight = $('.image_selector[name='+ nombreImagen +']').prop('naturalHeight')
			
				var bannerWidth = $('div.hotspotImg[name=' + nombreImagen + ']').width();
				var bannerHeight = $('div.hotspotImg[name=' + nombreImagen + ']').height();
				var xPos = $(this).attr('x');
				var yPos = $(this).attr('y');
				
				xPos = xPos / imageWidth * bannerWidth;
				yPos = yPos / imageHeight * bannerHeight;
				
				$(this).css({
					'top': yPos,
					'left': xPos,
					'display': 'block',
				});
				
				//para ver como abro el tooltip cuando estoy en movil
				if( $(window).width() < 481) { 
					if(xPos <= 50) {
						$(this).children(options.tooltipselector).css({
							'margin-left': 0
						});
					}
					if(xPos > 50 && xPos <= 100) {
						$(this).children(options.tooltipselector).css({
							'margin-left': - 30
						});
					}
					if(xPos > 100 && xPos <= 200) {
						$(this).children(options.tooltipselector).css({
							'margin-left': - 60
						});
					}
					if(xPos > 200 && xPos <= 300) {
						$(this).children(options.tooltipselector).css({
							'margin-left': - ($(this).children(options.tooltipselector).width() / 2)	
						});
					}
					if(xPos > 300) {
						$(this).children(options.tooltipselector).css({
							'margin-left': - ($(this).children(options.tooltipselector).width() / 1.2)	
						});
					}
				
				} else {
					$(this).children(options.tooltipselector).css({
						'margin-left': - ($(this).children(options.tooltipselector).width() / 2)	
					});
				}
			}
		});
	}

	// eventos para el tooltip
	function _bindHotspots(e, options) {
			if ($(e).children(options.tooltipselector).is(':visible')) {
				$(e).children(options.tooltipselector).css('display', 'none');
			} else {
				$(options.selector + ' '  + options.tooltipselector).css('display', 'none');
				$(e).children(options.tooltipselector).css('display', 'block');
				if ($(window).width() - ($(e).children(options.tooltipselector).offset().left + $(e).children(options.tooltipselector).outerWidth()) < 0) {
					$(e).children(options.tooltipselector).css({
						'right': '0',
						'left': 'auto',
					});
				}
			}
	}
	
	$.fn.hotSpot = function( options ) {
 
    
    var _options = $.extend( {}, $.fn.hotSpot.defaults, options );
 
		// Posiciona cada punto
		this.each(function() {
				_positionHotspots.call($(this), _options);
		});

		// detecta la redimension de la ventana para recalcular la posicion de los puntos
		$(window).resize(function() {
				this.each(function() {
						_positionHotspots.call($(this), _options);
				});
		}.bind(this));

		// Detecta el click sobre el punto para mostrar el tooltip
		switch (_options.bindselector) {
			case 'click':
				$(_options.selector).bind ('click', function(e){_bindHotspots(e.currentTarget, _options)});
				break;
			case 'hover':
				$(_options.selector).hover (function(e){_bindHotspots(e.currentTarget, _options)});
				break;
			default:
				break;
		}
		
		return this;
	};
	
	// defaults
	$.fn.hotSpot.defaults = {
		mainselector: '.hotspotImg',
		selector: '.hot-spot',
		imageselector: '.img-responsive',
		tooltipselector: '.tooltip',
		bindselector: 'hover'
	};
}(jQuery));