kettek2/wiki/games/newsboy/swappr.js

var swappr = swappr || {};
swappr = {
	Init: function(setup_object) {
		swappr.addEvent(window, 'load',
			(function(setup_object) {
				return function(e) {
					swappr._Init(setup_object);
				}
			})(setup_object)
		);
	},
	addSwap: function(from, to) {
		swappr.addEvent(window, 'load',
			(function(from, to) {
				return function(e) {
					swappr._addSwap(from, to);
				}
			})(from, to)
		);
	},
	startSwap: function(anchor, setup_object) {
		if (!setup_object.is_fading) {
			setup_object.is_fading = true;
			setup_object.to_img.src = anchor.href;
			setup_object.from_img.onload = '';
			swappr.showLoader(setup_object);
			setup_object.to_img.onload = (function(setup_object) {
				return function(e) {
					swappr.doSwap(setup_object);
					swappr.hideLoader(setup_object);
				}
			})(setup_object);

			setup_object.to_img.onerror = (function(setup_object) {
				return function(e) {
					setup_object.is_fading = false;
				}
			})(setup_object);
		}
	},
	doSwap: function(setup_object) {
		if (setup_object.to_img == setup_object.second) {
			setup_object.to_img.style.marginLeft = -(setup_object.to_img.offsetWidth/2)+"px";
		}
		var start_time = new Date().getTime();
		setup_object.fade_in = setInterval( 
			(function(start_time, anchor, setup_object) {
				return function(e) {
					var delta = new Date().getTime() - start_time;
					if (delta >= setup_object.time) {
						delta = setup_object.time;
						clearInterval(setup_object.fade_in);
						setup_object.is_fading = false;
						swappr.setFade(setup_object.to_img, setup_object.rate*delta);
						swappr.setFade(setup_object.from_img, 100-setup_object.rate*delta);
						if (setup_object.from_img == setup_object.first) {
							setup_object.from_img = setup_object.second;
							setup_object.to_img = setup_object.first;
						} else {
							setup_object.from_img = setup_object.first;
							setup_object.to_img = setup_object.second;
						}
					} else {
						swappr.setFade(setup_object.to_img, setup_object.rate*delta);
						swappr.setFade(setup_object.from_img, 100-setup_object.rate*delta);
					}
				}
			})(start_time, anchor, setup_object)
		, 25);
	},
	setFade:function(target, fade) {
		target.style.opacity = fade/100;
		target.style.filter = 'alpha(opacity='+fade+')';
	},
	showLoader: function(setup_object) {
		setup_object.loader_interval = setInterval(
			(function(setup_object) {
				return function(e) {
					swappr.animateLoader(setup_object);
				}
			})(setup_object)
		, 25);
		setup_object.loader.style.display = 'block';
	},
	hideLoader: function(setup_object) {
		clearInterval(setup_object.loader_interval);
		setup_object.loader.style.display = 'none';
	},
	animateLoader: function(setup_object) {
		var delta = new Date().getTime() - setup_object.loader_start;
		if (!setup_object.loader_toggle) {
			swappr.setFade(setup_object.loader, (setup_object.rate/2)*delta);
		} else {
			swappr.setFade(setup_object.loader, 100-((setup_object.rate/2)*delta));
		}
		if (delta >= setup_object.time) {
			setup_object.loader_start = new Date().getTime();
			setup_object.loader_toggle = (setup_object.loader_toggle ? false : true);
		}
	},
	processAnchors: function(element, to) {
		swappr.addEvent(window, 'load',
			(function(element, to) {
				return function(e) {
					swappr._processAnchors(element, to);
				}
			})(element, to)
		);
	},
	addEvent: function(target, event_type, callback, bubble) {
		bubble = (typeof bubble !== 'undefined' ? bubble : false);
		if (typeof target.attachEvent !== 'undefined') {
			target.attachEvent('on'+event_type, callback);
		} else if (typeof target.addEventListener !== 'undefined') {
			target.addEventListener(event_type, callback, bubble);
		}
	},
	_Init: function(setup_object) {
		var time = (setup_object.time ? setup_object.time : 250);
 		var from_element = document.getElementById(setup_object.from);
		var display = document.getElementById(setup_object.display);
		var display_imgs = display.getElementsByTagName('img');
		if (!display_imgs[0]) {
			first_img = document.createElement('img');
			display.appendChild(first_img);
		} else {
			first_img = display_imgs[0];
		}
		if (!display_imgs[1]) {
			var second_img = document.createElement('img');
			display.appendChild(second_img);
		} else {
			var second_img = display_imgs[1];
		}
		if (!second_img.style.position) {
			second_img.style.position = "absolute";
			second_img.style.left = "50%";
		}
		swappr.setFade(second_img, 0);
		if (!display.style.position) {
			display.style.position = 'relative';
		}
		var loader = document.createElement('div');
		loader.className = 'swappr_loader';
		loader.style.display = 'none';
		//loader.style.position = "absolute";
		//loader.style.top = "50%";
		//loader.style.left = "50%";
		loader.innerHTML = (setup_object.loader_text ? setup_object.loader_text : 'loading. . .');
		display.appendChild(loader);
		//loader.style.marginLeft = -(loader.offsetWidth/2)+"px"
		//loader.style.marginTop = -(loader.offsetHeight/2)+"px"
		swappr._processAnchors({display: display, first: first_img, second: second_img, to_img: second_img, from_img: first_img, from: from_element, loader: loader, loader_start: new Date().getTime(), time: time, rate: (100/time)});
	},
	_addSwap: function(anchor, setup_object) {
		this.addEvent(anchor, 'click', (function(anchor, setup_object) {
				return function(e) {
					swappr.startSwap(anchor, setup_object);
					return swappr.preventDefaultEvent(e);
				}
			})(anchor, setup_object)
		);
	},
	_processAnchors: function(setup_object) {
		var anchors = setup_object.from.getElementsByTagName('a');
		for (anchor in anchors) {
			swappr._addSwap(anchors[anchor], setup_object);
		}
	},
	preventDefaultEvent: function(event) {
		if (event.preventDefault) {
			event.preventDefault();
		} else {
			event.returnValue = false;
		}
		return false;
	},
	postLoad: function() {
		scrollr.addSwap = scrollr._addSwap;
		scrollr.processAnchors = scrollr._processAnchors;
		scrollr.Init = scrollr._Init;
	}
}; swappr.addEvent(window, 'load', swappr.postLoad);