/*
*
* http://wdevblog.net.ru
*
*/


//функция срабатывает после загрузки страницы (когда доступна объектная модель документа)
$(function (){
  //добавляем на страницу скрытые елементы
  $('body').append('<div id="overlay"></div>');
  $('body').append('<div id="loading"></div>');
  $('body').append('<div id="popup"></div>');
  //назначаем всем ссылкам с классом "lightbox" функцию ShowImage(url) на onclick
  $('.lightbox').click(function(){ShowImage(this.href);return false});
});

function ShowImage(url){

  //Опредиляем на сколько сбвинут вертикальный скроллинг окна браузера
	var yScroll = $.browser.msie ? document.documentElement.scrollTop : self.pageYOffset;
	//Опредиляем высоту окна
  var windowHeight = $.browser.msie ? document.documentElement.clientHeight : window.innerHeight;
	//Вертикальная позиция popup
  var posTop = Math.round((windowHeight/2) + yScroll);

  //показываем индикатор загрузки
  $('#loading').css({display:'block',top:posTop+'px'});
  //прячем всплывающее "окно" если оно не скрыто
  $('#popup').css('display','none');
  var img = new Image();					

  //добавляем элемент картинки на страницу
  $(img).load(function(){
    //после того как картинка загрузится
    $('#loading').css('display','none');//убираем индикатор загрузки
    $('#popup').html(this);//вставляем картинку в див #popup
      $(this).css('cursor','pointer').attr("title","Закрыть");//устанавливаем картинке курсор и тайтл
      //устанавливаем функцию исчезновения дива #popup по клику
      $(this).click(function () { 
        $('#overlay').fadeOut('slow',function () {
          $('#popup').fadeOut('slow');
        });
      });
    
    
    //устанавливаем минусовые margin чтобы див #popup был по центру окна
    $('#popup').css({top:posTop+'px',marginLeft:'-'+Math.round($("#popup").innerWidth()/2)+'px',marginTop:'-'+Math.round($("#popup").innerHeight()/2)+'px'});
    $('#overlay').css({//растягиваем фоновый слой
					width:		$(window).width(),
					height:		$(document).height(),
					opacity:  0.5
				}).fadeIn(500,function() {//показываем затемненный фон;
    //после этого плавное появление дива #popup с нашей картинкой
    $('#popup').fadeIn('slow').css('opacity','1');
    });
  }).attr('src', url);//URL той самой картинки
}


//функция для корректировки размера фонового слоя при изменении размера окна
function overlayFit()
{
  $('#overlay').css({
    width: $(window).width(),
    height: $(document).height()
    //height: $(window).height()
    });
}

//Функция коррекции положения окна при скроллинге
function popupFit(){

	var yScroll = $.browser.msie ? document.documentElement.scrollTop : self.pageYOffset;
  var windowHeight = $.browser.msie ? document.documentElement.clientHeight : window.innerHeight;
  var posTop = Math.round((windowHeight/2) + yScroll);
  
  $('#loading').stop().animate({top: posTop+'px'},500);
  $('#popup').stop().animate({top: posTop+'px'},500);

}

window.onresize = overlayFit;
window.onscroll = popupFit;