// method fires on mouse over on the emailadress button
function imageButtonShowArrow(sender)
{
	var aoImages = sender.parentNode.getElementsByTagName("img");
	for (var i=0; i<aoImages.length; i++)
		if (aoImages[i].src.toLowerCase().indexOf("arrow") != -1)
		{
			// set transparency to 0
			setTransparency(aoImages[i], 0);
			
			// display the image
			aoImages[i].style.display = "inline";
			
			// fade to a transparancy of 100
			fadeTransparencyUp(aoImages[i], 100, 30);
		}
}

// method fires on mouse out on the emailadress button
function imageButtonHideArrow(sender)
{
	var aoImages = sender.parentNode.getElementsByTagName("img");
	for (var i=0; i<aoImages.length; i++)
		if (aoImages[i].src.toLowerCase().indexOf("arrow") != -1)
		{			
			// fade to a transparancy of 100
			fadeTransparencyDown(aoImages[i], 0, 30);
			
			aoImages[i].style.display = "none";
		}
}

function showMouseOverButton(sender)
{	
	// get all child images
	var aoImages = sender.getElementsByTagName("img");
	
	// find the image with '_true' in name
	for (var iImageIndex = 0; iImageIndex < aoImages.length; iImageIndex++)
	{
		if (aoImages[iImageIndex].src.toLowerCase().indexOf("-hover") != -1 || aoImages[iImageIndex].getAttribute('is_hover_image') == "true")
		{
			// set transparency to 0
			setTransparency(aoImages[iImageIndex], 0);
			
			// display the image
			aoImages[iImageIndex].style.display = "block";
			
			fade(aoImages[iImageIndex],100,1,8);
			
			// fade to a transparancy of 100
			//fadeTransparencyUp(aoImages[iImageIndex], 100, 50);
		}
	}
}

function hideMouseOverButton(sender)
{
	// get all child images
	var aoImages = sender.getElementsByTagName("img");
	
	// find the image with '_true' in name
	for (var iImageIndex = 0; iImageIndex < aoImages.length; iImageIndex++)
	{
		if (aoImages[iImageIndex].src.toLowerCase().indexOf("-hover") != -1 || aoImages[iImageIndex].getAttribute('is_hover_image') == "true")
		{
			// fade to a transparancy of 100
			//fadeTransparencyDown(aoImages[iImageIndex], 0, 30);
			fade(aoImages[iImageIndex],0,1,8);
			
			//aoImages[iImageIndex].style.display = "none";
		}
	}
}

function fadeTransparencyUp(object, transparency, speed)
{	
	// if transparency is not set.. set it to '0'
	//if (object.style.filter == "")
	//	setTransparency(object, 0);
		
	var iOpacity = getTransparency(object);
	
	iOpacity = iOpacity + 10;
	
	// set new tranparency
	setTransparency(object, iOpacity);	
	
	if (iOpacity < transparency && iOpacity < 100)
	{
		window.setTimeout(function() { fadeTransparencyUp(object, transparency, speed) }, speed);
	}
}

function fadeTransparencyDown(object, transparency, speed)
{	
	// if transparency is not set.. set it to '0'
	//if (object.style.filter == "")
	//	setTransparency(object, 100);
	
	var iOpacity = getTransparency(object);
	
	iOpacity = iOpacity - 10;
	
	// set new tranparency
	setTransparency(object, iOpacity);
	
	if (iOpacity > transparency && iOpacity > 0)
	{
		window.setTimeout(function() { fadeTransparencyDown(object, transparency, speed) }, speed);
	}
}

function getTransparency(object)
{
	var iTransparency = 0;
	
	if (browserName == "Netscape")
	{
		if (object.style.opacity != "")
		{
			iTransparency = parseInt(object.style.opacity * 100, 10);
		}	
	}
	else if (browserName == "Microsoft Internet Explorer")
	{
		var regExp = new RegExp("alpha\\(opacity=([0-9]+)\\)");
		var m = regExp.exec(object.style.filter);
		if (m != null)
			iTransparency = parseInt(m[1], 10);	
	}
	
	return iTransparency;
}

function setTransparency(object, transparency)
{
	if (browserName == "Netscape")
	{
		var opacity = (transparency/100);
		//alert(opacity);
		object.style.opacity = opacity; //parseInt(transparency,10)/10).toString();
	}
	else if (browserName == "Microsoft Internet Explorer")
	{
		//alert(transparency);
		object.style.filter = "alpha(opacity=" + transparency + ")";
	}
	
	
	//filter:alpha(opacity=40);
//-moz-opacity:.40;
//opacity:.40;}
}

// ImageOverlay OuterImagePanel object (for delegates)
function OuterImagePanel(id) {
  this.controlId = id;
  
  this.onmouseover = function()
  {
	customImageButton_onMouseOver(document.getElementById(this.controlId));
  }
  
  this.onmouseout = function()
  {
	customImageButton_onMouseOut(document.getElementById(this.controlId));
  }
}

function SetImageOverlayStyles()
{
	var aoImages = document.getElementsByTagName("img");
	var aoImagesLength = aoImages.length;
	for (var iImageIndex = 0; iImageIndex < aoImagesLength; iImageIndex++)
	{
		if (typeof(aoImages[iImageIndex].getAttribute("CustomOverlay")) != "undefined" && aoImages[iImageIndex].getAttribute("CustomOverlay") != null && aoImages[iImageIndex].getAttribute("CustomOverlay").toLowerCase() == "true")
		{
			// the image to overlay
			var oImage = aoImages[iImageIndex];
			
			// the parent div
			var oParentDiv = oImage.parentNode;
			
			// create border
			var oBorder = document.createElement("div");
			oBorder.className = "divImageBorder";			
			oBorder.style.height = "90px";
			oBorder.style.width = "259px";
			
			// add the border BEFORE the image
			oParentDiv.insertBefore(oBorder, oImage);
						
			// if title is set
			if (typeof(oImage.getAttribute("OverlayTitle")) != "undefined" && oImage.getAttribute("OverlayTitle") != null)
			{
				var oTitleOverlay = document.createElement("div");
				oTitleOverlay.className = "divImageOverlayTitle";
				oTitleOverlay.innerHTML = oImage.getAttribute("OverlayTitle");				
				// add the border BEFORE the border div
				oParentDiv.insertBefore(oTitleOverlay, oBorder);
			}
			
			if (typeof(aoImages[iImageIndex].getAttribute("HoverEvent")) != "undefined" && aoImages[iImageIndex].getAttribute("HoverEvent") != null && aoImages[iImageIndex].getAttribute("HoverEvent").toLowerCase() == "true")
			{			
				var oOverlayForMouseOver = document.createElement("div");
				oOverlayForMouseOver.id = "customImageBtn_" + iImageIndex;
				oOverlayForMouseOver.className = "divImageMouseOverOverlay";			
				oOverlayForMouseOver.style.height = "90px";
				oOverlayForMouseOver.style.width = "259px";
				oOverlayForMouseOver.style.cursor = "pointer";
				// add BEFORE border
				oParentDiv.insertBefore(oOverlayForMouseOver, oBorder);
				
				// outer panel object needed to delegate the event functions
				var outerImagePanel = new OuterImagePanel("customImageBtn_" + iImageIndex);
				
				// attach the mouse-events (delegate them) for showing the transparent div
				if (oParentDiv.addEventListener)
				{
					oParentDiv.addEventListener("mouseover", new delegate(outerImagePanel, outerImagePanel.onmouseover), false);
					oParentDiv.addEventListener("mouseout", new delegate(outerImagePanel, outerImagePanel.onmouseout), false);
				}
				else if (oParentDiv.attachEvent)
				{
					oParentDiv.attachEvent("onmouseover", new delegate(outerImagePanel, outerImagePanel.onmouseover) );
					oParentDiv.attachEvent("onmouseout", new delegate(outerImagePanel, outerImagePanel.onmouseout) );
				}
				else
				{
					oParentDiv.onmouseover = delegate(outerImagePanel, outerImagePanel.onmouseover);
					oParentDiv.onmouseout = delegate(outerImagePanel, outerImagePanel.onmouseout);
				}
			}
			
			
		}
	}
}

function customImageButton_onMouseOver(divToShow)
{
	setTransparency(divToShow, 0);
	divToShow.style.display = "block";
	fadeTransparencyUp(divToShow, 15, 30);	
}

function customImageButton_onMouseOut(divToHide)
{
	fadeTransparencyDown(divToHide, 0, 30);
	divToHide.style.display = "none";
}

//Function that fades the color.
//Arguments...
//id  - ID of the element whose colour must be faded.
//start_hex - The initial color of the element.
//stop_hex - The final color. The element will fade from the initial color to the final color.
//difference- The colour values will be incremented by this number
//delay  - The speed of the the effect - higher delay means slower effect.
//color_background- The fade must be for the color of the element or for its background.
//      Allowed values are 'c'(Color of element) and 'b'(Background)
function fadeColor(element,start_hex,stop_hex,difference,delay,color_background)
{
 //Default values...
 if(!difference) difference = 20;
 if(!delay) delay = 100;
 if(!start_hex) start_hex = "#FFFFFF";
 if(!stop_hex) stop_hex = "#000000";
 if(!color_background) color_background = "c";
 
 var ele = element;
 if(!ele) return;
 var start= hex2num(start_hex);
 var stop = hex2num(stop_hex);
 
 //Make it numbers rather than strings.
 for(var i=0;i<3;i++) {
  start[i] = Number(start[i]);
  stop[i] = Number(stop[i]);
 }

 //Morph one colour to the other. If the start color is greater than the stop colour, start color will
 // be decremented till it reaches the stop color. If it is lower, it will incremented.
 for(var i=0;i<3;i++) {
  if (start[i] < stop[i]) {
   start[i] += difference;
   if(start[i] > stop[i]) start[i] = stop[i];//If we have overshot our target, make it equal - or it won't stop.
  }
  else if(start[i] > stop[i]) {
   start[i] -= difference;
   if(start[i] < stop[i]) start[i] = stop[i];
  }
 }

 //Change the color(or the background color).
 var color = "rgb("+start[0]+","+start[1]+","+start[2]+")";
 if(color_background == "b") {
  ele.style.backgroundColor = color;
 } else {
  ele.style.color = color;
 }

 //Stop if we have reached the target.
 if((start[0] == stop[0]) && (start[1] == stop[1]) && (start[2] == stop[2])) return;

 start_hex = num2hex(start);
 //Keep calling this function
 //window.setTimeout("fadeColor('"+id+"','"+start_hex+"','"+stop_hex+"',"+difference+","+delay+",'"+color_background+"')",delay);
 window.setTimeout(function() { fadeColor(element, start_hex, stop_hex, difference, delay, color_background) },delay);
}

function resetColor(element)
{
	element.style.color = "";
	window.setTimeout(function() { resetColor(element) }, 100);
}