/**
 * jQuery plugin for Responsive Hotspot
 *
 * Author: SK Lam
 */
(function () {
    'use strict';

    /*
     Reposition the HotSpots during init and resize windows
     */
    function _positionHotspots(options) {
        var imageWidth = $(options.mainselector + ' ' + options.imageselector).prop('naturalWidth');
        var imageHeight = $(options.mainselector + ' ' + options.imageselector).prop('naturalHeight');

        var bannerWidth = $(options.mainselector).width();
        var bannerHeight = $(options.mainselector).height();
        $(options.selector).each(function () {
            var xPos = $(this).attr('data-x');
            var yPos = $(this).attr('data-y');
            xPos = xPos / imageWidth * bannerWidth;
            yPos = yPos / imageHeight * bannerHeight;

            $(this).css({
                'top': yPos,
                'left': xPos,
                'display': 'block',
            });
        });
    }

    $.fn.hotSpot = function (options) {

        // Extend our default options with those provided.
        // Note that the first argument to extend is an empty
        // object – this is to keep from overriding our "defaults" object.
        var _options = $.extend({}, $.fn.hotSpot.defaults, options);

        // Position each hotspot
        this.each(function () {
            _positionHotspots.call($(this), _options);
        });
        // Bind the windows resize event to recalculate the hotspot position
        $(window).resize(function () {
            this.each(function () {
                _positionHotspots.call($(this), _options);
            });
        }.bind(this));

        return this;
    };

    // Plugin defaults
    $.fn.hotSpot.defaults = {
        mainselector: '.hotspot-img',
        selector: '.hot-spot',
        imageselector: '.img-responsive',
    };
}(jQuery));