' +
'
'+ headerText +'
' +
'
' + (variation.text.vardesc ? variation.text.vardesc.escapeHTML() : '') + '
';
else
text = '
' +
'
' +
'
' +
'
'+ headerText +'
' +
cutBulletOverlayText(variation.text.vardesc) + '
';
if (variation.priceDisplay && variation.priceDisplay.indexOf('sale') != -1)
variation.priceDisplay = variation.priceDisplay.replace(new RegExp(/(.*)(
)(.*)/gi),'$2');
text += '' +
(variation.priceDisplay ? variation.priceDisplay : '') +
'
' +
'
' +
'
';
var hoverStyleMarkerId = this.lightboxEl.id + '_hover-style-marker';
var hoverStyleMarker = $(hoverStyleMarkerId);
if (hoverStyleMarker) {
hoverStyleMarker.remove();
}
hoverStyleMarker = new Element('div', { id: hoverStyleMarkerId });
this.__hoverStyleMarkerPosition = {
x: event.element().offsetLeft,
y: event.element().offsetTop
};
hoverStyleMarker.setStyle({
top: this.__hoverStyleMarkerPosition.y + 'px',
left: this.__hoverStyleMarkerPosition.x + 'px'
}).addClassName('hover-style-marker');
var thumbId = this.options.getThumbIdFromDisplayGroupId(variation._parent.displayGroup_id);
hoverStyleMarker.observe('click', this.selectVariation.bindAsEventListener(this, thumbId, variationsIndex));
if (!this.__detailswrapper_observed) {
var wrapper = $(this.lightboxEl.id + '_details-wrapper') || this.lightboxEl.getChild('details');
this._detailsWrapperMouseOverHandler = this.detailsWrapperMouseOverHandler.bindAsEventListener(this, this.lightboxElObject, wrapper);
wrapper.observe('mouseover', this._detailsWrapperMouseOverHandler);
this.__detailswrapper_observed = true;
}
hoverStyleMarker.observe('mouseout', this.hideInfo.bindAsEventListener(this));
$(this.lightboxEl.id + '_variants').insertBefore(hoverStyleMarker, $(this.lightboxEl.id + '_info'));
// move tooltip out of the way
// afterFinish, check if the mouse is positioned above another image
// if so, fire a custom event which calls Shop.info again to dispaly the correct tooltip
if (!this.__tooltip_observed) {
this.__tooltip_observed = true;
tooltip.observe('mouseover', function(event) {
if(event.element() != tooltip && event.element() != tooltip.down('.info-bg'))
return;
var imgParentOffset = this.__hoverStyleMarkerPosition.x;
var morphTarget = imgParentOffset == 130 ? -125 : -190;
this.tooltipMovedLeft = true;
tooltip.morph({ left: morphTarget + 'px' }, {
duration: this.tooltipTextFadeDuaration,
afterFinish: function() {
var mouseX = Shop._currentMousePosX + Position.scrollX();
var mouseY = Shop._currentMousePosY;
var mapEntry = this.variationsMap.find(function(map){
if (mouseX >= map.x1 && mouseX < map.x2 && mouseY >= map.y1 && mouseY < map.y2)
return true;
});
if (mapEntry) {
var displayGroupInfo = this.options.DomIdToDisplayGroup.get(thumbId);
var currentThumbIndex = displayGroupInfo.currentThumbIndex || 0;
var currentImage = this.lightboxEl.select('div.variants div.image-container img')[currentThumbIndex];
// don't fire if this images is currently selected
if(currentImage != mapEntry.image) {
$(mapEntry.image).fire('tooltip:renew');
}
} else {
this.hideInfo(event);
}
}.bind(this)
});
}.bind(this));
}
i = this.lightboxEl.select('div.variants div.image-container img')[variationsIndex];
var p = [i.offsetLeft, i.offsetTop];
var y = p[1]==0 ? 0 : (p[1] == 420 ? 360 : p[1] - 30);
if (!this.tooltipVisible) {
tooltip.update(text).setStyle({
top:y+'px',
left:(p[0]-190)+'px',
opacity:1,
display:'none'
});
tooltip.down('div.info-fade').setStyle({opacity: 1});
cutText(tooltip);
if(Prototype.Browser.IE) {
cutText(tooltip);
tooltip.show();
if(Engine.isMSIE6) {
var select = currentImg.up('.lightbox').down('.size');
if (typeof(select)!="undefined") {
var selecty = Element.cumulativeOffset(select)[1];
var tooltipy = Element.cumulativeOffset(tooltip)[1];
var tooltiph = parseInt(tooltip.getStyle('height'),10);
if (selecty<=(tooltipy+tooltiph) && selecty>=tooltipy)
this.prepareIE('hidden');
}
}
} else {
if(this.tooltipFX) this.tooltipFX.cancel();
tooltip.appear({duration: this.tooltipTextFadeDuaration});
}
} else {
var effx=[];
effx.push(new Effect.Morph(tooltip,{style: {top: y+'px',left: (p[0]-190)+'px'}, duration: this.tooltipTextFadeDuaration}));
effx.push(new Effect.Fade(tooltip.down('div.info-fade'), {duration: this.tooltipTextFadeDuaration}));
if(Engine.isMSIE6) {
var select = currentImg.up('.lightbox').down('.size');
if (typeof(select)!="undefined") {
var selecty = Element.cumulativeOffset(select)[1];
var tooltipy = y;
var tooltiph = parseInt(tooltip.getStyle('height'),10);
if (selecty<=(tooltipy+tooltiph) && selecty>=tooltipy) {
this.prepareIE('hidden');
} else {
this.prepareIE('visible');
}
}
}
new Effect.Parallel(effx, {duration: this.tooltipTextFadeDuaration,
afterFinish: function () {
tooltip.update(text);
cutText(tooltip);
tooltip.down('div.info-fade').appear({duration: this.tooltipTextFadeDuaration});
}.bind(this)
});
}
this.tooltipVisible = true;
},
hideInfo: function(event) {
var tooltip = this.lightboxEl.down('div.info');
if (!this.tooltipVisible) {
return;
}
if (this.toolipTimeout) {
clearTimeout(this.toolipTimeout);
}
var currentTarget = event.element();
this.toolipTimeout = setTimeout(function() {
// ensure info tooltip is hidden only when cursor is not over another variation
if (currentTarget && !currentTarget.hasClassName("details-wrapper") && (this.tooltipMovedLeft && parseInt(tooltip.getStyle('left'), 10) > -190) )
return;
if(Prototype.Browser.IE) {
tooltip.hide();
if(!Shop._sizeGuideOpen)
this.prepareIE('visible');
} else {
this.tooltipFX = new Effect.Fade(tooltip, {
duration: this.tooltipTextFadeDuaration
});
}
this.tooltipVisible = false;
this.tooltipMovedLeft = false;
$(this.lightboxEl.id + '_hover-style-marker').hide();
this.mainObj.currentInfo = -1;
}.bind(this), 100);
},
detailsWrapperMouseOverHandler: function(event, lightboxObject, wrapper) {
this.hideInfo(event);
wrapper.stopObserving('mouseover', this._detailsWrapperMouseOverHandler);
lightboxObject.__detailswrapper_observed = false;
},
prepareIE: function(visibility){
$$('select').invoke('setStyle', {visibility: visibility});
}
});
Element.observe(document,"dom:loaded", function() { Gucci.checkOverlay(); });