/*
* Скрипт для зміни сторінок на сайті
* При кліку на пункт меню всі пункти меню робляться неактивними, проточна сторінка переміщається в сторону і пропадає.
* Пропадає світло над поточним пунктом меню, плавно з"являється нова сторінка, після цього всі пункти меню стають знову активними.
* Поточний пункт меню стає неактивним і над ним з"являється світло.
*/
var j=jQuery.noConflict();
var currNavItem, currPage, nextPage, moveto, widthTo;
var allowLogoShow = true;
j(document).ready(function() {
	/**/
	j("div.scrollable").scrollable({
		size: 1,
		items: '#thumbs'
	});

	/**/
	var browserIE = !jQuery.support.htmlSerialize;

	//Ховаємо всі сторінки
	j(".page-content").css('visibility','visible').hide();

	j('#map-link').bind('click',showMap);
	j('#overlay').css('opacity',0.4).bind('click',hideMap);
	j('#close-map').bind('click',hideMap);


	//Визначаємо "світло", ховаємо його
	var navLight = j('#main-nav li.light');
	if (!browserIE){
		navLight.css('opacity',0);
	} else {
		navLight.css('visibility','hidden');
	}

	j('#light').css('visibility','visible').hide();
	j('#logo').css('visibility','visible').hide();
	j('#tooltip').css('visibility','visible').hide();
	j('#tooltip').css('visibility','visible').hide();

	j('#logo-large').css('visibility','visible').hide();
	j('#light-large').css('visibility','visible').hide();
	loadImg();

	function loadImg(){
	 	  var img = new Image();
		  j(img)
			.load(function () {
				 var logo = new Image();
					 j(logo).load(function () {
						var light = new Image();
						j(light).load(function () {
							if(allowLogoShow){
								 j('#logo-large').fadeTo(100,1);
								 j('#light-large').fadeTo(100,1);
							}
						}).attr('src', 'i/light-large.jpg');
				 }).attr('src', 'i/logo-large.jpg');

			}).attr('src', 'i/pattern.png');
	 }


	//Робимо всі пункти меню клікабельними

	setDefaultNavItemsActions();
	/* Products-logos */
	if (!browserIE){
		j('#content-products .col img').css('opacity','0.7');
		j("#content-products .col img").bind({
									  mouseenter: function() {j(this).stop().fadeTo(300,1)},
									  mouseleave: function() {j(this).stop().fadeTo(300,0.7)}
									});
	}
	if (browserIE){
		j("#content-products .col img").css({'display':'none'});
		j("#content-products .col img.png8").css({'display':'block','visibility':'visible'});
	 }
	/**/
	function hideLargeLogo(){
		allowLogoShow = false;
		j('#light-large').stop().animate({opacity:0}, 500, showSmallLogo);
		j('#logo-large').stop().animate({opacity:0}, 200);
	}

	function showSmallLogo(){
		j('#main-nav').animate({marginLeft: -169}, 800,"easeInOutQuad");
		j('#footer-content #copy').animate({left: -8}, 800,"easeInOutQuad");
		j('#light').show().css('opacity',0).animate({opacity:1}, 500);
		j('#logo').show().css('opacity',0).animate({opacity:0}, 200).animate({opacity:1}, 300);
		j('#grad-left').animate({left:-100}, 500);
		showNextPage();
	}

	//Робимо поточний пункт меню неклікабельним
	//Анімуємо колір тексту у білий
	//Робимо неклікабельним
	function disablingCurrNavItem(){
		currNavItem.stop().animate({color:'#fff'},300);
		currNavItem.unbind('click');
		currNavItem.css('cursor','default').bind('click',function(){return false});
	}

	//Робимо пункти меню клікабельними
	//Забираємо сірий коліп тексту, визначаємо функцію, яка виконується при кліку на пункт меню
	//Плавно з"являється світло (в ІЕ6 не плавно). Світло на той момент знаходиться над поточним пунктом меню
	//Поточний пунктменю робимо неклікабельним
	function enableNavItems(){
		setDefaultNavItemsActions();
		if (!browserIE){
			navLight.stop().fadeTo(300,1);
		} else {
			navLight.css('visibility','visible');
		}
		disablingCurrNavItem();
	}

	function setDefaultNavItemsActions(){
		j('#main-nav li a').removeAttr("style");
		j('#main-nav li a.pageLink').bind('click',navItemClicked);
		j('#main-nav li a.outerLink').bind('click',function(){
														window.open(j(this).attr('href'));
														return false;
													});
		j("#main-nav li a.outerLink").bind({
								  mouseenter: function() {j('#tooltip').stop().fadeTo(300,1)},
								  mouseleave: function() {j('#tooltip').stop().fadeTo(300,0)}
								});
	}

	//Робимо меню неклікабельним
	//Зупиняємо анімацію кольову тексту поточниго пункта меню в білий колір
	//Всі пункти меню міняють курсор на "за замавчуванням" і колір тексту міняється на сірий
	//При кліку не виконується жодна функція
	function disableNavItems(){
		if (currNavItem) {
			currNavItem.stop();	
		}
		j('#main-nav li a').unbind('click');
		j("#main-nav li a.outerLink").unbind('mouseenter').unbind('mouseleave');
		j('#main-nav li a').css({cursor:'default', color:'#666'}).bind('click',function(){return false});
	}

	//Клікнули по клікабельному пункті меню
	//Робимо меню неклікабельним, визначаємо поточний пункт меню, пропадає світло над попереднім оточним пунктом меню
	//змінній "nextPage" передаємо блок, який вказаний в ссилці поточного пункта меню
	//виклик функції для ховання поточної сторінки
	//зберігаємо у змінні "moveto, widthTo" позицію і ширину нового поточного пункта меню (для того, щоб перемістити "світло" над ним)
	function navItemClicked(){
		disableNavItems();
		currNavItem = j(this);
		var nextPageId = j(this).attr('href');
		nextPage = j(nextPageId);

		moveto =  parseInt(j(this).parent().position().left+5);
		widthTo =  parseInt(j(this).parent().width()+5);
		if (currPage){
			if (!browserIE){
				navLight.stop().fadeTo(300,0);
			} else {
				navLight.css('visibility','hidden');
			}
			hideCurrPage();
		} else {
			hideLargeLogo();
		}
		return false;
	}

	function showMap(){
		if (!browserIE){
			j('#content-map').css({visibility:'visible', opacity:0}).stop().fadeTo(500,1);
		} else {
			j('#content-map').css({visibility:'visible'});
		}
		return false;
	}
	function hideMap(){
		j('#content-map').css('visibility','hidden');

	}


	//Ховаємо поточну сторінку
	//Ховається картинка в сторінці
	//ховається поточна сторінка і тільки після цього виклик функції для появи нової
	function hideCurrPage(){
		currPage.find('.content')
					.animate({    
						left: 150,
						opacity:0.2
					  }, 300);
		currPage.find('.scroll-block .columns').animate({opacity:0.2}, 300);
		currPage.find('.scroll-block .scroll-arr').animate({opacity:0.2}, 300);

		currPage.find('.img-frame')
					.animate({left:0},10)
					.animate({    
						left: 100,
						opacity:0.2
					  }, 300);

		currPage.find('.frame-content').animate({opacity:1},10).animate({opacity:0.2}, 300);
		currPage.find('.navi').animate({opacity:1},10).animate({opacity:0.2}, 300);

		currPage.animate({left:0},20)
				.animate({
					left: 200,
					opacity:0
				  }, 300,"easeInQuad", showNextPage);
	}

	//Поява нової поточної сторінки
	//В попередній сторінці ставимо картинку на початкову позицію і забираємо і ній прозорість
	//Ховаємо попередню поточну сторінку, переміщаємо "світло" над новим поточним пунктом меню
	//Показуємо нову поточну сторінку і робиом ї відразу ж повністю прозорою
	//Картинку в новій сторінці зміщаємо вбік, робимо затримку 200мс і починаємо анімацію її руху в точку "0" і прозорості "1"
	//Поточну сторінку плавно переміщаємо в точку "0" і прозорість "1"
	function showNextPage(){
		if (currPage){
			currPage.find('.img-frame').css({left:'0px', opacity:1});
			currPage.find('.frame-content').css({opacity:1});
			currPage.find('.navi').css({opacity:1});
			currPage.find('.content').css({left:'0px', opacity:1});
			currPage.hide();
		}
		navLight.css({ left:moveto, width:widthTo});
		currPage = nextPage;
		currPage.show().css('opacity','0');
		currPage.find('.frame-content').css('opacity','0');
		currPage.find('.navi').css('opacity','0');
		currPage.find('.scroll-block .columns').css('opacity','0');
		currPage.find('.scroll-block .scroll-arr').css('opacity','0');

		currPage.animate({opacity:0},300)
				.css('visibility','visible')
				.animate({
						left: 0,
						opacity:1
					  }, 800, "easeOutQuad", enableNavItems);
		currPage.find('.content').css({left:'130px', opacity:0})
		                           .animate({left:130},500)
								   .animate({
										left: 0,
										opacity:1
									  }, 600, "easeOutQuad");
		currPage.find('.scroll-block .columns').animate({opacity:0},500).animate({opacity:1}, 600, "easeOutQuad");
		currPage.find('.scroll-block .scroll-arr').animate({opacity:0},500).animate({opacity:1}, 600, "easeOutQuad");

		currPage.find('.img-frame').css({left:'100px', opacity:0})
		                           .animate({left:100},450)
								   .animate({
										left: 0,
										opacity:1
									  }, 600, "easeOutQuad");

		currPage.find('.frame-content').animate({opacity:0},450).animate({opacity:1}, 600, "easeOutQuad");
		currPage.find('.navi').animate({opacity:0},450).animate({opacity:1}, 600, "easeOutQuad");
	}
	/* qub logo*/
	j("#qub img").css('bottom','-27px');
	j("#qub").hover(
		function(){ j("#qub img").stop().animate({bottom: "0px"}, 'fast');},
		function(){ j("#qub img").stop().animate({bottom: "-27px"}, 'fast');}
	);

});