View source for Popup.js


$('body').append('<div class="popup_window"><div class="popup_front"><div class="tw_bg_tl"></div><div class="tw_bg_tr"></div><div class="tw_bg_bl"></div><div class="tw_bg_br"></div></div><div class="popup_contents"></div></div>');

var popup = {
    dmg: {
        dmg: '<p class="popup_dmg">#1 Damages</p>',
        dmglvl: '<p class="popup_dmg">+ #1 Damages (per Level)</p>'
    },
    skills: {
        str: '<p class="popup_attribute">+ #1 Strength#2</p>',
        mob: '<p class="popup_attribute">+ #1 Mobility#2</p>',
        dex: '<p class="popup_attribute">+ #1 Dexterity#2</p>',
        cha: '<p class="popup_attribute">+ #1 Charisma#2</p>',
        con: '<p class="popup_skill">+ #1 Construction#2</p>',
        vig: '<p class="popup_skill">+ #1 Vigor#2</p>',
        tou: '<p class="popup_skill">+ #1 Toughness#2</p>',
        sta: '<p class="popup_skill">+ #1 Stamina#2</p>',
        hea: '<p class="popup_skill">+ #1 Health Points#2</p>',
        rid: '<p class="popup_skill">+ #1 Horseback Riding#2</p>',
        ref: '<p class="popup_skill">+ #1 Reflex#2</p>',
        dod: '<p class="popup_skill">+ #1 Dodging#2</p>',
        hid: '<p class="popup_skill">+ #1 Hiding#2</p>',
        swi: '<p class="popup_skill">+ #1 Swimming#2</p>',
        aim: '<p class="popup_skill">+ #1 Aiming#2</p>',
        sho: '<p class="popup_skill">+ #1 Shooting#2</p>',
        pit: '<p class="popup_skill">+ #1 Setting traps#2</p>',
        fin: '<p class="popup_skill">+ #1 Fine Motor Skills#2</p>',
        rep: '<p class="popup_skill">+ #1 Repairing#2</p>',
        lea: '<p class="popup_skill">+ #1 Leadership#2</p>',
        tac: '<p class="popup_skill">+ #1 Tactics#2</p>',
        tra: '<p class="popup_skill">+ #1 Trading#2</p>',
        ani: '<p class="popup_skill">+ #1 Animal Instinct#2</p>',
        app: '<p class="popup_skill">+ #1 Appearance#2</p>'
    },
    fb: {
        fbdef: '<p class="popup_fb">+ #1 <b>Defense</b> (Fort battle bonus)</p>',
        fboff: '<p class="popup_fb">+ #1 <b>Attack</b> (Fort battle bonus)</p>',
        fbres: '<p class="popup_fb">+ #1 <b>Resistance</b> (Fort battle bonus)</p>',
        fbdefs: '<p class="popup_fb">+ #1 <b>Defense</b> (Fort battle sector bonus)</p>',
        fboffs: '<p class="popup_fb">+ #1 <b>Attack</b> (Fort battle sector bonus)</p>',
        fbdmgs: '<p class="popup_fb">+ #1 <b>Damages</b> (Fort battle sector bonus)</p>'
    },
    txt: {
        t1: '<p class="popup_text">#1</p>',
        t2: '<p class="popup_text">#1</p>',
        t3: '<p class="popup_text">#1</p>',
        t4: '<p class="popup_text">#1</p>'
    },
    bonus: {
        b1: '<p class="popup_bonus">#1</p>',
        b2: '<p class="popup_bonus">#1</p>',
        b3: '<p class="popup_bonus">#1</p>',
        b4: '<p class="popup_bonus">#1</p>'
    }
}

function createPopup(data, cdn_cat, cdn_name) {
    data = JSON.parse(data);
    var html = '<div class="popup_image"><img src="https://westzzs.innogamescdn.com/images/items/' + data.cdn_cat + '/' + data.cdn_img + '.png' + '"/></div><img class="popup_divider"/><p class="popup_name">' + data.name + '</p><p class="popup_type">' + data.type + '</p><br/>';
    for (var cat in popup) {
		var cnt = 0;
        for (var key in popup[cat]) {
            if (data.hasOwnProperty(key)) {
				cnt++;
                var per_level = "";
                if (Math.sign(data[key]) == -1) {
                    per_level = " (per Level)";
                    data[key] = -data[key];
                }
                html += popup[cat][key].replace('#1', data[key]).replace('#2', per_level);
            }
        }
        if (cnt > 0) {
            html += '<br/>';
        }
    }
    html += '<div class="popup_infos">';
	if (data.spd) html += '<p class="popup_speed">Speed: +'+data.spd+'%</p><br/>';
	if (data.set) html += '<p class="popup_set">'+data.set+'</p><br/>';
    if (data.sp) {
        html += '<img src="/images/5/57/Buy_price.png">' + data.bp + '&nbsp;&nbsp;&nbsp;&nbsp;<img src="/images/f/fc/Sell_price.png">&nbsp;' + data.sp + '<br/><br/>';
    } else {
        html += '<i>Unsalable</i><br/><br/>';
    }
    html += 'Level <b>' + data.lvl + '</b><br/>';
    if (data.sex) {
        if (data.sex == 0) {
            html += '<img src="/images/c/c5/Gender_m.png">&nbsp;&nbsp;&nbsp;';
        } else {
            html += '<img src="/images/4/41/Gender_f.png">&nbsp;&nbsp;&nbsp;';
        }
    }
    if (data.upg) {
        if (data.upg == 0) {
            html += '<span class="popup_txtred">Not upgradeable</span>';
        } else {
            html += '<span class="popup_txtgreen">Upgradeable</span>';
        }

    }
    html += '<p class="popup_id"><br/>ID: <b>' + data.id + '</b></p></div>';
    return html;
}

function showPopup(obj) {
console.time('popup');
    var html = createPopup($(obj).attr('data-popup'), $(obj).attr('data-cdn-cat'), $(obj).attr('data-cdn-img'));
    $('.popup_contents').html(html);
    $('.popup_window').show();
console.timeEnd('popup');
}

function hidePopup() {
    $('.popup_window').hide();
}