var imagesPath = "http://www.mirrabliss.com/uploads/1/7/7/9/17790039/";// this is the path to the normal-sized images
var imagesPath2x = "http://www.mirrabliss.com/uploads/1/7/7/9/17790039/ ";//this is the path to high-resolution images
var cameraDistance = 1000;//a smaller number means the image will skew more (greater 3d effect).
var defaultImgSize = {width: 756, height:504};//the default image size
var cardImages =
[
[
{front:"nov-08-2014.png", back:"nov-09-2014.png"},
{front:"nov-10-2014.png", back:"nov-11-2014.png", width:756, height:504},
{front:"nov-12-2014.png", back:"nov-13-2014.png", width:756, height:504}
],
[
{front:"nov-20-2014.png", back:"nov-21-2014.png", width: 200, height: 350}
]
];
//--------------------------NO NEED TO EDIT BELOW THIS LING--------------------------//
//private vars
var currentImageSet = [];
var allClasses = [];
var pixelRatio;
var cardDepth = 2;
var isMoving = [];
var windowWidth = [];
//on page load
window.addEventListener('load', function(){
//determine image size (retina or not)
if(window.devicePixelRatio == 2){
imagesPath = imagesPath2x;
}
//for each business card viewer
allClasses = document.getElementsByClassName('dxcbusinesscardviewer');
for (var i = 0; i < allClasses.length; i++) {
isMoving.push(true);
windowWidth.push(allClasses[i].offsetWidth);
currentImageSet.push(0);
setupScene(i, 0);
};
}, false);
//set up the 3d scene
function setupScene(viewerNum, cardNum)
{
var thisViewer = cardImages[viewerNum];
var images = [];
for (var i = 0; i < thisViewer.length; i++) {
images.push(imagesPath + thisViewer[i].front);
images.push(imagesPath + thisViewer[i].back);
};
var setNum = 0;
//preload the images
$.preload(images, 2, function(last){
if(setNum == 0){
loadFirstCard(viewerNum, cardNum, this[0], this[1])
}
setNum++;
});
}
//load the firest card (front and back)
function loadFirstCard(viewerNum, cardNum, front, back)
{
var cardClass = allClasses[viewerNum].getElementsByClassName('dxcCard');
cardClass = cardClass[0];
var frontClass = allClasses[viewerNum].getElementsByClassName('cardFront');
var cardW = cardImages[viewerNum][cardNum].width;
var cardH = cardImages[viewerNum][cardNum].height;
if(!cardW){
cardW = defaultImgSize.width;
cardH = defaultImgSize.height;
}
var newFront = $('
').appendTo(frontClass[0]);
var backClass = allClasses[viewerNum].getElementsByClassName('cardBack');
var newBack = $('
').appendTo(backClass[0]);
//create the animation
TweenMax.from(cardClass, .7, {x:-windowWidth[viewerNum], rotationZ:-25, onComplete:stopMoving, onCompleteParams:[viewerNum]});
var newX = (allClasses[viewerNum].offsetWidth - cardW)/2;
var newY = (allClasses[viewerNum].offsetHeight - cardH)/2;
//set the size based on the card
TweenMax.set(cardClass, {
css:{
width: cardW,
height:cardH
}
});
//set the image where it should go
TweenMax.set(frontClass, {css:{transformPerspective:cameraDistance,
transformStyle:"preserve-3d", backfaceVisibility: "hidden"}});
TweenMax.set(backClass, {css:{transformPerspective:cameraDistance,
transformStyle:"preserve-3d",rotationY:180, z:-cardDepth, backfaceVisibility: "hidden"}});
//set the click functions
newFront.click(function(){
flipCard(frontClass, -180, -cardDepth, viewerNum);
flipCard(backClass, 0, 0, viewerNum);
});
newBack.click(function(){
flipCard(frontClass, 0, 0, viewerNum);
flipCard(backClass, 180, -cardDepth, viewerNum);
});
}
//the image has stopped moving
function stopMoving(viewerNum)
{
isMoving[viewerNum] = false;
}
function flipCard(toFlip, angle, zind, viewerNum)
{
//move up, flip, drop
var tl = new TimelineLite();
var rotZ = 0;
allClasses[viewerNum].style.overflow = "visible";
tl.to(toFlip, .2, {css:{z:200, rotationZ:rotZ}});
tl.to(toFlip, .5, {css:{rotationY:angle}});
tl.to(toFlip, .6, {css:{z:zind}, ease:Bounce.easeOut, onComplete:changeOverflow, onCompleteParams:[viewerNum]});
}
//change the overflow setting (so you can see the whole card even when it's flipping)
function changeOverflow(viewerNum)
{
allClasses[viewerNum].style.overflow = "hidden";
}
//go to the previous card
function previousCard(viewerNum)
{
prevNextCard(viewerNum, -1);
}
//go to the next card
function nextCard(viewerNum)
{
prevNextCard(viewerNum, 1);
}
//actually go to a different card
function prevNextCard(viewerNum, moveDir)
{
var currentImageNum = currentImageSet[viewerNum];
var newImageNum = currentImageNum + moveDir;
var totalImages = cardImages[viewerNum].length;
if(newImageNum < 0){
newImageNum = totalImages - 1;
}else if(newImageNum >= totalImages){
newImageNum = 0;
}
switchCardByNum(viewerNum, newImageNum, moveDir);
}
//switch the card
function switchCard(viewerNum, newImageNum)
{
var moveDir = -1;
if(currentImageSet[viewerNum] == newImageNum)
return;
if(currentImageSet[viewerNum] < newImageNum)
moveDir = 1;
switchCardByNum(viewerNum, newImageNum, moveDir);
}
//switch the card by its number
function switchCardByNum(viewerNum, newImageNum, moveDir)
{
if(isMoving[viewerNum])
return;
currentImageSet[viewerNum] = newImageNum;
isMoving[viewerNum] = true;
allClasses[viewerNum].style.overflow = "hidden";
var frontClass = allClasses[viewerNum].getElementsByClassName('cardFront');
var backClass = allClasses[viewerNum].getElementsByClassName('cardBack');
var frontImage = frontClass[0].getElementsByTagName("img")[0];
var frontPath = imagesPath + cardImages[viewerNum][newImageNum].front;
var backImage = backClass[0].getElementsByTagName("img")[0];
var backPath = imagesPath + cardImages[viewerNum][newImageNum].back;
var cardClass = allClasses[viewerNum].getElementsByClassName('dxcCard');
var tl = new TimelineLite();
tl.to(cardClass, .4, {x: windowWidth[viewerNum] * -moveDir, onComplete:switchImages, onCompleteParams:[viewerNum, newImageNum, frontImage, frontPath, backImage, backPath]});
tl.set(cardClass, {x:windowWidth[viewerNum] * moveDir, rotationY:0, z:0})
tl.to(cardClass, .4, {x: 0, onComplete:stopMoving, onCompleteParams:[viewerNum]});
}
//switch out the images of a card
function switchImages(viewerNum, cardNum, frontImage, frontPath, backImage, backPath)
{
var cardClass = allClasses[viewerNum].getElementsByClassName('dxcCard');
frontImage.src = frontPath;
backImage.src = backPath;
var cardW = cardImages[viewerNum][cardNum].width;
var cardH = cardImages[viewerNum][cardNum].height;
if(!cardW){
cardW = defaultImgSize.width;
cardH = defaultImgSize.height;
}
frontImage.width = cardW;
frontImage.height = cardH;
backImage.width = cardW;
backImage.height = cardH;
TweenMax.set(cardClass, {
css:{
width: cardW,
height:cardH
}
});
}