var CoverflowGallery;
(function () {
CoverflowGallery = {
init:function (superContainerId) {
var cw = 497, ch = 260, iw = 281, ih = 200;
var container = $('').
css({
width:497,
height:260,
position:'relative',
overflow:'hidden',
background:'white'
});
var bar = $('').
css({
width:399,
height:17,
position:'absolute',
left:49,
top:218,
backgroundImage:'url(images/WebsiteGallery/scroll-bar.png)',
zIndex:12
});
var thumb = $('![]()
').
attr('src', 'images/WebsiteGallery/scroll-thumb.png').
css({
width:70,
height:17,
position:'absolute',
left:155,
top:0
});
bar.append(thumb);
container.append(bar);
$('#' + superContainerId).append(container);
var padding = 21;
var ptr = 2, tPtr = 2, minPtr = 0, maxPtr = 4, dragging = false;
var thumbLeftMin = padding, thumbLeftMax = bar.width() - thumb.width() - padding;
function setTPtr(v) {
tPtr = Math.min(maxPtr, Math.max(minPtr, v));
if (!dragging) {
thumb.css({
left:thumbLeftMin + (1 - (tPtr - minPtr) / maxPtr) * (thumbLeftMax - thumbLeftMin)
});
}
start();
}
bar.mousedown(function (e) {
function cancel(e) {
e.returnValue = false;
e.cancelBubble = true;
e.stopPropagation();
return false;
}
function eToPtr(e) {
return Math.round((1 - (e.pageX - bar.offset().left - thumbLeftMin) / (thumbLeftMax - thumbLeftMin)) * images.length);
}
if (e.pageX - bar.offset().left < padding) {
setTPtr(tPtr + 1);
return cancel(e);
} else if (e.pageX - bar.offset().left > bar.width() - padding) {
setTPtr(tPtr - 1);
return cancel(e);
} else if (e.pageX < thumb.offset().left || e.pageX > thumb.offset().left + thumb.width()) {
setTPtr(eToPtr(e));
return cancel(e);
}
var ox = thumb.position().left - e.pageX;
dragging = true;
function mousemove(e) {
var x = ox + e.pageX;
if (x < padding) {
x = padding;
}
if (x + thumb.width() > bar.width() - padding) {
x = bar.width() - padding - thumb.width();
}
thumb.css({ left:x });
setTPtr(eToPtr(e));
return cancel(e);
}
function mouseup(e) {
dragging = false;
setTPtr(eToPtr(e));
$(document).unbind('mousemove', mousemove);
$(document).unbind('mouseup', mouseup);
return cancel(e);
}
$(document).bind('mousemove', mousemove);
$(document).bind('mouseup', mouseup);
return cancel(e);
});
function interpolate(a, i) {
var i0 = Math.floor(i), i1 = Math.ceil(i), k = i - i0;
return a[i0] * (1 - k) + a[i1] * k;
}
function Img(src, ptr) {
this.calc = function (i) {
var lefts = [ 108, 51, 23, 7, 0 ];
var tops = [ 10, 41, 55, 66, 74 ];
var heights = [ 191, 143, 122, 106, 94];
var opp = false;
if (i > 4) {
i = i - 4;
opp = true;
} else {
i = 4 - i;
}
this.z = i;
var c = {
x:interpolate(lefts, i),
y:interpolate(tops, i),
w:281 * interpolate(heights, i) / 191,
h:interpolate(heights, i)
};
if (opp) {
c.x = cw - c.x - c.w;
}
return c;
};
this.z = undefined;
var c = this.calc(0);
this.img1 = $('').css({ overflow:'hidden', position:'absolute' }).append($('![]()
').attr('src', src).css({ position:'absolute' }));
container.append(this.img1);
var self = this;
this.img1.click(function () {
if (tPtr !== ptr) {
setTPtr(ptr);
} else if (self.selected) {
self.selected();
}
});
this.update = function (i) {
var c = this.calc(i);
this.img1.css({
left:c.x,
top:c.y,
width:c.w,
height:c.h * 2,
overflow:'hidden'
});
var k = c.w / 281;
$('img', this.img1).css({ width:c.w + 200 * 2 * k, height:c.h * 2 });
if (Math.abs(i - 4) < 0.5) {
$('img', this.img1).css({ left:-200 * k });
} else if (i < 4) {
$('img', this.img1).css({ left:-c.w - 200 * k });
this.img1.css({ width:200 * k });
} else if (i > 4) {
$('img', this.img1).css({ left:0 });
this.img1.css({ left:c.x + 81 * k, width:200 * k });
}
};
this.pushBack = function (i) {
this.img1.css({
zIndex:10 - i
});
};
}
var images = [
{
title:'Website 01',
triple:'images/WebsiteGallery/Vntage furniture - small-triple.jpg',
content:'images/WebsiteGallery/Vntage furniture - enlarged.jpg',
player:'img'
},
{
title:'Website 02',
triple:'images/WebsiteGallery/Pandora - small-triple.jpg',
content:'images/WebsiteGallery/Pandora - elaraged.jpg',
player:'img'
},
{
title:'Website 03',
triple:'images/WebsiteGallery/Opex Pacific - small-triple.jpg',
content:'images/WebsiteGallery/Opex Pacific - enlarged.jpg',
player:'img'
},
{
title:'Website 04',
triple:'images/WebsiteGallery/Nothcote Industrial - small-triple.jpg',
content:'images/WebsiteGallery/Nothcote Industrial - enlarged.jpg',
player:'img'
},
{
title:'Website 05',
triple:'images/WebsiteGallery/Gardens day spa - small-triple.jpg',
content:'images/WebsiteGallery/Gardens day spa - enlarged.jpg',
player:'img'
}
];
var imgs = [];
for (var i = 0; i < images.length; i++) {
(function (i) {
var img = new Img(images[i].triple, maxPtr - i);
imgs.push(img);
img.selected = function () {
Shadowbox.open(images);
Shadowbox.change(i);
};
}(i));
}
function update() {
for (var i = 0; i < imgs.length; i++) {
imgs[i].update(i + ptr);
}
var tmp = [].concat(imgs);
tmp.sort(function (a, b) { return a.z - b.z; });
for (var i = 0; i < tmp.length; i++) {
tmp[i].pushBack(i);
}
}
update();
setTPtr(maxPtr >> 1);
var step = 0.125, to = null;
function start() {
if (!to) {
(function () {
to = null;
if (ptr < tPtr) {
ptr += step;
} else if (ptr > tPtr) {
ptr -= step;
}
if (Math.abs(ptr - tPtr) < step) {
ptr = tPtr;
}
update();
if (ptr != tPtr) {
setTimeout(arguments.callee, 50);
}
}());
}
}
}
};
}());