Popup.js

$('body').append('

');

$(document).mousemove(function(e) {

   if (Popup.active) {
       Popup.setPosition(e);
   }

});

if ($("#input_level").length == 1) {

   var input_level = $('<input type="number" class="west" placeholder="Level" min="0" max="150">').bind("propertychange keyup input paste", function() {
       if (this.value > 150) {
           this.value = 150;
       } else if (this.value < 0) {
           this.value = 0;
       }
       $(".calc").each(function() {
           if (input_level.val() == 0) {
               $(this).html(this.id);
               $('.per_level_off').addClass('per_level').removeClass('per_level_off');
           } else {
               $(this).html(Math.ceil(Number(this.id) * input_level.val()));
               $('.per_level').addClass('per_level_off').removeClass('per_level');
           }
       });
   }).appendTo($("#input_level"));

}

//Search if ($("#input_search").length == 1) {

   var input_search = $('<input type="search" class="west" placeholder="Search">').bind("propertychange keyup input paste", function() {
       var val = this.value;
       if (val == ) {
           $('.item_container').show();
       } else {
           $('.item_container').hide();
           $('.item_container').filter(function() {
               return $(this).attr('data-popup').toLowerCase().indexOf(val) > -1;
           }).show();
       }
   }).appendTo($("#input_search"));

}

var Popup = {

   content : "",
   delay : 200,
   active : false,
   show: function(obj) {
       console.time('create_popup');
       Popup.content = Popup.createPopup($(obj).attr('data-popup'), $(obj).attr('data-cdn-cat'), $(obj).attr('data-cdn-img'));
       Popup.active = true;
       Popup.setTimeout();
       Popup.getContainer().html(Popup.content);
       console.timeEnd('create_popup');
   },
   hide: function() {
       Popup.getEl().css({
           display: 'none',
           top: 0,
           left: 0
       });
       Popup.active = false;
       Popup.clearTimeout();
   },
   setTimeout: function() {
       Popup.clearTimeout();
       Popup.timer = window.setTimeout(function() {
           Popup.getEl().css('display', 'block');
       }, Popup.delay);
   },
   clearTimeout : function() {
       if (Popup.timer) window.clearTimeout(Popup.timer);
   },
   getEl : function() {
       return $('.popup_window');
   },
   getContainer : function() {
       return $('.popup_contents');
   },
   createPopup: function(data, cdn_cat, cdn_name) {
       data = JSON.parse(data);

var html = '

<img src="https://westzzs.innogamescdn.com/images/items/' + data.cdn_cat + '/' + data.cdn_img + '.png' + '"/>

' + data.name + '

' + data.type + '

';

       for (var cat in Popup.data) {
           var cnt = 0;
           for (var key in Popup.data[cat]) {
               if (data.hasOwnProperty(key)) {
                   cnt++;
                   var per_level = "";
                   if (data[key] < 1 && cat == 'skills') {
                       if ($('#input_level input').val() > 0) {
                           data[key] = Math.ceil($('#input_level input').val() * data[key]);
                       } else {
                           per_level = " (per Level)";
                       }
                   }
                   html += Popup.data[cat][key].replace('#1', data[key]).replace('#2', per_level);
               }
           }
           if (cnt > 0) {
               html += '
';
           }
       }

html += '

'; if (data.spd) html += '

Speed: +' + data.spd + '%

'; if (data.set) html += '

' + data.set + '

';

       if (data.sp) {
           html += '<img src="/images/5/57/Buy_price.png">' + data.bp + '    <img src="/images/f/fc/Sell_price.png"> ' + data.sp + '

';
       } else {
           html += 'Unsalable

';
       }
       html += 'Level ' + data.lvl + '
';
       if (data.sex) {
           if (data.sex == 0) {
               html += '<img src="/images/c/c5/Gender_m.png">   ';
           } else {
               html += '<img src="/images/4/41/Gender_f.png">   ';
           }
       }
       if (data.upg) {
           if (data.upg == 0) {
               html += 'Not upgradeable';
           } else {
               html += 'Upgradeable';
           }

       }

html += '

ID: ' + data.id + '

';

       return html;
   },

setPosition : function (e) { var window_width = $(window).width();

       var window_height = $(window).height();
       var popup_width = Popup.getEl().outerWidth();
       var popup_height = Popup.getEl().outerHeight()
       var pos_x = e.clientX;
       var pos_y = e.clientY;
       var top;
       var left;
       var margin_top = 20;
       var margin_left = 20;
       if (pos_x + popup_width + margin_left > window_width) {
           left = pos_x - popup_width - margin_left + (e.pageX - e.clientX);
       } else {
           left = pos_x + margin_left + (e.pageX - e.clientX);
       }
       if (pos_y + popup_height + margin_top > window_height) {
           top = window_height - popup_height + (e.pageY - e.clientY);
       } else {
           top = pos_y + margin_top + (e.pageY - e.clientY);
       }
       Popup.getEl().css({
           top: top,
           left: left
       });

},

   data: {
       dmg: {

dmg: '

#1 Damages

', dmglvl: '

+ #1 Damages (per Level)

'

       },
       skills: {

str: '

+ #1 Strength#2

', mob: '

+ #1 Mobility#2

', dex: '

+ #1 Dexterity#2

', cha: '

+ #1 Charisma#2

', con: '

+ #1 Construction#2

', vig: '

+ #1 Vigor#2

', tou: '

+ #1 Toughness#2

', sta: '

+ #1 Stamina#2

', hea: '

+ #1 Health Points#2

', rid: '

+ #1 Horseback Riding#2

', ref: '

+ #1 Reflex#2

', dod: '

+ #1 Dodging#2

', hid: '

+ #1 Hiding#2

', swi: '

+ #1 Swimming#2

', aim: '

+ #1 Aiming#2

', sho: '

+ #1 Shooting#2

', pit: '

+ #1 Setting traps#2

', fin: '

+ #1 Fine Motor Skills#2

', rep: '

+ #1 Repairing#2

', lea: '

+ #1 Leadership#2

', tac: '

+ #1 Tactics#2

', tra: '

+ #1 Trading#2

', ani: '

+ #1 Animal Instinct#2

', app: '

+ #1 Appearance#2

'

       },
       fb: {

fbdef: '

+ #1 Defense (Fort battle bonus)

', fboff: '

+ #1 Attack (Fort battle bonus)

', fbres: '

+ #1 Resistance (Fort battle bonus)

', fbdefs: '

+ #1 Defense (Fort battle sector bonus)

', fboffs: '

+ #1 Attack (Fort battle sector bonus)

', fbdmgs: '

+ #1 Damages (Fort battle sector bonus)

'

       },
       txt: {

t1: '

#1

', t2: '

#1

', t3: '

#1

', t4: '

#1

'

       },
       bonus: {

b1: '

#1

', b2: '

#1

', b3: '

#1

', b4: '

#1

'

       }
   }

};