// ==UserScript==
// @name                Item zoom
// @version             2.2
// @date                2009-05-01
// @author              Ian Malpass ( ian AT etsyhacks DOT com )
// @namespace           etsy.com
// @description         Adds "zoom in" links to items in search and shop listings
// @include             http://www.etsy.com/search_results.php?*
// @include             http://www.etsy.com/search_results_materials.php?*
// @include             http://www.etsy.com/search_results_shop.php?*
// @include             http://www.etsy.com/shop.php?*
// ==/UserScript==

// Image data URIs
var zoomInUri = "data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00%0E%00%00%00%0E%08%06%00%00%00%1FH-%D1%00%00%00%01sRGB%00%AE%CE%1C%E9%00%00%00%09pHYs%00%00%0B%13%00%00%0B%13%01%00%9A%9C%18%00%00%00%07tIME%07%D8%0B%17%04%12%02%19T%D3%F6%00%00%00%19tEXtComment%00Created%20with%20GIMPW%81%0E%17%00%00%00xIDAT(%CF%A5RA%0E%C0%20%08%A3%0BW%BF%E9%9F%C67%7D%40wbaD%9C%D9%3C!%A1%B4%14%40%F2%94%0FOs%02%40%8F%7F%92%F6%0Al%AD%F5%5C%08%A0%CF%C0G%2C%18c%98%C7%CEL%D2%B2%8A%1BXu%8Dr3XW%F3E%D6R%EA%2FW%BD%F3%8A%E9%C1X%19P%8D%20%22%82x%003%93%AA%BD%22_%CE%8A9%82u%96%DC%91%BA%E5jl%E6%B1%EE%DA%9F%95%5C0lR%E8%CB%23%40%A8%00%00%00%00IEND%AEB%60%82";
var zoomOutUri = "data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00%0E%00%00%00%0E%08%06%00%00%00%1FH-%D1%00%00%00%01sRGB%00%AE%CE%1C%E9%00%00%00%09pHYs%00%00%0B%13%00%00%0B%13%01%00%9A%9C%18%00%00%00%07tIME%07%D8%0B%17%04%158%90%19%9C%83%00%00%00%19tEXtComment%00Created%20with%20GIMPW%81%0E%17%00%00%00mIDAT(%CF%9DRA%0E%C0%20%08%B3%84%AB%DF%F4O%F3%9B%3E%A0%BB-%8C%B9j%EC%09Ik%A1%01%24%AFr%00%CF%0D%00-%BEI%F6%A5%B0%D6%DA2%11%40%9B%89-%12%C6%18%1F%02%C9%9E%A7x%84%7F%BF*%B1%AB%FD%D4%9EV%0E%E1%3B%09%CE%60*%00%B5%82%AD%D2%8B%BDW%9D%2FG9G%13%DFIP%8E%BAr%C8%B5%EF%A6%98'%B9%01%F6%DEF%EA%00%05%D0l%00%00%00%00IEND%AEB%60%82"

// Global to store a ref to the currently zoomed image, so we can hide it when you zoom something else
var currentZoom;

// Search for links
var links = document.getElementsByTagName( 'a' );
for ( var l = 0; l < links.length; l++ ) {
    var link = links[ l ];
    if ( link.href && link.href.indexOf( 'view_listing.php' ) > -1 ) {
        // found a listing link - add the zoom icon and a hidden div with the zoomed image
        // find the item image, so we can extract the URL
        var itemImg = link.getElementsByTagName( 'img' )[ 0 ];
        // Node to contain the zoomed image and zoom-out icon, so we can switch them on
        // and off easily
        var div = document.createElement( 'div' );
        div.style.position = 'absolute';
        div.style.display = 'none';
        div.style.zIndex = 10; // z-index 10 so it's higher than the zoom-in icon

        // Zoomed image node
        var zoomedImg = document.createElement( 'img' );
        var zoomSrc = itemImg.src.replace( /(75x75|155x125)/, '430xN' ); // work out the larger image URL
        zoomedImg.style.position = 'absolute';
        zoomedImg.width = '430';
        zoomedImg.style.width = '430px';
        zoomedImg.style.height = 'auto';
        zoomedImg.className = 'grey_border';
        div.appendChild( zoomedImg );

        // Zoom-in icon
        var zoomInImg = document.createElement( 'img' );
        zoomInImg.src = zoomInUri;
        zoomInImg.className = 'grey_border';
        zoomInImg.style.position = 'absolute';
        zoomInImg.style.zIndex = 1; // z-index of 1 to make sure it's lower than the zoomed image div
        zoomInImg.addEventListener( 'click', genClick( div, '', zoomInImg, zoomedImg, zoomSrc ), true );
        zoomInImg.style.display = 'none';
        zoomInImg.style.width = '14px';
        zoomInImg.style.height = '14px';

        itemImg.addEventListener( 'mouseover', genOver( zoomInImg, '' ), true );
        itemImg.addEventListener( 'mouseout',  genOver( zoomInImg, 'none' ), true );

        // Zoom-out icon
        var zoomOutImg = document.createElement( 'img' );
        zoomOutImg.src = zoomOutUri;
        zoomOutImg.className = 'grey_border';
        zoomOutImg.style.position = 'absolute';
        zoomOutImg.addEventListener( 'click', genClick( div, 'none' ), true );
        zoomOutImg.style.width = '14px';
        zoomOutImg.style.height = '14px';

        div.appendChild( zoomOutImg );

        // add the div and zoom-in nodes into the link
        link.insertBefore( div, link.firstChild );
        link.insertBefore( zoomInImg, link.firstChild );

        // Loop past the text link to the item
        l++;
        while ( link.href && link.href.indexOf( 'view_listing.php' ) == -1 ) l++;
    }
}

// closure-generator to make the click handlers
function genClick ( div, display, icon, img, src ) {
    return function ( event ) {
        div.style.display = display; // hide or display the node
        if ( display == '' ) {
            if ( img != null && src != null ) {
                // lazy loading of zoomed images - only load the ones we need
                img.src = src;
            }
            // displaying an image - hide the currently zoomed image if there is one
            if ( currentZoom != null ) currentZoom.style.display = 'none';
            // stash the current node for future reference
            currentZoom = div;
            // hide the zoom-in icon
            if ( icon != null ) icon.style.display = 'none';
        } else {
            currentZoom = null;
        }
        event.preventDefault();
    };
}    

function genOver ( icon, display ) {
    return function ( event ) {
        if ( display == 'none' ) {
            // check to see if we're mousing over the zoom icon
            if ( ! event.relatedTarget || ! event.relatedTarget.src || event.relatedTarget.src. indexOf( 'data:' ) != 0 ) {
                // we're not - hide the zoom icon
                icon.style.display = 'none';
            }
        } else {
            // show the zoom icon
            icon.style.display = ''
        }
    };
}