ivalentin
/
SWDB


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994
							<?php
/**
 * Optimizer Unit view.
 *
 * Contains the view layout and some code to present the data.
 *
 * @author Iñigo Valentin <i@inigovalentin.com>
 * @license https://www.gnu.org/licenses/gpl-3.0.en.html GNU General Public License V3
 * @package SWDB
 * @category View
 * @property Optimizer_Unit_Page $page The page model.
 * @var Optimizer_Unit_Page $page The page model.
 */
?>
<!DOCTYPE html>
<html lang='en'>
    <head>
        <?=$page->generate_head()?>
        <script>

            /**
             * Unit current stats.
             */
            var current_stats = {
                "atk": <?=$page->get_unit()->get_stats()["atk"]?>,
                "def": <?=$page->get_unit()->get_stats()["def"]?>,
                "hp": <?=$page->get_unit()->get_stats()["hp"]?>,
                "spd": <?=$page->get_unit()->get_stats()["spd"]?>,
                "crr": <?=$page->get_unit()->get_stats()["crr"]?>,
                "crd": <?=$page->get_unit()->get_stats()["crd"]?>,
                "acc": <?=$page->get_unit()->get_stats()["acc"]?>,
                "res": <?=$page->get_unit()->get_stats()["res"]?>,
                "ehp": <?=$page->get_unit()->get_stats()["ehp"]?>,
                "dmg": <?=$page->get_unit()->get_stats()["dmg"]?>
            }

            var set_stats = {
                "atk": 0,
                "def": 0,
                "hp": 0,
                "spd": 0,
                "crr": 0,
                "crd": 0,
                "acc": 0,
                "res": 0
            }

            var min_stats = {
                "atk": 0,
                "def": 0,
                "hp": 0,
                "spd": 0,
                "crr": 0,
                "crd": 0,
                "acc": 0,
                "res": 0,
                "ehp": 0,
                "dmg": 0
            }

            var base_stats = {
                "atk": <?=$page->get_unit()->get_base_stats()["atk"]?>,
                "def": <?=$page->get_unit()->get_base_stats()["def"]?>,
                "hp": <?=$page->get_unit()->get_base_stats()["hp"]?>,
                "spd": <?=$page->get_unit()->get_base_stats()["spd"]?>,
                "crr": <?=$page->get_unit()->get_base_stats()["crr"]?>,
                "crd": <?=$page->get_unit()->get_base_stats()["crd"]?>,
                "acc": <?=$page->get_unit()->get_base_stats()["acc"]?>,
                "res": <?=$page->get_unit()->get_base_stats()["res"]?>,
                "ehp": <?=$page->get_unit()->get_base_stats()["ehp"]?>,
                "dmg": <?=$page->get_unit()->get_base_stats()["dmg"]?>
            }

            var requested_sets = {
                'RUNE_SET_<?=RUNE_SET_ID::ENERGY?>': 0, // ENERGY
                'RUNE_SET_<?=RUNE_SET_ID::GUARD?>': 0, // GUARD
                'RUNE_SET_<?=RUNE_SET_ID::SWIFT?>': 0, // SWIFT
                'RUNE_SET_<?=RUNE_SET_ID::BLADE?>': 0, // BLADE
                'RUNE_SET_<?=RUNE_SET_ID::RAGE?>': 0, // RAGE
                'RUNE_SET_<?=RUNE_SET_ID::FOCUS?>': 0, // FOCUS
                'RUNE_SET_<?=RUNE_SET_ID::ENDURE?>': 0, // ENDURE
                'RUNE_SET_<?=RUNE_SET_ID::FATAL?>': 0, // FATAL
                'RUNE_SET_<?=RUNE_SET_ID::DESPAIR?>': 0, // DESPAIR
                'RUNE_SET_<?=RUNE_SET_ID::VAMPIRE?>': 0, // VAMPIRE
                'RUNE_SET_<?=RUNE_SET_ID::VIOLENT?>': 0, // VIOLENT
                'RUNE_SET_<?=RUNE_SET_ID::NEMESIS?>': 0, // NEMESIS
                'RUNE_SET_<?=RUNE_SET_ID::WILL?>': 0, // WILL
                'RUNE_SET_<?=RUNE_SET_ID::SHIELD?>': 0, // SHIELD
                'RUNE_SET_<?=RUNE_SET_ID::REVENGE?>': 0, // REVENGE
                'RUNE_SET_<?=RUNE_SET_ID::DESTROY?>': 0, // DESTROY
                'RUNE_SET_<?=RUNE_SET_ID::FIGHT?>': 0, // FIGHT
                'RUNE_SET_<?=RUNE_SET_ID::DETERMINATION?>': 0, // DETERMINATION
                'RUNE_SET_<?=RUNE_SET_ID::ENHANCE?>': 0, // ENHANCE
                'RUNE_SET_<?=RUNE_SET_ID::ACCURACY?>': 0, // acc
                'RUNE_SET_<?=RUNE_SET_ID::TOLERANCE?>': 0 // TOLERANCE
            };

            // Will be set once requested_sets is populated.
            var requested_sets_json = "";

<?php
            // Get current rune sets
            $sets = [];
            foreach ($page->get_unit()->get_runes() as $rune){
                if (!in_array($rune->get_set()->get_id(), $sets)){
                    array_push($sets, $rune->get_set()->get_id());
                }
            }
            for ($i = sizeof($sets); $i < 3; $i ++){
                array_push($sets, 0);
            }
?>
            var current_sets = [<?=$sets[0]?>, <?=$sets[1]?>, <?=$sets[2]?>];

            // Get current main stats in even slots
<?php
            $mains = [0, 0, 0];
            foreach ($page->get_unit()->get_runes() as $rune){
                if ($rune->get_slot() % 2 == 0){
                    $mains[($rune->get_slot() / 2) - 1] = $rune->get_main_stat();
                }
            }
            
?>

            /**
             * To calculate time.
             */
            var timestamp = 0;

            /**
             * Enables or disables a new search.
             *
             * When disabled, the apply button will be disabled and a waiting
             * icon will be shown.
             *
             * @param enable true to enable, false to disable.
             */
            function enableNewSearch(enable){
                if (enable === true){
                    document.getElementById('apply').removeAttribute('disabled');
                    document.getElementById('wait').style.display = 'none';
                }
                else{
                    document.getElementById('apply').setAttribute('disabled', 'disabled');
                    document.getElementById('wait').style.display = 'block';
                }
            }

            /**
             * Updates the value next to the sliders when they change.
             *
             * @param stat Name of the stat to set.
             * @param value Value of the slider.
             */
            function updateMinValue(stat, element){
                var value = Number(element.value);
                var max = Number(element.max);
                var min = Number(element.min);
                if (value < min){
                    value = min;
                }
                if (value > max){
                    value = max;
                }
                document.getElementById('lbl_min_' + stat).value = value;
                document.getElementById('min_' + stat).value = value;
            }

            /**
             * Resets filter to the unit's current stat status.
             *
             * @param stat Name of the stat to set.
             */
            function resetFilter(stat){
                document.getElementById('lbl_min_' + stat).value = current_stats[stat];
                document.getElementById('min_' + stat).value = current_stats[stat];
            }

            /**
             * Sets a filter to it's lowest possible value.
             *
             * @param stat Name of the stat to set.
             */
            function removeFilter(stat){
                document.getElementById('lbl_min_' + stat).value = document.getElementById('lbl_min_' + stat).min;
                document.getElementById('min_' + stat).value = document.getElementById('min_' + stat).min;
            }

            function log(text){
                var log_window = document.getElementById('log_window');
                var span = document.createElement('span');
                span.setAttribute('class', 'log_message');
                text = document.createTextNode(text);
                span.appendChild(text);
                log_window.appendChild(span);
                log_window.scrollTo(0, 2 * log_window.offsetHeight);
            }
            function clearLog(){
                const elements = document.querySelectorAll('.log_message');
                Array.from(elements).forEach((element, index) => {
                    element.remove(); 
                });
            }

            /**
             * Starts the optimization.
             *
             * Checks for error in the combination of the parameters, and
             * shows an error window if there is an invalid conbination. If
             * not, builds the url to fetch all candidate runes.
             *
             * @return false on error, true on success.
             */
            function apply(){
                log("Start optimization...");

                var params = '';
                var x;

                // Player id - mandatory
                params = 'player=<?=get_context()->get_player()->get_id()?>';

                // Game mode - mandatory
                params += '&mode=<?=get_context()->get_game_mode()?>';

                // Unit id - mandatory
                params += '&unit=<?=$page->get_unit()->get_id()?>';

                // Rune set 1 - mandatory
                params += '&set[]=' + document.getElementById('set_1').options[document.getElementById('set_1').selectedIndex].value;

                // Rune set 2 - mandatory
                params += '&set[]=' + document.getElementById('set_2').options[document.getElementById('set_2').selectedIndex].value;

                // Rune set 3 - optional
                x = document.getElementById('set_3').options[document.getElementById('set_3').selectedIndex].value;
                if (x != ''){
                    params += '&set[]=' + x;
                }

                // Slot 2 - mandatory
                params += '&stat[]=' + document.getElementById('slot_2').options[document.getElementById('slot_2').selectedIndex].value;

                // Slot 4 - mandatory
                params += '&stat[]=' + document.getElementById('slot_4').options[document.getElementById('slot_4').selectedIndex].value;

                // Slot 5 - mandatory
                params += '&stat[]=' + document.getElementById('slot_6').options[document.getElementById('slot_6').selectedIndex].value;

                // Rune source - mandatory
                params += '&source=' + document.getElementById('rune_source').options[document.getElementById('rune_source').selectedIndex].value;

                // Optimizer tuning - mandatory
                params += '&tuning=' + document.getElementById('tuning').options[document.getElementById('tuning').selectedIndex].value;

                // Limit combinations - mandatory
                params += '&limit=' + document.getElementById('limit').value;

                // Min HP - Optional
                if (Number(document.getElementById('min_hp').value) > Number(document.getElementById('min_hp').min)){
                    params += '&min_hp=' + document.getElementById('min_hp').value;
                }

                // Min ATK - Optional
                if (Number(document.getElementById('min_atk').value) > Number(document.getElementById('min_atk').min)){
                    params += '&min_atk=' + document.getElementById('min_atk').value;
                }

                // Min DEF - Optional
                if (Number(document.getElementById('min_def').value) > Number(document.getElementById('min_def').min)){
                    params += '&min_def=' + document.getElementById('min_def').value;
                }

                // Min SPD - Optional
                if (Number(document.getElementById('min_spd').value) > Number(document.getElementById('min_spd').min)){
                    params += '&min_spd=' + document.getElementById('min_spd').value;
                }

                // Min CRR - Optional
                if (Number(document.getElementById('min_crr').value) > Number(document.getElementById('min_crr').min)){
                    params += '&min_crr=' + document.getElementById('min_crr').value;
                }

                // Min CRD - Optional
                if (Number(document.getElementById('min_crd').value) > Number(document.getElementById('min_crd').min)){
                    params += '&min_crd=' + document.getElementById('min_crd').value;
                }

                // Min ACC - Optional
                if (Number(document.getElementById('min_acc').value) > Number(document.getElementById('min_acc').min)){
                    params += '&min_acc=' + document.getElementById('min_acc').value;
                }

                // Min RES - Optional
                if (Number(document.getElementById('min_res').value) > Number(document.getElementById('min_res').min)){
                    params += '&min_res=' + document.getElementById('min_res').value;
                }

                // Min EHP - Optional
                if (Number(document.getElementById('min_ehp').value) > 0){
                    params += '&min_ehp=' + document.getElementById('min_ehp').value;
                }

                // Min DMG - Optional
                if (Number(document.getElementById('min_dmg').value) > 0){
                    params += '&min_dmg=' + document.getElementById('min_dmg').value;
                }

                // Focus - optional
                if (Number(document.getElementById('focus_0').value) > 0){
                    params += '&focus_0=' + document.getElementById('focus_0').value;
                }
                if (Number(document.getElementById('focus_1').value) > 0){
                    params += '&focus_1=' + document.getElementById('focus_1').value;
                }
                if (Number(document.getElementById('focus_2').value) > 0){
                    params += '&focus_2=' + document.getElementById('focus_2').value;
                }

                // Clear and calculate new requested sets
                requested_sets['RUNE_SET_<?=RUNE_SET_ID::ENERGY?>'] = 0; // ENERGY
                requested_sets['RUNE_SET_<?=RUNE_SET_ID::GUARD?>'] = 0; // GUARD
                requested_sets['RUNE_SET_<?=RUNE_SET_ID::SWIFT?>'] = 0; // SWIFT
                requested_sets['RUNE_SET_<?=RUNE_SET_ID::BLADE?>'] = 0; // BLADE
                requested_sets['RUNE_SET_<?=RUNE_SET_ID::RAGE?>'] = 0; // RAGE
                requested_sets['RUNE_SET_<?=RUNE_SET_ID::FOCUS?>'] = 0; // FOCUS
                requested_sets['RUNE_SET_<?=RUNE_SET_ID::ENDURE?>'] = 0; // ENDURE
                requested_sets['RUNE_SET_<?=RUNE_SET_ID::FATAL?>'] = 0; // FATAL
                requested_sets['RUNE_SET_<?=RUNE_SET_ID::DESPAIR?>'] = 0; // DESPAIR
                requested_sets['RUNE_SET_<?=RUNE_SET_ID::VAMPIRE?>'] = 0; // VAMPIRE
                requested_sets['RUNE_SET_<?=RUNE_SET_ID::VIOLENT?>'] = 0; // VIOLENT
                requested_sets['RUNE_SET_<?=RUNE_SET_ID::NEMESIS?>'] = 0; // NEMESIS
                requested_sets['RUNE_SET_<?=RUNE_SET_ID::WILL?>'] = 0; // WILL
                requested_sets['RUNE_SET_<?=RUNE_SET_ID::SHIELD?>'] = 0; // SHIELD
                requested_sets['RUNE_SET_<?=RUNE_SET_ID::REVENGE?>'] = 0; // REVENGE
                requested_sets['RUNE_SET_<?=RUNE_SET_ID::DESTROY?>'] = 0; // DESTROY
                requested_sets['RUNE_SET_<?=RUNE_SET_ID::FIGHT?>'] = 0; // FIGHT
                requested_sets['RUNE_SET_<?=RUNE_SET_ID::DETERMINATION?>'] = 0; // DETERMINATION
                requested_sets['RUNE_SET_<?=RUNE_SET_ID::ENHANCE?>'] = 0; // ENHANCE
                requested_sets['RUNE_SET_<?=RUNE_SET_ID::ACCURACY?>'] = 0; // acc
                requested_sets['RUNE_SET_<?=RUNE_SET_ID::TOLERANCE?>'] = 0; // TOLERANCE

                // Assign min stats for faster access later
                min_stats["ATK"] = document.getElementById('min_atk').value;
                min_stats["DEF"] = document.getElementById('min_def').value;
                min_stats["HP"]  = document.getElementById('min_hp').value;
                min_stats["SPD"] = document.getElementById('min_spd').value;
                min_stats["CRR"] = document.getElementById('min_crr').value;
                min_stats["CRD"] = document.getElementById('min_crd').value;
                min_stats["ACC"] = document.getElementById('min_acc').value;
                min_stats["RES"] = document.getElementById('min_res').value;
                min_stats["EHP"] = document.getElementById('min_ehp').value;
                min_stats["DMG"] = document.getElementById('min_dmg').value;
                
                var selected_1 = document.getElementById('set_1').options[document.getElementById('set_1').selectedIndex].value;
                var selected_2 = document.getElementById('set_2').options[document.getElementById('set_2').selectedIndex].value;
                var selected_3 = document.getElementById('set_3').options[document.getElementById('set_3').selectedIndex].value;
                var requested_values = [
                    document.getElementById('set_1').options[document.getElementById('set_1').selectedIndex].value,
                    document.getElementById('set_2').options[document.getElementById('set_2').selectedIndex].value,
                    document.getElementById('set_3').options[document.getElementById('set_3').selectedIndex].value
                ];
                for (var i = 0; i < 3; i ++){
                    switch (requested_values[i]){
                        case '<?=RUNE_SET_ID::ENERGY?>':
                        case '<?=RUNE_SET_ID::GUARD?>':
                        case '<?=RUNE_SET_ID::NEMESIS?>':
                        case '<?=RUNE_SET_ID::BLADE?>':
                        case '<?=RUNE_SET_ID::FOCUS?>':
                        case '<?=RUNE_SET_ID::ENDURE?>':
                        case '<?=RUNE_SET_ID::WILL?>':
                        case '<?=RUNE_SET_ID::SHIELD?>':
                        case '<?=RUNE_SET_ID::REVENGE?>':
                        case '<?=RUNE_SET_ID::DESTROY?>':
                        case '<?=RUNE_SET_ID::FIGHT?>':
                        case '<?=RUNE_SET_ID::DETERMINATION?>':
                        case '<?=RUNE_SET_ID::ENHANCE?>':
                        case '<?=RUNE_SET_ID::ACCURACY?>':
                        case '<?=RUNE_SET_ID::TOLERANCE?>':
                            requested_sets['RUNE_SET_' + requested_values[i]] += 2;
                            break;
                        case '<?=RUNE_SET_ID::DESPAIR?>':
                        case '<?=RUNE_SET_ID::SWIFT?>':
                        case '<?=RUNE_SET_ID::RAGE?>':
                        case '<?=RUNE_SET_ID::FATAL?>':
                        case '<?=RUNE_SET_ID::VAMPIRE?>':
                        case '<?=RUNE_SET_ID::VIOLENT?>':
                            requested_sets['RUNE_SET_' + requested_values[i]] += 4;
                            break;
                    }
                }

                requested_sets_json = JSON.stringify(requested_sets);
                //console.log(requested_sets_json);

                // Clear and calculate the new rune set stats
                set_stats['hp'] = 0;
                set_stats['atk'] = 0;
                set_stats['def'] = 0;
                set_stats['spd'] = 0;
                set_stats['crr'] = 0;
                set_stats['crd'] = 0;
                set_stats['acc'] = 0;
                set_stats['res'] = 0;
                var rune_sets = [
                    Number(document.getElementById('set_1').options[document.getElementById('set_1').selectedIndex].value),
                    Number(document.getElementById('set_2').options[document.getElementById('set_2').selectedIndex].value),
                    Number(document.getElementById('set_3').options[document.getElementById('set_3').selectedIndex].value)
                ];

                for (var i = 0; i < rune_sets.length; i ++){
                    switch (rune_sets[i]){
                        case <?=RUNE_SET_ID::ENERGY?>:
                            set_stats['hp'] += (base_stats['hp'] * 0.15);
                            break;
                        case <?=RUNE_SET_ID::GUARD?>:
                            set_stats['def'] += (base_stats['def'] * 0.15);
                            break;
                        case <?=RUNE_SET_ID::BLADE?>:
                            set_stats['crr'] += 12;
                            break;
                        case <?=RUNE_SET_ID::FOCUS?>:
                            set_stats['acc'] += 20;
                            break;
                        case <?=RUNE_SET_ID::ENDURE?>:
                            set_stats['res'] += 20;
                            break;
                        case <?=RUNE_SET_ID::FIGHT?>:
                            set_stats['atk'] += (base_stats['atk'] * 0.08);
                            break;
                        case <?=RUNE_SET_ID::DETERMINATION?>:
                            set_stats['def'] += (base_stats['def'] * 0.2);
                            break;
                        case <?=RUNE_SET_ID::ENHANCE?>:
                            set_stats['hp'] += (base_stats['hp'] * 0.2);
                            break;
                        case <?=RUNE_SET_ID::ACCURACY?>:
                            set_stats['acc'] += 10;
                            break;
                        case <?=RUNE_SET_ID::TOLERANCE?>:
                            set_stats['res'] += 10;
                            break;
                        case <?=RUNE_SET_ID::SWIFT?>:
                            set_stats['spd'] += (base_stats['spd'] * 0.24);
                            break;
                        case <?=RUNE_SET_ID::RAGE?>:
                            set_stats['crd'] += 40;
                            break;
                        case <?=RUNE_SET_ID::FATAL?>:
                            set_stats['atk'] += (base_stats['atk'] * 0.35);
                            break;
                    }
                }
                set_stats['hp'] = Math.floor(set_stats['hp']);
                // Send the request
                var xhttp = new XMLHttpRequest();
                xhttp.onreadystatechange = function() {
                    if (this.readyState == 4){
                        if (this.status == 200) {
                            time = ((+ new Date()) - timestamp) / 1000;
                            calculateOptimizations(this.response, time);
                        }
                        else{
                            enableNewSearch(true);
                            var time = ((+ new Date()) - timestamp) / 1000;
                            log('Error ' + this.status + '(' + time + 's)');

                            showMessage('Error', 'Unexpected error ' + this.status);
                        }
                    }
                };

                // DEBUG
                //params = 'player=8114048&unit=6441802832&limit=6&set[]=1&set[]=1&set[]=1&stat[]=2&stat[]=2&stat[]=2&source=0&tuning=2&min_def=800';

                // Clear result table, disable button and show spinner
                var container = document.getElementById('optimizations');
                while (container.firstChild) {
                    container.removeChild(container.firstChild);
                }
                enableNewSearch(false);
                document.getElementById('results').style.display = 'none';

                // Start timer
                timestamp = + new Date();

                // Make the request
                //console.log("SENDING REQUEST TO");
                xhttp.open('POST', '/action/optimize_list/', true);
                xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
                xhttp.send(params);
            }

            /**
             * Checks if a rune combination is a valid set. To do so, checks:
             *
             * - That the sets are valid
             * - That the sets are the same as requested
             * - That it complies with the filters min values.
             *
             * @param candidates Array of 6 runes
             * @return true if the set matches the criteria, false otherwise.
             */
            function valid_set(candidates){

                // Number of applied sets with the current candidates.
                var sets = {
                    'RUNE_SET_<?=RUNE_SET_ID::ENERGY?>': 0, // ENERGY
                    'RUNE_SET_<?=RUNE_SET_ID::GUARD?>': 0, // GUARD
                    'RUNE_SET_<?=RUNE_SET_ID::SWIFT?>': 0, // SWIFT
                    'RUNE_SET_<?=RUNE_SET_ID::BLADE?>': 0, // BLADE
                    'RUNE_SET_<?=RUNE_SET_ID::RAGE?>': 0, // RAGE
                    'RUNE_SET_<?=RUNE_SET_ID::FOCUS?>': 0, // FOCUS
                    'RUNE_SET_<?=RUNE_SET_ID::ENDURE?>': 0, // ENDURE
                    'RUNE_SET_<?=RUNE_SET_ID::FATAL?>': 0, // FATAL
                    'RUNE_SET_<?=RUNE_SET_ID::DESPAIR?>': 0, // DESPAIR
                    'RUNE_SET_<?=RUNE_SET_ID::VAMPIRE?>': 0, // VAMPIRE
                    'RUNE_SET_<?=RUNE_SET_ID::VIOLENT?>': 0, // VIOLENT
                    'RUNE_SET_<?=RUNE_SET_ID::NEMESIS?>': 0, // NEMESIS
                    'RUNE_SET_<?=RUNE_SET_ID::WILL?>': 0, // WILL
                    'RUNE_SET_<?=RUNE_SET_ID::SHIELD?>': 0, // SHIELD
                    'RUNE_SET_<?=RUNE_SET_ID::REVENGE?>': 0, // REVENGE
                    'RUNE_SET_<?=RUNE_SET_ID::DESTROY?>': 0, // DESTROY
                    'RUNE_SET_<?=RUNE_SET_ID::FIGHT?>': 0, // FIGHT
                    'RUNE_SET_<?=RUNE_SET_ID::DETERMINATION?>': 0, // DETERMINATION
                    'RUNE_SET_<?=RUNE_SET_ID::ENHANCE?>': 0, // ENHANCE
                    'RUNE_SET_<?=RUNE_SET_ID::ACCURACY?>': 0, // acc
                    'RUNE_SET_<?=RUNE_SET_ID::TOLERANCE?>': 0 // TOLERANCE
                };
                for (var i = 0; i <= 5; i ++){
                    //console.log("CANDIDATE " + i);
                    sets['RUNE_SET_' + candidates[i].TYPE] ++;
                }
                // TEST I think i dont need to check for valid sets, only that
                // they match the requested sets.
                /*for (var i = 0; i < sets.length; i ++){
                    switch (i){
                        case <?=RUNE_SET_ID::ENERGY?>:
                        case <?=RUNE_SET_ID::GUARD?>:
                        case <?=RUNE_SET_ID::NEMESIS?>:
                        case <?=RUNE_SET_ID::BLADE?>:
                        case <?=RUNE_SET_ID::FOCUS?>:
                        case <?=RUNE_SET_ID::ENDURE?>:
                        case <?=RUNE_SET_ID::WILL?>:
                        case <?=RUNE_SET_ID::SHIELD?>:
                        case <?=RUNE_SET_ID::REVENGE?>:
                        case <?=RUNE_SET_ID::DESTROY?>:
                        case <?=RUNE_SET_ID::FIGHT?>:
                        case <?=RUNE_SET_ID::DETERMINATION?>:
                        case <?=RUNE_SET_ID::ENHANCE?>:
                        case <?=RUNE_SET_ID::ACCURACY?>:
                        case <?=RUNE_SET_ID::TOLERANCE?>:
                            if (sets[i] % 2 != 0){
                                return false;
                            }
                            break;

                        case <?=RUNE_SET_ID::DESPAIR?>:
                        case <?=RUNE_SET_ID::SWIFT?>:
                        case <?=RUNE_SET_ID::RAGE?>:
                        case <?=RUNE_SET_ID::FATAL?>:
                        case <?=RUNE_SET_ID::VAMPIRE?>:
                        case <?=RUNE_SET_ID::VIOLENT?>:
                            if (sets[i] != 4 && sets[i] != 0){
                                return false;
                            }
                            break;
                    }
                }*/

                /*console.log(sets['RUNE_SET_<?=RUNE_SET_ID::ENERGY?>']);
                if (sets['RUNE_SET_<?=RUNE_SET_ID::ENERGY?>'] == 6){
                    console.log("Should be valid");
                }*/

                // Its a valid set, but does it match the requested sets?
                if (JSON.stringify(sets) !== requested_sets_json){
                    //console.log(JSON.stringify(sets));
                    return false;
                }
                //console.log("VALID SET");

                // Compare with filters
                var new_stats = {
                    "ATK": base_stats["atk"] + set_stats["atk"],
                    "DEF": base_stats["def"] + set_stats["def"],
                    "HP":  base_stats["hp"] + set_stats["hp"],
                    "SPD": base_stats["spd"] + set_stats["spd"],
                    "CRR": base_stats["crr"] + set_stats["crr"],
                    "CRD": base_stats["crd"] + set_stats["crd"],
                    "ACC": base_stats["acc"] + set_stats["acc"],
                    "RES": base_stats["res"] + set_stats["res"],
                    "EHP": 0,
                    "DMG": 0
                }
                for (var i = 0; i <= 5; i ++){
                    new_stats["ATK"] += candidates[i].ATK;
                    new_stats["DEF"] += candidates[i].DEF;
                    new_stats["HP"]  += candidates[i].HP;
                    new_stats["SPD"] += candidates[i].SPD;
                    new_stats["CRR"] += candidates[i].CRR;
                    new_stats["CRD"] += candidates[i].CRD;
                    new_stats["ACC"] += candidates[i].ACC;
                    new_stats["RES"] += candidates[i].RES;
                }
                new_stats["HP"] = Math.floor(new_stats["HP"]);
                //console.log("CANDIDATES NEW HP: " + new_stats["HP"] + " MINIMUM IS " + min_stats["HP"]);

                new_stats["EHP"] = Math.ceil((((new_stats["DEF"] * 3.5) + 1140) * new_stats["HP"]) / 1000);
                new_stats["DMG"] = Math.ceil((new_stats["ATK"] * (100 - new_stats["CRR"]) / 100) + ((new_stats["ATK"] + (new_stats["ATK"] * new_stats["CRD"] / 100)) * new_stats["CRR"] / 100));
                if (
                    new_stats["ATK"] >= min_stats["ATK"] &&
                    new_stats["DEF"] >= min_stats["DEF"] &&
                    new_stats["HP"]  >= min_stats["HP"] &&
                    new_stats["SPD"] >= min_stats["SPD"] &&
                    new_stats["CRR"] >= min_stats["CRR"] &&
                    new_stats["CRD"] >= min_stats["CRD"] &&
                    new_stats["ACC"] >= min_stats["ACC"] &&
                    new_stats["RES"] >= min_stats["RES"] &&
                    new_stats["EHP"] >= min_stats["EHP"] &&
                    new_stats["DMG"] >= min_stats["DMG"]
                ){
                    return true;
                }
                return false;
            }

            /**
             * Parses the received runes and looks for valid candidates.
             * Once it's done, it calls the server agai to get rune info.
             *
             * @param content JSON received from server.
             */
            async function calculateOptimizations(content, time){
                 //console.log("CALCULATING...")
                var container = document.getElementById('optimizations');
                var data = JSON.parse(content);

                // Create a 0-index array grouped by slot
                var candidates = [
                    data[1],
                    data[2],
                    data[3],
                    data[4],
                    data[5],
                    data[6]
                ];

                // Calculate total combinations.
                var total_runes = data[1].length +  data[2].length +  data[3].length +  data[4].length +  data[5].length +  data[6].length;
                var total_combinations = data[1].length *  data[2].length *  data[3].length *  data[4].length *  data[5].length *  data[6].length;
                if (total_combinations == 0){
                    var time = ((+ new Date()) - timestamp) / 1000;
                    log('No rune combinations found (' + time + 's)');
                    enableNewSearch(true);
                    showMessage('No results', 'No runes found matching your criteria.');
                }
                var time = ((+ new Date()) - timestamp) / 1000;
                log(total_runes + ' runes found (' + total_combinations + ' combinations) (' + time + 's)');
                log('  By slot: ' + data[1].length + ', ' + data[2].length + ', ' + data[3].length + ', ' + data[4].length + ', ' + data[5].length + ', ' + data[6].length);
                // TODO Prevent user on high numbers
                if (total_combinations > 10000000){
                    showMessage('Too many combinations', total_combinations + ' combinations found, unable to process. Please focus your reuest.');
                    enableNewSearch(true);
                    log('Operation canceled');
                    return;
                }
                if (total_combinations > 1000000 && confirm(total_combinations + " combinations found. This operation may slow your browser. Continue?") == false){
                    enableNewSearch(true);
                    log('Operation canceled');
                    return;
                }
                var checked_combinations = 0;

                // Valid combinations that match the minimum requeriments
                var valid_combinations = [];

                // Counters to keep track on array indexes
                var counters = [0, 0, 0, 0, 0, 0];
                // Loop all posible combinations. When a valid set is found,
                // add it to valid_combinations
                while (true){

                    if (valid_set([
                      candidates[0][counters[0]],
                      candidates[1][counters[1]],
                      candidates[2][counters[2]],
                      candidates[3][counters[3]],
                      candidates[4][counters[4]],
                      candidates[5][counters[5]]
                    ])){
                        valid_combinations.push({
                            'score': 0,
                            'runes': [
                                candidates[0][counters[0]],
                                candidates[1][counters[1]],
                                candidates[2][counters[2]],
                                candidates[3][counters[3]],
                                candidates[4][counters[4]],
                                candidates[5][counters[5]]
                            ]
                        });
                    }

                    // Increase counters
                    checked_combinations ++;
                    counters[5] ++;
                    if (counters[5] >= candidates[5].length){
                        counters[5] = 0;
                        counters[4] ++;
                    }
                    if (counters[4] >= candidates[4].length){
                        counters[4] = 0;
                        counters[3] ++;
                    }
                    if (counters[3] >= candidates[3].length){
                        counters[3] = 0;
                        counters[2] ++;
                    }
                    if (counters[2] >= candidates[2].length){
                        counters[2] = 0;
                        counters[1] ++;
                    }
                    if (counters[1] >= candidates[1].length){
                        counters[1] = 0;
                        counters[0] ++;
                    }
                    if (counters[0] >= candidates[0].length){
                        break;
                    }

                    /*if (checked_combinations % 1000 == 0){
                        console.log("COMBINATIONS CHECKED: " + checked_combinations + " / " + total_combinations + "(" + (checked_combinations * 100 / total_combinations) + "%)");
                        console.log("  0:  " + counters[0] + "/" + candidates[0].length);
                        console.log("  1:  " + counters[1] + "/" + candidates[1].length);
                        console.log("  2:  " + counters[2] + "/" + candidates[2].length);
                        console.log("  3:  " + counters[3] + "/" + candidates[3].length);
                        console.log("  4:  " + counters[4] + "/" + candidates[4].length);
                        console.log("  5:  " + counters[5] + "/" + candidates[5].length);
                    }*/
                }

                // If no valid combinations: exit now
                if (valid_combinations.length == 0){
                    enableNewSearch(true);
                    var time = ((+ new Date()) - timestamp) / 1000;
                    log('No suitable combination found (' + time + 's).');
                    showMessage('No results', 'No suitable combination found. Plesase relax your criteria and retry.');
                }
                // Foreach valid combination, rate it and sort the array
                for (var i = 0; i < valid_combinations.length; i ++){
                    for (var r = 0; r < 6; r ++){
                        valid_combinations[i]['score'] += valid_combinations[i]["runes"][r]["ATK"];
                        valid_combinations[i]['score'] += valid_combinations[i]["runes"][r]["DEF"];
                        valid_combinations[i]['score'] += (valid_combinations[i]["runes"][r]["HP"] / 15);
                        valid_combinations[i]['score'] += (valid_combinations[i]["runes"][r]["SPD"] * 1.5);
                        valid_combinations[i]['score'] += (valid_combinations[i]["runes"][r]["CRR"] * 1.2);
                        valid_combinations[i]['score'] += (valid_combinations[i]["runes"][r]["CRD"] * 1.2);
                        valid_combinations[i]['score'] += (valid_combinations[i]["runes"][r]["ACC"] * 1.2);
                        valid_combinations[i]['score'] += (valid_combinations[i]["runes"][r]["ATK"] * 1.2);
                    }
                }
                var time = ((+ new Date()) - timestamp) / 1000;
                log(valid_combinations.length + ' suitable combinations found (' + time + 's)');
                valid_combinations.sort(function(a, b) {return b['score'] - a['score'];});
                if (valid_combinations.length > document.getElementById('limit').value){
                    var time = ((+ new Date()) - timestamp) / 1000;
                    log('Selecting the ' + document.getElementById('limit').value + ' best combinations (' + time + 's)');
                    valid_combinations = valid_combinations.slice(0, document.getElementById('limit').value);
                }

                // Request to fetch the runes.
                var xhttp = new XMLHttpRequest();
                xhttp.onreadystatechange = function() {
                    if (this.readyState == 4){
                        if (this.status == 200) {
                            //time = ((+ new Date()) - timestamp) / 1000;
                            presentOptions(this.response, timestamp);
                        }
                        else{
                            enableNewSearch(true);
                            showMessage('Error', 'Unexpected error ' + this.status);
                        }
                    }
                };
                params = 'player=<?=get_context()->get_player()->get_id()?>&unit=<?=$page->get_unit()->get_id()?>&tuning=' + document.getElementById('tuning').options[document.getElementById('tuning').selectedIndex].value;
                params += '&options=' + JSON.stringify(valid_combinations);
                xhttp.open('POST', '/action/optimize_options/', true);
                xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
                xhttp.send(params);
                return;
            }

            /**
             * Displays the options.
             *
             * Builds a table with the calculated options and their scores.
             * If none. It will show a message. In any case, it reenables the search
             * button
             *
             * @param content Response from /action/optimize_options/
             * @param timestamp Time counter
             */
            function presentOptions(content, timestamp){
                var container = document.getElementById('optimizations');
                var data = JSON.parse(content);
                if (data.length == 0){
                    enableNewSearch(true);
                    return;
                }
                var option;
                var tr;
                var td;
                var stat_table;
                var stat_tr;
                var stat_td;
                var span;
                var text;
                for (i = 0; i < data.length; i++){
                    option = data[i];

                    // Add the rune set stats
                    option.stats.atk += set_stats['atk'];
                    option.stats.def += set_stats['def'];
                    option.stats.hp += set_stats['hp'];
                    option.stats.spd += set_stats['spd'];
                    option.stats.crr += set_stats['crr'];
                    option.stats.crd += set_stats['crd'];
                    option.stats.acc += set_stats['acc'];
                    option.stats.res += set_stats['res'];

                    tr = document.createElement('tr');
                    td = document.createElement('td');
                    td.setAttribute('class', 'option_stats');
                    stat_table = document.createElement('table');
                    stat_table.setAttribute('class', 'stat_table');

                    // atk
                    stat_tr = document.createElement('tr');
                    stat_td = document.createElement('td');
                    stat_td.setAttribute('class', 'label');
                    text = document.createTextNode('ATK');
                    stat_td.appendChild(text);
                    stat_tr.appendChild(stat_td);
                    stat_td = document.createElement('td');
                    stat_td.setAttribute('class', 'value');
                    span = document.createElement('span');
                    span.setAttribute('class', 'stat');
                    text = document.createTextNode(option.stats.atk + " ");
                    span.appendChild(text);
                    stat_td.appendChild(span);
                    span = document.createElement('span');
                    if (Number(option.stats.atk) > Number(current_stats["atk"])){

                        span.setAttribute('class', 'variation increment');
                        text = document.createTextNode(option.stats.atk - current_stats["atk"]);

                    }
                    else if (Number(option.stats.atk) < Number(current_stats["atk"])){
                        span.setAttribute('class', 'variation decrement');
                        text = document.createTextNode(current_stats["atk"] - option.stats.atk);

                    }
                    else{
                        span.setAttribute('class', 'variation');
                        text = document.createTextNode(" ");
                    }
                    span.appendChild(text);
                    stat_td.appendChild(span);
                    stat_tr.appendChild(stat_td);
                    stat_table.appendChild(stat_tr);

                    // def
                    stat_tr = document.createElement('tr');
                    stat_td = document.createElement('td');
                    stat_td.setAttribute('class', 'label');
                    text = document.createTextNode('DEF');
                    stat_td.appendChild(text);
                    stat_tr.appendChild(stat_td);
                    stat_td = document.createElement('td');
                    stat_td.setAttribute('class', 'value');
                    span = document.createElement('span');
                    span.setAttribute('class', 'stat');
                    text = document.createTextNode(option.stats.def + " ");
                    span.appendChild(text);
                    stat_td.appendChild(span);
                    span = document.createElement('span');
                    if (Number(option.stats.def) > Number(current_stats["def"])){

                        span.setAttribute('class', 'variation increment');
                        text = document.createTextNode(option.stats.def - current_stats["def"]);

                    }
                    else if (Number(option.stats.def) < Number(current_stats["def"])){
                        span.setAttribute('class', 'variation decrement');
                        text = document.createTextNode(current_stats["def"] - option.stats.def);

                    }
                    else{
                        span.setAttribute('class', 'variation');
                        text = document.createTextNode(" ");
                    }
                    span.appendChild(text);
                    stat_td.appendChild(span);
                    stat_tr.appendChild(stat_td);
                    stat_table.appendChild(stat_tr);

                    // hp
                    stat_tr = document.createElement('tr');
                    stat_td = document.createElement('td');
                    stat_td.setAttribute('class', 'label');
                    text = document.createTextNode('HP ');
                    stat_td.appendChild(text);
                    stat_tr.appendChild(stat_td);
                    stat_td = document.createElement('td');
                    stat_td.setAttribute('class', 'value');
                    span = document.createElement('span');
                    span.setAttribute('class', 'stat');
                    text = document.createTextNode(option.stats.hp + " ");
                    span.appendChild(text);
                    stat_td.appendChild(span);
                    span = document.createElement('span');
                    if (Number(option.stats.hp) > Number(current_stats["hp"])){

                        span.setAttribute('class', 'variation increment');
                        text = document.createTextNode(option.stats.hp - current_stats["hp"]);

                    }
                    else if (Number(option.stats.hp) < Number(current_stats["hp"])){
                        span.setAttribute('class', 'variation decrement');
                        text = document.createTextNode(current_stats["hp"] - option.stats.hp);

                    }
                    else{
                        span.setAttribute('class', 'variation');
                        text = document.createTextNode(" ");
                    }
                    span.appendChild(text);
                    stat_td.appendChild(span);
                    stat_tr.appendChild(stat_td);
                    stat_table.appendChild(stat_tr);

                    // spd
                    stat_tr = document.createElement('tr');
                    stat_td = document.createElement('td');
                    stat_td.setAttribute('class', 'label');
                    text = document.createTextNode('SPD');
                    stat_td.appendChild(text);
                    stat_tr.appendChild(stat_td);
                    stat_td = document.createElement('td');
                    stat_td.setAttribute('class', 'value');
                    span = document.createElement('span');
                    span.setAttribute('class', 'stat');
                    text = document.createTextNode(option.stats.spd + " ");
                    span.appendChild(text);
                    stat_td.appendChild(span);
                    span = document.createElement('span');
                    if (Number(option.stats.spd) > Number(current_stats["spd"])){

                        span.setAttribute('class', 'variation increment');
                        text = document.createTextNode(option.stats.spd - current_stats["spd"]);

                    }
                    else if (Number(option.stats.spd) < Number(current_stats["spd"])){
                        span.setAttribute('class', 'variation decrement');
                        text = document.createTextNode(current_stats["spd"] - option.stats.spd);

                    }
                    else{
                        span.setAttribute('class', 'variation');
                        text = document.createTextNode(" ");
                    }
                    span.appendChild(text);
                    stat_td.appendChild(span);
                    stat_tr.appendChild(stat_td);
                    stat_table.appendChild(stat_tr);

                    // crr
                    stat_tr = document.createElement('tr');
                    stat_td = document.createElement('td');
                    stat_td.setAttribute('class', 'label');
                    text = document.createTextNode('CRR');
                    stat_td.appendChild(text);
                    stat_tr.appendChild(stat_td);
                    stat_td = document.createElement('td');
                    stat_td.setAttribute('class', 'value');
                    span = document.createElement('span');
                    span.setAttribute('class', 'stat');
                    text = document.createTextNode(option.stats.crr + "%");
                    span.appendChild(text);
                    stat_td.appendChild(span);
                    span = document.createElement('span');
                    if (Number(option.stats.crr) > Number(current_stats["crr"])){

                        span.setAttribute('class', 'variation increment');
                        text = document.createTextNode(option.stats.crr - current_stats["crr"]);

                    }
                    else if (Number(option.stats.crr) < Number(current_stats["crr"])){
                        span.setAttribute('class', 'variation decrement');
                        text = document.createTextNode(current_stats["crr"] - option.stats.crr);

                    }
                    else{
                        span.setAttribute('class', 'variation');
                        text = document.createTextNode(" ");
                    }
                    span.appendChild(text);
                    stat_td.appendChild(span);
                    stat_tr.appendChild(stat_td);
                    stat_table.appendChild(stat_tr);

                    // crd
                    stat_tr = document.createElement('tr');
                    stat_td = document.createElement('td');
                    stat_td.setAttribute('class', 'label');
                    text = document.createTextNode('CRD');
                    stat_td.appendChild(text);
                    stat_tr.appendChild(stat_td);
                    stat_td = document.createElement('td');
                    stat_td.setAttribute('class', 'value');
                    span = document.createElement('span');
                    span.setAttribute('class', 'stat');
                    text = document.createTextNode(option.stats.crd + "%");
                    span.appendChild(text);
                    stat_td.appendChild(span);
                    span = document.createElement('span');
                    if (Number(option.stats.crd) > Number(current_stats["crd"])){

                        span.setAttribute('class', 'variation increment');
                        text = document.createTextNode(option.stats.crd - current_stats["crd"]);

                    }
                    else if (Number(option.stats.crd) < Number(current_stats["crd"])){
                        span.setAttribute('class', 'variation decrement');
                        text = document.createTextNode(current_stats["crd"] - option.stats.crd);

                    }
                    else{
                        span.setAttribute('class', 'variation');
                        text = document.createTextNode(" ");
                    }
                    span.appendChild(text);
                    stat_td.appendChild(span);
                    stat_tr.appendChild(stat_td);
                    stat_table.appendChild(stat_tr);

                    // acc
                    stat_tr = document.createElement('tr');
                    stat_td = document.createElement('td');
                    stat_td.setAttribute('class', 'label');
                    text = document.createTextNode('ACC');
                    stat_td.appendChild(text);
                    stat_tr.appendChild(stat_td);
                    stat_td = document.createElement('td');
                    stat_td.setAttribute('class', 'value');
                    span = document.createElement('span');
                    span.setAttribute('class', 'stat');
                    text = document.createTextNode(option.stats.acc + "%");
                    span.appendChild(text);
                    stat_td.appendChild(span);
                    span = document.createElement('span');
                    if (Number(option.stats.acc) > Number(current_stats["acc"])){

                        span.setAttribute('class', 'variation increment');
                        text = document.createTextNode(option.stats.acc - current_stats["acc"]);

                    }
                    else if (Number(option.stats.acc) < Number(current_stats["acc"])){
                        span.setAttribute('class', 'variation decrement');
                        text = document.createTextNode(current_stats["acc"] - option.stats.acc);

                    }
                    else{
                        span.setAttribute('class', 'variation');
                        text = document.createTextNode(" ");
                    }
                    span.appendChild(text);
                    stat_td.appendChild(span);
                    stat_tr.appendChild(stat_td);
                    stat_table.appendChild(stat_tr);

                    // res
                    stat_tr = document.createElement('tr');
                    stat_td = document.createElement('td');
                    stat_td.setAttribute('class', 'label');
                    text = document.createTextNode('RES');
                    stat_td.appendChild(text);
                    stat_tr.appendChild(stat_td);
                    stat_td = document.createElement('td');
                    stat_td.setAttribute('class', 'value');
                    span = document.createElement('span');
                    span.setAttribute('class', 'stat');
                    text = document.createTextNode(option.stats.res + "%");
                    span.appendChild(text);
                    stat_td.appendChild(span);
                    span = document.createElement('span');
                    if (Number(option.stats.res) > Number(current_stats["res"])){

                        span.setAttribute('class', 'variation increment');
                        text = document.createTextNode(option.stats.res - current_stats["res"]);

                    }
                    else if (Number(option.stats.res) < Number(current_stats["res"])){
                        span.setAttribute('class', 'variation decrement');
                        text = document.createTextNode(current_stats["res"] - option.stats.res);

                    }
                    else{
                        span.setAttribute('class', 'variation');
                        text = document.createTextNode(" ");
                    }
                    span.appendChild(text);
                    stat_td.appendChild(span);
                    stat_tr.appendChild(stat_td);
                    stat_table.appendChild(stat_tr);

                    // ehp
                    stat_tr = document.createElement('tr');
                    stat_td = document.createElement('td');
                    stat_td.setAttribute('class', 'label');
                    text = document.createTextNode('EHP');
                    stat_td.appendChild(text);
                    stat_tr.appendChild(stat_td);
                    stat_td = document.createElement('td');
                    stat_td.setAttribute('class', 'value');
                    span = document.createElement('span');
                    span.setAttribute('class', 'stat');
                    text = document.createTextNode(option.stats.ehp + " ");
                    span.appendChild(text);
                    stat_td.appendChild(span);
                    span = document.createElement('span');
                    if (Number(option.stats.ehp) > Number(current_stats["ehp"])){

                        span.setAttribute('class', 'variation increment');
                        text = document.createTextNode(option.stats.ehp - current_stats["ehp"]);

                    }
                    else if (Number(option.stats.ehp) < Number(current_stats["ehp"])){
                        span.setAttribute('class', 'variation decrement');
                        text = document.createTextNode(current_stats["ehp"] - option.stats.ehp);

                    }
                    else{
                        span.setAttribute('class', 'variation');
                        text = document.createTextNode(" ");
                    }
                    span.appendChild(text);
                    stat_td.appendChild(span);
                    stat_tr.appendChild(stat_td);
                    stat_table.appendChild(stat_tr);

                    // dmg
                    stat_tr = document.createElement('tr');
                    stat_td = document.createElement('td');
                    stat_td.setAttribute('class', 'label');
                    text = document.createTextNode('DMG');
                    stat_td.appendChild(text);
                    stat_tr.appendChild(stat_td);
                    stat_td = document.createElement('td');
                    stat_td.setAttribute('class', 'value');
                    span = document.createElement('span');
                    span.setAttribute('class', 'stat');
                    text = document.createTextNode(option.stats.dmg + " ");
                    span.appendChild(text);
                    stat_td.appendChild(span);
                    span = document.createElement('span');
                    if (Number(option.stats.dmg) > Number(current_stats["dmg"])){

                        span.setAttribute('class', 'variation increment');
                        text = document.createTextNode(option.stats.dmg - current_stats["dmg"]);

                    }
                    else if (Number(option.stats.dmg) < Number(current_stats["dmg"])){
                        span.setAttribute('class', 'variation decrement');
                        text = document.createTextNode(current_stats["dmg"] - option.stats.dmg);

                    }
                    else{
                        span.setAttribute('class', 'variation');
                        text = document.createTextNode(" ");
                    }
                    span.appendChild(text);
                    stat_td.appendChild(span);
                    stat_tr.appendChild(stat_td);
                    stat_table.appendChild(stat_tr);

                    // Add to the main table
                    td.appendChild(stat_table);
                    tr.appendChild(td);

                    // Runes td
                    td = document.createElement('td');
                    td.setAttribute('class', 'runes');
                    td.innerHTML += option.runes[6 - 1].html;
                    td.innerHTML += option.runes[1 - 1].html;
                    td.innerHTML += option.runes[2 - 1].html;
                    td.innerHTML += "<br/>";
                    td.innerHTML += option.runes[5 - 1].html;
                    td.innerHTML += option.runes[4 - 1].html;
                    td.innerHTML += option.runes[3 - 1].html;

                    // Add the table
                    tr.appendChild(td);
                    container.appendChild(tr);

                    // Make the section visible
                    document.getElementById('results').style.display = 'block';

                }
                time = ((+ new Date()) - timestamp) / 1000;
                log('Done in ' + time + ' seconds');
                enableNewSearch(true);
            }

            /**
             * Function to sort rune combinations based on their score.
             *
             * @param a One combination.
             * @param b Other combination.
             * @return Numeric index for sorting.
             */
            function sortOptions(a, b) {
                return b["score"] - a["score"];
            }

            /**
             * Displays a pop-up message.
             *
             * @param title Message title.
             * @param text Message content.
             */
            function showMessage(title, text){
                document.getElementById('message_title').innerHTML = title;
                document.getElementById('message_text').innerHTML = text;
                document.getElementById('message_container').style.display = 'block';
            }

            /**
             * Closes the message pop-up.
             */
            function closeMessage(){
                document.getElementById('message_container').style.display = 'none';
            }

            /**
             * DEBUG FUNCTION
             *
             * Sets filters to a known value for debugging.
             */
            function debug(){
                document.getElementById('set_1').selectedIndex = 0;
                document.getElementById('set_2').selectedIndex = 0;
                document.getElementById('set_3').selectedIndex = 1;
                removeFilter('atk');
                removeFilter('def');
                removeFilter('spd');
                removeFilter('crr');
                removeFilter('crd');
                removeFilter('acc');
                removeFilter('res');
                removeFilter('ehp');
                removeFilter('dmg');
                document.getElementById('lbl_min_hp').value = 13500;
                updateMinValue('hp', document.getElementById('lbl_min_hp'));
            }
        </script>
    </head>
    <body>
        <header>
<?php
            include __DIR__ . "/inc/header_app.php";
            include __DIR__ . "/inc/header_player.php";
?>
        </header>
        <aside>
            <h2>
                Optimize <?=$page->get_unit()->get_title()?>
            </h2>
            <div id='monster_info'>
                <div class='monster_panel'>
                    <?=HTML::unit_panel($page->get_unit())?>
                </div>
                <div id='monster_details'>
<?php
                        if (sizeof($page->get_unit()->get_teams()) > 0){
?>
                        <div id='teams'>
                            <h4>
                                Teams:
                            </h4>
                            <ul>
<?php
                                foreach($page->get_unit()->get_teams() as $team){
?>
                                    <li>
                                        <a target='blank' href='/player/<?=get_context()->get_player()->get_id()?>/teams/<?=$team->get_id()?>'>
                                            <?=$team->get_name()?>
                                        </a>
                                    </li>
<?php
                                }
?>
                            </ul>
                        </div>
<?php
                    }
?>
                </div>
            </div>
        </aside>
        <main>
            <section id='monster' class='content'>
                <h2>
                    Optimize <?=$page->get_unit()->get_title()?>
                </h2>
                <article id='profile'>
                    <table id='stats'>
                        <tr>
                            <th>
                                Stats
                            </th>
                            <th>
                                Base
                            </th>
                            <th>
                                Runes
                            </th>
                            <th>
                                Artif.
                            </th>
                            <th>
                                Bldg.
                            </th>
                            <th>
                                Total
                            </th>
                        </tr>
                        <tr>
                            <th>
                                ATK
                            </th>
                            <td class='base'>
                                <?=$page->get_unit()->get_base_stats()["atk"]?>
                                <span class='percent'>&nbsp;</span>
                            </td>
                            <td class='extra'>
                                +<?=$page->get_unit()->get_rune_stats()["atk"]?>
                                <span class='percent'>&nbsp;</span>
                            </td>
                            <td class='extra'>
                                +<?=$page->get_unit()->get_artifact_stats()["atk"]?>
                                <span class='percent'>&nbsp;</span>
                            </td>
                            <td class='extra'>
                                +<?=$page->get_unit()->get_building_stats()["atk"]?>
                                <span class='percent'>&nbsp;</span>
                            </td>
                            <td class='total'>
                                <?=$page->get_unit()->get_stats()["atk"]?>
                                <span class='percent'>&nbsp;</span>
                            </td>
                        </tr>
                        <tr>
                            <th>
                                DEF
                            </th>
                            <td class='base'>
                                <?=$page->get_unit()->get_base_stats()["def"]?>
                                <span class='percent'>&nbsp;</span>
                            </td>
                            <td class='extra'>
                                +<?=$page->get_unit()->get_rune_stats()["def"]?>
                                <span class='percent'>&nbsp;</span>
                            </td>
                            <td class='extra'>
                                +<?=$page->get_unit()->get_artifact_stats()["def"]?>
                                <span class='percent'>&nbsp;</span>
                            </td>
                            <td class='extra'>
                                +<?=$page->get_unit()->get_building_stats()["def"]?>
                                <span class='percent'>&nbsp;</span>
                            </td>
                            <td class='total'>
                                <?=$page->get_unit()->get_stats()["def"]?>
                                <span class='percent'>&nbsp;</span>
                            </td>
                        </tr>
                        <tr>
                            <th>
                                HP
                            </th>
                            <td class='base'>
                                <?=$page->get_unit()->get_base_stats()["hp"]?>
                                <span class='percent'>&nbsp;</span>
                            </td>
                            <td class='extra'>
                                +<?=$page->get_unit()->get_rune_stats()["hp"]?>
                                <span class='percent'>&nbsp;</span>
                            </td>
                            <td class='extra'>
                                +<?=$page->get_unit()->get_artifact_stats()["hp"]?>
                                <span class='percent'>&nbsp;</span>
                            </td>
                            <td class='extra'>
                                +<?=$page->get_unit()->get_building_stats()["hp"]?>
                                <span class='percent'>&nbsp;</span>
                            </td>
                            <td class='total'>
                                <?=$page->get_unit()->get_stats()["hp"]?>
                                <span class='percent'>&nbsp;</span>
                            </td>
                        </tr>
                        <tr>
                            <th>
                                SPD
                            </th>
                            <td class='base'>
                                <?=$page->get_unit()->get_base_stats()["spd"]?>
                                <span class='percent'>&nbsp;</span>
                            </td>
                            <td class='extra'>
                                +<?=$page->get_unit()->get_rune_stats()["spd"]?>
                                <span class='percent'>&nbsp;</span>
                            </td>
                            <td class='extra'>
                                +<?=$page->get_unit()->get_artifact_stats()["spd"]?>
                                <span class='percent'>&nbsp;</span>
                            </td>
                            <td class='extra'>
                                +<?=$page->get_unit()->get_building_stats()["spd"]?>
                                <span class='percent'>&nbsp;</span>
                            </td>
                            <td class='total'>
                                <?=$page->get_unit()->get_stats()["spd"]?>
                                <span class='percent'>&nbsp;</span>
                            </td>
                        </tr>
                        <tr>
                            <th>
                                CRR
                            </th>
                            <td class='base'>
                                <?=$page->get_unit()->get_base_stats()["crr"]?>
                                <span class='percent'>%</span>
                            </td>
                            <td class='extra'>
                                +<?=$page->get_unit()->get_rune_stats()["crr"]?>
                                <span class='percent'>%</span>
                            </td>
                            <td class='extra'>
                                +<?=$page->get_unit()->get_artifact_stats()["crr"]?>
                                <span class='percent'>%</span>
                            </td>
                            <td class='extra'>
                                +<?=$page->get_unit()->get_building_stats()["crr"]?>
                                <span class='percent'>%</span>
                            </td>
                            <td class='total'>
                                <?=$page->get_unit()->get_stats()["crr"]?>
                                <span class='percent'>%</span>
                            </td>
                        </tr>
                        <tr>
                            <th>
                                CRD
                            </th>
                            <td class='base'>
                                <?=$page->get_unit()->get_base_stats()["crd"]?>
                                <span class='percent'>%</span>
                            </td>
                            <td class='extra'>
                                +<?=$page->get_unit()->get_rune_stats()["crd"]?>
                                <span class='percent'>%</span>
                            </td>
                            <td class='extra'>
                                +<?=$page->get_unit()->get_artifact_stats()["crd"]?>
                                <span class='percent'>%</span>
                            </td>
                            <td class='extra'>
                                +<?=$page->get_unit()->get_building_stats()["crd"]?>
                                <span class='percent'>%</span>
                            </td>
                            <td class='total'>
                                <?=$page->get_unit()->get_stats()["crd"]?>
                                <span class='percent'>%</span>
                            </td>
                        </tr>
                        <tr>
                            <th>
                                ACC
                            </th>
                            <td class='base'>
                                <?=$page->get_unit()->get_base_stats()["acc"]?>
                                <span class='percent'>%</span>
                            </td>
                            <td class='extra'>
                                +<?=$page->get_unit()->get_rune_stats()["acc"]?>
                                <span class='percent'>%</span>
                            </td>
                            <td class='extra'>
                                +<?=$page->get_unit()->get_artifact_stats()["acc"]?>
                                <span class='percent'>%</span>
                            </td>
                            <td class='extra'>
                                +<?=$page->get_unit()->get_building_stats()["acc"]?>
                                <span class='percent'>%</span>
                            </td>
                            <td class='total'>
                                <?=$page->get_unit()->get_stats()["acc"]?>
                                <span class='percent'>%</span>
                            </td>
                        </tr>
                        <tr>
                            <th>
                                RES
                            </th>
                            <td class='base'>
                                <?=$page->get_unit()->get_base_stats()["res"]?>
                                <span class='percent'>%</span>
                            </td>
                            <td class='extra'>
                                +<?=$page->get_unit()->get_rune_stats()["res"]?>
                                <span class='percent'>%</span>
                            </td>
                            <td class='extra'>
                                +<?=$page->get_unit()->get_artifact_stats()["res"]?>
                                <span class='percent'>%</span>
                            </td>
                            <td class='extra'>
                                +<?=$page->get_unit()->get_building_stats()["res"]?>
                                <span class='percent'>%</span>
                            </td>
                            <td class='total'>
                                <?=$page->get_unit()->get_stats()["res"]?>
                                <span class='percent'>%</span>
                            </td>
                        </tr>
                        <tr>
                            <th>
                                EHP
                            </th>
                            <td class='base'>
                                <?=$page->get_unit()->get_base_stats()["ehp"]?>
                                <span class='percent'>&nbsp;</span>
                            </td>
                            <td class='extra'>
                                +<?=$page->get_unit()->get_rune_stats()["ehp"]?>
                                <span class='percent'>&nbsp;</span>
                            </td>
                            <td class='extra'>
                                +<?=$page->get_unit()->get_artifact_stats()["ehp"]?>
                                <span class='percent'>&nbsp;</span>
                            </td>
                            <td class='extra'>
                                +<?=$page->get_unit()->get_building_stats()["ehp"]?>
                                <span class='percent'>&nbsp;</span>
                            </td>
                            <td class='total'>
                                <?=$page->get_unit()->get_stats()["ehp"]?>
                                <span class='percent'>&nbsp;</span>
                            </td>
                        </tr>
                        <tr>
                            <th>
                                DMG
                            </th>
                            <td class='base'>
                                <?=$page->get_unit()->get_base_stats()["dmg"]?>
                                <span class='percent'>&nbsp;</span>
                            </td>
                            <td class='extra'>
                                +<?=$page->get_unit()->get_rune_stats()["dmg"]?>
                                <span class='percent'>&nbsp;</span>
                            </td>
                            <td class='extra'>
                                +<?=$page->get_unit()->get_artifact_stats()["dmg"]?>
                                <span class='percent'>&nbsp;</span>
                            </td>
                            <td class='extra'>
                                +<?=$page->get_unit()->get_building_stats()["dmg"]?>
                                <span class='percent'>&nbsp;</span>
                            </td>
                            <td class='total'>
                                <?=$page->get_unit()->get_stats()["dmg"]?>
                                <span class='percent'>&nbsp;</span>
                            </td>
                        </tr>
                    </table>
                    <div id='artifacts'>
                        <?=HTML::artifact_table($page->get_unit()->get_artifacts()[ARTIFACT_TYPE::ARCHETYPE])?>
                        <?=HTML::artifact_table($page->get_unit()->get_artifacts()[ARTIFACT_TYPE::ELEMENT])?>
                    </div>
                </article> <!-- #profile -->
                <article id='current_runes'>
<?php
                    $show_list = [6, 1, 2, 5, 4, 3];
                    //foreach ($page->get_unit()->get_base_stats()["rune"] as $rune){
                    foreach ($show_list as $i){
                        $rune = $page->get_unit()->get_runes()[$i - 1];
?>
                        <?=HTML::rune_table($rune)?>
<?php
                        if ($i == 2){
?>
                            <br/>
<?php
                        }
                    }
?>
                </article>
            </section> <!-- runes -->
            <section id='parameters' class='content'>
                <h2>
                    Optimization parameters
                </h2>
                <article>
                    <table id='parameters'>
                        <tr>
                            <td class='name'>
                                Rune sets
                            </td>
                            <td class='value'>
<?php
                                $reflect = new ReflectionClass("RUNE_SET_ID");
?>
                                <select id='set_1'>
<?php
                                foreach($reflect->getConstants() as $name => $id){
                                    $selected = "";
                                    if ($id == $sets[0]){
                                        $selected = "selected='selected'";
                                    }
?>
                                    <option value='<?=$id?>' <?=$selected?>><?=substr($name, 0, 7)?></option>
<?php
                                }
?>
                                </select>
                                <select id='set_2'>
<?php
                                foreach($reflect->getConstants() as $name => $id){
                                    $selected = "";
                                    if ($id == $sets[1]){
                                        $selected = "selected='selected'";
                                    }
?>
                                    <option value='<?=$id?>' <?=$selected?>><?=substr($name, 0, 7)?></option>
<?php
                                }
?>
                                </select>
                                <select id='set_3'>
                                    <option value='' <?=$selected?>></option>
<?php
                                foreach($reflect->getConstants() as $name => $id){
                                    $selected = "";
                                    if ($id == $sets[2]){
                                        $selected = "selected='selected'";
                                    }
?>
                                    <option value='<?=$id?>' <?=$selected?>><?=substr($name, 0, 7)?></option>
<?php
                                }
?>
                                </select>
                            </td>
                            <td class='empty'>
                            </td>
                            <td class='name'>
                                Min HP
                            </td>
                            <td class='value'>
                                <input id='min_hp' type='range' value='<?=$page->get_unit()->get_stats()["hp"]?>' min='<?=$page->get_unit()->get_base_stats()["hp"]?>' max='50000' oninput='updateMinValue("hp", this);'>
                                <input type='number' id='lbl_min_hp' value='<?=$page->get_unit()->get_stats()["hp"]?>' min='<?=$page->get_unit()->get_base_stats()["hp"]?>' max='50000' onChange='updateMinValue("hp", this);'></input><span class='slider_percent'> </span>
                                <a title='Remove filter' class='filter_control a_button' onclick='removeFilter("hp");'>
                                    <img alt='Remove filter' src='<?=URL::IMG["ICON"]?>nok.png'/>
                                </a>
                                <a title='Reset filter' class='filter_control a_button' onclick='resetFilter("hp");'>
                                    <img alt='Reset filter' src='<?=URL::IMG["ICON"]?>edit.png'/>
                                </a>
                            </td>
                        </tr>
                        <tr>
                            <td class='name'>
                                Even slots
                            </td>
                            <td class='value'>
                                <select id='slot_2'>
                                    <option value='<?=RUNE_STAT_ID::HP_P?>' <?=($mains[0]->get_stat() == RUNE_STAT_ID::HP_P) ? ("selected='selected'") : ("");?>>HP%</option>
                                    <option value='<?=RUNE_STAT_ID::ATK_P?>' <?=($mains[0]->get_stat() == RUNE_STAT_ID::ATK_P) ? ("selected='selected'") : ("");?>>ATK%</option>
                                    <option value='<?=RUNE_STAT_ID::DEF_P?>' <?=($mains[0]->get_stat() == RUNE_STAT_ID::DEF_P) ? ("selected='selected'") : ("");?>>DEF%</option>
                                    <option value='<?=RUNE_STAT_ID::SPD?>' <?=($mains[0]->get_stat() == RUNE_STAT_ID::SPD) ? ("selected='selected'") : ("");?>>SPD</option>
                                </select>
                                <select id='slot_4'>
                                    <option value='<?=RUNE_STAT_ID::HP_P?>' <?=($mains[1]->get_stat() == RUNE_STAT_ID::HP_P) ? ("selected='selected'") : ("");?>>HP%</option>
                                    <option value='<?=RUNE_STAT_ID::ATK_P?>' <?=($mains[1]->get_stat() == RUNE_STAT_ID::ATK_P) ? ("selected='selected'") : ("");?>>ATK%</option>
                                    <option value='<?=RUNE_STAT_ID::DEF_P?>' <?=($mains[1]->get_stat() == RUNE_STAT_ID::DEF_P) ? ("selected='selected'") : ("");?>>DEF%</option>
                                    <option value='<?=RUNE_STAT_ID::CRR?>' <?=($mains[1]->get_stat() == RUNE_STAT_ID::CRR) ? ("selected='selected'") : ("");?>>CRR</option>
                                    <option value='<?=RUNE_STAT_ID::CRR?>' <?=($mains[1]->get_stat() == RUNE_STAT_ID::CRD) ? ("selected='selected'") : ("");?>>CRD</option>
                                </select>
                                <select id='slot_6'>
                                    <option value='<?=RUNE_STAT_ID::HP_P?>' <?=($mains[2]->get_stat() == RUNE_STAT_ID::HP_P) ? ("selected='selected'") : ("");?>>HP%</option>
                                    <option value='<?=RUNE_STAT_ID::ATK_P?>' <?=($mains[2]->get_stat() == RUNE_STAT_ID::ATK_P) ? ("selected='selected'") : ("");?>>ATK%</option>
                                    <option value='<?=RUNE_STAT_ID::DEF_P?>' <?=($mains[2]->get_stat() == RUNE_STAT_ID::DEF_P) ? ("selected='selected'") : ("");?>>DEF%</option>
                                    <option value='<?=RUNE_STAT_ID::ACC?>' <?=($mains[2]->get_stat() == RUNE_STAT_ID::ACC) ? ("selected='selected'") : ("");?>>ACC</option>
                                    <option value='<?=RUNE_STAT_ID::RES?>' <?=($mains[2]->get_stat() == RUNE_STAT_ID::RES) ? ("selected='selected'") : ("");?>>RES</option>
                                </select>
                            </td>
                            <td class='empty'>
                            </td>
                            <td class='name'>
                                Min ATK
                            </td>
                            <td class='value'>
                                <input id='min_atk' type='range' value='<?=$page->get_unit()->get_stats()["atk"]?>' min='<?=$page->get_unit()->get_base_stats()["atk"]?>' max='4000' oninput='updateMinValue("atk", this);'>
                                <input type='number' id='lbl_min_atk' value='<?=$page->get_unit()->get_stats()["atk"]?>' min='<?=$page->get_unit()->get_base_stats()["atk"]?>' max='4000' onChange='updateMinValue("atk", this);'></input><span class='slider_percent'> </span>
                                <a title='Remove filter' class='filter_control a_button' onclick='removeFilter("atk");'>
                                    <img alt='Remove filter' src='<?=URL::IMG["ICON"]?>nok.png'/>
                                </a>
                                <a title='Reset filter' class='filter_control a_button' onclick='resetFilter("atk");'>
                                    <img alt='Reset filter' src='<?=URL::IMG["ICON"]?>edit.png'/>
                                </a>
                            </td>
                        </tr>
                        <tr>
                            <td class='name'>
                                Use runes from
                            </td>
                            <td class='value'>
                                <select id='rune_source'>
                                    <option value='0'>Storage only</option>
                                    <option value='1'>Units in no teams</option>
                                    <option value='2'>Units in teams with 0 score</option>
                                    <option value='3'>Units with lower overall score</option>
                                    <option value='4'>All runes</option>
                                </select>
                            </td>
                            <td class='empty'>
                            </td>
                            <td class='name'>
                                Min DEF
                            </td>
                            <td class='value'>
                                <input id='min_def' type='range' value='<?=$page->get_unit()->get_stats()["def"]?>' min='<?=$page->get_unit()->get_base_stats()["def"]?>' max='4000' oninput='updateMinValue("def", this);'>
                                <input type='number' id='lbl_min_def' value='<?=$page->get_unit()->get_stats()["def"]?>' min='<?=$page->get_unit()->get_base_stats()["def"]?>' max='4000' onChange='updateMinValue("def", this);'></input><span class='slider_percent'> </span>
                                <a title='Remove filter' class='filter_control a_button' onclick='removeFilter("def");'>
                                    <img alt='Remove filter' src='<?=URL::IMG["ICON"]?>nok.png'/>
                                </a>
                                <a title='Reset filter' class='filter_control a_button' onclick='resetFilter("def");'>
                                    <img alt='Reset filter' src='<?=URL::IMG["ICON"]?>edit.png'/>
                                </a>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Focus:
                            </td>
                            <td>
                                <select id='focus_0'>
                                    <option value='0'></option>
                                    <option value='<?=STAT_ID::HP?>'>HP</option>
                                    <option value='<?=STAT_ID::ATK?>'>ATK</option>
                                    <option value='<?=STAT_ID::DEF?>'>DEF</option>
                                    <option value='<?=STAT_ID::SPD?>'>SPD</option>
                                    <option value='<?=STAT_ID::CRR?>'>CRR</option>
                                    <option value='<?=STAT_ID::CRD?>'>CRD</option>
                                    <option value='<?=STAT_ID::ACC?>'>ACC</option>
                                    <option value='<?=STAT_ID::RES?>'>RES</option>
                                </select>
                                <select id='focus_1'>
                                    <option value='0'></option>
                                    <option value='<?=STAT_ID::HP?>'>HP</option>
                                    <option value='<?=STAT_ID::ATK?>'>ATK</option>
                                    <option value='<?=STAT_ID::DEF?>'>DEF</option>
                                    <option value='<?=STAT_ID::SPD?>'>SPD</option>
                                    <option value='<?=STAT_ID::CRR?>'>CRR</option>
                                    <option value='<?=STAT_ID::CRD?>'>CRD</option>
                                    <option value='<?=STAT_ID::ACC?>'>ACC</option>
                                    <option value='<?=STAT_ID::RES?>'>RES</option>
                                </select>
                                <select id='focus_2'>
                                    <option value='0'></option>
                                    <option value='<?=STAT_ID::HP?>'>HP</option>
                                    <option value='<?=STAT_ID::ATK?>'>ATK</option>
                                    <option value='<?=STAT_ID::DEF?>'>DEF</option>
                                    <option value='<?=STAT_ID::SPD?>'>SPD</option>
                                    <option value='<?=STAT_ID::CRR?>'>CRR</option>
                                    <option value='<?=STAT_ID::CRD?>'>CRD</option>
                                    <option value='<?=STAT_ID::ACC?>'>ACC</option>
                                    <option value='<?=STAT_ID::RES?>'>RES</option>
                                </select>
                            </td>
                            <td class='empty'>
                            </td>
                            <td class='name'>
                                Min SPD
                            </td>
                            <td class='value'>
                                <input id='min_spd' type='range' value='<?=$page->get_unit()->get_stats()["spd"]?>' min='<?=$page->get_unit()->get_base_stats()["spd"]?>' max='400' oninput='updateMinValue("spd", this);'>
                                <input type='number' id='lbl_min_spd' value='<?=$page->get_unit()->get_stats()["spd"]?>' min='<?=$page->get_unit()->get_base_stats()["spd"]?>' max='400' onChange='updateMinValue("spd", this);'></input><span class='slider_percent'> </span>
                                <a title='Remove filter' class='filter_control a_button' onclick='removeFilter("spd");'>
                                    <img alt='Remove filter' src='<?=URL::IMG["ICON"]?>nok.png'/>
                                </a>
                                <a title='Reset filter' class='filter_control a_button' onclick='resetFilter("spd");'>
                                    <img alt='Reset filter' src='<?=URL::IMG["ICON"]?>edit.png'/>
                                </a>
                            </td>
                        <tr>
                            <td class='name'>
                                Tune optimizer for
                            </td>
                            <td class='value'>
                                <select id='tuning'>
                                    <option value='0'>Rune current levels</option>
                                    <option value='1'>+12</option>
                                    <option value='2'>2/4/6 +15, 1/3/5 + 12</option>
                                    <option value='3'>+15</option>
                                </select>
                            </td>
                            <td class='empty'>
                            </td>
                            <td class='name'>
                                Min CRR
                            </td>
                            <td class='value'>
                                <input id='min_crr' type='range' value='<?=$page->get_unit()->get_stats()["crr"]?>' min='<?=$page->get_unit()->get_base_stats()["crr"]?>' max='100' oninput='updateMinValue("crr", this);'>
                                <input type='number' id='lbl_min_crr' value='<?=$page->get_unit()->get_stats()["crr"]?>' min='<?=$page->get_unit()->get_base_stats()["crr"]?>' max='100' onChange='updateMinValue("crr", this);'></input><span class='slider_percent'>%</span>
                                <a title='Remove filter' class='filter_control a_button' onclick='removeFilter("crr");'>
                                    <img alt='Remove filter' src='<?=URL::IMG["ICON"]?>nok.png'/>
                                </a>
                                <a title='Reset filter' class='filter_control a_button' onclick='resetFilter("crr");'>
                                    <img alt='Reset filter' src='<?=URL::IMG["ICON"]?>edit.png'/>
                                </a>
                            </td>
                        </tr>
                        <tr>
                            <td class='empty'>
                                Max. combinations
                            </td>
                            <td class='empty'>
                                <input id='limit' type='number' value='10' max='100' min='1'>
                            </td>
                            <td class='empty'>
                            </td>
                            <td class='name'>
                                Min CRD
                            </td>
                            <td class='value'>
                                <input id='min_crd' type='range' value='<?=$page->get_unit()->get_stats()["crd"]?>' min='<?=$page->get_unit()->get_base_stats()["crd"]?>' max='400' oninput='updateMinValue("crd", this);'>
                                <input type='number' id='lbl_min_crd' value='<?=$page->get_unit()->get_stats()["crd"]?>' min='<?=$page->get_unit()->get_base_stats()["crd"]?>' max='400' onChange='updateMinValue("crd", this);'></input><span class='slider_percent'>%</span>
                                <a title='Remove filter' class='filter_control a_button' onclick='removeFilter("crd");'>
                                    <img alt='Remove filter' src='<?=URL::IMG["ICON"]?>nok.png'/>
                                </a>
                                <a title='Reset filter' class='filter_control a_button' onclick='resetFilter("crd");'>
                                    <img alt='Reset filter' src='<?=URL::IMG["ICON"]?>edit.png'/>
                                </a>
                            </td>
                        </tr>
                        <tr>
                            <td id='log' colspan='2' rowspan='4'>
                                <div id='log_title'>
                                    LOG
                                    <span id='log_clear' onClick='clearLog();'>
                                        clear
                                    </span>
                                </div>
                                <div id='log_window'>
                                </div>
                            </td>
                            <td class='empty'>
                            </td>
                        </tr>
                        <tr>
                            <!--<td class='empty'>
                            </td>-->
                            <!--<td class='empty'>
                            </td>-->
                            <td class='empty'>
                            </td>
                            <td class='name'>
                                Min ACC
                            </td>
                            <td class='value'>
                                <input id='min_acc' type='range' value='<?=$page->get_unit()->get_stats()["acc"]?>' min='<?=$page->get_unit()->get_base_stats()["acc"]?>' max='85' oninput='updateMinValue("acc", this);'>
                                <input type='number' id='lbl_min_acc' value='<?=$page->get_unit()->get_stats()["acc"]?>' min='<?=$page->get_unit()->get_base_stats()["acc"]?>' max='85' onChange='updateMinValue("acc", this);'></input><span class='slider_percent'>%</span>
                                <a title='Remove filter' class='filter_control a_button' onclick='removeFilter("acc");'>
                                    <img alt='Remove filter' src='<?=URL::IMG["ICON"]?>nok.png'/>
                                </a>
                                <a title='Reset filter' class='filter_control a_button' onclick='resetFilter("acc");'>
                                    <img alt='Reset filter' src='<?=URL::IMG["ICON"]?>edit.png'/>
                                </a>
                            </td>
                        </tr>
                        <tr>
                            <!--<td class='empty'>
                            </td>-->
                            <!--<td class='empty'>
                            </td>-->
                            <td class='empty'>
                            </td>
                            <td class='name'>
                                Min RES
                            </td>
                            <td class='value'>
                                <input id='min_res' type='range' value='<?=$page->get_unit()->get_stats()["res"]?>' min='<?=$page->get_unit()->get_base_stats()["res"]?>' max='85' oninput='updateMinValue("res", this);'>
                                <input type='number' id='lbl_min_res' value='<?=$page->get_unit()->get_stats()["res"]?>' min='<?=$page->get_unit()->get_base_stats()["res"]?>' max='85' onChange='updateMinValue("res", this);'></input><span class='slider_percent'>%</span>
                                <a title='Remove filter' class='filter_control a_button' onclick='removeFilter("res");'>
                                    <img alt='Remove filter' src='<?=URL::IMG["ICON"]?>nok.png'/>
                                </a>
                                <a title='Reset filter' class='filter_control a_button' onclick='resetFilter("res");'>
                                    <img alt='Reset filter' src='<?=URL::IMG["ICON"]?>edit.png'/>
                                </a>
                            </td>
                        </tr>
                        <tr>
                            <!--<td class='empty'>
                            </td>-->
                            <!--<td class='empty'>
                            </td>-->
                            <td class='empty'>
                            </td>
                            <td class='name'>
                                Min EHP
                            </td>
                            <td class='value'>
                                <input id='min_ehp' type='range' value='<?=$page->get_unit()->get_base_stats()["ehp"]?>' min='0' max='200000' oninput='updateMinValue("ehp", this);'>
                                <input type='number' id='lbl_min_ehp' value='<?=$page->get_unit()->get_base_stats()["ehp"]?>' min='0' max='200000' onChange='updateMinValue("ehp", this);'></input><span class='slider_percent'> </span>
                                <a title='Remove filter' class='filter_control a_button' onclick='removeFilter("ehp");'>
                                    <img alt='Remove filter' src='<?=URL::IMG["ICON"]?>nok.png'/>
                                </a>
                                <a title='Reset filter' class='filter_control a_button' onclick='resetFilter("ehp");'>
                                    <img alt='Reset filter' src='<?=URL::IMG["ICON"]?>edit.png'/>
                                </a>
                            </td>
                        </tr>
                        <tr>
                            <td class='action'>
                                <input id='apply' type='button' value='Apply' onClick='apply();'/>
                                <!--<input id='apply' type='button' value='DEBUG' onClick='debug();'/>-->
                            </td>
                            <td class='empty'>
                                <img id='wait' src='<?=URL::IMG["ICON"] . "wait.gif";?>'>
                            </td>
                            <td class='empty'>
                            </td>
                            <td class='name'>
                                Min DMG
                            </td>
                            <td class='value'>
                                <input id='min_dmg' type='range' value='<?=$page->get_unit()->get_base_stats()["dmg"]?>' min='0' max='7000' oninput='updateMinValue("dmg", this);'>
                                <input type='number' id='lbl_min_dmg' value='<?=$page->get_unit()->get_base_stats()["dmg"]?>' min='0' max='7000' onChange='updateMinValue("dmg", this);'></input><span class='slider_percent'> </span>
                                <a title='Remove filter' class='filter_control a_button' onclick='removeFilter("dmg");'>
                                    <img alt='Remove filter' src='<?=URL::IMG["ICON"]?>nok.png'/>
                                </a>
                                <a title='Reset filter' class='filter_control a_button' onclick='resetFilter("dmg");'>
                                    <img alt='Reset filter' src='<?=URL::IMG["ICON"]?>edit.png'/>
                                </a>
                            </td>
                        </tr>
                    </table>
                </article>
            </section>
            <section id='results' class='content'>
                <h2>
                    Optimization results
                </h2>
                <article>
                    <table id='table_optimizations'>
                        <tbody id='optimizations'>
                        </tbody>
                    </table>
                </article>
            </section>
        </main>
        <div id='message_container'>
            <section class='content'>
                <h2 id='message_title'>
                    Message
                </h2>
                <article>
                    <p id='message_text'>
                        Message Text
                    </p>
                </article>
                <input type='button' value='OK' id='message_button' onclick='closeMessage();'/>
            </section>
        </div>
<?php
        include __DIR__ . "/inc/footer.php";
?>
    </body>
</html>