// ==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==
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 insertTooltip(url, element) {
    url = url.split('?')[0] + '?okc_api=1';
    if (element.hasAttribute('profile') === false) {
        element.setAttribute('profile', null);
        var promise = httpGet(url);
        promise.done(function(data) {
            element.profile = JSON.parse(data);
            var page = element.profile;
            var match = page.matchpercentage;
            var enemy = page.enemypercentage;
            var match2 = Math.round(Math.sqrt(match * (100 - enemy)));
            title = '' + match + '%, ' + enemy + '%, ' + match2 + '%';
            console.log($(element).prop('src'));
            var img = '<img src="'+page.thumbnail_60+'"></img>';
            toastr.info(img, title);
            $(element).on('mouseenter', function() {
                toastr.info(img, title);
            });
            $(element).on('change', function() {
                $(element).trigger('mouseenter');
            });
        });
    }
}
promise = httpGet('http://www.okcupid.com/visited');
promise.done(function(data) {
    String.prototype.repeat = function( num )
    {
        return new Array( num + 1 ).join( this );
    };
    users = $(data).find('div.user_row_item');
    $('#navigation').after($('<div id="sidebar" float="left" style="position: fixed;  background: #f3f5f9;border-radius: 3px;  padding-bottom: 5px;  padding-top: 10px; margin-left: 10px;"></div>'));
    $('#sidebar').html('<center><h2>Visited</h1></center><div class="row">'+'<div class="user" style="display: inline-block; padding: 5px">user</div>'.repeat(3)+'</div>');
    $('.row').after('<div class="row">'+'<div class="user" style="display: inline-block; padding: 5px">user</div>'.repeat(3)+'</div>');
    grid = $('[class=user]');
    $(users).each(function(index) {
        $(grid[index])[0].innerHTML = $(this).find('.username')[0].innerHTML.slice(0,-5 - $(this).find('.username > a')[0].innerHTML.length) + '<img src=' + $(this).find('.user_image > img').prop('src') + 'width="60" height="60">' ;
        console.log($(this).find('.name').prop('href'));
        $(grid[index])[0].title = $(this).find('.name').prop('href').slice(31,-11);
        $(grid[index])[0].on('mouseenter', function() {
            console.log(this.children[0].href);
            insertTooltip(this.children[0].href, this);
        });
    });
});