/* jQuery.rotateImage by Andrew Fitzpatrick
*
* Based on jQuery.threesixty Image rotation plug-in for jQuery version 0.6
* http://www.mathieusavard.info/threesixty/
*
* Copyright 2008-2010 Mathieu Dumais-Savard
* Licensed under the MIT license
* http://www.opensource.org/licenses/mit-license.php
*/
(function ($) {
var methods = {
Init: function (options) {
var canvas = {};
var classes = this.attr("class");
var image = new Image();
var opts = $.extend($.fn.rotateImage.data, options);
var strings = [];
var slices = 0;
if (!!window.HTMLCanvasElement) {
strings.push("");
this.after(strings.join(''));
$(this).hide();
slices = this.attr("data-image-count");
if (slices > 0) {
opts.images.push(this.attr("src"));
for (var i = 1; i < slices; i++) {
opts.images.push(this.attr("src").replace(opts.offset, (opts.offset + i)));
}
}
strings = [];
strings.push("
");
$.each(opts.images, function (index) {
strings.push("
");
});
strings.push("
");
$("body").append(strings.join(''));
opts.count = opts.images.length;
opts.sliced = this.width() / (opts.count * 1.5);
canvas = document.getElementById("rotateImage");
opts.canvas = canvas.getContext("2d");
image.src = opts.images[0];
opts.canvas.drawImage(image, 0, 0);
canvas.addEventListener("mouseenter", $.fn.rotateImage.MouseEnter, false);
canvas.addEventListener("mousemove", $.fn.rotateImage.MouseMove, false);
canvas.addEventListener("mouseleave", $.fn.rotateImage.MouseLeave, false);
canvas.addEventListener("touchstart", $.fn.rotateImage.TouchStart, false);
canvas.addEventListener("touchmove", $.fn.rotateImage.TouchMove, true);
canvas.addEventListener("touchend", $.fn.rotateImage.TouchEnd, true);
}
},
Rotate: function (newPosition) {
var opts = $.fn.rotateImage.data;
var slice = opts.lastX - newPosition;
if (Math.abs(slice) > opts.sliced) {
slice = Math.round(slice / opts.sliced);
if (slice > 0) {
if (opts.index + slice < opts.count)
opts.index += slice;
else
opts.index = (opts.index + slice) % opts.count;
} else {
if (opts.index + slice >= 0)
opts.index += slice;
else
opts.index = opts.count - (Math.abs(opts.index + slice) % opts.count);
}
$.fn.rotateImage.paint();
opts.lastX = newPosition;
var now = Date.now();
var elapsed = now - opts.lastTime;
var v = opts.count * slice / (1 + elapsed);
opts.timing = .8 * elapsed + .2 * opts.timing;
opts.velocity = .8 * v + .2 * opts.velocity;
opts.lastTime = now;
}
},
Decelerate: function () {
var opts = $.fn.rotateImage.data;
if (opts.velocity > 1 || opts.velocity < -1) {
opts.amplitude = opts.amplitudeFactor * opts.velocity;
opts.momentum = window.setInterval($.fn.rotateImage.autoScroll, opts.timing);
}
}
};
$.fn.rotateImage = function (method) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.Init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist on rotateImage');
}
}
$.fn.rotateImage.data = {
canvas: {},
images: [],
amplitude: 0,
amplitudeFactor: .8,
count: 0,
index: 0,
lastX: -1,
lastTime: Date.now(),
momentum: 0,
offset: 0,
sliced: 0,
timeConstant: 325,
timing: 0,
velocity: 0
};
$.fn.rotateImage.autoScroll = function () {
var opts = $.fn.rotateImage.data;
var elapsed, delta;
elapsed = Date.now() - opts.lastTime;
delta = opts.amplitude * Math.exp(-elapsed / opts.timeConstant);
var slice = Math.round(Math.abs(delta));
if (slice > 1) {
if (delta > 0) {
if (opts.index + slice < opts.count)
opts.index += slice;
else
opts.index = (opts.index + slice) % opts.count;
} else {
if (opts.index - slice >= 0)
opts.index -= slice;
else
opts.index = opts.count - (Math.abs(opts.index - slice) % opts.count);
}
$.fn.rotateImage.paint();
} else if (opts.momentum > 0) {
window.clearInterval(opts.momentum);
opts.momentum = 0;
}
}
$.fn.rotateImage.paint = function (index) {
var image = new Image();
image.src = $.fn.rotateImage.data.images[$.fn.rotateImage.data.index];
$.fn.rotateImage.data.canvas.drawImage(image, 0, 0);
}
$.fn.rotateImage.MouseEnter = function (e) {
if (!e)
e = event;
var opts = $.fn.rotateImage.data;
opts.lastX = e.pageX;
opts.lastTime = Date.now();
if (opts.momentum > 0) {
window.clearInterval(opts.momentum);
opts.momentum = 0;
}
}
$.fn.rotateImage.MouseMove = function (e) {
if (!e)
e = event;
$.fn.rotateImage("Rotate", e.pageX);
}
$.fn.rotateImage.MouseLeave = function () {
$.fn.rotateImage("Decelerate");
}
$.fn.rotateImage.TouchStart = function (e) {
if (!e)
e = event;
e.preventDefault();
var opts = $.fn.rotateImage.data;
opts.lastX = $.fn.rotateImage.averageTouchPoints(e);
opts.lastTime = Date.now();
if (opts.momentum > 0) {
window.clearInterval(opts.momentum);
opts.momentum = 0;
}
}
$.fn.rotateImage.TouchMove = function (e) {
if (!e)
e = event;
e.preventDefault();
$.fn.rotateImage("Rotate", $.fn.rotateImage.AverageTouchPoints(e));
}
$.fn.rotateImage.TouchEnd = function (e) {
if (!e)
e = event;
e.preventDefault();
e.stopPropagation();
$.fn.rotateImage("Decelerate");
}
$.fn.rotateImage.AverageTouchPoints = function (e) {
var len = e.targetTouches.length;
var x = 0;
for (i = 0; i < len; i++) {
x += e.targetTouches[i].pageX;
}
return x / len;
}
})(jQuery);