dojo.addOnLoad(function() {	
	
	// DOJO Powered LightBox Gallery by PetSalonWebsites.com
	// all static styling materials are defined by a CSS file
	
	preloader(); // preload the images

	var linkNode = dojo.query(".size-thumbnail");
	var bodyNode = dojo.query("div#contentlayer");
	var opacNode = '<div id="opacitylayer"></div>';
	var imgNode = '<div id="gallerywrapper"><div id="imagewrapper"></div></div>';
	var captionNode = '<div class="imagecaption"></div>';
	var nextEntry = '<div class="nextimg">next</div>';
	var lastEntry = '<div class="lastimg">back</div>';
	var exitImg = '<div class="exitimg">close gallery</div>';	
	var pgHeight = dojo.query("div#sitewrapper").style("height"); //get the page height

	// WordPress Adjustment, adds name attribute to thumbnail images
	linkNode.forEach(function(item){
		item.name = item.title;
	});
	
	//create correct upload url from
	
		if(!pgHeight) { // did we collect the div?
			alert("Gallery is currently not working.");
		}
		
	// set the thumbnail anchor links href property

	linkNode.connect("onclick",function(evt) {	
		
		if(document.getElementById("gallerywrapper") ) {
			exitNode();
		}
		
		bodyNode.addContent(opacNode,"begin");		// add the backmost div, the opacity layer
		
		var opacLayer = dojo.query("div#opacitylayer");

		opacLayer.style({
			"zIndex": "10"
		});		
											
		opacLayer.animateProperty({	
			duration: 450,	
			properties:{
				opacity: {start: "0", end: .75},
				height: {start: "0", end: pgHeight}
			}
		}).play();	
		
		// Building the actual image layer			
		bodyNode.addContent(imgNode,"last");			

		var wrapperLayer = dojo.query("div#gallerywrapper");
		var imgLayer = dojo.query("div#imagewrapper");		
		
		var caption = this.title; // get the caption	
		var imgName = this.name; // background image
		var tempImg = document.createElement("img"); 
		tempImg.src = 'http://petsalonwebsites.com/apawspa/wp-content/uploads/' + imgName + '.jpg';	
		
		wrapperLayer.addContent(captionNode,"end");	// inserting a caption	
	
		var imgCaption = dojo.query("div .imagecaption");

		imgCaption.forEach(function addInfo(x){
			x.innerHTML = nextEntry + lastEntry	+ exitImg;
		});	
	
		// inserting the event used to exit from the image		
		var exitItem = dojo.query("div .exitimg");

		exitItem.connect("onclick",function(evt) { exitNode(); });	

		// traverse the linkNode array to get another gallery entry	
		var nextItem = dojo.query("div .nextimg");

		//connecting imgChange() to find the images place in the DOM to correctly get the next image
		nextItem.connect("onclick",function(evt)  {			
			imgChange(imgName,"next");			
		});

		var lastItem = dojo.query("div .lastimg");

		lastItem.connect("onclick",function(evt)  {			
			imgChange(imgName,"last");			
		});		
	
		center(imgLayer);

		openAni(wrapperLayer,imgLayer,imgCaption,tempImg);		
						
	});				
					
});		

// single function controls movement within the entry array
function imgChange(currentImg,moveTo) {

	var linkNode = dojo.query(".size-thumbnail"); 
	var captionNode = '<div class="imagecaption"></div>';
	var exitImg = '<div class="exitimg">close gallery</div>';
	var nextEntry = '<div class="nextimg">next</div>';
	var lastEntry = '<div class="lastimg">back</div>';	

	if(moveTo == "next") {
		for(var i = 0; i < linkNode.length; i++) {			
			if(linkNode[i].name == currentImg) {
				var nextImg = linkNode[i + 1].name;
				break;
			}
			else if(currentImg == linkNode[linkNode.length - 1].name) {
				var nextImg = linkNode[0].name;
				break;
			}
		}
	}
	else {
		for(var i = 0; i < linkNode.length; i++) {
			if(linkNode[i].name == currentImg){
				if(i == 0){
					var nextImg = linkNode[linkNode.length - 1].name;
					break;
				}
				else {			
					var nextImg = linkNode[i - 1].name;
					break;
				}			
			}
		}
	}	
	// remove the previous image
	var img = dojo.query("div#imagewrapper > img");
	img.orphan();

	var tempImg = document.createElement("img"); 
	tempImg.src = 'http://petsalonwebsites.com/apawspa/wp-content/uploads/' + nextImg + '.jpg';		

	var imgLayer = dojo.query("div#imagewrapper");
	var wrapperLayer = dojo.query("div#gallerywrapper");
	var caption = this.title; // get the caption			
		
	var imgCaption = dojo.query("div .imagecaption");	
	
	imgCaption.forEach(function addCap(x){
		x.innerHTML = nextEntry + lastEntry + exitImg;
	});

	// inserting the node used to exit from the image
		
	var exitItem = dojo.query("div .exitimg");

	exitItem.connect("onclick",function(evt) { exitNode(); });	

	// traverse the linkNode array to get another gallery entry	

	var nextItem = dojo.query("div .nextimg");

	// have to find the images place in the DOM to correctly get the next image

	nextItem.connect("onclick",function(evt)  {			
		imgChange(nextImg,"next");
	});

	var lastItem = dojo.query("div .lastimg");

	lastItem.connect("onclick",function(evt)  {
		imgChange(nextImg,"last");		
	});
	
	center(tempImg);
	
	adjAni(wrapperLayer,imgLayer,imgCaption,tempImg); // play the gallery adjustment animation
	 
}

//center the gallery
function center(imgObj) {
		var tempImg = imgObj;
		var leftVal = "-" + tempImg.width/2 + "px"; // offset from left
		var imgWidth = tempImg.width;
		var imgHeight = tempImg.height;
		var imgLayer = dojo.query("div#imagewrapper");	
	
		imgLayer.style({
			"margin": "0 0 0 50%", 	
			"width": imgWidth + "px",
			"left": leftVal,
			"position": "absolute",
   		"height": imgHeight + "px"
		});	
}


// animation to play upon the first click
function openAni(wrapperObj, imgObj, captionObj, galleryObj) {

		var wrapperLayer = wrapperObj;
		var imgLayer = imgObj;
		var imgCaption = captionObj;
		var tempImg = galleryObj;
		var imgWidth = tempImg.width;
		var imgHeight = tempImg.height;
		
		var leftVal = "-" + tempImg.width/2 + "px"; // offset from left
				
		wrapperLayer.style({
			"margin": "0 0 0 50%", 	
			"width": imgWidth + "px",
			"left": leftVal,
    	"height": imgHeight + "px"
		});

		imgLayer.addContent(tempImg,"first");
		
		var imgAnim = dojo.query("div#imagewrapper > img");	
		
		imgAnim.animateProperty({	
			duration: 2000,						
			properties:{
				opacity: {start: "0", end: 1.0}
			}
		}).play();	
	
		imgLayer.animateProperty({	
			duration: 500,						
			properties:{
				opacity: {start: "0", end: 1.0}
			}
		}).play();

		imgCaption.style({
			"margin": "0 0 0 50%", 
			"top": imgHeight + "px",
			"width": imgWidth + "px",
			"left": leftVal
		});	
		
		imgCaption.animateProperty({	
			duration: 500,						
			properties:{
				opacity: {start: "0", end: 1.0}
			}
		}).play();					

}

// animation control for the back/next buttons
function adjAni(wrapperObj, imgObj, captionObj, galleryObj) {
			
		var wrapperLayer = wrapperObj;
		var imgLayer = imgObj;
		var imgCaption = captionObj;
		var tempImg = galleryObj;
		var imgWidth = tempImg.width;
		var imgHeight = tempImg.height;
		
		var leftVal = "-" + tempImg.width/2 + "px"; // offset from left
				
		wrapperLayer.style({
			"margin": "0 0 0 50%", 	
			"width": imgWidth + "px",
			"left": leftVal,
    	"height": imgHeight + "px"
		});		

		imgLayer.addContent(tempImg,"first");
		
		var imgAnim = dojo.query("div#imagewrapper > img");	

		imgCaption.style({
			"margin": "0 0 0 50%", 
			"top": imgHeight + "px",
			"width": imgWidth + "px",
			"left": leftVal
		});	
}

// loading options
function preloader() {

	var galleryImg = dojo.query(".size-thumbnail");
	var bodyNode = dojo.query("body");			
	
	galleryImg.forEach(function createImg(x){
		var newImg = document.createElement('img');
			newImg.src = x.name;
			// Hide the Images
			newImg.style.visibility = "hidden";
			newImg.style.height = "0"; 
		bodyNode.addContent(newImg,"end");
	});	

}

// exit
function exitNode() {
	// orphan the gallery nodes
	dojo.query("div#imagewrapper").orphan();	
	dojo.query("div.imagecaption").orphan();
	dojo.query("div#gallerywrapper").orphan();
	dojo.query("div#opacitylayer").orphan();
}