function ExtraImage(id, imageId, extraImageWidth, extraImageHeight, extraImageUrl, extraImageRealUrl, extraImageDisplayType, isPopUpMenuExist, extraImageTitle, singleLinkUrl, singleLinkTarget)
{
this.id = id;
this.imageId = imageId;
this.extraImageUrl = extraImageUrl;
this.extraImageDisplayType = extraImageDisplayType;
this.isPopUpMenuExist = isPopUpMenuExist;
this.extraImageRealUrl = extraImageRealUrl;
this.extraImageWidth = extraImageWidth;
this.extraImageHeight = extraImageHeight;
this.extraImageLayer = null;
this.baseImage = document.getElementById(this.imageId);
this.isLayerVisible = false;
this.layerMustBeHidded = false;
this.simpleOnMouseOverCreated = false;
this.extraImage = null;
this.extraImageLayerCreated = false;
this.imageChangedOnMouseOver = false;
this.extraImageTitle = extraImageTitle;
this.singleLinkUrl = singleLinkUrl;
this.singleLinkTarget = singleLinkTarget;
this.linkWrapper = null;
};
ExtraImage.prototype.Init = function()
{
if (this.baseImage)
{
if (this.extraImageDisplayType == "NormalMouseOver")
{
this.CreateSimpleOnMouseOver();
}
else if (this.extraImageDisplayType == "Layer")
{
this.CreateImageLayer(true);
}
else if (!this.isPopUpMenuExist)
{
var extraImageString = "ExtraImage" + this.id;
if (this.extraImageDisplayType == "PopUpWindow")
{
this.baseImage.style.cursor = "pointer";
this.baseImage.onclick = function(){eval(extraImageString).PopUp();}
}
else if (this.extraImageDisplayType == "LightWindow")
{
this.baseImage.style.cursor = "pointer";
this.baseImage.onclick = function(){eval(extraImageString).OpenLightWindow();}
}
}
}
};
ExtraImage.prototype.CreateSimpleOnMouseOver = function()
{
if (!this.simpleOnMouseOverCreated)
{
var baseImageSrc = this.baseImage.src;
var baseImageId = this.imageId;
var extraImageUrl = this.extraImageUrl;
var extraImageString = "ExtraImage" + this.id;
this.baseImage.onmouseover = function(){document.getElementById(baseImageId).src = extraImageUrl;eval(extraImageString).imageChangedOnMouseOver = true;}
this.baseImage.onmouseout = function(){ if (eval(extraImageString).imageChangedOnMouseOver){document.getElementById(baseImageId).src = baseImageSrc;eval(extraImageString).imageChangedOnMouseOver=false;}}
this.simpleOnMouseOverCreated = true;
}
};
ExtraImage.prototype.ShowImage = function()
{
if (this.isPopUpMenuExist)
{
if (this.baseImage)
{
if (this.extraImageDisplayType == "PopUpWindow")
{
this.PopUp();
}
else if (this.extraImageDisplayType == "LightWindow")
{
this.OpenLightWindow();
}
}
}
};
ExtraImage.prototype.PopUp = function()
{
var popup_window = window.open("about:blank", "popup_" + this.id, "location=no,menubar=no,width=" + this.extraImageWidth + ",height=" + this.extraImageHeight + ",left=" + ((screen.width - this.extraImageWidth)/2) + ",top=" + ((screen.height - this.extraImageHeight)/2));
popup_window.document.open('text/html');
popup_window.document.write("" + this.extraImageTitle);
popup_window.document.write("![](" + this.extraImageRealUrl + ")
");
popup_window.document.close();
popup_window.focus();
};
ExtraImage.prototype.OpenLightWindow = function()
{
activateLightwindow( { href: this.extraImageRealUrl , window_type: 'image'});
};
ExtraImage.prototype.CreateImageLayer = function(init)
{
if ((this.baseImage) && ( this.extraImageWidth > 0) && ( this.extraImageHeight > 0))
{
var baseImageWidth = this.baseImage.offsetWidth;
var baseImageHeight = this.baseImage.offsetHeight;
var baseImageLeft = this.GetAbsoluteXPosition(this.baseImage);
var baseImageTop = this.GetAbsoluteYPosition(this.baseImage);
if ((!this.extraImageLayer) && (!this.extraImageLayerCreated))
{
this.extraImageLayerCreated = true;
var extraImageString = "ExtraImage" + this.id;
this.baseImage.onmouseover = function(){eval(extraImageString).CreateImageLayer(false);eval(extraImageString).layerMustBeHidded = false;}
this.baseImage.onmouseout = function(){eval(extraImageString).HideImageLayer();eval(extraImageString).layerMustBeHidded = true;}
this.extraImageLayer = document.createElement("div");
this.extraImageLayer.style.zIndex = 100;
this.extraImage = document.createElement("img");
this.extraImage.onmouseover = function(){eval(extraImageString).CreateImageLayer(false);eval(extraImageString).layerMustBeHidded = false;}
this.extraImage.onmouseout = function(){eval(extraImageString).HideImageLayer();eval(extraImageString).layerMustBeHidded = true;}
if (this.isPopUpMenuExist)
{
var popUpMenuString = "PopUpMenu" + this.imageId;
this.extraImage.onclick = function(e){eval(popUpMenuString).PopUp(e); return false;}
this.extraImage.style.cursor = "pointer";
this.extraImageLayer.appendChild(this.extraImage);
}
else if ((this.singleLinkUrl != null) && (this.singleLinkUrl != ""))
{
this.linkWrapper = document.createElement("a");
this.linkWrapper.href = this.singleLinkUrl;
if ((this.singleLinkTarget != null) && (this.singleLinkTarget != ""))
{
this.linkWrapper.target = this.singleLinkTarget;
}
this.linkWrapper.appendChild(this.extraImage);
this.extraImageLayer.appendChild(this.linkWrapper);
}
else
{
this.extraImageLayer.appendChild(this.extraImage);
}
document.body.appendChild(this.extraImageLayer);
this.extraImage.src = this.extraImageUrl;
this.extraImage.style.display = "block";
this.extraImage.style.border = "0px";
this.extraImageLayer.style.visibility = "hidden";
this.extraImageLayer.style.display = "none";
this.extraImageLayer.style.position = "absolute";
this.extraImageLayer.style.top = "0px";
this.extraImageLayer.style.left = baseImageLeft + "px";
this.extraImageLayer.style.width = this.extraImageWidth + "px";
this.layerMustBeHidded = true;
}
if ((!init) && (!this.isLayerVisible))
{
this.SetLayerPosition(baseImageLeft, baseImageTop, baseImageWidth, baseImageHeight);
}
}
};
ExtraImage.prototype.HideImageLayer = function()
{
var extraImageString = "ExtraImage" + this.id;
if (this.extraImageLayer && this.isLayerVisible)
{
setTimeout(extraImageString + ".HideLayer();", 1000);
}
};
ExtraImage.prototype.HideLayer = function()
{
if ((this.isLayerVisible) && (this.layerMustBeHidded))
{
this.extraImageLayer.style.visibility = "hidden";
this.extraImageLayer.style.display = "none";
this.isLayerVisible = false;
}
};
ExtraImage.prototype.ShowLayer = function()
{
if (!this.isLayerVisible)
{
this.extraImageLayer.style.left = this.GetAbsoluteXPosition(this.baseImage) + "px";
this.isLayerVisible = true;
this.extraImageLayer.style.visibility = "visible";
this.extraImageLayer.style.display = "block";
}
};
ExtraImage.prototype.GetAbsoluteYPosition = function(obj)
{
var curtop = 0;
if(obj.offsetParent)
while(1)
{
curtop += obj.offsetTop;
if(!obj.offsetParent)
break;
obj = obj.offsetParent;
}
else if(obj.y)
curtop += obj.y;
return curtop;
};
ExtraImage.prototype.GetAbsoluteXPosition = function(obj)
{
var curleft = 0;
if(obj.offsetParent)
while(1)
{
curleft += obj.offsetLeft;
if(!obj.offsetParent)
break;
obj = obj.offsetParent;
}
else if(obj.x)
curleft += obj.x;
return curleft;
};
ExtraImage.prototype.SetLayerPosition = function( baseImageLeft, baseImageTop, baseImageWidth, baseImageHeight)
{
this.ShowLayer();
var layerWidth = this.extraImageWidth;
var layerHeight = this.extraImageHeight;
if ((layerWidth > 0) && (layerHeight > 0))
{
if (layerHeight <= baseImageHeight)
{
this.extraImageLayer.style.top = baseImageTop + "px";
}
else
{
var browserHeight = 0;
if (document.all)
{
browserHeight = (document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight);
}
else
{
browserHeight = window.innerHeight;
}
if (browserHeight > 0)
{
if (browserHeight < layerHeight)
{
var scrolledVertcalPixels = 0;
if (document.all)
{
scrolledVertcalPixels = (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
}
else
{
scrolledVertcalPixels = window.pageYOffset;
}
this.extraImageLayer.style.top = (scrolledVertcalPixels + browserHeight - layerHeight) + "px";
}
else
{
this.extraImageLayer.style.top = baseImageTop + "px";
}
}
}
}
};