// Couchsurfing: Bigger pictures
// Version 1.1
// 2009-09-08
// 2009 by Chris Welfare
// File naming/org structure of CS image storage completely changed,
// updated original code by M.Schwarz to bring into line with this
// Version 1.0
// 2008-11-24
// 2008 by Marcel Schwarz
// for couchsurfing.com modified version of the GPL-licensed
// greasemonkey script "StudiVZ: Mitglieder zoomen" by Ingo Mueller
// (http://userscripts.org/scripts/show/11003). I also used a tiny
// snipplet (just concerning the style) from the inYOf4ceBook
// thumbnail enlargement script by Justin Rosenthal modified by znerp
// (http://userscripts.org/scripts/show/8712).
// Released under the GPL license
// http://www.gnu.org/copyleft/gpl.html
//
// --------------------------------------------------------------------
//
// This is a Greasemonkey user script.
//
// To install, you need Greasemonkey: http://greasemonkey.mozdev.org/
// Then restart Firefox and revisit this script.
// Under Tools, there will be a new menu item to "Install User Script".
// Accept the default configuration and install.
//
// To uninstall, go to Tools/Manage User Scripts,
// select "Couchsurfing: Bigger pictures", and click Uninstall.
//
// --------------------------------------------------------------------
//
// ==UserScript==
// ==UserScript==
// @name Couchsurfing: Bigger pictures
// @description Displays the pictures larger when you roll over smaller ones on couchsurfing.org
// @include http://*couchsurfing.com/*
// @include http://*couchsurfing.org/*
// ==/UserScript==
/*
* Load on/off switch to grease menu
* Copied from http://wiki.greasespot.net/Code_snippets#Make_menu_toggle
*/
function makeMenuToggle(key, defaultValue, toggleOn, toggleOff, prefix) {
/* Load current value into variable */
window[key] = GM_getValue(key, defaultValue);
/* Add menu toggle */
GM_registerMenuCommand( (prefix ? prefix+": " : "") + (window[key] ? toggleOff : toggleOn),
function() { GM_setValue(key, !window[key]); location.reload(); }
);
}
/* Add possibility to (de)activate thumbnail/medium image size zooming */
makeMenuToggle("zoom_thumbnail_images", true, "Zoom thumbnails", "Don't zoom thumbnails");
makeMenuToggle("zoom_medium_images", true, "Zoom medium sized images", "Don't zoom medium sized images");
/*
* The only way I could find to have global variables
*/
function global() {}
/* Calls the counts of showPopup, which will only react to the last call */
global.countCalls = 0;
/* Stores the next unused image id for the id tag. Needs to be incremented when used. */
global.nextImageId = 0;
/*
* Add popup div into html body
*/
var div = document.createElement("div");
div.setAttribute("id","popup");
div.setAttribute("style","background:url('+loading+') no-repeat;min-height:0px;min-width:0px;position:fixed;z-index:1000;top:20px;left:20px;background-color:#F7F7F7;");
div.addEventListener("mouseout", onHidePopupEvent, false);
div.addEventListener("click", hidePopup, false);
div.addEventListener("mousemove",hidePopup, true);
var img = document.createElement("img");
img.setAttribute("id","popupImage");
div.appendChild(img);
document.body.appendChild(div);
/*
* Show and hide the popup div with the user/group image
*/
/* Show popup in 0.5s (unless this function will be called again before that) */
function onShowPopupEvent(event) {
window.setTimeout(showPopup, 500, event.target.id, ++global.countCalls);
}
/* Moves div called popup to the position of a user/group image and loads a bigger version of the image in there */
function showPopup(imageId, callId) {
/* Only react on call when it was the last one made */
if (global.countCalls == callId) {
var image = document.getElementById(imageId);
var src = image.getAttribute('src');
var popup = document.getElementById('popup');
var popupImage = document.getElementById('popupImage');
var srcBegin = src.substr(0,47);
var IOPos = src.indexOf("_t_")
if (IOPos > 0) {
var srcleft = src.substr(0,IOPos );
var srcright = src.substr(IOPos + 3,src.length);
/*change _l_ to _m_ to use medium sized images instead of large */
var LImg = (srcleft + "_l_" + srcright);
}
if ((srcBegin == 'http://images.couchsurfing.us.s3.amazonaws.com/' && zoom_thumbnail_images )||(srcBegin == 'http://images.couchsurfing.us.s3.amazonaws.com/' && zoom_medium_images)) {
/* set new image src */
src = LImg;
popupImage.setAttribute('src',src);
/* NOT USED, HAVING IT ON TOP LEFT IS MORE ELEGANT */
/* find coordinates of the original image */
var parent = image;
var top = 0;
var left = 0;
/* while (parent) {
top += parent.offsetTop;
left += parent.offsetLeft;
parent = parent.offsetParent;
}
*/
/* move popup over original image */
/* popup.style.top = top + 'px';
popup.style.left = left + 'px';
popup.style.display = 'block';
*/
popup.style.top = '20px';
popup.style.left = '20px';
popup.style.display = 'block';
}
}
}
/* Hides the popup in 0.5s */
function onHidePopupEvent() {
window.setTimeout(hidePopup, 500);
}
/* Hides the popup and changes its src to '', to prevent the old image from being displayed while the new one is loading */
function hidePopup() {
var popup = document.getElementById('popup');
popup.style.display = 'none';
var popupImage = document.getElementById('popupImage');
popupImage.setAttribute('src','');
}
/*
* Inject script into event handlers
*/
/* add event handlers to member images */
function loadEventHandlers() {
var images = document.getElementsByTagName('img');
for (var i = 0; i < images.length; i++) {
var src = images[i].getAttribute("src");
if (src && ( src.substr(0,29) == 'http://images.couchsurfing.us') /* all CS pics*/
) {
/* Set id to the image, so we can access it easily later. */
if (images[i].getAttribute("id") == null) {
images[i].setAttribute("id","memberImage" + (global.nextImageId++));
}
images[i].addEventListener("mousemove", onShowPopupEvent, false);
images[i].addEventListener("mouseout", function f() { global.countCalls++; }, false);
}
}
}
/* Reload event handlers when document changed (because of AJAX scripts) */
document.addEventListener("DOMAttrModified", documentChanged, false);
function documentChanged(event) {
// alert(event.target.id);
if (event.target.id == "get_kds_link" || /* Gets changed on "Start" page when kds has been loaded */
event.target.id == "checkcode") { /* Gets changed on "Nachrichtendienst" page when message has been opened */
loadEventHandlers();
}
}
/* initially load event handlers (somehow, nothing is executed after this command, so it's in the end of the file...) */
document.addEventListener("load", loadEventHandlers(), false);
