// ==UserScript==
// @name Progresigo
// @author Antoine Turmel
// @namespace https://github.com/AntoineTurmel/
// @homepage https://github.com/AntoineTurmel/progresigo
// @homepageURL https://github.com/AntoineTurmel/progresigo
// @description Improve search and browsing experience with various features
// @include https://www.instagram.com/*/
// @include https://500px.com/p/*
// @require https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js
// @version 0.1.20220601
// @grant GM_setValue
// @grant GM_getValue
// @grant GM_notification
// @downloadURL none
// ==/UserScript==

var count = 0;
var array = [];
var totalCount = 0;
var mode = 2;
var perc = 0;
var img_array = [];
var badgePosition = 0;
var badgeBgColor = "#000000";
var badgeTextColor = "#FFFFFF";

function hexToRgb(hex) {
  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
}

function badgePositionChange(badgePosition){
    $("#badgecount").prop('style').removeProperty('top');
    $("#badgecount").prop('style').removeProperty('bottom');
    $("#badgecount").prop('style').removeProperty('left');
    $("#badgecount").prop('style').removeProperty('right');

    if (badgePosition == 1) {
        $("#badgecount").css("top", 10);
        $("#badgecount").css("left", 10);
    }
    if (badgePosition == 2) {
        $("#badgecount").css("top", 10);
        $("#badgecount").css("right", 10);
    }
    if (badgePosition == 3) {
        $("#badgecount").css("bottom", 10);
        $("#badgecount").css("left", 10);
    }
    if (badgePosition == 4 || badgePosition == 0) {
        $("#badgecount").css("bottom", 10);
        $("#badgecount").css("right", 10);
    }
}

function badgeColorChange(bg,text) {
    $("#badgecount").prop('style').removeProperty('color');
    $("#badgecount").prop('style').removeProperty('background-color');
    $("#badgecount").css("color", text);
    $("#badgecount").css("background-color", bg);
}

function displayBadge(badgePosition, bg, text){
    var txt = $("<div id='badgecount'></div>");
    $("body").append(txt);
    var badgetxt = $("<div id='badgetxt'>Scroll</div> <div title='Back to top' class='badgeel' id='badgeup'>⇱</div><div title='Settings...' class='badgeel' id='badgesettings'>⚙</div>");
    $("#badgecount").append(badgetxt);
    badgePositionChange(badgePosition);
    badgeColorChange(bg, text);
    $("#badgecount").css("position", "fixed");
    $("#badgecount").css("padding", "7px");
    $("#badgecount").css("border-radius", "30px");
    $("#badgecount").css("font-weight", "bold");
    $("#badgecount").css("flex-direction", "row");
    $("#badgecount").css("display", "flex");
    $("#badgecount").css("align-items", "center");
    $("#badgecount").css("justify-content", "end");
    $("#badgecount").css("height", "36px");
    $("#badgecount").css("min-width", "100px");
    $(".badgeel").css("padding-left", "5px");
    $(".badgeel").css("font-size", "20px");
    $("#badgetxt").css("cursor", "pointer");
    $("#badgeup").css("cursor", "pointer");
    $("#badgesettings").css("cursor", "pointer");

    $( "#badgetxt" ).click(function() {
        if (mode == 1) {
            mode = 2;
            $("#badgetxt").text(perc + "%");
        } else {
            mode = 1;
            $("#badgetxt").text(count + "/" + totalCount);
        }
    });

    $( "#badgeup" ).click(function() {
        $( "html" ).scrollTop( 0 );
    });
}

function displaySettings(){
  var txt = $('<dialog id="settingsDialog">\
  <form method="dialog">\
    <p><label>Default display :\
      <select id="badgeModeSelect">\
        <option value="1">Number/Total Number (eg. 5/10)</option>\
        <option value="2">Percentage % (eg. 50%)</option>\
      </select>\
    </label></p>\
    <p><label>Badge location :\
      <select id="badgePositionSelect">\
        <option value="1">Top left corner</option>\
        <option value="2">Top right corner</option>\
        <option value="3">Bottom left corner</option>\
        <option value="4">Bottom right corner</option>\
      </select>\
    </label></p>\
    <p><label>Badge background color:\
        <input type="color" id="badgeBgColorInput" name="badgeBgColorInput" value="#000000">\
    </label></p>\
    <p><label>Badge text color:\
        <input type="color" id="badgeTextColorInput" name="badgeTextColorInput" value="#ffffff">\
    </label></p>\
    <menu>\
      <button value="cancel">Cancel</button>\
      <button id="confirmBtn" value="default">Save</button>\
    </menu>\
  </form>\
</dialog>');
    $("body").append(txt);
    let settingsButton = document.getElementById('badgesettings');
    let badgeModeSelect = document.getElementById('badgeModeSelect');
    let badgePositionSelect = document.getElementById('badgePositionSelect');
    let badgeBgColorInput = document.getElementById('badgeBgColorInput');
    let badgeTextColorInput = document.getElementById('badgeTextColorInput');
    let settingsDialog = document.getElementById('settingsDialog');

    settingsButton.addEventListener('click', function onOpen() {
        if (typeof settingsDialog.showModal === "function") {
            settingsDialog.showModal();
        } else {
        console.error("L'API <dialog> n'est pas prise en charge par ce navigateur.");
        }
    });
    $('#badgeModeSelect option[value="' + mode + '"]').prop('selected', true);
    $('#badgePositionSelect option[value="' + badgePosition + '"]').prop('selected', true);
    $('#badgeBgColorInput').val(badgeBgColor);
    $('#badgeTextColorInput').val(badgeTextColor);

    badgeModeSelect.addEventListener('change', function onSelect(e) {
        mode = badgeModeSelect.value;
    });

    badgePositionSelect.addEventListener('change', function onSelect(e) {
        badgePosition = badgePositionSelect.value;
    });

    badgeBgColorInput.addEventListener('change', function onSelect(e) {
        badgeBgColor = badgeBgColorInput.value;
    });

    badgeTextColorInput.addEventListener('change', function onSelect(e) {
        badgeTextColor = badgeTextColorInput.value;
    });

    settingsDialog.addEventListener('close', function onClose() {
        GM_setValue("mode", mode);
        GM_setValue("badgePosition", badgePosition);
        GM_setValue("badgeBgColor", badgeBgColor);
        GM_setValue("badgeTextColor", badgeTextColor);
        badgePositionChange(badgePosition);
        badgeColorChange(badgeBgColor,badgeTextColor);
    });

}

$( document ).ready(function() {
    img_array = GM_getValue("img_array", []);
    mode = GM_getValue("mode", 2);
    badgePosition = GM_getValue("badgePosition", 4);
    badgeBgColor = GM_getValue("badgeBgColor", "#000000");
    badgeTextColor = GM_getValue("badgeTextColor", "#FFFFFF");
    //Badge display
    displayBadge(badgePosition, badgeBgColor, badgeTextColor);
    displaySettings();
    // IMG count shown for IG
    count = $("img[decoding='auto']").length;
});

$( window ).scroll(function() {

    if (window.location.host.includes("instagram.com")) {
        //IG total count
        totalCount = $("li:contains('publications'):eq(0)").children().children().text().replace(/\s/g, '');

        $("img[crossorigin='anonymous']").each(function( index ) {
            if (array.indexOf($( this ).attr('src')) === -1) {
                array.push($( this ).attr('src'));
            }
            //log de l'url insta
            //console.log($( this ).parent().parent().parent().attr('href'));

        });
    }

    if (window.location.host.includes("500px.com")) {
        totalCount = $("span:contains('Photos')").children().children().text().replace(/\s/g, '').replace(',', '');

        $("#justifiedGrid img").each(function( index ) {
            if (array.indexOf($( this ).attr('src')) === -1) {
                array.push($( this ).attr('src'));
            }
        });
    }

    count = array.length;

    if (count > totalCount) {
        count = totalCount;
    }

    perc = Math.round((count * 100) / totalCount);
    if (mode == 1) {
        $("#badgetxt").text(count + "/" + totalCount);
    }
    if (mode == 2) {
        $("#badgetxt").text(perc + "%");
    }

$("#badgecount").css("background", "linear-gradient(90deg, rgba(" + hexToRgb(badgeBgColor).r + ", " + hexToRgb(badgeBgColor).g + ", " + hexToRgb(badgeBgColor).b +", 1) " + perc + "%, rgba(" + hexToRgb(badgeBgColor).r + ", " + hexToRgb(badgeBgColor).g + ", " + hexToRgb(badgeBgColor).b +", 0.8) " + perc + "%)");

});