internet.user.js

// ==UserScript==
// @name           internet
// @namespace      http://d.hatena.ne.jp/youpy/
// @include        http://www.ntticc.or.jp/Exhibition/2012/Internet_Art_Future/index_j.html
// @version        0.3
// @updateURL      https://raw.github.com/gist/1727155/internet.user.js
// ==/UserScript==

var serverUrl = 'http://c3581516868fb3b71746931cac66390e.no.de/';
var script = document.createElement('script');
var head = document.getElementsByTagName('head')[0];
var zIndex = 1000;

function key(element) {
  return element.className.split(/\s+/)[0];
}

function getElementPosition(elem) {
  var style = window.getComputedStyle(elem, null);

  return {
    left: style.left,
    top: style.top
  };
}

Function.prototype.throttle = function(delay) {
  var fn = this;
  return function() {
    var now = (new Date).getTime();
    if (!fn.lastExecuted || fn.lastExecuted + delay < now) {
      fn.lastExecuted = now;
      fn.apply(fn, arguments);
    }
  };
};

script.setAttribute('src', serverUrl + 'socket.io/socket.io.js');
script.onload = function() {
  var images = {};
  var socket = unsafeWindow.io.connect(serverUrl, {'transports':['xhr-polling']});
  var throttled = function(event) {
    var element = event.currentTarget;
    var position = getElementPosition(element);

    socket.emit('message',
                key(element),
                {
                  position: {
                    top: position.top,
                    left: position.left
                  }
                });
  }.throttle(200);

  socket.emit('join', 'ntticc_internet');
  socket.on('init', handleMessage);
  socket.on('message', handleMessage);

  Array.forEach(document.querySelectorAll('#overstrew li'), function(li) {
    var position;

    images[key(li)] = li;

    with(li) {
      style.MozTransitionProperty = 'left, top';
      style.MozTransitionDuration = '1s';

      addEventListener('mousedown', function(event) {
        style.MozTransitionProperty = 'none';
        style.MozTransitionDuration = '1s';
        addEventListener('mousemove', throttled, false);
      });      

      addEventListener('mouseup', function(event) {
        removeEventListener('mousemove', throttled);
      });
    }
  });

  function handleMessage(data) {
    var element;
    
    for(id in data) {
      if(images[id]) {
        element = images[id];
      
        element.style.top = data[id].position.top;
        element.style.left = data[id].position.left;
        element.style.zIndex = zIndex ++;
      }
    }
  }
};

head.appendChild(script);