/*
	Lightbox JS: Fullsize Image Overlays 
	by David Ryman - DavidRyman.com
	ver1.1 - Initial offering providing simple display of selected images.
	ver1.2 - New close, next and previous buttons.
		 New loading icon.
		 Elements use jquery effect of fadein and fade out.
		 Ability to traverse all images through next and previous buttons.

	Standing on the shoulders for the following giants:
	 Lokesh Dhakar - http://www.huddletogether.com
		Plus Linus Torvalds and the open source community.

	Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/
	(basically, do anything you want, just leave my name and link)

	Initially this plugin only displays a single image. More development is likely.
	Possible improvements:
	Display of next and previous images based on the group. e.g. rel=lightbox[GROUP]
	configurable display type, e.g. slide-in/out, fade-in/out
	For images larger than screen, let user click to enlarge.
	
	Table of Contents
	-----------------
	showLightbox	-	Load image into dummy element and set up a load event for it to continue.
	showContinue	-	Display image, center it and if larger than the viewport, resize, and probably more to come....
	hideLightbox	-	Hide image.
	initLightbox	-	Function runs on window load, going through link tags looking for rel="lightbox".
				These links receive onclick events that enable the lightbox display for their targets.
				The function also inserts html markup at the top of the page which will be used as a container for the overlay pattern and the inline image.
				Also sets up a hidden dummy image tag and sets the maximum image size to less than the viewport size.
	ShowLoading		Fades in the loading icon in the center of the viewport.
	fadeinbox		Fades in the selected image, the close and, as necessary, the next and previous buttons.
	nextLightbox		Fade out current image and show the next image in list.
	prevLightbox		Fade out current image and show the previous image in list.
*/
//
// Configuration
//
// If you would like to use a custom loading image or close button reference them in the next two lines.
var imagefolder = '../../plugins/davidryman_lightbox_jquery_plugin/images/';
var loadingImage = imagefolder + 'lightbox-ico-loading.gif';
var closeButton  = imagefolder + 'close-button.gif';
var nextButton = imagefolder + 'right-arrow.gif';
var previousButton = imagefolder + 'left-arrow.gif';
// variables for script use
var max = {width: 800, height: 700};
var Allimages = [];
var groupimages = []; // for version 1.3
var cachedImages = new Array(); // for version 1.3
// fadespeed is set in the backoffice of B2Evo. IF it is not called by the blog then set it to default.
if (typeof speedfade == "undefined"){var speedfade = "normal";}
var fadespeed = speedfade;
$(document).ready(function(){ initLightbox(); $("a[rel^='lightbox']").click(function(event){event.preventDefault(); showLightbox(this);}) });
//
// showLightbox()
// Preloads images. Places new image in lightbox then centers and displays.
//
function showLightbox(objLink)
{
	$("#closebtn").unbind("click",hideLightbox)
	showLoading();
	$("#dummy").attr({'src':objLink});
	$("#dummy").css({"width":"","height":""});
	pos = findinarray(objLink,Allimages);
}
function showLoading()
{
	$("#loadingico").css({"top":((($(window).height() - $("#loadingico").attr("height")) /2) + "px"),"left":((($(window).width() - 20 - $("#loadingico").attr("width")) / 2) + "px")});
	$("#loadingico").fadeIn(fadespeed);
}
function showContinue(objLink)
{
	$("#loadingimage").attr({"src":objLink});
	$("#loadingimage").css({"width":"","height":""});
	if ($("#dummy").attr("height") > max.height)
		{$("#loadingimage").css({"height":max.height + "px","width":""});$("#dummy").css({"height":max.height + "px","width":""});}
	if ($("#dummy").attr("width") > max.width)
		{$("#loadingimage").css({"width":max.width + "px","height":""});$("#dummy").css({"width":max.width + "px","height":""});}
	$("#loadingimage").css({"top":((($(window).height() - $("#dummy").attr("height")) /2) + "px"),"left":((($(window).width() - 20 - $("#dummy").attr("width")) / 2) + "px")});
	$("#closebtn").css({"left": parseInt($("#previousbtn").attr("width"))});
	$("#previousbtn").css({"left": "0px"});
	$("#nextbtn").css({"left": parseInt($("#previousbtn").attr("width") + parseInt($("#closebtn").attr("width")))});
	if ($("#jquery-overlay").css("display") == "none")
		{$("#jquery-overlay").fadeIn(fadespeed,function callback(){fadeinbox(objLink)});}
	else
		{fadeinbox(objLink);};
}
function fadeinbox(objLink)
{$("#jquery-overlay").css({"display":"block"});
	$("#loadingimage").fadeIn(fadespeed,function callback()
			{$("#loadingico,#nextbtn,#previousbtn,#closebtn").fadeOut(fadespeed,function callback()
				{if(findinarray(objLink,Allimages) < (Allimages.length) - 1){$("#nextbtn").fadeIn(fadespeed);};
				if(findinarray(objLink,Allimages) > 0){$("#previousbtn").fadeIn(fadespeed);};
				$("#closebtn").fadeIn(fadespeed,function callback(){$("#closebtn").bind("click",hideLightbox);});
				});
			});
}
function nextLightbox(objLink)
{
	$("#loadingimage").fadeOut(fadespeed,function callback(){
	pos = findinarray(objLink,Allimages);
	showLightbox(Allimages[pos+1]);})
}
function prevLightbox(objLink)
{
	$("#loadingimage").fadeOut(fadespeed,function callback(){
	pos = findinarray(objLink,Allimages);
	showLightbox(Allimages[pos-1]);})
}
//
// hideLightbox()
//
function hideLightbox()
{
	$("#closebtn,#nextbtn,#previousbtn,#loadingico").fadeOut(fadespeed,function callback()
		{$("#loadingimage").fadeOut(fadespeed,function callback()
			{$("#jquery-overlay").fadeOut(fadespeed);});});
	$("#dummy").css({"display":"","height":"","width":""});
}
//
// initLightbox()
//
//$(document).ready(function(){ initLightbox(); $("a[rel^='lightbox']").click(function(event){event.preventDefault(); showLightbox(this); }) })

function cacheImage(img)
{
	$("cachedimage").attr({"src":img})
}
function cacheImages(img1,img2)
{
	if (img1 >= 0)
		{
		cachedImages[img1] = new Image().src(Allimages[img1]); 
		}
	if (img2 < Allimages.length)
		{
		cachedImages[img2] = new Image().src(Allimages[img2]); 
		}
}
function initLightbox()
{
	$("body").append("<div id='jquery-overlay'>");
	$("#jquery-overlay").css({"background-color":"#000","opacity":"0.9","display":"none","overflow":"hidden","position":"fixed","top":"0px","left":"0px","zIndex":"90","width":"100%","height":"100%"});
	$("body").append("<img id='loadingimage'>");
	$("#loadingimage").css({"background-color":"#000","opacity":"1","zIndex":"150","position":"fixed","top":"0px","left":"0px","display":"none","border":"10px","border-color":"white"});
	$("body").append("<img id='dummy'>");
	$("#dummy").css({"opacity":"0","zIndex":"-1","position":"absolute","top":"0px","left":"0px","display":"none"});
	$("#dummy").load(function(event){event.preventDefault(); showContinue($(this).attr("src"));});

	$("body").append("<img id='closebtn' style='background-color: gray'>");
	$("#closebtn").css({"zIndex":"-1","position":"fixed","top":"20px","left":"0px","opacity":"0.2","display":"block"});
	$("#closebtn").attr({"src":closeButton,"alt":"Close Lightbox","title":"Close Lightbox Image"});

	$("body").append("<img id='nextbtn' style='background-color: blue'>");
	$("#nextbtn").css({"zIndex":"-1","position":"fixed","top":"20px","left":"0px","opacity":"0.2","display":"block"});
	$("#nextbtn").attr({"src":nextButton,"alt":"Next Image","title":"Display next image"});
	$("#nextbtn").click(function(event){nextLightbox($("#loadingimage").attr("src"));});

	$("body").append("<img id='previousbtn' style='background-color: blue'>");
	$("#previousbtn").css({"zIndex":"-1","position":"fixed","top":"20px","left":"0px","opacity":"0.2","display":"block"});
	$("#previousbtn").attr({"src":previousButton,"alt":"Previous Image","title":"Display previous image"});
	$("#previousbtn").click(function(event){prevLightbox($("#loadingimage").attr("src"));});
	$("body").append("<img id='loadingico'>");
	$("#loadingico").css({"zIndex":"250","position":"fixed","opacity":"0.6","display":"none","top":"100px","left":"200px"});
	$("#loadingico").attr({"src":loadingImage});
	$("#closebtn,#nextbtn,#previousbtn").css({"zIndex":"200"});
	hideLightbox();
	max.width = $(window).width() - 100;
	max.height = $(window).height() - 100;
// find all images
	$("#jquery-overlay").append("<img id='cachedimage'>"); $("cachedimage").css({"display":"none"});
	$("#cachedimage").load(function(event){event.preventDefault(); alert(cachedImages.length); cacheImages();});
	Allimages = $("a[rel^='lightbox']");
	cacheImages([0,1]);
}
function findinarray(obj,array)
{
	for (i=0;i<=array.length;i++)
		{
		if (obj == array[i])
			{
			return i;
			}
		}
}