// ==UserScript==
// @name          Flickr Fav and Sets Magnifier
// @namespace     http://www.goston.net/
// @description   Shows small picture version when you "mouseover" a flickr favorite or sets. (Modify ver. Original is http://www.hiddenfault.net/)
// @include       http://www.flickr.com/photos/*/favorites/*
// @include       http://flickr.com/photos/*/favorites/*
// @include       http://www.flickr.com/photos/*/sets/*
// @include       http://flickr.com/photos/*/sets/*
// @include       http://www.flickr.com/photos/friends/*
// @include       http://flickr.com/photos/friends/*
// @include       http://www.flickr.com/groups/*/pool/*
// @include       http://flickr.com/groups/*/pool/*
// Whats New
// =========
// 2007.05.08 Fix un alias url fail.
// 2008.01.29 Fix z-index.
// 2008.10.25 Add Friends recent upload photopage support & Larger Image Size
// 2009.04.06 Add Groups support
// ==/UserScript==

var setsRe = /http:\/\/(www\.)?flickr\.com\/photos\/\w*\/sets\/\w+/;
var setsOtherRe = /http:\/\/(www\.)?flickr\.com\/photos\/\w*\/sets\/\w+\/\w+/;
var favRe = /http:\/\/(www\.)?flickr\.com\/photos\/\w*\/favorites\/\w*/;
var contactRe = /http:\/\/(www\.)?flickr\.com\/photos\/friends\/\w*/;
var groupRe = /http:\/\/(www\.)?flickr\.com\/groups\/\w*\/pool\/\w*/;

var thumbsBox = null;
var thumbsLinks = null;
var thumbsImages = null;

if (setsOtherRe.test(replaceUrl(document.location)))
{
    // Set's Detail , Map and Comment View do nothing...
}
else if (setsRe.test(replaceUrl(document.location)))
{
    thumbsBox = document.getElementById('setThumbs');
    thumbsLinks = document.getElementById('setThumbs').getElementsByTagName('a');
    thumbsImages = document.getElementById('setThumbs').getElementsByTagName('img');
}
else if (favRe.test(replaceUrl(document.location)))
{
    thumbsBox = document.getElementById('favoriteThumbs');
    thumbsLinks = document.getElementById('favoriteThumbs').getElementsByTagName('a');
    thumbsImages = document.getElementById('favoriteThumbs').getElementsByTagName('img');
}
else if (contactRe.test(replaceUrl(document.location)) || groupRe.test(replaceUrl(document.location)))
{
    thumbsBox = document.getElementById('Main');
    thumbsLinks = document.getElementById('Main').getElementsByTagName('a');
    thumbsImages = document.getElementById('Main').getElementsByTagName('img');
}

function replaceUrl(sUrl)
{
    var str = (''+sUrl).replace(/@/g, '');
    str = str.replace(/-/g, '');
    return str;
}

var altTemp = '';

function addGlobalStyle(css) {
  var head, style;
  head = document.getElementsByTagName('head')[0];
  if (!head) { return; }
  style = document.createElement('style');
  style.type = 'text/css';
  style.innerHTML = css;
  head.appendChild(style);
}

function modifyImgSrc(imgSrc) { return (imgSrc.replace(/_s.jpg/, '.jpg').replace(/_t.jpg/, '.jpg')); }

function preloadSmallImages() {
  var imageArray = new Array();
  for (var i=0; i<thumbsImages.length; i++) {
    imageArray[i] = new Image();
    imageArray[i].src = modifyImgSrc(thumbsImages[i].getAttribute('src'));
  }
}

function createMagnifier() {
  if (thumbsBox) {
    var magnifier = document.createElement('div');
    magnifier.setAttribute('id', 'magnifier'); 
    magnifier.style.position = 'absolute';
    magnifier.style.border = '6px solid rgb(221, 221, 221)';
    magnifier.style.padding = '0px';
    magnifier.style.backgroundColor = 'rgb(221, 221, 221)';
    magnifier.style.display = 'none';
    magnifier.style.zIndex = '99999';
    thumbsBox.parentNode.insertBefore(magnifier, thumbsBox);
  }
  return true;
}

function clearLinkTitle() {
  for (var i=0; i<thumbsLinks.length; i++) {
    thumbsLinks[i].setAttribute('title', '');
  }
}

function showMagnifier(event) {
  var magnifier = document.getElementById('magnifier')
  if (magnifier) {
    var altTag = event.target.getAttribute('alt');
    addGlobalStyle('#magnifier > h5 {margin-top:0px !important; font-size:x-small !important}');
    addGlobalStyle('#magnifier {margin:0px; display:inline}');
    magnifier.innerHTML = '<h5>' + altTag + '</h5><img src="' + modifyImgSrc(event.target.getAttribute('src')); + '" border="0" />';
    magnifier.style.display = '';
    altTemp = altTag;
    event.target.setAttribute('alt', '');
    document.body.insertBefore(magnifier, document.body.firstChild);
  }
}

function moveMagnifier(event) {
  var sWidth = (window.innerWidth - event.pageX) - 20;
  var sHeight = (window.innerHeight - event.pageY) - 20;
  
  var magnifier = document.getElementById('magnifier');
  var magStyle = getComputedStyle(magnifier, '');
  if (magnifier) { 
    event.target.setAttribute('alt', altTemp);
    
    if (sWidth < parseInt(magStyle.width)) {
        if ((event.pageX - parseInt(magStyle.width)) - 16 < 0)
            magnifier.style.left = event.pageX + 14; 
        else
            magnifier.style.left = (event.pageX - parseInt(magStyle.width)) - 16; 
    } 
    else { 
        magnifier.style.left = event.pageX + 14; 
    }


    var x = (event.pageY - (event.pageY % window.innerHeight)) / window.innerHeight;
    var y = event.pageY % window.innerHeight;
    var z = (window.innerHeight - y) +3;
    
    if (z < parseInt(magStyle.height)) {
        // if (y - parseInt(magStyle.height) < 0)
        //     magnifier.style.top = window.innerHeight * x;
        // else
        //     magnifier.style.top = (event.pageY - parseInt(magStyle.height));
        if ((event.pageY - parseInt(magStyle.height) / 2) < 0)
            magnifier.style.top = 0;
        else
            magnifier.style.top = (event.pageY - parseInt(magStyle.height) / 2);
    }
    else {
        if ((event.pageY - parseInt(magStyle.height) / 2) < 0)
            magnifier.style.top = 0;
        else
            magnifier.style.top = (event.pageY - parseInt(magStyle.height) / 2);
        // magnifier.style.top = (event.pageY - parseInt(magStyle.height) / 2);
        //magnifier.style.top = event.pageY + 5; 
    }

    //if (sWidth < parseInt(magStyle.width)) { magnifier.style.left = (event.pageX - parseInt(magStyle.width)) - 16; } 
    //else { magnifier.style.left = event.pageX + 14; }
    //if (sHeight < parseInt(magStyle.height)) { magnifier.style.top = (event.pageY - parseInt(magStyle.height)) - 7; }
    //else { magnifier.style.top = event.pageY + 5; }
  }
}

function hideMagnifier(event) {
  var magnifier = document.getElementById('magnifier')
  if (magnifier) { magnifier.style.display = 'none'; }
}

function iterateThumbnails(event) {
  for (var i=0; i<thumbsImages.length; i++) {
    thumbsImages[i].addEventListener('mouseover', function(event) { showMagnifier(event); }, true);
    thumbsImages[i].addEventListener('mousemove', function(event) { moveMagnifier(event); }, true);
    thumbsImages[i].addEventListener('mouseout', function(event) { hideMagnifier(event); }, true);
  }
}


window.addEventListener('load', function(event) {
  if (thumbsBox == null)
    return;
  preloadSmallImages();
  if (createMagnifier()) { 
    clearLinkTitle();
    iterateThumbnails(event); 
  }
}, false);