<script src="../main.js" type="text/javascript"></script>
<script>
JPLT.Class.create("JPLT.Object", Object,
function() {},
{
listeners: {},
addEventListener:function(eventName, func) {
if (this.listeners[eventName]) {
this.listeners[eventName].push(func);
}
else {
this.listeners[eventName] = [func];
}
},
fireEvent:function(eventName, args) {
var handlers = this.listeners[eventName];
if (handlers) {
for (var i=0; i<handlers.length; i++) {
handlers[i](args);
}
}
},
log:function() {
try {
console.log.apply( console, arguments );
}
catch(e) {
try {
opera.postError.apply( opera, arguments );
} catch(e){}
}
},
superCall:function(functionName, args) {
return this.superClass.prototype[functionName].call(this,args);
},
superConstruct:function(args) {
this.superClass.call(this,args);
},
concatArgs: function(args,dargs) {
var result = [];
for (var i=0; i<args.length; i++) {
result.push(args[i]);
}
for (var i=1; i<dargs.length; i++) {
result.push(dargs[i]);
}
return result;
},
delegate: function(func) {
var self = this;
var dargs = arguments;
var f = function() { func.apply(self,self.concatArgs(arguments,dargs)); }
return f;
}
}
);
JPLT.Class.create("JPLT.ImageLens",JPLT.Object,
function() {
this.createElement();
this.loadImage();
this.paint();
},
{
loadImage: function() {
this.log("Loading image...");
this.image = new Image();
this.image.addEventListener("load", this.delegate(this.imageLoaded), true);
this.image.src = "image.jpg";
},
imageLoaded: function() {
this.log("Image loaded.");
this.copyImageToCanvas();
this.element.addEventListener("mousemove", this.delegate(this.mouseMoved), true);
},
context: function() {
return this.element.getContext("2d");
},
copyImageToCanvas: function() {
var ctx = this.context();
ctx.drawImage(this.image,0,0,640,640);
},
zoom: function(x,y,w,h) {
var ctx = this.context();
ctx.drawImage(this.image,x*3.65,y*3.65,w,h,x,y,w*3.65,h*3.65);
},
constrain: function(n,min,max) {
if (n<min)
n = min;
else if (n>max)
n = max;
return n;
},
mouseMoved: function(e) {
var x = this.constrain(e.clientX - 25, 1, 640);
var y = this.constrain(e.clientY - 25, 1, 640);
this.copyImageToCanvas();
this.zoom(x,y,50,50);
},
createElement: function() {
this.element = document.createElement("canvas");
this.element.width = "640";
this.element.height = "640";
this.element.style.border = "1px solid #ccc";
this.element.src = "image.jpg";
return this.element;
},
paint: function() {
var body = document.documentElement || document.body;
body.appendChild(this.element);
}
}
);
var logo = new JPLT.ImageLens();
</script>
<h2>Wait for the big ass image to load and then mouse over to zoom. Not IE friendly.</h2>