// картинки
$(function(){
	$('.showPic').bind('click',function(event) {
		event.preventDefault();
		
        var mwShadow = $('#mwShadow');
		var mwFrame = $('#mwFrame');
		if (mwShadow.length == 0) {
			$('body').append('<div id="mwShadow"></div><div id="mwFrame"></div>');
			mwShadow = $('#mwShadow');
			mwFrame = $('#mwFrame');
		}
		if (mwShadow.is(':hidden')) {mwShadow.show(); mwFrame.show();}
		
		function frameResize(frame,id) {
			if (imgLoad) {
				//var img = frame.find('img[data-id="'+id+'"][data-group="'+group+'"]');
				var img = frame.find('img[src="'+img_src[id]+'"]');
				imgResize(img);
				fWidth = img.width();
				fHeight = img.height();
				frame.css({'width':fWidth+'px','height':fHeight+'px'});
				fWidth += 10; fHeight += 10;
			} else {
				frame.find('img').hide();
				frame.css({'width':'18px','height':'18px'});
				fWidth = frame.outerWidth(true);
				fHeight = frame.outerHeight(true);
			}
			frame.css({'left':(Math.floor(($(window).width()-fWidth)/2))+'px','top':(Math.floor(($(window).height()-fHeight)/2))+'px'});
		}
		
		mwShadow.css({'width':$(document).width(), 'height':$(document).height(), 'opacity':0.7});
		frameResize(mwFrame);
		
		mwShadow.bind('click',function(){
			mwShadow.hide();
			mwFrame.hide();
		});
		
		function imgResize(img) {
			img.css({'width':'','height':''});
			var wImg = $(window).width()-40;
			var hImg = Math.floor((img.height()*wImg)/img.width());
			if (hImg > $(window).height()-40) {
				var hImg = $(window).height()-40;
				var wImg = Math.floor((img.width()*hImg)/img.height());
			}
			img.css({'width':wImg,'height':hImg});
		}
		
		function imgNext(id,gr) {
			imgLoad = false;
			img_cur = id;
			mwFrame.find('img').hide();
			if (gr) {
				if (mwFrame.find('img[src="'+img_src[id]+'"]').length == 1) {
					imgLoad = true;
					mwFrame.find('img[src="'+img_src[id]+'"]').show().bind('click',function(){
						if (id+1 > img_qt) {imgNext(0,true);}
						else {imgNext(id+1,true);}
					});
					frameResize(mwFrame,id);
				} else {
					mwFrame.append('<img src="'+img_src[id]+'">');
					mwFrame.find('img:last').load(function(){
						$(this).show();
						//$(this).attr({'data-id':id,'data-group':group});
						imgLoad = true;
						frameResize(mwFrame,id);
						$(this).bind('click',function(){
							if (id+1 > img_qt) {imgNext(0,true);}
							else {imgNext(id+1,true);}
						});
					}).hide();
				}
			} else {
				if (mwFrame.find('img[src="'+img_src[id]+'"]').length == 1) {
					imgLoad = true;
					mwFrame.find('img[src="'+img_src[id]+'"]').show().unbind().bind('click',function(){
						mwShadow.click();
					});
					frameResize(mwFrame,id);
				} else {
					mwFrame.append('<img src="'+img_src[id]+'">');
					mwFrame.find('img:last').load(function(){
						$(this).show().bind('click',function(){
							mwShadow.click();
						});
						imgLoad = true;
						frameResize(mwFrame,id);
					}).hide();
				}
			}
		}
		
		var src = $(this).attr('href');
		var imgLoad = false;
		var img_src = new Array();
		var img_cur = 0;
		var img_qt = 0;
		
		var group = $(this).data('group');// console.log(group);
		if (group == undefined) {//console.log(group);
			group = false;
			img_src[img_cur] = src;
			imgNext(img_cur,false);
		} else {
			$('.showPic[data-group="'+group+'"]').each(function(i) {
				img_src[i] = $(this).attr('href');
				if ($(this).attr('href') == src) {img_cur = i;}
				img_qt = i;
			});
			imgNext(img_cur,true);
		}
		
		
		
		$(window).unbind();
		$(window).resize(function(){
			frameResize(mwFrame,img_cur);
		});
		$(window).bind('keydown',function(event){
			if (group) {//console.log(group);
				if (event.which == 39) {
					event.preventDefault();
					if (img_cur+1 > img_qt) {imgNext(0,true);} else {imgNext(img_cur+1,true);}
				}
				if (event.which == 37) {
					event.preventDefault();
					if (img_cur-1 >= 0) {imgNext(img_cur-1,true);} else {imgNext(img_qt,true);}
				}
			}
			if (event.which == 27) {event.preventDefault(); mwShadow.click();}
			
		})
    });

});