var Color = {
loadImageInThread: function(pid, cid, colorCode) {
var img = $('prd_img'+pid);
var newSrc = img.src.replace(/\w\w\.gif$/, colorCode + '.gif')
var newName = /_prd(.*)$/.exec(newSrc)[1].replace(/\//g,'_');
if (img.src != newSrc) {
// If we have already loaded the image
if (document.images[newName]) {
// If the image is full loaded then show it other wise the onload event will show it
if (document.images[newName].complete) img.src = newSrc;
} else {
// Try first to load the image and the to show it
var newImage = new Image();
newImage.onload = function() { img.src = newSrc; }
newImage.name = newName;
newImage.src = newSrc;
}
}
},
over: function(node, pid, cid, colorCode) {
if (!node.onclick ) {
node.onclick = function() { Color.click(pid, cid, colorCode); }
node.onmouseout = function() { Color.out(pid, cid); }
}
Color.loadImageInThread(pid, cid, colorCode);
$('price' + pid).innerHTML = $('priceInfo' + pid + '_' + cid).innerHTML;
$('prdCCode' + pid).innerHTML = colorCode;
var cp = $($('color' + pid + '_' + cid).parentNode);
if (!cp.hasClassName('selected')) {
cp.addClassName('over');
}
},
out: function(pid, cid) {
$($('color' + pid + '_' + cid).parentNode).removeClassName('over');
var p = $('prd'+pid);
if (p.selColor) {
Color.over(p, p.selColor.pid, p.selColor.cid, p.selColor.colorCode);
}
},
click: function(pid, cid, colorCode) {
var c = $('color' + pid + '_' + cid);
var p = $('prd' + pid);
if (p.selColor) {
$($('color' + p.selColor.pid + '_' + p.selColor.cid).parentNode).removeClassName('selected');
}
p.selColor = {pid :pid, cid :cid, colorCode: colorCode};
$(c.parentNode).removeClassName('over');
$(c.parentNode).addClassName('selected');
}
}
var Pictogram = {
show: function(node) {
var timeoutHide = 0;
if (node.popup == null) {
node.popup = node.nextSibling;
node.onmouseout = function() {
timeoutHide = setTimeout(function() { node.popup.style.display="none"; }, 50);
};
}
if (node.popup.style.display == "none" || node.popup.style.display == "") {
var offset = Position.cumulativeOffset($(node));
// Patch
if (Product.lastPopup) {
offset[0] -= Product.lastPopup.offsetLeft;
offset[1] -= Product.lastPopup.offsetTop;
}
var theTop = offset[1] + node.width + 8;
node.popup.style.left = offset[0] + 'px';
node.popup.style.top = theTop + 'px';
node.popup.style.display="block";
}
}
}
var Product = {
lastPopup: null,
print: function() {
var w = window.open();
//w.document.open();
w.document.write('');
w.document.write('');
// w.document.write('');
w.document.write(''
);
w.document.write('');
w.document.write('');
w.document.write('');
w.document.write('');
w.document.close();
w.print();
},
show: function(pid) {
var node = $('prd_img' + pid);
if (node.popup == null) {
node.popup = $(document.createElement('DIV'));
node.popup.className = "prd_popup";
// Prepare content
var newSrc = $('imgbig'+pid).src;
var chartSrc = $('chart'+pid).src;
var name = $('prd_name' + pid).innerHTML;
var description = $('prd_desc'+pid).innerHTML;
var colors = $('cp_'+pid).innerHTML;//.replace(/id="/g, 'id="popup_').replace(/onmouseover="/g, 'onmouseover="return;');
var pictograms = '';
if ($('prd_pictograms'+pid) && !$('prd_pictograms'+pid).innerHTML=='') {
pictograms = '' + $('prd_pictograms'+pid).innerHTML + '
';
}
var text = '' + '' + name + '
' + description + '';
name = name.replace('
', ' ');
var imgbig = '';
var chart = '';
if (/NoImage.gif/.test(chartSrc)) chart = '';
var print = 'Print';
node.popup.innerHTML =
print + '' + name + '
' +
''+
'
';
node.popup.onclick = Product.hide;
document.body.appendChild(node.popup);
}
var offset = Position.cumulativeOffset(node);
var content = Position.cumulativeOffset($('content'));
var defaultWidth = $('content').offsetWidth - 24; //788;
var defaultHeight = 400;
var defaultLeft = content[0]+8;
var moveLeft = 0;
//if (defaultLeft + defaultWidth > document.body.offsetWidth) {
// defaultLeft = Math.max(document.body.offsetWidth - defaultWidth - 30, 0);
moveLeft = Math.floor(((defaultLeft+20) - offset[0]) / 25);
//}
node.popup.setStyle({
top: (offset[1]-1).px(),
left: defaultLeft.px(),
width: defaultWidth.px()
});
Product.hide();
Product.showAnim(pid, node, moveLeft);
},
showAnim: function(id, node, moveLeft) {
var imgSmall = $('prd_img'+id);
var img = $('popup_imgbig'+id);
if (!img || img.width==0) img = imgSmall;
var anim = $(document.createElement('img'));
anim.src = img.src;
anim.width = imgSmall.width;
anim.height = imgSmall.height;
var offset = Position.cumulativeOffset(imgSmall);
anim.setStyle({position: 'absolute',left: offset[0].px(), top: offset[1].px(), zIndex: 99/*,opacity: 1.00*/});
document.body.appendChild(anim);
var count = 20;
var begin_time = new Date();
var theInterval = setInterval(function(){
if (count == 15) { if (new Date() - begin_time > 150) { count = 1; } } // Performance check
if (count-- < 0) {
clearInterval(theInterval);
Product.lastPopup = node.popup;
node.popup.style.display="block";
setTimeout(function() { document.body.removeChild(anim); anim = null; }, 20);
} else {
var newStyle = {
width: Math.floor(anim.width * 1.05).px(),
height: Math.floor(anim.height * 1.05).px()
//opacity: (1.00 - 4 * count / 100)
}
if (moveLeft != 0) {
newStyle.left = (anim.offsetLeft + moveLeft).px();
}
anim.setStyle(newStyle);
}
}, 15);
},
hide: function() {
if (Product.lastPopup) {
Product.lastPopup.style.display="none";
Product.lastPopup = null;
}
},
clickHide: function(e) {
if (Product.lastPopup) {
e = e || window.event;
var item = e.target || e.srcElement;
if (!$(item).descendantOf(Product.lastPopup) || item.parentNode == Product.lastPopup) {
Product.hide();
}
}
}
}
function windowOnLoad() {
}
Event.observe(window, 'load', windowOnLoad);
Event.observe(document, 'click', Product.clickHide);
Object.extend(String.prototype, {px: function() { return this + "px"; } } );
Object.extend(Number.prototype, {px: function() { return this + "px"; } } );