/*
	Для использования, ссылке ведущей на большое изображение, нужно присвоить класс "io_lightbox"
	Для показа заголовка к изображению в попапе необходимо прописать тег "title".
	Для организации галереи необходимо сгруппировать ссылки по тегу "rel".
	Для показа карт гугл необходимо у ссылки прописать класс "googlemaps", внутри ссылки организовать блочный элемент с class="showmap mapscontent".
	Для показа видео необходимо у ссылки прописать класс "video", ссылка должна вести на файл видео.
*/
function io_lightbox(){
	var videobox = null;
	var htmlbody = '<div id="boxshadow">&nbsp;</div>'+
					'<div id="box">'+
						'<h2 id="htitle">*1</h2>'+
						'<img src="/i/ajax-loader.gif" alt="Изображение загружается" id="imgloader">'+
						'<img src="/i/close.png" alt="Закрыть" id="close" class="png">'+
						'<img src="" alt="" id="boximg">'+
						'<div id="rollleft"><div id="rollleft_inner"></div></div><div id="rollright"><div id="rollright_inner"></div></div><div id="note_panorama">Для просмотра панорамы подведите курсор в левую или правую часть фото</div>'+
						'<div id="navgallery">'+
							'<div id="prev_e">&larr;&nbsp;<a href="">назад</a></div>'+
							'<div id="next_e"><a href="">вперед</a>&nbsp;&rarr;</div>'+
						'</div>'+
					'</div><!-- end #box -->';
	$('body').append(htmlbody);
	
	var boxshadow = $('#boxshadow');
	var box = $('#box');
	var boximg = $('#boximg');
	var close = $('#close');
	var loader = $('#imgloader');
	var wrap = $('body');
	var io_lightbox = $('.io_lightbox');
	var title = $('#htitle');
	var nav = $('#navgallery');
	var prev_e = $('#prev_e');
	var next_e = $('#next_e');
	var rollleft = $('#rollleft');
	var rollright = $('#rollright');
	var rollleft_inner = $('#rollleft_inner');
	var rollright_inner = $('#rollright_inner');
	var note = $('#note_panorama');
	if($('.mapscontent').length){
		var mc = $('.mapscontent');
	}
	
	io_lightbox.click(function (){
		var elem = $(this);
		boxshadow.css('display', 'block');
		if($.browser.msie && $.browser.version == 6){
			boxshadow.css({
				position: 'absolute'
			});
			$(window).bind('scroll', function (){
				boxshadow.css('top', $(window).scrollTop());
			});
		}
		boxshadow.animate({opacity: 0.4}, 200, function (){
			var x = wrap.width()/2 - box.width()/2;
			var y = $(window).scrollTop()+20;
			box.css({
				left: x,
				top: y,
				display: 'block'
			});
			if(elem.hasClass('googlemaps')){
				loadMaps(elem);
			} else {
				if(elem.hasClass('video')){
					videobox = elem.siblings('.vbl').html();
					elem.siblings('.vbl').html('');
					loadVideo(elem);
				} else {
					if(elem.hasClass('panorama')){
						loadImage(elem, 'panorama');
					} else {
						loadImage(elem);
					}
				}
			}
		});
		return false;
	});
	
	close.add(boxshadow).click(function (){
		hideBox();
	});
	
	prev_e.children('a').click(function (){
		var elem = $(this);
		elem.blur();
		loadImage(io_lightbox.eq(parseInt(elem.attr('rel'))-1));
		return false;
	});
	next_e.children('a').click(function (){
		var elem = $(this);
		elem.blur();
		loadImage(io_lightbox.eq(parseInt(elem.attr('rel'))+1));
		return false;
	});
 
	function hideBox(){
		boximg.remove();
		if($('#alertnonobject').length){
			$('#alertnonobject').remove();
		}
		if($('#note_panorama')){
			$('.panorama_frame').remove();
			rollleft.add(rollright).add(note).css('display', 'none');
		}
		close.after('<img src="" alt="" id="boximg">');
		boximg = $('#boximg');
		box.css({
			width: 300 + 'px',
			height: 200 + 'px',
			display: 'none'
		});
		if(boximg.next().hasClass('showmap')){
			boximg.next().remove();
		}
		if(boximg.next().hasClass('videocontent')){
			$('.potok').siblings('.vbl').html(videobox);
			boximg.next().remove();
		}
		boxshadow.animate({opacity: 0}, 200, function (){
			boxshadow.css('display', 'none');
		});
	}
	
	function checkRel(elem){
		if(elem.attr('title')){
			title.html(elem.attr('title')).css('display', 'block');
			if(elem.attr('rel')){
				nav.css({
					display: 'block',
					width: boximg.width()
				});
				var a_prev = elem.parent().prev().children('a');
				var a_next = elem.parent().next().children('a');
				if(a_prev.attr('rel') == elem.attr('rel')){
					prev_e.css('visibility', 'visible').children('a').attr('href', a_prev.attr('href')).attr('rel', io_lightbox.index(elem));
				} else {
					prev_e.css('visibility', 'hidden');
				}
				if(a_next.attr('rel') == elem.attr('rel')){
					next_e.css('visibility', 'visible').children('a').attr('href', a_next.attr('href')).attr('rel', io_lightbox.index(elem));
				} else {
					next_e.css('visibility', 'hidden');
				}
			}
		}
	}
	
	function loadImage(elem, panorama){
		boximg.css({
			display: 'block',
			visibility: 'hidden'
		});
		title.add(nav).css('display', 'none');
		loader.css('display', 'block');
			
		boximg.bind('load', function(){
			if(panorama == undefined){
				x = wrap.width()/2 - boximg.width()/2;
				w_y = boximg.width();
			} else {
				var speed_roll = 40;
				w_y = 600;
				x = wrap.width()/2 - w_y/2;
				boximg.wrap('<div class="panorama_frame"></div>');
				var panorm = $('.panorama_frame');
				panorm.css('width', w_y);
				rollleft.add(rollright).add(note).css('display', 'block');
				
				var rollpanorama = function (direction){
					var mrlg = boximg.css('margin-left').replace('px', '')*1;
					if(direction == 1 && mrlg<0){
						boximg.animate({marginLeft: mrlg+3}, {queue: false, duration: speed_roll, easing: 'linear', complete: function(){
							rollpanorama(1);
						}});
					} else {
						if(direction == -1 && mrlg>(boximg.width()-w_y)*(-1)){
							boximg.animate({marginLeft: mrlg-3}, {queue: false, duration: speed_roll, easing: 'linear', complete: function(){
								rollpanorama(-1);
							}});
						}
					}
				}
				
				rollleft.hover(function (){
					rollpanorama(1);
				}, function (){
					boximg.stop();
				});
				
				rollright.hover(function (){
					rollpanorama(-1);
				}, function (){
					boximg.stop();
				});
				
				rollright_inner.add(rollleft_inner).hover(function (){
					speed_roll = 5;
				}, function (){
					speed_roll = 40;
				});
			}
			box.css({
				left: x,
				width: w_y,
				height: 'auto'
			});
			loader.css('display', 'none');
			boximg.css('visibility', 'visible');
				
			if(panorama == undefined){
				checkRel(elem);
			} else {
				boximg.css('margin-left', -1*(boximg.width()/2 - w_y/2));
				var hidenote = setTimeout(function (){
					note.fadeOut(500);
				}, 5000);
			}
		}).attr('src', elem.attr('href')+'?i='+Math.random());
	}
	
	function loadMaps(elem){
		boximg.css('display', 'none');
		title.add(nav).css('display', 'none');
		mc.clone().insertAfter(boximg).css('display', 'block');
		title.html(elem.attr('title')).css({
			display: 'block',
			textAlign: 'left',
			paddingLeft: '13px'
		});
		//x = wrap.width()/2 - elem.next('#mapscontent').width()/2;
		y = $(window).height() - 60;
		w = $(window).width() - 60;
		/*if(y > $(window).width() - 60){
			w = $(window).width() - 60;
		} else {
			w = y;
		}*/
		x = $(window).width()/2 - w/2-10;
		//alert('height='+y+', width='+w+', left='+parseInt(x));
		//width: elem.next('#mapscontent').width(),
		box.css({
			left: Math.round(x)+'px',
			width: w+'px',
			height: y+'px'
		});
		boximg.next().prepend('<div id="map_canvas"></div>');//<p>Посмотреть <a href="">Торги (Короткий пакет и Полный пакет)</a> на карте большего размера</p>
		$('#map_canvas').css({
			height: y-130,
			width: '100%'
		});
		if(elem.hasClass('map_one')){
			initialize_one(elem.attr('rel'));
		} else if(elem.hasClass('category')){
			initialize(elem.attr('rel')*1);
			//$('a[rel='+elem.attr('rel')+']').addClass('a_cat');
		} else {
			initialize();
		}
		
		/*
		if(elem.hasClass('category')){
			var dell = setTimeout(function (){
				showMarkers(elem.attr('rel')*1);
			}, 1500);
		}
		*/
		cat = $('.a_allcategory');
	}
	
	function loadVideo(elem){
		boximg.css('display', 'none');
		title.add(nav).css('display', 'none');
		
		boximg.after('<div class="videocontent">'+
			'<div id="mediaspace"></div></div>');
		w_v = 580;
		h_v = 384;
		type = 1;
		if(elem.hasClass('potok')){
			w_v = 320;
			h_v = 240;
			type = 2;
		}else if(elem.hasClass('potok2')){
			w_v = 720;
			h_v = 576;
			type = 2;
		}
		execFlash(elem.attr('href'), w_v, h_v, type);
		x = wrap.width()/2 - w_v/2;
		box.css({
			left: x,
			width: w_v,
			height: 'auto'
		});
		title.html(elem.attr('title')).css('display', 'block');
	}
	
	function execFlash(path, ww, hh, ty){
		var so = new SWFObject(ty == 1 ? '/flash/player.swf' : ''+path+'','mpl',''+ww+'',''+hh+'','9');
  		if(ty == 1){
				so.addParam('allowfullscreen','true');
				so.addParam('allowscriptaccess','always');
				so.addVariable('file', path);
				so.addParam('wmode','opaque');
				//so.addVariable('image','/files/poster-testflash.jpg');
			}
  		so.write('mediaspace');
	}
}