$(function()
    {
        $(document).live("keydown", function (event)
        {
            if($("#jrBoxOverlayBg").is(":visible"))
            {
                switch(event.keyCode)
                {
                    case 27: $("#jrBoxOverlayBg").fadeOut(500); break;
                    case 39:
                    {
                        if(actualImgIndex+1<imagesLength && imagesLength>1)
                        {
                            currentHref=images[actualImgIndex+1][0];
                            currentTitle=images[actualImgIndex+1][1];
                            actualImgIndex=getActualIndex(currentHref,images);
                            loadImg(currentHref,currentTitle);
                        }
                        else
                        {
                            if(actualImgIndex==imagesLength-1 && imagesLength>1)
                            {
                               currentHref=images[0][0];
                               currentTitle=images[0][1];
                               actualImgIndex=getActualIndex(currentHref,images);
                               loadImg(currentHref,currentTitle);
                            }
                        }
                    } break;
                    case 37:
                    {
                        if(actualImgIndex-1>=0 && imagesLength>1)
                        {
                            currentHref=images[actualImgIndex-1][0];
                            currentTitle=images[actualImgIndex-1][1];
                            actualImgIndex=getActualIndex(currentHref,images);
                            loadImg(currentHref,currentTitle);
                        }
                        else
                        {
                            if(actualImgIndex==0 && imagesLength>1)
                            {
                               currentHref=images[imagesLength-1][0];
                               currentTitle=images[imagesLength-1][1];
                               actualImgIndex=getActualIndex(currentHref,images);
                               loadImg(currentHref,currentTitle);
                            }
                        }
                    } break;
                    default: break;
                }
            }
        });
    });

$(document).ready(function()
{
    windowWidth=$(window).width()-50;
    windowHeight=$(window).height()-50;
    images=new Array();
    galleryTitle="";
    imagesLength=0;
    currentHref="";
    currentTitle="";

    actualImgIndex=getActualIndex(currentHref,images);
    $(document.body).html($(document.body).html()+getContener());

    $('a[rel^="jrbox["]').live("click", function () 
    {
        if ($.browser.msie && jQuery.browser.version == "6.0") return true;
        images=collectImgs($(this).attr("rel"));
        galleryTitle=getGalleryTitle($(this).attr("rel"));
        $("#jrBoxClose").css({"display": "none"});
        $("#jrBoxPrev").css({"display": "none"});
        $("#jrBoxNext").css({"display": "none"});
        currentHref=$(this).attr("href");
        currentTitle=$(this).attr("title");
        actualImgIndex=getActualIndex(currentHref,images);
        loadImg(currentHref,currentTitle);
        return false;
    });

    $('a[rel^="jrbox"]').live("click", function () {
        if ($.browser.msie && jQuery.browser.version == "6.0") return true;
        $("#jrBoxClose").css({ "display": "none" });
        currentHref = $(this).attr("href");
        currentTitle = $(this).attr("title");
        loadImg(currentHref, currentTitle);
        return false;
    });


    $('#jrBoxClose').live("click", function()
    {
        $("#jrBoxOverlayBg").fadeOut(500);
    });

    $('#jrBoxPrev').live("click", function () 
    {
        if(actualImgIndex-1>=0 && imagesLength>1)
        {
            currentHref=images[actualImgIndex-1][0];
            currentTitle=images[actualImgIndex-1][1];
            actualImgIndex=getActualIndex(currentHref,images);
            loadImg(currentHref,currentTitle);
        } 
        else
        {
            if(actualImgIndex==0 && imagesLength>1)
            {
               currentHref=images[imagesLength-1][0];
               currentTitle=images[imagesLength-1][1];
               actualImgIndex=getActualIndex(currentHref,images);
               loadImg(currentHref,currentTitle);
            }
        }
    });

   $('#jrBoxNext').live("click", function ()
    {
       if(actualImgIndex+1<imagesLength && imagesLength>1)
        {
            currentHref=images[actualImgIndex+1][0];
            currentTitle=images[actualImgIndex+1][1];
            actualImgIndex=getActualIndex(currentHref,images);
            loadImg(currentHref,currentTitle);
        }
        else
        {
            if(actualImgIndex==imagesLength-1 && imagesLength>1)
            {
               currentHref=images[0][0];
               currentTitle=images[0][1];
               actualImgIndex=getActualIndex(currentHref,images);
               loadImg(currentHref,currentTitle);
            }
        }
    });

});

function getGalleryTitle(rel)
{
    var title=rel;
    title=title.replace("jrbox[","");
    title=title.replace("]","");
    return title;
}

function getActualIndex(src,arr)
{
    for(var i=0;i<arr.length;i++)
    {
        if(arr[i][0]==src) return i;
    }
    return false;
}

function collectImgs(attr)
{
    var arr=new Array();
     $("a[rel='"+attr+"']").each(function()
     {
         var title=$(this).attr('title');
         if(title==undefined) title="";
         var image=new Array($(this).attr('href'),title)
         arr.push(image);
     });
     imagesLength=arr.length;
     return arr;
}

function loadImg(src,title)
{
    var objImagePreloader = new Image();
	objImagePreloader.onload = function()
        {
        var dimensions=new Array();
        dimensions=setSize(objImagePreloader.width,objImagePreloader.height);
        showImg(src,title,dimensions[0],dimensions[1]);
	//clear onLoad, IE behaves irratically with animated gifs otherwise
	objImagePreloader.onload=function(){};
	};
	objImagePreloader.src = src;
}

function showImg(image,title,width,height)
{
    $('#jrBoxContent').html("");
    $('#jrBoxContent').addClass('jrBoxLoading').append(this);
    var callback=function ()
    {
      var img = new Image();
    	$(img).load(function ()
        {
            $(this).hide();
            $('#jrBoxContent').removeClass('jrBoxLoading').append(this);
            $(this).fadeIn();
	}).error(function ()
        {
            // notify the user that the image could not be loaded
	}).attr({"src": image, "width": width, "height": height});
    };
    var callback2=function() 
    {
        $("#jrBoxContent").animate( {"height": height, "width": width},600,callback);
        $("#jrBoxClose").fadeIn(500);
        var text="";
        if(title.length>0)
        {
            
            text=title+"<br>";
        }

        if(imagesLength>1)
        {
            $("#jrBoxPrev").fadeIn(500);
            $("#jrBoxNext").fadeIn(500);
            var imgIndex=actualImgIndex+1;
            text+="<table><tr><td>"+galleryTitle+": ("+imgIndex+"/"+imagesLength+") "+'</td><td><a href="'+image+'" title="teljes méret" id="jrBoxFullSize">&nbsp;</a></td></tr></table>';
        }
        else
        {
           text+='<a href="'+image+'" title="teljes méret" id="jrBoxFullSize">&nbsp;</a>';
        }
        $("#jrBoxTitle").html(text);
        $("#jrBoxTitle").fadeIn(500);
    };
    $("#jrBoxOverlayBg").fadeIn(500,callback2);
   
}

function getContener()
{
     var contener='<div id="jrBoxOverlayBg">';

      contener+='<table class="jrBoxOverlayContener"><tr><td class="jrBoxPositionTd">';
        contener+='<table cellpadding="0" cellspacing="0" class="jrBoxContener">';
       contener+='<tr>';
        contener+='<td class="jrBoxBorderTopLeft">&nbsp;</td>';
        contener+='<td class="jrBoxBorderTopMiddle">&nbsp;</td>';
        contener+='<td class="jrBoxBorderTopRight">&nbsp;</td>';
      contener+='</tr>';
      contener+='<tr>';
        contener+='<td class="jrBoxBorderMiddleLeft">&nbsp;</td>';
        contener+='<td>';
            contener+='<div id="jrBoxContetContener">';
                contener+='<div class="jrBoxContent" id="jrBoxContent"></div>';
                contener+='<div id="jrBoxClose">&nbsp;</div>';
                contener+='<div id="jrBoxPrev"></div>';
                contener+='<div id="jrBoxNext"></div>';
                contener+='<div id="jrBoxTitle"></div>';
                contener+='<div class="jrBoxRoundTopLeft"></div><div class="jrBoxRoundTopRight"></div>';
                contener+='<div class="jrBoxRoundBottomLeft"></div><div class="jrBoxRoundBottomRight"></div>'
            contener+='</div>';
        contener+='</td>';
        contener+='<td class="jrBoxBorderMiddleRight">&nbsp;</td>';
      contener+='</tr>';
      contener+='<tr>';
        contener+='<td class="jrBoxBorderBottomLeft">&nbsp;</td>';
        contener+='<td class="jrBoxBorderBottomMiddle">&nbsp;</td>';
        contener+='<td class="jrBoxBorderBottomRight">&nbsp;</td>';
      contener+='</tr>';
    contener+='</table>';
    contener+='</td></tr></table>';
    contener+='</div>';
    return contener;
}

function setSize(width,height)
{
    var dimensions=new Array();

    if(width<windowWidth && height<windowHeight)
    {
        dimensions.push(width);
        dimensions.push(height);
        return dimensions;
    }
    var maxSize=0;
    if(width>=windowWidth) maxSize=windowWidth;
    if(height>=windowHeight) maxSize=windowHeight;
    if(width>=windowWidth && height>=windowHeight) maxSize=windowHeight;
    dimensions=calculateNewSize(maxSize,width,height);
    return dimensions;  
}

function calculateNewSize(maxSize,width,height)
{
  var dimensions=new Array();
  var wRatio = maxSize / width;
  var hRatio = maxSize / height;

    if (wRatio * height < maxSize )
    {
        dimensions.push(maxSize);
        dimensions.push(Math.round(wRatio * height));
        return dimensions;
    }
    dimensions.push(Math.round(hRatio * width));
    dimensions.push(maxSize);
    return dimensions;
}