;(function($){
var Flip = function(canvas,width,height,images,opts) {
//private vars
opts = $.extend({background:"green",cornersTop:true,scale :"noresize"},opts);
var obj = this,
el = canvas.prev(),
index = 0,
init = false,
background = opts.background,
cornersTop = opts.cornersTop,
gradientColors = opts.gradientColors || ['#434343','#b7b7b7','#e2e2e2'],
curlSize = opts.curlSize || 0.1,
scale = opts.scale,
patterns = [],
canvas2 = canvas.clone(),
ctx2 = $.browser.msie?null:canvas2[0].getContext("2d"),
canvas = $.browser.msie?$(G_vmlCanvasManager.initElement(ca nvas[0])):canvas,
ctx = canvas[0].getContext("2d"),
loaded = 0;
var images = images.each(function(i){
if(patterns[i]) return;
var img = this;
img.onload = function() {
var r = 1;
if(scale!="noresize") {
var rx = width/this.width,
ry = height/this.height;
if(scale=="fit")
r = (rx<1 || ry<1)?Math.min(rx,ry):1;
if(scale=="fill") {
r = Math.min(rx,ry);
}
};
$(img).data("flip.scale",r);
patterns[i] = ctx.createPattern(img,"no-repeat");
loaded++;
if(loaded==images.length && !init) {
init = true;
draw();
}
};
if(img.complete)
window.setTimeout(function(){img.onload()},10);
}).get();
var
width = width,height = height,mX = width,mY = height,
basemX = mX*(1-curlSize), basemY = mY*curlSize,sideLeft = false,
off = $.browser.msie?canvas.offset():null,
onCorner = false,
curlDuration=400,curling = false,
animationTimer,startDate,
flipDuration=700,flipping = false,baseFlipX,baseFlipY,
lastmX,lastmY,
inCanvas = false,
mousedown = false,
dragging = false;
$(window).scroll(function(){
//off = canvas.offset(); //update offset on scroll
});
//IE can't handle correctly mouseenter and mouseleave on VML
var c = $.browser.msie?(function(){
var div = $("<div>").width(width).height(height).css({positi on:"absolute",cursor:"default",zIndex:1}).appendTo ("body");
//second hack for IE7 that can't handle correctly mouseenter and mouseleave if the div has no background color
if(parseInt($.browser.version)==7)
div.css({opacity:0.000001,background:"#FFF"});
var positionDiv = function() {
off = canvas.offset();
return div.css({left:off.left+'px',top:off.top+'px'});
}
$(window).resize(positionDiv);
return positionDiv();
})():canvas;
c.mousemove(function(e){
//track the mouse
/*
if(!off) off = canvas.offset(); //safari can't calculate correctly offset at DOM ready
mX = e.clientX-off.left;
mY = e.clientY-off.top;
window.setTimeout(draw,0);
return;
*/
if(!off)
off = canvas.offset(); //safari can't calculate correctly offset at DOM ready
if(mousedown && onCorner) {
if(!dragging) {
dragging = true;
window.clearInterval(animationTimer);
}
mX = !sideLeft?e.pageX-off.left:width-(e.pageX-off.left);
mY = cornersTop?e.pageY-off.top:height-(e.pageY-off.top);
window.setTimeout(draw,0);
return false;
}
lastmX = e.pageX||lastmX, lastmY = e.pageY||lastmY;
if(!flipping) {
sideLeft = (lastmX-off.left)<width/2;
//cornersTop = (lastmY-off.top)<height/2;
}
if(!flipping &&
((lastmX-off.left)>basemX || (lastmX-off.left)<(width-basemX)) &&
((cornersTop && (lastmY-off.top)<basemY) || (!cornersTop && (lastmY-off.top)>(height-basemY)))) {
if(!onCorner) {
onCorner= true;
c.css("cursor","pointer");
}
} else {
if(onCorner) {
onCorner= false;
c.css("cursor","default");
}
};
return false;
}).bind("mouseenter",function(e){
inCanvas = true;
if(flipping) return;
window.clearInterval(animationTimer);
startDate = new Date().getTime();
animationTimer = window.setInterval(cornerCurlIn,10);
return false;
}).bind("mouseleave",function(e){
inCanvas = false;
dragging = false;
mousedown = false;
if(flipping) return;
window.clearInterval(animationTimer);
startDate = new Date().getTime();
animationTimer = window.setInterval(cornerCurlOut,10);
return false;
}).click(function(){
if(onCorner && !flipping) {
flipping = true;
c.triggerHandler("mousemove");
window.clearInterval(animationTimer);
startDate = new Date().getTime();
baseFlipX = mX;
baseFlipY = mY;
animationTimer = window.setInterval(flip,10);
index += sideLeft?-1:1;
if(index<0) index = images.length-1;
if(index==images.length) index = 0;
el.trigger("flip.jflip",[index,images.length]);
}
return false;
}).mousedown(function(){
dragging = false;
mousedown = true;
return false;
}).mouseup(function(){
mousedown = false;
return false;
});