$(document).ready(function(){
$(document).add('<div id="slyload"><div id = "slyloader"></div></div>');
$("body").click(function(event) {
if($("#slyconteiner").attr('terget') == '1'){
if(event.target.id !=='bigimg' && event.target.id !=='slynext' && event.target.id !=='slyprev'
&& event.target.id !=='slyclose' && event.target.id !=='slycomment' && event.target.id !=='slyconteiner'){
delshadow()
}
}
});
//внутри функции attevent - содержится  обработчик hendler события onload(load) для изображения
// она принемает два параметра - newim - объект нового изображения и параметр e - объект содержащий
// информацию об изображении первью (комментарий, src максимального изображения)
function attevent(newim,e){
// обработчик события onload(load)
function hendler(){
$('#slyconteiner').append('<img id = "bigimg" src='+newim.src+'></img>');
$("#slyconteiner").bind('mouseleave',mouseouthandler);
$("#slyconteiner").bind('mouseenter',mouseoverhandler);
//эффект затемнения - эффект сокрытия элементов страницы при показе увеличенного изображения
//Получаем высоту всей старницы для установления свойства height элемента 
// создающего эффект затемнения
function getDocumentHeight() {  
return Math.max(document.compatMode != 'CSS1Compat' ? document.body.scrollHeight : document.documentElement.scrollHeight);  
}  
//Получаем ширину всей старницы для установления свойства width элемента 
// создающего эффект затемнения
function getDocumentWidth() {  
return Math.max(document.compatMode != 'CSS1Compat' ? document.body.scrollWidth : document.documentElement.scrollWidth);  
} 
var imt = document.getElementById("slyconteiner").clientHeight;
var iml = document.getElementById("slyconteiner").clientWidth;

bh = (imt > document.documentElement.clientHeight) ? getDocumentHeight() + 10 : getDocumentHeight();
bw = (iml > document.documentElement.clientWidth) ? getDocumentWidth() + (iml - document.documentElement.clientWidth) : getDocumentWidth();
$(document.body).append('<div id = "slyshadow" style="width:'+bw+'px;height:'+bh+'px;"></div>');
// Прогрессбар - скрываем его так как изображения полностью загрузилось
// Прогрессбар является элементом div, содержащим изображение, изменить его  можно
// изменив параметр  background:url('ajax-loader.gif');  
$('#slyload').hide();
// центрирование изображения по высоте и по ширине body
var imbt = document.documentElement.clientHeight;
// кроссбраузерное определение вьюпорта
var offset = $(document).scrollTop();
var centerimgh = (imt > document.documentElement.clientHeight) ?  10 : (imbt/2) - (imt/2);
var centerimg = Math.abs((bw/2) - (iml/2)); 

$("#slyconteiner").hide().fadeOut().css({'left':centerimg+'px','top':offset + centerimgh+'px'}).fadeIn('slow',function(){$("#slyconteiner").attr('terget','1');});
//выравнивание кнопки slyclose
$("#slyclose").css({'left':iml-76+"px",'top': 0+"px"});
$("#slyclose").show();
}
// кроссбраузерный обработчик addEventListener для Mozila остальное для ie
$(newim).load(hendler);
}
// функция bigimg основная функция для создания нового изображения и удаления предыдущего 
// функция принемает один параметр (e) - содержащий всю информацию о следующем или предыдущем изображении
// переход к которым происходит при нажатии кнопок next (prev) и выполнении соответсвенно функций next (prev)
function bigimg(e){
$("#slyclose,#slynext,#slyprev,#slycomment,#slyconteiner").remove();
$('body').append('<div id = "slyconteiner" style="left:-5555px;top:0px;"><div id = "slycomment" style="display:none;">'+$(e).attr('alt')+'</div><div id = "slyclose"></div><div id = "slyprev"></div><div id = "slynext"></div></div><div id="slyload"><div id = "slyloader"></div></div>');
// сокрытие элементов управления 
$("#slyclose,#slynext,#slyprev").hide();
// получение параметров для позициирования элементов управления внутри элемента с id = loader
var imb = document.documentElement.clientWidth;
var imbt = document.documentElement.clientHeight;
offset = $(document).scrollTop();
var centerimg = (imb/2) - (45/2); 
var centerimgt = (imbt/2) - (41/2); 
$("#slyload").css({'left': centerimg+"px", 'top': offset + centerimgt-10+"px"}).show();
// получение количества коментариев, находящихся внутри элемента div с целью их удаления
index = $(".mini-lightbox").index($("img[active='active']"));
$(".mini-lightbox:eq("+index+")").attr('active','');
$(e).attr("active","active");
//удаление максимального изображения вместе с тенью
if(document.getElementById("slyshadow")){
$('#slyshadow,#slyconteiner #bigimg').remove();
//удаление максимального изображения вместе с тенью
}
// создание аттрибута src для максимального изображения
// регулярное изображение удаляет символы  _s из аттрибута src миниизображения
var esrc = $(e).attr('src').replace(/_s/i,"");
// проверка существования максимального изображения  
// если false, то просто создаём новое максимальное изображение  
if(!document.getElementById('bigimg')){
var newim = new Image();
// обработчик загрузки изображения
attevent(newim,e)
newim.src = esrc;
}
// на всякий случай - если true, то создаём новое максимальное изображение и удаляем старое максимальное изображение  
else {
$('bigimg').remove();
var newim = new Image();
attevent(newim)
newim.src = esrc;
}
}
// для миниизображений необходим следующий цикл, привязывающий событие onclick к каждому 
// из миниизображений и запускающий при его возникновении оснвоную функцию - bigimg
$('.mini-lightbox').click(function(){
bigimg(this)
$('.imgindex').attr('active','');
$(this).parents(".imgindex").attr('active','active');
});
// дополнение, которое не является обязательным, а создаёт лишь стиль для миниизображений
$('.mini-lightbox').css({'border':'white solid 5px','opacity' :'0.3'});
$('.mini-lightbox').mouseover(function(){$(this).animate({'opacity' :'1'})});
$('.mini-lightbox').mouseout(function(){$(this).animate({'opacity' :'0.3'});});
// функция обработчик запускаемая при возникновении события mouseover
// функция необходима для сокрытия элементов управления - кнопок next (prev)
function mouseoverhandler(){
var cont = $("#slyconteiner");
var curimg = parseInt($(".imgindex[active=active] .mini-lightbox").index($("img[active='active']"))) + 1;
if(curimg == $(".imgindex[active=active] .mini-lightbox").length && $(".imgindex[active=active] .mini-lightbox").length !== 1)
{
$("#slyprev").fadeOut().css({'left':"0px",'top':(cont.height()/2)+4+"px","opacity":"0.6"}).fadeIn('slow');
}
else if(curimg == 1 && $(".imgindex[active=active] .mini-lightbox").length > 1){
$("#slynext").fadeOut().css({'left':cont.width()-45+"px",'top':(cont.height()/2)+4+"px","opacity":"0.6"}).fadeIn('slow');
}
else if (curimg > 1 && curimg < $(".imgindex[active=active] .mini-lightbox").length){
$("#slyprev").fadeOut().css({'left':"0px",'top':(cont.height()/2)+4+"px","opacity":"0.6"}).fadeIn('slow');
$("#slynext").fadeOut().css({'left':cont.width()-45+"px",'top':(cont.height()/2)+4+"px","opacity":"0.6"}).fadeIn('slow');
}
$("#slycomment").hide().fadeOut().css({'top': +cont.height()-10+"px",'width': cont.width()+"px","opacity":"0.6"}).fadeIn('slow');
}
// функция обработчик запускаемая при возникновении события mouseout
// функция необходима для отображения элементов управления - кнопок next (prev)
function mouseouthandler(){
$("#slycomment,#slynext,#slyprev").fadeOut();
}
function nextimg()
{
$("#slyconteiner").fadeOut('slow',function(){
$("#slyshadow").fadeOut('slow',function(){
var e = $(".mini-lightbox").index($("img[active='active']"))+1;
if(e >= 0 && e < $(".mini-lightbox").length+1) bigimg($(".mini-lightbox:eq("+e+")"))
});
});
}
function previmg()
{
$("#slyconteiner").fadeOut('slow',function(){
$("#slyshadow").fadeOut('slow',function(){
var e = $(".mini-lightbox").index($("img[active='active']"))-1;
if(e >= 0 && e < $(".mini-lightbox").length+1) bigimg($(".mini-lightbox:eq("+e+")"))
});
});
}

$("#slyclose").live('click',function(){delshadow()});
$("#slyprev").live('click',function(){previmg()});
$("#slynext").live('click',function(){nextimg()});

$("#slyconteiner").bind('mouseleave',mouseouthandler).bind('mouseenter',mouseoverhandler);

$("#slyprev,sly#next").live('click',function(){
$("#slyconteiner").unbind('mouseleave',mouseouthandler);
$("#slyconteiner").unbind('mouseenter',mouseoverhandler);
});


//удаление максимального изображения вместе с тенью
function delshadow(){
$("#slyconteiner").attr('terget','0');
if(document.getElementById("slyshadow")){
$("#slyconteiner").unbind('mouseleave',mouseouthandler);
$("#slyconteiner").unbind('mouseenter',mouseoverhandler);
$("#slynext,#slyprev,#slyclose,#slycomment").fadeOut('slow',function(){
$('#slyconteiner').fadeOut('slow',function(){
$('#slybigimg').remove();
$('#slyshadow').fadeOut('slow');
// сокрытие элементов управления
$("#slycomment,#slyclose,#slyconteiner").hide();
});
// получение количества коментариев, находящихся внутри элемента div с целью их удаления
});
}
else return false
}
});