// ==UserScript==
// @name        findface_list
// @namespace   findface_list
// @include     http://findface.ru/search-result
// @version     1
// @grant       none
// ==/UserScript==

// USAGE:
// 0. Save this script as findface.user.js
// 1. Download greasemonkey (firefox) or tempermonkey (chrome)
// 2. Install the script ( just open it in browser )
// 3. Do a search as usual
// 4. Refresh the page

// Note that you can use it in chrome without tempermonkey, just drag and drop it into extension's page
// It is better to use chrome, firefox may hang badly

function startDrag(e)
{
  // determine event object
  if (!e) {
    var e = window.event;
  }

  // IE uses srcElement, others use target
  var targ = e.target ? e.target : e.srcElement;

  if (targ.className != 'dragme') {
    return;
  }

  // calculate event X, Y coordinates
  offsetX = e.clientX;
  offsetY = e.clientY;

  // assign default values for top and left properties
  if(!targ.style.right) { targ.style.right ='0px'};
  if(!targ.style.bottom)  { targ.style.bottom  ='0px'};

  // calculate integer values for top and left
  // properties
  coordX = parseInt(targ.style.right);
  coordY = parseInt(targ.style.bottom);

  drag = true;

  // move div element
  document.onmousemove = dragDiv;
  return false;
}

function dragDiv(e) {

  if (!drag) {
    return;
  }

  if (!e) {
    var e= window.event;
  }

  var targ = e.target ? e.target : e.srcElement;

  // move div element
  targ.style.right  = coordX - e.clientX + offsetX + 'px';
  targ.style.bottom = coordY - e.clientY + offsetY + 'px';

  document.onmousemove = dragDiv;

  return false;
}

function stopDrag() {
  drag = false;
}

function main()
{
	document.body.innerHTML = "";
	document.body.style.overflowY = 'scroll';
	document.body.style.overflowX = 'scroll';

  var str = startDrag.toString() + stopDrag.toString() + stopDrag();
  var script = document.createElement('script');
  script.appendChild(document.createTextNode(str));
  (document.body || document.head || document.documentElement).appendChild(script);

	var pic = document.createElement('img');
	pic.src = localStorage.getItem('FF.searchFacePhoto').slice(1, -1);
  pic.className = 'dragme';
  pic.style.position = 'fixed';
  pic.style.right = 0;
  pic.style.bottom = 0;

	document.body.appendChild(pic);
	document.onmousedown = startDrag;
	document.onmouseup = stopDrag;

	var usrlist = JSON.parse(localStorage.getItem('FF.usersSearchList'));

  usrlist.forEach(function(e){

    var id = e.user_id.toString();

    document.body.innerHTML += "<h1><a href='https://vk.com/id" + id + "'>" + "vk.com/id" + id + " ( " + e.first_name + " " + e.last_name + " )</a></h1>";

    var len = e.photos.length;
    for(var i = 0; i < len; i++){
      var crop = e.photos[i];
      var full = "";

      if(crop.startsWith("http://cropper")){
      var begin = crop.indexOf('=') + 1;
      var end = crop.indexOf('&');

      full = crop.substring(begin, end);
      } else {
      full = crop;
      }

      document.body.innerHTML += "<a href='" + full + "'><img src='" + crop + "'></a>";
    }
    document.body.innerHTML += "<br><br><br>";
	});
}

main();