var w3c = false;
var ie = false;
var timerID = null;
var timerOn = false;
var tooltip;
var globalProdId;
/**
* Add event observer to check all a-tags for the rel attribute,
* which holds the link to the Big img.
*/
Event.observe(window, 'load', function() {
var tipId = 'bigImg';
var tipDelay;
var tipTimeout = 20; // Fix to get correct positioning on first mouseover
var prodInfoDelay;
tooltip = BL();
// Check if container exists first
if($('pCsr') != null) {
if(!ie) {
$('pCsr').observe('mousemove',function(evt){tooltip.globalEvent = evt;});
}
$('pCsr').observe('mouseover', function(event){
$$('#pCsr a[rel]').each(function(element) {
var prodId = element.down('img').readAttribute('id');
$(prodId).observe('mouseover', function(event){
globalProdId = prodId;
clearTimeout(tipDelay);
// Change timeout to correct value when div created
if($(tipId) != null){
tipTimeout = 400;
}
tipDelay = setTimeout(function(){tooltip.createToolTip(element.rel,'','',$(prodId),tipId)},tipTimeout);
// This is for IE6. If there are select dropdowns these need to be hidden, else they will render through this popup layer
tagVisibility('SELECT','hide');
});
$(prodId).observe('mouseout', function(event){
clearTimeout(tipDelay);
tooltip.hide();
tagVisibility('SELECT','show');
});
});
});
}
addProductEvts();
});
/**
* Object for common IKEA JS popup and tooltip handling
*/
function BL(){
var cssClass = 'tt';
var top = 5; // tooltip offset top
var left = 1; // tooltip offset left
var tt,h;
var ie = document.all ? true : false;
var contentHolderId;
var globalEvent;
return{
/**
* Creates a JS popup layer to be populated with content
*
* @param _width The width in pixels for the popup
* @param _height The height in pixels for the popup
* @param _id The ID that will be given to the div that holds the content of the popup
* @param _ownerObj The prototype DOM element that the popup will align to
* @param _offsetX The x position of the popup related to the _ownerObj
* @param _offsetY The y position of the popup related to the _ownerObj
* @return Nothing
*/
createGenericPopup:function(_width,_height,_id,_class,_ownerObj,_offsetX,_offsetY){
var col1, col2, ttCont;
if(tt == null){
contentHolderId = _id;
tt = new Element('div', {'id': _id, 'class': _class + ' shadow-one' });
conA = new Element('div', {'class': 'corner-a'});
tt.insert(conA);
conB = new Element('div', {'class': 'corner-b'});
tt.insert(conB);
shadow2 = new Element('div', {'class': 'shadow-two'});
tt.insert(shadow2);
shadow3 = new Element('div', {'class': 'shadow-three'});
shadow2.insert(shadow3);
shadow4 = new Element('div', {'class': 'shadow-four'});
shadow3.insert(shadow4);
document.body.insert(tt);
}
tt.setOpacity(0);
tt.show();
tt.style.height = _height ? _height + 'px' : 'auto';
tt.style.width = _width ? _width + 'px' : 'auto';
tt.style.border='none';
pos = _ownerObj.cumulativeOffset();
tt.style.top = pos.top + _offsetY + 'px';
tt.style.left = pos.left + _offsetX + 'px';
if(!ie){
new Effect.Opacity(tt,{
from: 0.0,
to: 1.0,
duration: 0.4
});
}else{
tt.setOpacity(1);
}
},
/**
* Updates the content in the popup
*
* @param layoutString A string with a valid HTML snippet
* @return Nothing
*/
setGenericContent:function(layoutString) {
tt.down('.shadow-four').update(layoutString);
},
/**
* Returns a prototype object that holds the content of the popup
* @return A prototype object that holds the content of the popup
*/
getContent:function() {
return tt;
},
/**
* Generates a layout with a spinning circle. Handy when loading ajax.
*/
generateLoadingLayout:function(){
var retString = "Loading ...
![](\"/ms/img/loading.gif\")