if (typeof(Tfe) == 'undefined')
{
	Tfe = function() {};
}
if (typeof(Tfe.Utils) == 'undefined')
{
	alert('Tfe.Utils.js is not available\n\nAdd a reference to the script in your page.');
}

/**
*	Constructor.
* 
*	Parameters:
*	- path:				The path to the PngObjectServlet (Java) or the PngHandler (.NET).
*	- getParametersFromCss:		Get the colors etc. from CSS (yes/no).
*	- blankImageUrl:	The url of the 1 pixel blank image.
*/
Tfe.PngObject = function(path, getParametersFromCss, blankImageUrl)
{
	this.path = path;
	this.getParametersFromCss = getParametersFromCss != null ? getParametersFromCss : false;
	this.blankImageUrl = blankImageUrl != null ? blankImageUrl : '/images/blank.gif';
	this.params = new Object();
	// ReplaceMultipleElements
	// If set to true, the style of each element is read when replacing multiple elements with one instance of the PngObject
	this.replaceMultipleElements = false;
	this.cssClass = '';
}

/**
*	Get the path to the PngObjectServlet (Java) or the PngHandler (.NET).
*
*	Return value: The path to the PngObjectServlet (Java) or the PngHandler (.NET).
*/
Tfe.PngObject.prototype.getPath = function()
{
	return this.path;
}

/**
*	Set the path to the PngObjectServlet (Java) or the PngHandler (.NET).
*
*	Parameters:
*	- path:		The path to the PngObjectServlet (Java) or the PngHandler (.NET).
*/
Tfe.PngObject.prototype.setPath = function(path)
{
	this.path = path;
}

/**
* Add a parameter.
*
* Parameters:
* - paramName:		The name of the parameter.
* - paramValue:		The value of the paremter.
*/
Tfe.PngObject.prototype.addParam = function(paramName, paramValue)
{
	this.params[paramName] = paramValue;
}

/**
*	Get the value of a parameter.
*
*	Parameters:
*	- paramName:	The name of the parameter.
* 
*	Return value:	The value of the parameter.
*/
Tfe.PngObject.prototype.getParam = function(paramName)
{
	return this.params[paramName];
}

/**
*	Get all parameters.
*
*	Return value:	The parameters.
*/
Tfe.PngObject.prototype.getParams = function()
{
	return this.params;
}

/**
*	Get the CSS class that will be applied to the image
*
*	Return value: The CSS class that will be applied to the image
*/
Tfe.PngObject.prototype.getCssClass = function()
{
	return this.cssClass;
}

/**
*	Set the CSS class that will be applied to the image
*
*	Parameters:
*	- cssClass:		The CSS class that will be applied to the image
*/
Tfe.PngObject.prototype.setCssClass = function(cssClass)
{
	if (cssClass)
	{
		this.cssClass = cssClass;
	}
}

/**
*	Retrieve if ReplaceMultipleElements is enabled or disabled
*
*	Return value: A boolean indicating if ReplaceMultipleElements is enabled or disabled
*/
Tfe.PngObject.prototype.getReplaceMultipleElements = function()
{
	return this.replaceMultipleElements;
}

/**
*	Enabable or disable ReplaceMultipleElements
*
*	Parameters:
*	- replaceMultipleElements:		A boolean indicating which status ReplaceMultipleElements should get
*/
Tfe.PngObject.prototype.setReplaceMultipleElements = function(replaceMultipleElements)
{
	if (replaceMultipleElements != undefined)
	{
		this.replaceMultipleElements = replaceMultipleElements;
	}
}

/**
* Replace the content of the element.
*
* Parameters:
* - element:	The element which content should be replaced with an PNG image.
*/
Tfe.PngObject.prototype.replaceElement = function (element)
{
	if (element == null) {
		return;
	}
	// Retrieve browser information (for IE6 support)
	var agt	= navigator.userAgent.toLowerCase();
    var is_major = parseInt(navigator.appVersion);
	var is_ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1));
	var is_ie6 = (is_ie && (is_major == 4) && (agt.indexOf("msie 6.") != -1));
	var is_ie7 = (is_ie && (is_major == 4) && (agt.indexOf("msie 7.") != -1));
	
	// Set the title parameter to the text of the element
	if (document.all || agt.indexOf('safari') > -1)
	{
		this.addParam('title', element.innerText);
	}
	else
	{
		this.addParam('title', element.textContent);
	}
	
	// If set, get the parameters from the element's style (CSS)
	if (this.getParametersFromCss)
	{
		this.getParametersFromObject(element);
	}
	
	// Get the path of the image that will be generated
	var imagePath = this.getImgPath();
	
	// Check if the element should have a hover state
	if (this.getParam('hasHover') != null && this.getParam('hasHover') == 'true')
	{
		// Get the color an the hoverColor (for IE6 support)
		var ie6Color = this.getParam('color');
		var ie6HoverColor = this.getParam('hoverColor');
		var ie6BackgroundColor = this.getParam('backgroundColor');
		var ie6HoverBackgroundColor = this.getParam('hoverBackgroundColor');
		
		var ie6HoverImagePath = imagePath;
		if (ie6HoverColor!= null && ie6HoverColor.length > 0)
		{
		    ie6HoverImagePath = ie6HoverImagePath.replace('color=' + ie6Color, 'color=' + ie6HoverColor)
		}
		if (ie6HoverBackgroundColor != null && ie6HoverBackgroundColor.length > 0)
		{
		    ie6HoverImagePath = ie6HoverImagePath.replace('backgroundColor=' + ie6BackgroundColor, 'backgroundColor=' + ie6HoverBackgroundColor)
		}
		
		// Create a new image object
		var image = new Image();
		// Add the mouseover and mouseout events after the image is loaded
		image.onload = function ()
		{ 
			// Set the dimensions of the element according to the dimensions of the image
			var iheight = image.height / 2;
			var iwidth = image.width;
			element.style.height = iheight + 'px';
			element.style.width = iwidth + 'px';
			element.style.display = 'block';
			
			if (is_ie6 && ie6HoverBackgroundColor == 'transparent')
			{
				// Change the image which is used for the filter (filter does not support background positioning)
				Tfe.Utils.addEvent(element, 'mouseover', function(evtElement) {evtElement.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' + ie6HoverImagePath + '", sizingMethod="crop");'; });
				Tfe.Utils.addEvent(element, 'mouseout', function(evtElement) {evtElement.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' + imagePath + '", sizingMethod="crop");'; });
			}
			else
			{
				// Change the position of the background image
				Tfe.Utils.addEvent(element, 'mouseover', function(evtElement) {evtElement.style.backgroundPosition = '0 -' + evtElement.style.height;});
				Tfe.Utils.addEvent(element, 'mouseout', function(evtElement) {evtElement.style.backgroundPosition = '0 0';});
			}
			return true;
		};
		// Set the source of the image
		image.src = imagePath;
		
		// Place the text of the element in a span, so the text is preserved in the HTML
		var spanTag = '<span style="display: none;"';
		if (this.cssClass.length > 0)
		{
			spanTag += ' class="' + this.cssClass + '"';
		}
		spanTag += '>' + element.innerHTML + '</span>';
		element.innerHTML = spanTag;
		if (is_ie6 && ie6BackgroundColor == 'transparent')
		{
			// Set the backgroundimage of the element to the blank image and apply a filter on the element
			element.style.backgroundImage = 'url(' + this.blankImageUrl + ')';
			element.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' + imagePath + '", sizingMethod="crop");';
		}
		else
		{
			// Escape apostrove for non IE7 browsers
			if(!is_ie7) 
			{
				imagePath = imagePath.replace('\'','\\\'');
			}
			
			// Set the backgroundimage of the element
			element.style.backgroundImage = 'url(' + imagePath + ')';
		}
	}
	else
	{
		// Add the image to the element and add the text of the element as 'alt' parameter to the image
		var imageTag = '<img src="' + imagePath + '" alt="' + this.getParam('title') + '" style="vertical-align: top;"';
		if (this.cssClass.length > 0)
		{
			imageTag += ' class="' + this.cssClass + '"';
		}
		imageTag += ' />';
		element.innerHTML = imageTag;
	}
}

/**
*	Replace the content of an element with a specific id.
*
*	Parameters:
*	- elementId:	The id of the element which content should be replaced with an PNG image.
*/
Tfe.PngObject.prototype.replaceElementById = function(elementId)
{
	var element = document.getElementById(elementId);
	this.replaceElement(element);
}

/**
*	Replace the content of all elements of a specific tag.
*
*	Parameters:
*	- tagName:		The name of the tag to replace all content of.
*/
Tfe.PngObject.prototype.replaceElementsByName = function(name)
{
	var elements = document.getElementsByTagName(name);
	if (elements.length > 0)
	{
		this.replaceMultipleElements = true;
	}
	for (var i = 0;i < elements.length;i++)
	{
		var element = elements[i];
		this.replaceElement(element);
	}
}

/**
*	Get the generated image path.
*
*	Return value:	The path of the generated image.
*/
Tfe.PngObject.prototype.getImgPath = function() {
    // Start with the base path.
    var imgPath = this.getPath();
    // Add the parameters
    var paramSeparator = '?'
    for (paramName in this.getParams()) {
        var paramValue = this.getParam(paramName);
        imgPath += paramSeparator + paramName + '=' + Tfe.Utils.stringToHex(paramValue);
        paramSeparator = '&';
    }
    // Add this to support pngbehavior
    imgPath += '&.png'

    return imgPath;
}

/**
*	Get the parameters from a DOM object
*
*	Parameters:
*	- oObject:		The object which style should be used for setting the parameters.
*/
Tfe.PngObject.prototype.getParametersFromObject = function (oObject)
{
	//Get the color
	if (this.getParam('color') == null || this.replaceMultipleElements)
	{
		var sColor = Tfe.Utils.getHexColor(Tfe.Utils.getCurrentStyle(oObject, "color"));
		if (sColor != 'transparent')
		{
		    this.addParam('color', sColor);
		}
	}
		
	//Get the background color
	if (this.getParam('backgroundColor') == null || this.replaceMultipleElements)
	{
		var sBackgroundColor = Tfe.Utils.getHexColor(Tfe.Utils.getCurrentStyle(oObject, 'background-color'));
		if (sBackgroundColor != 'transparent')
		{
		    this.addParam('backgroundColor', sBackgroundColor);
		}
	}
	
	//Get the width
	if (this.getParam('width') == null || this.replaceMultipleElements)
	{
		var sWidth = Tfe.Utils.getCurrentStyle(oObject, "width");
		if (sWidth.indexOf('px') > -1)
		{
			sWidth = sWidth.substring(0, sWidth.indexOf('px'));
		}
		this.addParam('width', sWidth);
	}
	
	//Get the height
	if (this.getParam('lineHeight') == null || this.replaceMultipleElements)
	{
		var sHeight = Tfe.Utils.getCurrentStyle(oObject, "line-height");
		if (sHeight != 'normal')
		{
			if (sHeight.indexOf('px') > -1)
			{
				sHeight = sHeight.substring(0, sHeight.indexOf('px'));
			}
			this.addParam('lineHeight', sHeight);
		}
	}
}