<head>
<script type="text/javascript" src="utilities.js"></script>
<style type="text/css" media="screen">
* { outline : none; -moz-outline : none -moz-mac-focusring; }
#source-img { position: absolute; left: -999em; }
canvas { position: absolute; float:center; top: -90px; }
#screen { position: absolute; float:center; top: 0px; }
#screen div { position: absolute; top: 0px; left: 300px; width: 630px; height: 815px;
background: #fffff; }
div#screen-overlay { position: absolute; top: 0px; left: 0px; margin-left: 0px; height: 715px;
width: 630px; }
</style>
<script type="text/javascript">
var YD = YAHOO.util.Dom,
YE = YAHOO.util.Event;
var canvas, ctx, img, widthSlider, scalingSlider, pw = 630, sf = .490, imgOffset = 0,
stage, stagePos, stageDim, moveInterval, moveDirection, dist = 1, data = []; function init() {
canvas = YD.get('cv');
ctx = canvas.getContext('2d');
canvas.width = 630;
canvas.height = 815;
canvas.style.width = '630px';
canvas.style.height = '815px';
stage = YD.get('screen-overlay');
YE.on(stage, 'mousedown', startMoveBackground);
YE.on(stage, 'mousemove', moveBackground);
YE.on(stage, 'mouseout', stopMove);
YE.on(stage, 'mouseup', stopMoveBackground);
stagePos = YD.getXY(stage);
stageDim = [ YD.getStyle(stage, 'width'), YD.getStyle(stage, 'height') ];
img = YD.get('source-img');
redraw(); }
function startMoveBackground(e) {}
function moveBackground(e) {
dist = Math.abs(e.clientX - (parseInt(stageDim[0], 10) / 2 + stagePos[0])) / 3; var timeInt = 1;
if(e.clientX - stagePos[0] > parseInt(stageDim[0], 10) / 2) {
if(moveDirection === 'left' || !moveDirection) {
clearInterval(moveInterval);
moveInterval = setInterval(function() { moveRight(); }, timeInt); moveDirection = 'right'; }}
else
{ if(moveDirection === 'right' || !moveDirection) {
clearInterval(moveInterval);
moveInterval = setInterval(function() { moveLeft(); }, timeInt);
moveDirection = 'left'; }}}
function stopMove() {
clearInterval(moveInterval);
moveDirection = null; }
function moveRight() {
imgOffset += dist;
redraw(); }
function moveLeft() {
imgOffset -= dist;
redraw(); }
function stopMoveBackground(e) {}
function precalculate(img, x, y, pixelWidth, scalingFactor, offset) {
if(typeof offset === 'undefined') offset = 0;
var h = img.height,
w = (img.width - 2) / 2.5;
var polarity = (pixelWidth > 0) ? 1 : -1;
var widthFactor = Math.abs(pixelWidth) / w;
var delta = Math.abs(pixelWidth);
var dHeight, dWidth, dy, dx;
var constant = Math.pow(100000, scalingFactor); //380;
var firstInc = ((delta / 2) * (delta / 2)) / constant;
for(var n = 0, len = delta, inc = w / delta, incScale = (1 - scalingFactor) / delta; n < len; n++) {
(function(m) {
sx = function(offset) { return ((inc * m + offset) >= 0) ? (inc * m + offset) % img.width : img.width +
((inc * m + offset) % img.width) };})(n);
sy = 0;
sWidth = inc;
sHeight = h;
firstHalf = h + 100 - firstInc + (((len / 2) - n) * ((len / 2) - n)) / constant;
secondHalf = h + 100 - firstInc + ((n - (len / 2)) * (n - (len / 2))) / constant;
dHeight = (n < len / 2) ? firstHalf : secondHalf;
dWidth = inc * widthFactor;
dy = y + (h - dHeight) / 2;
dx = x + (inc * n * widthFactor * polarity);
data.push({
sx: sx,
sy: sy,
sWidth: sWidth,
sHeight: sHeight,
dx: dx,
dy: dy,
dWidth: dWidth,
dHeight: dHeight }); } }
function redraw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
displayImage(ctx, img, 0, 140, pw, sf, imgOffset); }
function displayImage(ctx, img, x, y, pixelWidth, scalingFactor, offset) {
if(data.length === 0) {
precalculate(img, x, y, pixelWidth, scalingFactor, offset); }
var slice, sx;
for(var n = 0, len = data.length; n < len; n++) {
slice = data[n];
ctx.drawImage(img, slice.sx(offset), slice.sy, slice.sWidth, slice.sHeight,
slice.dx, slice.dy, slice.dWidth, slice.dHeight); }}
YAHOO.util.Event.on(window, 'load', init);
</script>
</head>
<body>
<canvas id="cv"></canvas>
<img src="panorama.jpg" id="source-img" />
<div id="screen-overlay"></div>
</body>