// ==UserScript==
// @name         My Fancy New Userscript
// @namespace    http://www.okcupid.com/*
// @version      0.1
// @description  enter something useful
// @author       You
// @match        http://www.okcupid.com/*
// @require      http://code.jquery.com/jquery-1.10.2.js
// @require    http://cdnjs.buttflare.com/ajax/libs/toastr.js/latest/js/toastr.js
// @resource   toastr http://cdnjs.buttflare.com/ajax/libs/toastr.js/latest/css/toastr.css
// @grant      GM_addStyle
// @grant      GM_getResourceText
// ==/UserScript==
GM_addStyle(".spinner{-webkit-animation:rotator 1.4s linear infinite;animation:rotator 1.4s linear infinite}@-webkit-keyframes rotator{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(270deg);transform:rotate(270deg)}}@keyframes rotator{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(270deg);transform:rotate(270deg)}}.path{stroke-dasharray:187;stroke-dashoffset:0;-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-animation:dash 1.4s ease-in-out infinite,colors 5.6s ease-in-out infinite;animation:dash 1.4s ease-in-out infinite,colors 5.6s ease-in-out infinite}@-webkit-keyframes colors{0%{stroke:#4285F4}25%{stroke:#DE3E35}50%{stroke:#F7C223}75%{stroke:#1B9A59}100%{stroke:#4285F4}}@keyframes colors{0%{stroke:#4285F4}25%{stroke:#DE3E35}50%{stroke:#F7C223}75%{stroke:#1B9A59}100%{stroke:#4285F4}}@-webkit-keyframes dash{0%{stroke-dashoffset:187}50%{stroke-dashoffset:46.75;-webkit-transform:rotate(135deg);transform:rotate(135deg)}100%{stroke-dashoffset:187;-webkit-transform:rotate(450deg);transform:rotate(450deg)}}@keyframes dash{0%{stroke-dashoffset:187}50%{stroke-dashoffset:46.75;-webkit-transform:rotate(135deg);transform:rotate(135deg)}100%{stroke-dashoffset:187;-webkit-transform:rotate(450deg);transform:rotate(450deg)}}#sidebar{position:fixed;background:#f3f5f9;border-radius:3px;padding:8px 5px 5px;margin-left:10px;margin-right:10px}.user{display:inline-block;padding:5px;margin-bottom:-5px;border-radius:3px}h1{font-size:larger}");
var spinner = '<svg class=spinner width=65px height=65px viewBox="0 0 66 66" xmlns=http://www.w3.org/2000/svg><circle class=path fill=none stroke-width=6 stroke-linecap=round cx=33 cy=33 r=30></circle></svg>'
$('#navigation').after($('<div id="sidebar">' + spinner + '</div>'));
var newCSS = GM_getResourceText("toastr");
GM_addStyle(newCSS);
toastr.options = {
    "closeButton": false,
    "debug": false,
    "progressBar": true,
    "positionClass": "toast-bottom-left",
    "showDuration": "10000",
    "hideDuration": "10000",
    "timeOut": "10000",
    "extendedTimeOut": "10000",
    "showEasing": "swing",
    "hideEasing": "linear",
    "showMethod": "fadeIn",
    "hideMethod": "fadeOut"
};
this.$ = this.jQuery = jQuery.noConflict(true);

function httpGet(theUrl) {
    console.trace();
    var deferred = $.Deferred();
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.open("GET", theUrl, true);
    xmlHttp.addEventListener('load', function() {
        if (xmlHttp.status === 200) {
            deferred.resolve(xmlHttp.response);
        } else {
            deferred.reject("HTTP error: " + xmlHttp.status);
        }
    }, false);
    xmlHttp.send(null);
    return deferred.promise();
}

function insertMatches(url) {
    url = url.split('?')[0] + '?okc_api=1';
    console.log(url)
    var promise = httpGet(url);
    promise.done(function(data) {
        var page = JSON.parse(data);
        var match = page.matchpercentage;
        var enemy = page.enemypercentage;
        var match2 = Math.round(Math.sqrt(match * (100 - enemy)));
        var title = '' + match + '% | ' + enemy + '% | ' + match2 + '%';
        $('#matches').html(title);
        console.log(title);
    });
}
var promise = httpGet('http://www.okcupid.com/visited');
promise.done(function(data) {
    String.prototype.repeat = function(num) {
        return new Array(num + 1).join(this);
    };
    var users = $(data).find('div.user_row_item');
    var userrow = '<div class="row">' + '<div class="user"></div>'.repeat(3) + '</div>';
    var userbox = '<div id="userbox"><hr><center><h1>Mouse over a user above</h1></center></div>'
    $('#sidebar').html('<center><h1>Visited</h1></center>' + userrow.repeat(3) + userbox);
    var grid = $('[class=user]');
    $(users).each(function(index) {
        $(grid[index]).html($(this).find('.username').html().slice(0, -5 - $(this).find('.username > a').html().length) + '<img src=' + $(this).find('.user_image > img').prop('src') + ' width="85" height="85">');
        console.log($(this).find('.name').prop('href'));
        $(grid[index])[0].name = $(this).find('.name').prop('href').slice(31, -11);
        $(grid[index])[0].on('mouseenter', function() {
            $('#userbox > center > h1').html($(this).find('a').html() + '<br>' + this.name + '<br> <div id="matches"><br></div>');
            insertMatches($(this).find('a')[0].href);
        });
    });
});