// ==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.20220413
// @grant GM_setValue
// @grant GM_getValue
// @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 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 id='badgeup'>⇱</div><div 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");
    $("#badgeup").css("padding-left", "5px");
    $("#badgeup").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>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 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.");
        }
    });
    $('#badgePositionSelect option[value="' + badgePosition + '"]').prop('selected', true);
    $('#badgeBgColorInput').val(badgeBgColor);
    $('#badgeTextColorInput').val(badgeTextColor);
    
    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("badgePosition", badgePosition);
        GM_setValue("badgeBgColor", badgeBgColor);
        GM_setValue("badgeTextColor", badgeTextColor);
        badgePositionChange(badgePosition);
        badgeColorChange(badgeBgColor,badgeTextColor);
    });

}

$( document ).ready(function() {
    img_array = GM_getValue("img_array", []);
    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() {
    //IG total count
    totalCount = $("div:contains('publications'):eq(2)").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 (img_array.indexOf($( this ).parent().parent().parent().attr('href')) === -1) {
          img_array.push($( this ).parent().parent().parent().attr('href'));
        } else {
            // remove
            // $( this ).parent().parent().parent().parent().remove();
            // console.log("remove " + $( this ).parent().parent().parent().attr('href'));
        }
        //GM_setValue("img_array",img_array);
    });

    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 + "%");
    }

});