#I LOVE YOU EVERDAY#

/**
 * jQuery Hotspot : A jQuery Plugin to create hotspot for an HTML element
 *
 * Author: Aniruddha Nath
 * Version: 1.0.0
 * 
 * Website: https://github.com/Aniruddha22/jquery-hotspot
 * 
 * Description: A jquery plugin for creating and displaying Hotspots in an HTML element.
 *	It operates in two mode, admin and display. The design of the hotspot created are fully customizable.
 *	User can add their own CSS class to style the hotspots.
 * 
 * License: http://www.opensource.org/licenses/mit-license.php
 */

;(function($) {
    
    // Default settings for the plugin
    var defaults = {

// Data
        data: [],

// Hotspot Tag
        tag: 'img',

// Mode of the plugin
        // Options: admin, display
        mode: 'display',

// HTML5 LocalStorage variable
        LS_Variable: '__HotspotPlugin_LocalStorage',
        
        // Hidden class for hiding the data
        hiddenClass: 'hidden',

// Event on which the data will show up
        // Options: click, hover, none
        interactivity: 'hover',

// Buttons' id (Used only in Admin mode)
        done_btnId: 'HotspotPlugin_Done',
        remove_btnId: 'HotspotPlugin_Remove',
        sync_btnId: 'HotspotPlugin_Server',

// Buttons class
        done_btnClass: 'btn btn-success HotspotPlugin_Done',
        remove_btnClass: 'btn btn-danger HotspotPlugin_Remove',
        sync_btnClass: 'btn btn-info HotspotPlugin_Server',

// Classes for Hotspots
        hotspotClass: 'HotspotPlugin_Hotspot',
        hotspotAuxClass: 'HotspotPlugin_inc',

// Overlay
        hotspotOverlayClass: 'HotspotPlugin_Overlay',

// No. of variables included in the spots
        dataStuff: [
            {
                'property': 'Title',
                'default': 'jQuery Hotspot'
            },
            {
                'property': 'Message',
                'default': 'This jQuery Plugin lets you create hotspot to any HTML element. '
            }
        ]
    };
    
    //Constructor
    function Hotspot(element, options) {
        
        // Overwriting defaults with options
        this.config = $.extend(true, {}, defaults, options);
        
        this.element = element;
        this.imageEl = element.find(this.config.tag);
        this.imageParent = this.imageEl.parent();

this.broadcast = '';

var widget = this;

// Event API for users
        $.each(this.config, function(index, val) {
            if (typeof val === 'function') {
                widget.element.on(index + '.hotspot', function() {
                    val(widget.broadcast);
                });
            };
        });

this.init();
    };

Hotspot.prototype.init = function() {
        this.getData();
    };

Hotspot.prototype.getData = function() {
        if (($(this.config.LS_Variable).val() == '' || $(this.config.LS_Variable).val()) === null && this.config.data.length == 0) {
            return;
        } 
        
        this.beautifyData();
        
        $('body').trigger('ihwt-hotspot-initialized');
    };

Hotspot.prototype.beautifyData = function() {
        var widget = this;

if (this.config.data.length != 0) {
            var raw = this.config.data;
        }
        
        var obj = JSON.parse(raw);
        
        for (var i = obj.length - 1; i >= 0; i--) {
            var el = obj[i];

if (this.config.interactivity === 'none') {
                var htmlBuilt = $('<div><i class="close-item Default-close"></i></div>');
            } else {
                var htmlBuilt = $('<div><i class="close-item Default-close"></i></div>').addClass(this.config.hiddenClass);
            }

$.each(el, function(index, val) {
                if (typeof val === "string") {
                    $('<div/>', {
                        html: val
                    }).addClass('Hotspot_' + index).appendTo(htmlBuilt);
                };
            });

var div = $('<div/>', {
                html: htmlBuilt
            }).css({
                'top': el.y + '%',
                'left': el.x + '%'
            }).addClass(this.config.hotspotClass).appendTo(this.element);

if (widget.config.interactivity === 'click' || widget.config.interactivity === 'hover') {
                widget.addEvents(div);
            } else {
                htmlBuilt.removeClass(this.config.hiddenClass);
            }

if (this.config.interactivity === 'none') {
                htmlBuilt.css('display', 'block');
            }
        };
    };
    
    Hotspot.prototype.addEvents = function($el) {
        var self = this;
        $(window).on('load resize', function() {
            var realAction = self.config.interactivity;
            if(self.config.interactivity === 'hover' && typeof jQuery(window).windowWidth != 'undefined' && jQuery(window).windowWidth < 768) {
                realAction = 'click';
            }
            $el.off().on(realAction, function(event) {
                $(this).toggleClass('active').children('div').toggleClass(self.config.hiddenClass);
            });
        });
    };

$.fn.hotspot = function (options) {
        new Hotspot(this, options);
        return this;
    };

}(jQuery));