var addListener = function (targetNode, type, func)
{
	if (targetNode.addEventListener)
	{
		targetNode.addEventListener(type, func, false);
	} 
	else if (targetNode.attachEvent)
	{
		targetNode.attachEvent('on'+type, func);
	}
}

var $ = function ()
{
	var elements = new Array();
	for (var i = 0; i < arguments.length; i++)
	{
		var element = arguments[i];
		if (typeof element == 'string') element = document.getElementById(element);
		if (arguments.length == 1) return element;
		elements.push(element);
	}
	return elements;
}

var setPosition = function (id, bottom, left)
{
	var mainUl = $(id);
	if (bottom) mainUl.style.bottom  = bottom + 'px';
	if (left) mainUl.style.left = left + 'px';
}

/***************************************************************/

var toyoMenu2 = function(menuId)
{
	this.menuId = menuId;

	this.isIe = typeof(document.evaluate) == 'undefined';
	
	this.imgPadding = 8;
	this.menuPadding = 50;
	this.extraImgPadding = 15;
	this.defaultOpacity = 0.5;
	this.sizeCoef = 1.8;
	this.extraBodyMargin = 15;

	this.images = new Array();
	this.razAll = true;
	this.totalWidth = 0;
	this.totalHeight = 0;
	this.biggestWidth = 0;	
	this.biggestHeight = 0;
}

toyoMenu2.prototype =
{
	getLeft : function (object)
    {
		if (object.offsetParent) return (object.offsetLeft + this.getLeft(object.offsetParent));
		else return (object.offsetLeft);
    },
	
	getTop : function (object)
    {
		if (object.offsetParent) return (object.offsetTop + this.getTop(object.offsetParent));
		else return (object.offsetTop);
    },
	
	initData : function ()
	{
		var mainUl = $(this.menuId);
		var liElements = mainUl.getElementsByTagName('li');
		var tmp = 0;
		var previousId = null;

		for (var i = 0; i < liElements.length; i++)
		{
			var li = liElements[i];
			var img = this.getInnerImg(li);
			
			this.images[li.id] = new Array();
			this.images[li.id].originalWidth = img.width;
			this.images[li.id].originalHeight = img.height;

			if (img.width > this.biggestWidth) this.biggestWidth = img.width;
			if (img.height > this.biggestHeight) this.biggestHeight = img.height;
			
			this.totalWidth += img.width + (this.imgPadding * 2);
			if (img.height > this.totalHeight) this.totalHeight = img.height;
		}
		this.totalWidth += this.menuPadding * 2;
		this.totalHeight += (this.imgPadding * 2) + (this.menuPadding * 2);		

		for (var i = 0; i < liElements.length; i++)
		{
			var li = liElements[i];
			var img = this.getInnerImg(li);
			
			this.setOpacity(img);
			img.style.padding = this.imgPadding + 'px';
			
			this.images[li.id].centreX = i == 0 ? this.menuPadding : this.images[previousId].centreX + tmp;
			tmp = this.imgPadding + (this.images[li.id].originalWidth / 2);
			previousId = li.id;
			this.images[li.id].centreX += tmp;
			
			var heightCorrection = (this.biggestHeight - this.images[li.id].originalHeight) / 2;
			img.style.paddingBottom = (this.imgPadding + heightCorrection) + 'px';
			this.images[li.id].centreY = this.menuPadding + this.imgPadding + (this.images[li.id].originalHeight / 2) + heightCorrection;
		}
		
		// Padding de l'ul
		mainUl.style.padding = this.menuPadding + 'px';
		if (!this.isIe) mainUl.style.paddingBottom = (this.menuPadding - 5) + 'px';

		// On retire les noeuds "text"
		var nodeToRemove = new Array();
		for (var i = 0; i < mainUl.childNodes.length; i++)
		{
			var child = mainUl.childNodes[i];
			if (child.nodeName.toLowerCase() != 'li') nodeToRemove.push(child);
		}
		for (ind in nodeToRemove) mainUl.removeChild(nodeToRemove[ind]);
	},

	setPosition : function(bottom, left)
	{
		setPosition(this.menuId, bottom, left);
		var mainUl = $(this.menuId);
		this.topPos = this.getTop(mainUl);
		this.leftPos = this.getLeft(mainUl);
		
		return document.documentElement.clientWidth > (this.totalWidth + (this.biggestWidth *this.sizeCoef) - this.biggestWidth + this.extraBodyMargin);
	},
	
	setOpacity : function (img, opacity)
	{
		if (opacity == null) opacity = this.defaultOpacity;
		img.style.opacity = opacity;
		img.style.filter = 'alpha(opacity=' + (opacity * 100) + ')';	
	},
	
	initImg : function (id, img)
	{
		img.width = this.images[id].originalWidth;
		img.height = this.images[id].originalHeight;
		img.style.top = 0;
		this.setOpacity(img);
	},
	
	getInnerImg : function (liElement)
	{
		return liElement.firstChild.firstChild;
	},
	
	animeMenu : function ()
	{
		var mainUl = $(this.menuId);
		var self = this;

		addListener(document, 'mousemove', function (event)
		{
			var posX = event.clientX - self.leftPos;
			var posY = self.topPos + self.totalHeight - event.clientY;
			//$('debug').innerHTML = posX+' '+posY+'<br />';
		
			var wip = false;
			for (id in self.images)
			{
				var img = self.getInnerImg($(id));
				var imgObj = self.images[id];
			
				var centerX	= imgObj.centreX;
				var centerY	= imgObj.centreY;
			
				var dist = -1;
				if (posX >= 0 && posY >= 0)
				{
					var distX = Math.abs(centerX - posX);
					var distY = Math.abs(centerY - posY);
					var dist = Math.sqrt(Math.pow(distX, 2) + Math.pow(distY, 2));
				}

				//$('debug').innerHTML += 'width ' + $(id).firstChild.firstChild.width + '<br />';
				//$('debug').innerHTML += 'dist ' + dist + '<br />';

				var maxDist = (imgObj.originalWidth / 2) + self.imgPadding + self.extraImgPadding;
				if (dist != -1 && dist < maxDist)
				{
					wip = true;
					self.razAll = false;
					var maxWidthDelta = (imgObj.originalWidth * self.sizeCoef) - imgObj.originalWidth;
					var widthDelta = maxWidthDelta / maxDist * (maxDist - dist);
					img.width = imgObj.originalWidth + widthDelta;

					var maxHeightDelta = (imgObj.originalHeight * self.sizeCoef) - imgObj.originalHeight;
					var heightDelta = maxHeightDelta / maxDist * (maxDist - dist);
					img.height = imgObj.originalHeight + heightDelta;			

					var opacity = self.defaultOpacity + ((1 - self.defaultOpacity) / (maxDist - self.extraImgPadding) * (maxDist - dist));
					self.setOpacity(img, opacity);
					
					img.style.top = (heightDelta / 2) + 'px';
					mainUl.style.left = (self.leftPos - (widthDelta / 2)) + 'px';
				}
				else
				{
					if (!self.razAll) self.initImg(id, img);
				}
			}

			if (!wip)
			{
				if (!self.razAll)
				{
					for (id in self.images) self.initImg(id, self.getInnerImg($(id)));
					mainUl.style.left = self.leftPos + 'px';
					self.razAll = true;
				}
			}
		});
	},
	
	setRelativePosition : function (bottomPercent, topPercent)
	{
		var bottom = (document.documentElement.clientHeight * bottomPercent) - (this.totalHeight / 2);
		var left = (document.documentElement.clientWidth * topPercent) - (this.totalWidth / 2);
		return this.setPosition(bottom, left);	
	},
	
	displayMenu : function (bottomPercent, topPercent)
	{
		var sizeOk = this.setRelativePosition(bottomPercent, topPercent);
		if (sizeOk)
		{
			if ($('error_' + this.menuId)) document.body.removeChild($('error_' + this.menuId));
			$(this.menuId).style.visibility = 'visible';
		}
		else
		{
			$(this.menuId).style.visibility = 'hidden';
			var padding = 10;
			var width = 350;
			var height = 50;
			var newP = $('error_' + this.menuId);

			if (newP == null)
			{
				newP = document.createElement('p');
				newP.id = 'error_' + this.menuId;
				newP.className = 'error';
				newP.style.padding = padding + 'px';
				newP.style.width = width + 'px';
				newP.style.height = height + 'px';
				newP.innerHTML = "Le menu ne peut s'afficher, la résolution de votre navigateur est trop faible.";
				document.body.appendChild(newP);
			}
			
			newP.style.bottom  = ((document.documentElement.clientHeight * bottomPercent) - (height / 2)) + 'px';
			newP.style.left  = ((document.documentElement.clientWidth * topPercent) - (width / 2)) + 'px';
		}
	},
	
	launch : function (bottomPercent, topPercent)
	{
		var self = this;

		addListener(window, 'load', function()
		{
			self.initData();
			self.animeMenu();
			self.displayMenu(bottomPercent, topPercent);
		});

		addListener(window, 'resize', function(){ self.displayMenu(bottomPercent, topPercent); });
	}
};