/*
wwww.tigir.com - 06.07.2006

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

Библиотека opacity.js к статье "CSS прозрачность (css opacity, javascript opacity)" - http://www.tigir.com/opacity.htm

setElementOpacity - установка прозрачности
getOpacityProperty - проверка, есть ли возможность менять прозрачность
fadeOpacity - плавное изменение прозрачности
*/

/* Функция кроссбраузерной установки прозрачности

Пример: setElementOpacity(document.body, 0.5); //сделать документ прозрачным на половину
*/
function setElementOpacity(oElem, nOpacity)
{
	var p = getOpacityProperty();
	(setElementOpacity = p=="filter"?new Function('oElem', 'nOpacity', 'nOpacity *= 100;	var oAlpha = oElem.filters["DXImageTransform.Microsoft.alpha"] || oElem.filters.alpha;	if (oAlpha) oAlpha.opacity = nOpacity; else oElem.style.filter += "progid:DXImageTransform.Microsoft.Alpha(opacity="+nOpacity+")";'):p?new Function('oElem', 'nOpacity', 'oElem.style.'+p+' = nOpacity;'):new Function)(oElem, nOpacity);
}

// Функция getOpacityProperty() возвращает свойство которое используется для смены прозрачности или undefined, и может использоваться для проверки возможности изменения прозрачности
function getOpacityProperty()
{
	var p;
	if (typeof document.body.style.opacity == 'string') p = 'opacity';
	else if (typeof document.body.style.MozOpacity == 'string') p =  'MozOpacity';
	else if (typeof document.body.style.KhtmlOpacity == 'string') p =  'KhtmlOpacity';
	else if (document.body.filters && navigator.appVersion.match(/MSIE ([\d.]+);/)[1]>=5.5) p =  'filter';
	
	return (getOpacityProperty = new Function("return '"+p+"';"))();
}

/* Функции для плавного изменения прозрачности:

1) fadeOpacity.addRule('opacityRule1', 1, 0.5, 30); //вначале создаем правило, задаем имя правила, начальную прозрачность и конечную, необязательный параметр задержки, влийяющий на скорость смены прозрачности
2) fadeOpacity('elemID', 'opacityRule1'); // выполнить плавную смену прозрачности элемента с id равным elemID, по правилу opacityRule1
3) fadeOpacity.back('elemID'); //вернуться в исходное сотояние прозрачности
*/
function fadeOpacity(sElemId, sRuleName, bBackward)
{
	var elem = document.getElementById(sElemId);
	if (!elem || !getOpacityProperty() || !fadeOpacity.aRules[sRuleName]) return;
	
	var rule = fadeOpacity.aRules[sRuleName];
	var nOpacity = rule.nStartOpacity;
	
	if (fadeOpacity.aProc[sElemId]) {clearInterval(fadeOpacity.aProc[sElemId].tId); nOpacity = fadeOpacity.aProc[sElemId].nOpacity;}
	if ((nOpacity==rule.nStartOpacity && bBackward) || (nOpacity==rule.nFinishOpacity && !bBackward)) return;

	fadeOpacity.aProc[sElemId] = {'nOpacity':nOpacity, 'tId':setInterval('fadeOpacity.run("'+sElemId+'")', fadeOpacity.aRules[sRuleName].nDalay), 'sRuleName':sRuleName, 'bBackward':Boolean(bBackward)};
}

fadeOpacity.addRule = function(sRuleName, nStartOpacity, nFinishOpacity, nDalay){fadeOpacity.aRules[sRuleName]={'nStartOpacity':nStartOpacity, 'nFinishOpacity':nFinishOpacity, 'nDalay':(nDalay || 30),'nDSign':(nFinishOpacity-nStartOpacity > 0?1:-1)};};

fadeOpacity.back = function(sElemId){fadeOpacity(sElemId,fadeOpacity.aProc[sElemId].sRuleName,true);};

fadeOpacity.run = function(sElemId)
{
	var proc = fadeOpacity.aProc[sElemId];
	var rule = fadeOpacity.aRules[proc.sRuleName];
	
	proc.nOpacity = Math.round(( proc.nOpacity + .1*rule.nDSign*(proc.bBackward?-1:1) )*10)/10;
	setElementOpacity(document.getElementById(sElemId), proc.nOpacity);
	
	if (proc.nOpacity==rule.nStartOpacity || proc.nOpacity==rule.nFinishOpacity) clearInterval(fadeOpacity.aProc[sElemId].tId);
}
fadeOpacity.aProc = {};
fadeOpacity.aRules = {};

/* 
wwww.tigir.com - 29.06.2006 
 
Source: http://www.tigir.com/js/fade.js 
 
Библиотека fade.js из статьи "Постепенное изменение цветов (fade-эффекты)" - http://www.tigir.com/fade.htm 
*/ 
function fade(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 (!fade.aRules[sRule]) continue;//если правило не было определено, то переходиим к следующему правилу 
		 
		//инициализируем индекс текущего цвета 
		var i=0; 
		 
		if (!fade.aProc[sElemId])//если к элементу с заданным id ещё не применялся фейдинг, то готовим список процессов к добавлению нового элемента 
		{ 
			fade.aProc[sElemId] = {}; 
		} 
		else if (fade.aProc[sElemId][sRule]) //если к элементу уже применялось правило sRule, то запоминаем состояние предыдущего процесса и останавливаем его 
		{ 
			i = fade.aProc[sElemId][sRule].i; 
			clearInterval(fade.aProc[sElemId][sRule].tId); 
		} 
		 
		//Если цвет элемента равен начальному и запрашивается возврат к начальному цвету, или цвет элемента равен конечному и запрашивается запуск фейдинга то выходим, делать ничего не нужно 
		if ((i==0 && bBackward) || (i==fade.aRules[sRule][3] && !bBackward)) continue; 
		 
		//инициализируем процесс запуска и помещаем текущий процесс фейдинга в список процессов 
		fade.aProc[sElemId][sRule] = {'i':i, 'tId':setInterval('fade.run("'+sElemId+'","'+sRule+'")', fade.aRules[sRule][4]),'bBackward':Boolean(bBackward)}; 
	} 
} 
 
fade.aProc = {};//массив выполняемых процессов 
fade.aRules = {};//ассоциативного массив с определенными правилами, заполняется методом fade.addRule   
 
//Данный метод выполняет смену цвета, запускается функцией fade 
fade.run = function(sElemId, sRule) 
{ 
	//все нужные для фейдинга данный берутся из свойства fade.aRules 
	 
    fade.aProc[sElemId][sRule].i += fade.aProc[sElemId][sRule].bBackward?-1:1;//изменяем индекс промежуточного цвета 
 	var finishPercent = fade.aProc[sElemId][sRule].i/fade.aRules[sRule][3]; //процент содержания конечного цвета в текущем промежуточном цвете;  изменяется от 0 (не включая 0) до 1 (1 = 100%) 
	var startPercent = 1 - finishPercent; //процент содержания начального цвета в текущем промежуточном цвете; изменяется от 1 до 0 (1 = 100%) 
	 
	var aRGBStart = fade.aRules[sRule][0]; 
	var aRGBFinish = fade.aRules[sRule][1]; 
	 
	//вычисляем значения красного, зеленого, синего промежуточного цвета 
    document.getElementById(sElemId).style[fade.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 ( fade.aProc[sElemId][sRule].i == fade.aRules[sRule][3] || fade.aProc[sElemId][sRule].i ==0) clearInterval(fade.aProc[sElemId][sRule].tId);  
} 
 
fade.back = function (sElemId, sRule){fade(sElemId, sRule, true);}; 
 
fade.addRule = function (sRuleName, sFadeStartColor, sFadeFinishColor, sCSSProp, nMiddleColors, nDelay) 
{ 
	fade.aRules[sRuleName] = [fade.splitRGB(sFadeStartColor), fade.splitRGB(sFadeFinishColor), fade.ccs2js(sCSSProp), nMiddleColors || 50, nDelay || 1]; 
}; 
 
//функция для разбивки шестнадцатиричного цвета на значения красного, зеленого и синего в виде массива, например, #FF0 в ['r':255, 'g':255, 'b':0] 
fade.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 
fade.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;}; 

var curtainStep = 10; //шаг - количество пикселей на которое будет сворачивать слой за один раз
var curtainTimeout = 15;//задержка перед последующей итерацией для эффекта плавности


//текущее количество обрезаемых пикселей слоя слева и справа
var curtainBottom = 415;
var curtainHeight = 415;//ширина слоя

//ф-ция разворачивания слоя
function curtainOpen(page)
{
	if (curtainBottom <= 415)//Пока левая граница области усечения не достигла левой границы слоя
	{
		curtainBottom += curtainStep; //раскрываем область усечения справа на curtainStep пикселей
		
		var rect = 'rect(auto, auto, '+ curtainBottom +'px, auto)';
		
		document.getElementById(page).style.clip = rect;
		
		setTimeout('curtainOpen("'+page+'")',curtainTimeout); //вызываем эту же функцию повторно через curtainTimeout миллисекунд
	}
}

//ф-ция сворачивания слоя
function curtainClose(page)
{
	if (curtainBottom >= 0)//Пока левая граница области усечения не встретилась с правой
	{
		curtainBottom -= curtainStep; //сужаем область усечения слева на curtainStep пикселей

		var rect = 'rect(auto, auto, '+ curtainBottom +'px, auto)';

		document.getElementById("title").style.clip = rect;
		document.getElementById("portfolio").style.clip = rect;
		document.getElementById("main").style.clip = rect;
		setTimeout('curtainClose("'+page+'")' ,curtainTimeout); //вызываем эту же функцию повторно через curtainTimeout миллисекунд
	} else {
	document.getElementById('title').style.display = 'none';
	document.getElementById('portfolio').style.display = 'none';
	document.getElementById('main').style.display = 'none';
	
	document.getElementById(page).style.display = 'block';
	curtainBottom = 0;
		
	curtainOpen(page);
	}
	return false;
} 



document.getElementById('portfolio').style.display = 'none'
document.getElementById('main').style.display = 'none'
fadeOpacity.addRule('oR1', .3, 1, 50);

fade.addRule('fadeRule1',"#efebe2","#a0a199", "background-color", 75, 1);
fade.addRule('fadeRule2',"#888c89","#efebe2", "color", 75, 1);

menu = function () {
	document.getElementById(this.id).style.backgroundColor = '#efebe2';
	fade(this.id, 'fadeRule1');
	return false;
};
menu.back = function () {
	fade.back(this.id, 'fadeRule1');
	return false;
};

document.getElementById ('m_main').onmouseover = menu;
document.getElementById ('m_main').onmouseout = menu.back;
document.getElementById ('m_portfolio').onmouseover = menu;
document.getElementById ('m_portfolio').onmouseout = menu.back;
document.getElementById ('m_contacts').onmouseover = menu;
document.getElementById ('m_contacts').onmouseout = menu.back;

document.getElementById ('m_main').onclick = function() {curtainClose('title'); return false};
document.getElementById ('m_portfolio').onclick = function() {curtainClose('portfolio'); return false};
document.getElementById ('m_contacts').onclick = function() {curtainClose('main'); return false};

setElementOpacity(document.getElementById('p1'), 0.3);
setElementOpacity(document.getElementById('p2'), 0.3);
setElementOpacity(document.getElementById('p3'), 0.3);
setElementOpacity(document.getElementById('p4'), 0.3);
setElementOpacity(document.getElementById('p5'), 0.3);
setElementOpacity(document.getElementById('p6'), 0.3);
setElementOpacity(document.getElementById('p7'), 0.3);

var nodeList = document.getElementById('portfolio').getElementsByTagName("a");
nodeList[2].onmouseover = function() {fadeOpacity('p1', 'oR1')};
nodeList[2].onmouseout = function() {fadeOpacity.back('p1')};
nodeList[3].onmouseover = function() {fadeOpacity('p2', 'oR1')};
nodeList[3].onmouseout = function() {fadeOpacity.back('p2')};
nodeList[4].onmouseover = function() {fadeOpacity('p3', 'oR1')};
nodeList[4].onmouseout = function() {fadeOpacity.back('p3')};
nodeList[5].onmouseover = function() {fadeOpacity('p4', 'oR1')};
nodeList[5].onmouseout = function() {fadeOpacity.back('p4')};
nodeList[6].onmouseover = function() {fadeOpacity('p5', 'oR1')};
nodeList[6].onmouseout = function() {fadeOpacity.back('p5')};
nodeList[7].onmouseover = function() {fadeOpacity('p6', 'oR1')};
nodeList[7].onmouseout = function() {fadeOpacity.back('p6')};
nodeList[1].onmouseover = function() {fadeOpacity('p7', 'oR1')};
nodeList[1].onmouseout = function() {fadeOpacity.back('p7')};