Virtual Mitchell - CSS fix

By AMcD Last update Jul 26, 2006 — Installed 219 times.
// ==UserScript==
// @name           Virtual Mitchell - CSS fix
// @namespace      http://www.userscripts.org/people/3573
// @description    fix layout to show full images (without scrollbars)
// @include        http://www.mitchelllibrary.org/virtualmitchell/index.php*
// ==/UserScript==
// Virtual Mitchell - CSS fix
// v1.2.2 - 27/07/2006 - AMcD
// 			FIXED - baws. mistake in the mirror image stuff.
//
	var aEvt = ((window.opera) ? false : true);
	function _gel(ig_){return document.getElementById?document.getElementById(ig_):null}
	function _gelstn(ig_){return document.getElementsByTagName?document.getElementsByTagName(ig_):new Array}

	var registeredEventListeners = new Array();
	function addEventListener(target, event, listener, capture) {
    	registeredEventListeners.push( [target, event, listener, capture] );
    	target.addEventListener(event, listener, capture);
	}
	function unregisterEventListeners(event) {
    	for (var i = 0; i < registeredEventListeners.length; i++) {
	        var rel = registeredEventListeners[i];
    	    rel[0].removeEventListener(rel[1], rel[2], rel[3]);
    	}
    	window.removeEventListener('unload', unregisterEventListeners, false);
    	registeredEventListeners=[];
    }
	if (!window.opera) addEventListener(window, 'unload', unregisterEventListeners, false);	
	
	// Image Rotation Class
	// v1.1 - AMcD - 27/07/2006
	var Rotate = {
		draw: function(image,angle) {
			try {
				var p = image;
				var d= _gel('rotatediv');
				if (d) {
					p.style.display='block';
					d.parentNode.removeChild(d);
				}
				d = document.createElement('div');
				d.id="rotatediv";
				var classes = p.className.split(' ');
				var newClasses = '';
				for (j=0;j<classes.length;j++) {
					if (newClasses) newClasses += ' ';
					newClasses += classes[j];
				}
				var iHeight = (angle==90 || angle==270) ? p.width : p.height;
				var iWidth = (angle==90 || angle==270) ? p.height : p.width;

				var canvas = document.createElement('canvas');
				if (canvas.getContext) {
					d.className = newClasses;
					d.style.cssText = p.style.cssText;
					p.style.cssText = 'vertical-align: bottom';

					var context = canvas.getContext("2d");
					canvas.style.height = iHeight+'px';
					canvas.style.width = iWidth+'px';
					canvas.height = iHeight;
					d.style.height = iHeight+'px';
					canvas.width = iWidth;
					d.style.width = iWidth+'px';
					p.parentNode.insertBefore(d,p);
					p.style.display="none";
					d.appendChild(canvas);
					context.save();
					context.scale(1,1);
					switch(angle) {
					case 90:
						context.translate(iWidth,0) ;
						context.rotate(90 * Math.PI / 180);
						break;
					case 180:
						context.translate(iWidth,iHeight) ;
						context.rotate(180 * Math.PI / 180);
						break;
					case 270:
						context.translate(0,iHeight) ;
						context.rotate(270 * Math.PI / 180);
						break;
					case -1:
						context.translate(0,iHeight) ;
						context.scale(1,-1);
						break;
					case -2:
						context.translate(iWidth,0) ;
						context.scale(-1,1);
						break;
					default:
						context.translate(0,0) ;
						break;
					}
					context.drawImage(image, 0, 0);
					context.restore();
				}
			} catch (e) {}
		}
	}
	
	var theImg;
	function rotateRight() { Rotate.draw(theImg, 90); }
	function rotateLeft() { Rotate.draw(theImg, 270); } 
	function flip() { Rotate.draw(theImg, 180); }
	function reflect() { Rotate.draw(theImg, -1); }
	function mirror() { Rotate.draw(theImg, -2); }

	function clickHandler(evt) {
	  	var eventCaptured = false;
	  	var tid=evt.target.id;
  		if (tid=='hggm_rl') rotateLeft(); 
  		if (tid=='hggm_rr') rotateRight(); 
  		if (tid=='hggm_f') flip(); 
  		if (tid=='hggm_m') mirror(); 
  		if (tid=='hggm_r') reflect(); 
  		if (tid=='hggm_o') restore(); 
  		if(eventCaptured) {	evt.stopPropagation(); evt.preventDefault(); }
	}
	function restore() { 
		theImg.style.display='block';
		var d=_gel('rotatediv');
		if (d) d.parentNode.removeChild(d);
	}
// #####################		
if (location.search.indexOf('s=zoom')!=-1 && _gel('largeImage')) {
	// it's the large view	
	try {
		var el = _gel('wrapper');
		el.style.width='100%';
		el = _gel('navigate');
		el.style.position='absolute';
		el.style.top='130px';
		el.style.right='7px';
		el = _gel('footer');
		el.style.position='relative';
		el.style.bottom='0px';
		el = _gel('content');
		el.style.width = 'auto';
		el.style.float = 'left';
		el =_gel('crumbtrailComponentOuter');
		el.style.position='absolute';
		el.style.left='7px;';
		el.style.top='130px';
		el =_gel('pagerOuter');
		el.style.position='absolute';
		el.style.left='7px;';
		el.style.top='149px';
		el.style.width='612px';
		el =_gel('pagerInnerRight');
		var d=document.createElement('SPAN');
		d.style.float='left';
		d.innerHTML='<small>Rotate:<input type="button" id="hggm_rl" value="L" title="Rotate Left"/><input type="button" id="hggm_rr" value="R" title="Rotate Right" /> Flip: <input type="button" id="hggm_f" value="F" title="Turn through 180"/><input type="button" id="hggm_m" value="M" title="Left-to-right mirror"/><input type="button" id="hggm_r" value="R" title="Top-to-bottom mirror"/><input type="button" id="hggm_o" value="O" title="Restore Original Image"/></small>';
		el.appendChild(d);
		el =_gel('largeImage');
		el.style.position='absolute';
		el.style.left='9px;';
		el.style.top='180px';
		el.style.width='100%';
		theImg = el.getElementsByTagName('IMG')[0];
		addEventListener(_gelstn('body')[0],'click', clickHandler, aEvt);
	} catch(er) {}
}