/*
wwww.tigir.com - 29.06.2006

Source: http://www.tigir.com/js/fade.js

Библиотека fade.js из статьи "Постепенное изменение цветов (fade-эффекты)" - http://www.tigir.com/fade.htm
*/
function fademenu(sElemId, sRule, bBackward)
{
	if (!document.getElementById(sElemId)) return;//если нет элемента с заданным id выходим

	var aRuleList = sRule.split(/\s*,\s*/);//sRule может быть списком правил разделенных запятой, разбивает строку на массив

	//Запускаем фейдинг для каждого правила отдельно
	for (var j	= 0; j < aRuleList.length; j++)
	{
		sRule = aRuleList[j];

		if (!fademenu.aRules[sRule]) continue;//если правило не было определено, то переходиим к следующему правилу

		//инициализируем индекс текущего цвета
		var i=0;

		if (!fademenu.aProc[sElemId])//если к элементу с заданным id ещё не применялся фейдинг, то готовим список процессов к добавлению нового элемента
		{
			fademenu.aProc[sElemId] = {};
		}
		else if (fademenu.aProc[sElemId][sRule]) //если к элементу уже применялось правило sRule, то запоминаем состояние предыдущего процесса и останавливаем его
		{
			i = fademenu.aProc[sElemId][sRule].i;
			clearInterval(fademenu.aProc[sElemId][sRule].tId);
		}

		//Если цвет элемента равен начальному и запрашивается возврат к начальному цвету, или цвет элемента равен конечному и запрашивается запуск фейдинга то выходим, делать ничего не нужно
		if ((i==0 && bBackward) || (i==fademenu.aRules[sRule][3] && !bBackward)) continue;

		//инициализируем процесс запуска и помещаем текущий процесс фейдинга в список процессов
		fademenu.aProc[sElemId][sRule] = {'i':i, 'tId':setInterval('fademenu.run("'+sElemId+'","'+sRule+'")', fademenu.aRules[sRule][4]),'bBackward':Boolean(bBackward)};
	}
}

fademenu.aProc = {};//массив выполняемых процессов
fademenu.aRules = {};//ассоциативного массив с определенными правилами, заполняется методом fademenu.addRule

//Данный метод выполняет смену цвета, запускается функцией fademenu
fademenu.run = function(sElemId, sRule)
{
	//все нужные для фейдинга данный берутся из свойства fademenu.aRules

    fademenu.aProc[sElemId][sRule].i += fademenu.aProc[sElemId][sRule].bBackward?-1:1;//изменяем индекс промежуточного цвета
 	var finishPercent = fademenu.aProc[sElemId][sRule].i/fademenu.aRules[sRule][3]; //процент содержания конечного цвета в текущем промежуточном цвете;  изменяется от 0 (не включая 0) до 1 (1 = 100%)
	var startPercent = 1 - finishPercent; //процент содержания начального цвета в текущем промежуточном цвете; изменяется от 1 до 0 (1 = 100%)

	var aRGBStart = fademenu.aRules[sRule][0];
	var aRGBFinish = fademenu.aRules[sRule][1];

	//вычисляем значения красного, зеленого, синего промежуточного цвета
    document.getElementById(sElemId).style[fademenu.aRules[sRule][2]] = 'rgb('+
	Math.floor( aRGBStart['r'] * startPercent + aRGBFinish['r'] * finishPercent ) + ','+
	Math.floor( aRGBStart['g'] * startPercent + aRGBFinish['g'] * finishPercent ) + ','+
	Math.floor( aRGBStart['b'] * startPercent + aRGBFinish['b'] * finishPercent ) +')';

	// если уже перебраны все промежуточные цвета то останавливаем процесс
	if ( fademenu.aProc[sElemId][sRule].i == fademenu.aRules[sRule][3] || fademenu.aProc[sElemId][sRule].i ==0) clearInterval(fademenu.aProc[sElemId][sRule].tId);
}

fademenu.back = function (sElemId, sRule){fademenu(sElemId, sRule, true);};

fademenu.addRule = function (sRuleName, sfademenuStartColor, sfademenuFinishColor, sCSSProp, nMiddleColors, nDelay)
{
	fademenu.aRules[sRuleName] = [fademenu.splitRGB(sfademenuStartColor), fademenu.splitRGB(sfademenuFinishColor), fademenu.ccs2js(sCSSProp), nMiddleColors || 50, nDelay || 1];
};

//функция для разбивки шестнадцатиричного цвета на значения красного, зеленого и синего в виде массива, например, #FF0 в ['r':255, 'g':255, 'b':0]
fademenu.splitRGB = function (color){var rgb = color.replace(/[# ]/g,"").replace(/^(.)(.)(.)$/,'$1$1$2$2$3$3').match(/.{2}/g); for (var i=0;  i<3; i++) rgb[i] = parseInt(rgb[i], 16); return {'r':rgb[0],'g':rgb[1],'b':rgb[2]};};
//функция для преобразования CSS названия свойства в соответсвующее ему Javascript свойство, например, border-color в borderColor
fademenu.ccs2js = function (prop){var i; while ((i=prop.indexOf("-"))!=-1) prop = prop.substr(0, i) + prop.substr(i+1,1).toUpperCase() + prop.substr(i+2); return prop;};

//Если поддержка IE5 не нужна, то можно fademenu.ccs2js заменить на более изящное решение
//fademenu.ccs2js = function(cssProperty){return cssProperty.replace(/\-(.)/g,function(){return arguments[1].toUpperCase();});};