// 25.11.2010 (Mordraug)
// Клиентский javascript
// native ->

// jquery required ->
jQuery(function($){
/* background_and_logotype_ */
var bg_holder = $("#backgrounds");
var logo_holder = $("#logotype .logotype_inner");
var break_animation = false; // Глобальный «флажок», позволяющий отключить анимацию в нужных ситуациях

	// Проверим на всякий случай наличие в DOMe холдера фона
	// и, если он есть – будем готовить предзагрузку фоновых изображений
	if (bg_holder.size() > 0) {
		// Визуал прелоадера
        $('<div id="preloader">Загрузка&hellip;</div>').insertBefore("#logotype");
		var preloader = $("#preloader");
			preloader.fadeIn(300); // показываем визуал прелоадера, чтобы было видно, что что-то происходит
		// Картинки для предзагрузки
		var images_2_load = [
			'/image/background_02.jpg',
			'/image/background_03.jpg',
			'/image/background_04.jpg'
			];

		// Запускаем предзагрузку (jquery.imgpreload.js required)
		$.imgpreload(images_2_load, {
			each: function(){
				// this = new image object
				// callback executes on every image load
			},
			all: function(){
				// this = array of new image objects
				// callback executes when all images are loaded
				
				// Скрываем визуал прелоадера,
				// когда все картинки подгрузились
				preloader.fadeOut(300);
				// Запускаем анимацию фона и логотипа
				start_bg_animation();
			}
		});
	}

// Анимация фона и логотипа_
    function start_bg_animation(){
        // Добавим в DOM контейнеры для фонов и логотипов
        $('<div id="background_02">&nbsp;</div><div id="background_03">&nbsp;</div><div id="background_04">&nbsp;</div>').insertAfter("#background_01");
        // Подготовим их для анимации (opacity:0,visibility:visible,display:block)
        $("#background_02,#background_03,#background_04,#logotype_02,#logotype_03,#logotype_04").css({"opacity":"0","visibility":"visible","display":"block"});

		var bg_item = bg_holder.find("div"); // контейнеры с фоном
		var logo_item = logo_holder.find("span"); // контейнеры с логотипом
		var i__size = bg_item.size(); // количество элементов, которые мы будем анимировать (количество элементов логотипа не берём в расчёт - по задумке их столько же)
		var i__current = 0; // индекс текущего элемента
		var i__next = 1; // индекс следующего элемента
		var animation_timeout = 7000; // Время в миллисекундах, черещ которое будет происходить смена фона и логотипа
		// Запускаем анимацию
		setInterval(function(){
			if(break_animation) // Проверяем нужно ли в данный момент показывать анимацию,
			   return; // и если не нужно – не показываем :)
			   break_animation = true;

			// Если индекс текущего элемента больше, чем количество
			// всех элементов – сбросим его на первую позицию
			if (i__current >= i__size){i__current = 0}
			
			// Логика расчета индекса следующего элемента,
			// основываясь на индексе текущего.
			if (i__current == 0){i__next = i__current + 1;}
			else if (i__current == i__size - 1){i__next = 0;}
			else {i__next = i__current + 1;}

			// Собственно анимация
			//
			// Каждый из фоновых контейнеров анимируются (opacity 0->1) поверх предыдущего, при этом
			// в конце анимации с помощью callback-функции этому предыдущему контейнеру просто выставляется
			// css opacity:0, при этом – самый первый контейнер остаётся всегда непрозрачным, над ним вообще
			// никаких анимаций не производится, а чтобы показать первый фон после последнего - последний просто 
			// анимируется в обратную сторону opacity 1->0);
			//
			// С логотипами так не получится - они с полупрозрачными областями, 
			// поэтому текущий и следующий контейнер с логотипом всегда анимируются одновременно:
			// у текущего opacity 1->0, у следующего 0->1 (взаимный фейд :D).
			if (i__current == 0){
				$(bg_item[i__next]).animate({opacity:"1"},800);
				$(logo_item[i__current]).animate({opacity:"0"},800);
				$(logo_item[i__next]).animate({opacity:"1"},700);
			}
			else if (i__current == i__size - 1) {
				$(bg_item[i__current]).animate({opacity:"0"},800);
				$(logo_item[i__current]).animate({opacity:"0"},800);
				$(logo_item[i__next]).animate({opacity:"1"},700);
			}
			else {
				// Запоминаем текущее значение индекса, чтобы использовать его в callback-функции,
				// иначе – инкремент сработает раньше, чем callback, в результате чего callback отработает не по тому индексу.
				// Дима Рожков подсказывает, что это называется «замыканием» :D
				var i__true_current = i__current;
				$(bg_item[i__next]).animate({opacity:"1"},800,"linear",function(){$(bg_item[i__true_current]).css("opacity","0");});
				$(logo_item[i__current]).animate({opacity:"0"},800);
				$(logo_item[i__next]).animate({opacity:"1"},700);
			}

			// Инкрементируем индекс текущего элемента
			i__current ++;
			break_animation = false;

		},animation_timeout);
    }
/* _background_and_logotype */


/* inside_logotype_ */
// Анимация домика при наведении на логотип на внутренних страницах
    var logo__link = $("#logotype a");
    var logo__home_icon = $("#logotype .home_icon");
        logo__home_icon.css("opacity","0");
        logo__link.hover(
            function(){logo__home_icon.css("visibility","visible").stop().animate({opacity:"1"},150);},
            function(){logo__home_icon.stop().animate({opacity:"0"},150,"linear",function(){logo__home_icon.css("visibility","hidden");});}
        );
/* _inside_logotype */


/* main_menu_ */
// Анимация элементов главного меню
    var mm__item_link = $("#main_menu .mm__item_link");
    var mmil__back = $("#main_menu .mmil__back");
        mmil__back.css({"opacity":"0","visibility":"visible"});
        mm__item_link.hover(
            function(){$(".mmil__back",this).stop().animate({opacity:"1"},200);},
            function(){$(".mmil__back",this).stop().animate({opacity:"0"},250);}
        );
/* _main_menu */


/* home_video_link_ */
// Анимация ссылки-тизера на главной для видеоотчётов
    var home_video_link = $("#home_video_link .hvl__link");
    var hvl__back =  $("#home_video_link .hvl__back");
        hvl__back.css({"opacity":"0","visibility":"visible"});
        home_video_link.hover(
            function(){hvl__back.stop().animate({opacity:"1"},200);},
            function(){hvl__back.stop().animate({opacity:"0"},250);}
        );
/* _home_video_link */


/* home_photo_link_ */
// Анимация ссылки-тизера на главной для фотогалереи
    var home_photo_link = $("#home_photo_link .hpl__link");
    var hpl__back =  $("#home_photo_link .hpl__back");
        hpl__back.css({"opacity":"0","visibility":"visible"});
        home_photo_link.hover(
            function(){hpl__back.stop().animate({opacity:"1"},200);},
            function(){hpl__back.stop().animate({opacity:"0"},250);}
        );
/* _home_photo_link */


/* inside_back_link_ */
// Анимация ссылки на главную страницу на внутренних
    var ca__back_link = $("#content_area .ca__back_link");
        cabl__back = $("#content_area .cabl__back");
        ca__back_link.hover(
            function(){cabl__back.stop().animate({opacity:"0.7"},200);},
            function(){cabl__back.stop().animate({opacity:"1"},250);}
        );
/* _inside_back_link */


/* photogallery_ */
// Анимация ховеров на последних альбомах в фотогалереи
    var pglav__thumb = $("#pg__last_albums .pglav__thumb");
    var pglav__count_back = $("#pg__last_albums .pglav__count_back");

        pglav__thumb.hover(
            function(){
                if ($.browser.msie){$(".pglav__count",this).css("opacity","0.3");}
                else {$(".pglav__count",this).stop().animate({opacity:"0.3"},200);}
                $(this).parents(".pglai__inner").find(".pgla__title_link").toggleClass("hovered");
            },
            function(){
                if ($.browser.msie){$(".pglav__count",this).css("opacity","1");}
                else {$(".pglav__count",this).stop().animate({opacity:"1"},200);}
                $(this).parents(".pglai__inner").find(".pgla__title_link").toggleClass("hovered");
            }
        );

// Всякие штуки для альбома фотогалереи
	// Fancybox для просмотра фотографий
	// Поскольку fancybox подключается только на странице 
	// просмотра фотографий – проверяем существование функции fancybox,
	// и если она есть – включаем его
	if($.hasOwnProperty('fancybox')) {
		var pg_album = $("#photo_gallery_album"); // холдер привьюшек
		var pg_photos = $("#photo_gallery_album .pg__album_photo"); // привьюшки
		 pg_photos.fancybox({
			'scrolling':'no',
			'titleShow':true,
			'hideOnContentClick':false,
			'hideOnOverlayClick':true,
			'showCloseButton':true,
			'overlayOpacity':0.75,
			'overlayColor':'#101010',
			'onStart': function(){break_animation = true;}, // вырубаем анимацию фона и логотипа если запущен fancybox
			'onCancel': function(){break_animation = false;}, // включаем обратно, если fancybox отменён
			'onClosed': function(){break_animation = false;} // включаем обратно, если fancybox закрыт
		});
	}
/* _photogallery */


/* f__social_links_ */
// Анимация иконок социальных сервисов
    var fsl__link = $("#fsl__links .fsl__link");
        fsl__link.hover(
            function(){$(this).stop().animate({opacity:"0.5"},150);},
            function(){$(this).stop().animate({opacity:"1"},200);}
        );
/* _f__social_links */


/* violance_ */
// Анимация логотипа Violance media
    var violance_link = $("#violance");
        violance_link.hover(
            function(){violance_link.stop().animate({opacity:"0.5"},150);},
            function(){violance_link.stop().animate({opacity:"1"},200);}
        );
/* _violance */


/* credits_ */
// Титры :D
// Чтобы увидеть титры нужно нажать Ctrl+Shift+M на любой странице сайта.
$('<div id="credits_overlay">&nbsp;</div>').insertAfter("#main_wrapper");
$('<div id="credits"><h2>Разработчики сайта</h2><p class="designer">Красиво нарисовал &ndash; <a href="http://numicor.deviantart.com" title="">Евгений «Numicor» Долгов</a>.</p><p class="frontend_coder">Сверстал и накодил клиентский JS &ndash; <a href="http://mordraug.ru" title="">Егор «Mordraug» Кашлинов</a>.</p><p class="backend_coder">Напрограммировал и собрал &ndash; <a href="http://twitter.com/dkrnl/" title="">Дмитрий «dkrnl» Пятков</a>.</p><p class="project_manager">Управлял хаосом &ndash; <a href="http://twitter.com/Denisenok" title="">Денис Замятин</a>.</p></div>').insertAfter("#main_wrapper");
var credits_overlay = $("#credits_overlay");
var credits = $("#credits");
    function credits_show() {credits_overlay.fadeIn(300);credits.fadeIn(300);break_animation = true;}
    function credits_hide() {credits_overlay.fadeOut(300);credits.fadeOut(300);break_animation = false;}
    function credits_toggle() {
        if (credits.css("display") == "none") {
            credits_show();
            credits_overlay.bind("mousedown mouseup",function(){credits_hide();return false;});
        }
        else {
            credits_hide();
            credits_overlay.unbind("mousedown mouseup");
        }
    }

    credits.mousedown(function(em){em.stopImmediatePropagation();});
    credits.mouseup(function(em){em.stopImmediatePropagation();});

var is_ctrl = false;
var is_shift = false;
    document.onkeyup = function(e){
        if(e.which == 16) is_shift = false;
        if(e.which == 17) is_ctrl = false;
    }

    document.onkeydown=function(e){
        if(e.which == 16) is_shift = true;
        if(e.which == 17) is_ctrl = true;
        if(e.which == 77 && is_shift == true && is_ctrl == true ) {
            //run code for ctrl + shift + M
            credits_toggle();
            return false;
        }
        if (e.which == 27){
            credits_hide();
            return false;
        }
    }
/* _credits */
});