// Первая попытка создать свою галерею - лайтбокс
var let = 1;

$(function(){
	$("a.galery").click(function(){
		initLightBox($(this).attr("rel"), this);
		return false;
	});
	
});
$(".lightbox table").live('mousedown',function(){let=0;});
$(".lightbox").live('mouseup',function(){
	if(let == 1) $(".lightbox .close").click();
	else let = 1;
});

function initLightBox(rel, targ){
	$('<div class="lightbox"><a href="#" class="close">Закрыть</a><table><tbody><tr></tr></tbody></table></div>').appendTo('body');
	$('body').css('overflow','hidden');
	if(rel=="" || rel==undefined){
		cond = targ;
		index = 0;
	}else{
		cond = "a.galery[rel="+rel+"]";
		index = $(targ).index(cond);
	}
	
	for(i=-1;i<=$(cond).length;i++){
		
		var title = $(cond).eq(i).attr('title');
		if(title == undefined) title = '';

		if(i==-1 || i==$(cond).length){
			var newtd = $("<td></td>");
		}else{
			var newtd = $('<td><a href="#" rel="'+$(cond).eq(i).attr('rel')+'"><img src="'+$(cond).eq(i).attr('href')+'" title="'+title+'" alt=""></a></td>');
		}
		newtd.appendTo($("div.lightbox").find("tr"));

		if(i==index){
			var title = $(cond).eq(i).attr('title');
			if(title==undefined) title = '';
			newtd.find('a').replaceWith('<div class="selected">'+newtd.find('a').html()+'<p class="descr">'+title+'</p></div>');			
			newtd.find('img').css({'height':'151px'})
			bigres(newtd.find('img'));
		}else if(i==index-1 || i==index+1){
			newtd.find("img").css({'height':'151px'});
		}else{
			newtd.css("display","none");
		}			 
		
	}	

	$(".lightbox a:not(.close)").click(function(){
		var ind = $(this).parents('td').index()-1;
		var rel = $(this).attr('rel');

		var img = $(".lightbox .selected img");
		var height = img.height();
		var width = img.width();
		var prop = width/height;

		$("div.lightbox .selected .descr").animate({'top':"151px"},300);
		img.animate({"height":"151px","width":Math.floor(151*prop)+"px"},300,(function(ind_, rel_){return function(){
			$(".lightbox").remove();
			$("a.galery[rel="+rel+"]").eq(ind).click();
		}})(ind, rel));		
	});
}

$(".lightbox .close, .lightbox .closeit").live('click',function(){
		$(".lightbox").fadeOut(500,function(){$(".lightbox").remove();});
		$('body').css('overflow','visible');
});

function bigres(targ){
	var imag = new Image;
	imag.src = targ.attr('src');
	imag.onload = (function(){return function(targ_){
		var height = this.height;
		var width = this.width;
		var prop = width/height;

		if(width > gw()/2) width = Math.floor(gw()/2);
		if(height > gh()*0.85){
			height = Math.floor(gh()*0.85);
			targ.animate({"height":height+"px","width":Math.floor(height*prop)+"px"});
		}else if(prop != width/height){			
			targ.animate({"width":width+"px","height":Math.floor(width/prop)+"px"});
			height = Math.floor(width/prop);
		}else{
			targ.animate({"width":width+"px","height":height+"px"});
		}
		targ.addClass("closeit");
		$("div.lightbox .selected .descr").css({'top':"151px"}).animate({'top':height+"px"});
	}})(targ);
}

function gw(){
  //return document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientWidth:document.body.clientHeight;
  return $.browser.opera? window.innerWidth : $(window).width();
}
function gh(){
  //return document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientHeight:document.innerHeight;
  return $.browser.opera? window.innerHeight : $(window).height();
}
/*
<div class="lightbox">
	<a href="#" class="close">Закрыть</a>
    <table>
    	<tbody><tr>
        	<td><a href="#"><img src="/images/content-images/34.jpg" alt=""></a></td>
            <td>
            	<div class="selected">
                    <img src="/images/content-images/33.jpg" alt="">
                    <p class="descr">Светодиодные светильники серии УСС для освещения АЗС</p>
                </div>
            </td>
            <td><a href="#"><img src="/images/content-images/34.jpg" alt=""></a></td>
        </tr>
    </tbody></table>
</div>
*/