$(document).ready(function(){
	$('.gallery ul').css({'margin' : '0'});
	var resourcePath = $('span.path_to_resources').html();

	$('table.galTable').each(function(){
// initialize variables
	//get the gallery id
		var thisId = $(this).attr('id');
		var mySplit = thisId.split("_");
		var galleryId = mySplit[1];
	//pull-in values from php	
		var myImgView = $('span#numAcross_'+galleryId).html()/1; //divide by one to force integer type
		var imgWidth = $('span#imgWidth_'+galleryId).html()/1; //returns the width of each image
		var imgPad = $('span#imgPad_'+galleryId).html()/1; //returns the padding for each image
		var gallerySource = $("span#gallerySource_"+galleryId).html(); //pull-in the id of the source div
	//lookups	
		var numImgs = $('div#'+gallerySource+' ul.thumbs_'+galleryId+' li').length; //get number of images
	//calculations
		var numPages = Math.ceil(numImgs/myImgView); //calculate the number of pages
		var viewWidth = (imgWidth + imgPad) * myImgView; //returns width of the viewable window
		var boxWidth = (imgWidth + imgPad) * numImgs; //calculates width of the box containing all images
	//straight initializations
		var imgSrc = '';
		var myMargin = 0;	
	
//populate the slider		
		$('ul#list_'+galleryId).html(''); //clear the blank li from the default list
		var cnt = 0;
		var sourceImgs = $("div#"+gallerySource+" ul.thumbs_"+galleryId+" li").each(function(){
			imgSrc = "<li id=\"viewer_"+galleryId+"_"+cnt+"\" class=\"viewerBtn\">"+$(this).html()+"</li>";
			$('ul#list_'+galleryId).append(imgSrc);
			$('li#viewer_'+galleryId+'_'+cnt).css('padding-right', imgPad);
			cnt++;
		});
//populate the modal
		$('ul#listModal_'+galleryId).html(''); //clear the blank li from the default modal list
		var cnt = 0;
		var sourceImgs = $("div#"+gallerySource+" ul.thumbs_"+galleryId+" li").each(function(){
			imgSrc = "<li id=\"modal_"+galleryId+"_"+cnt+"\" class=\"popBtn\">"+$(this).html()+"</li>";
			$('ul#listModal_'+galleryId).append(imgSrc);
			$('li#modal_'+galleryId+'_'+cnt).css('padding-right', imgPad);
			cnt++;
		});

//set the width of the containing ul for each thumbrow
		$('ul#list_'+galleryId).css('width', boxWidth);
		$('ul#listModal_'+galleryId).css('width', boxWidth);

//for each slider on the page, setup its 'next' and 'back' buttons
		if (numImgs != 0){
			var myStartPos = 1;
			var myStopPos = myImgView;
			var thisPage = Math.floor(myStartPos/myImgView)+1 ;
			function makeBullets(galleryId, numPages){
				if (numPages > 1) {
					var myOutput = '';
					for (i = 1; i <= numPages; i++) {
						myOutput += '<img class=\"bullet\" id=\"bullet_'+i+'_'+galleryId+'\" src=\"/assets/img/modal/bullet_white.png\" alt=\"\" />';
					}
					$('td#galleryTop_'+galleryId).html(myOutput);
				}
			}
			function setBullets(galleryId, thisPage){
				var myId = '#bullet_'+thisPage+'_'+galleryId;
				$('td#galleryTop_'+galleryId+' img.bullet').attr('src', resourcePath+'/bullet_white.png');
				$(myId).attr('src', resourcePath+'/bullet_black.png');
			}
			makeBullets(galleryId, numPages);
			setBullets(galleryId, thisPage);
			$('#back_'+galleryId).addClass('hidden');
			if ((numImgs <= myImgView)) $('#next_'+galleryId).addClass('hidden');
			$('#next_'+galleryId).click(function(){
				if ((numImgs <= myImgView) || (numImgs == myStopPos)){
					$(this).addClass('hidden');
				} else {
					$(this).removeClass('hidden');
					myMargin = myMargin - viewWidth;
					myTempMargin = myMargin+"px";
					$('#list_'+galleryId).animate({
						opacity: 1,
						marginLeft: myTempMargin,
						borderWidth: "0px"
					}, 500);
					myStartPos = myStartPos + myImgView;
					myStopPos = myStopPos + myImgView;
					thisPage = Math.floor(myStartPos/myImgView)+1 ; 
					setBullets(galleryId, thisPage);
	
					if (myStartPos != 1) $('#back_'+galleryId).removeClass('hidden');	
					if (myStopPos >= numImgs) $(this).addClass('hidden');
				}
			});
			$('#back_'+galleryId).click(function(){
				if (myStartPos == 1){
					$(this).addClass('hidden');
				} else {
					$(this).removeClass('hidden');
					myMargin = myMargin + viewWidth;
					$('#list_'+galleryId).animate({
						marginLeft: myMargin+"px"
					}, 500);
					myStartPos = myStartPos - myImgView;
					myStopPos = myStopPos - myImgView;
					thisPage = Math.floor(myStartPos/myImgView)+1 ; 
					setBullets(galleryId, thisPage);
	
					if (myStartPos == 1) $(this).addClass('hidden');
					if (myStopPos != numImgs) $('#next_'+galleryId).removeClass('hidden');	
				}
			});
		}
	});	


//setup global variables for modals
	var myStartPosModal = 1;
	var thisPageModal = 1;
	var myStopPosModal = '';
	var numPagesModal = '';

//for every gallery image on the page, setup the pop-up modal window on click and initialize its nav buttons
	$('.viewerBtn').click(function(){
		var thisId = $(this).attr('id');
		var image = thisId.split("_");
	
//////////////  detect and setup variables for parent gallery  ///////////////		
		var galleryID = $(this).parent().attr('id'); //the ul, should have id of "list_"...	
		var galleryID = galleryID.split("_");				
		var galleryId = galleryID[1];				  
		
		var myImgView = $('#numAcross_'+galleryId).html()/1; //divide by one to force integer type
		var myImgViewModal = $('#numAcrossModal_'+galleryId).html()/1; //divide by one to force integer type
		var viewWidth = $('#imgWidth_'+galleryId).html()/1; //divide by one to force integer type
		var myPad = $('#imgPad_'+galleryId).html()/1;

		myStopPosModal = myImgViewModal;

		var myMargin = 0;
		var numImgs = $('#window_'+galleryId+' ul li').length; //get number of images
		var viewWidth = viewWidth + myPad; //get width of images
		var myWindow = viewWidth * myImgView; //multiply the width by the number viewable to set page size
		var myWindowModal = viewWidth * myImgViewModal; //multiply the width by the number viewable to set page size
		var numPages = Math.ceil(numImgs/myImgView); //find the number of pages
		var numPagesModal = Math.ceil(numImgs/myImgViewModal); //find the number of pages for the modal window
////////////////////////////////////////////////////////////////////////////////	

//set the main image to the loader graphic while we get this image
		$('#mainImage_'+galleryId).html('<div id=\"loader\"></div>');
		
//determine how far over from center to position the left edge of the modal window
		if( typeof( window.innerWidth ) == 'number' ) {
			windowWidth = window.innerWidth;
		} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
			windowWidth = document.documentElement.clientWidth;
		} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
			windowWidth = document.body.clientWidth;
		}
		var myLeft = (windowWidth - 990) / 2;
		if (myLeft < 0) myLeft = 0;
	
//load the modal window with data
		var myImgFile = $(this).children('img').attr("src");
		var myLgImgFile = myImgFile.replace("thumb_", "");
		var myData = '<div><img src="'+myLgImgFile+'" alt=""/></div>';
		$('div#mainImage_'+galleryId).html(myData);
			
//setup the modal scroll bar	
		var thisImgIndex = image[2]/1;//divide by one to force integer type, zero based
		thisPageModal = Math.floor(thisImgIndex / myImgViewModal) +1; 

		if ((thisImgIndex+1) == numImgs) thisPageModal = numPagesModal;
		
		if (numPagesModal != 1) $('#nextModal_'+galleryId).removeClass('hidden');

		myMargin = (thisPageModal-1) * myWindowModal * -1;

		myTempMargin = myMargin+"px";

		$('#listModal_'+galleryId).animate({
			opacity: 1,
			marginLeft: myTempMargin,
			borderWidth: "0px"
		}, 1);

		makeBulletsModal(galleryId, numPagesModal);
		setBulletsModal(galleryId, thisPageModal);
		if (thisPageModal != 1) $('#backModal_'+galleryId).removeClass('hidden');	
		if (thisPageModal == numPagesModal) $('#nextModal_'+galleryId).addClass('hidden');
		
		$('.popBtn').removeClass('active');
		$('#modal_'+galleryId+'_'+thisImgIndex).addClass('active');

//bring in the modal window
		$("#modal_"+galleryId).css("left", myLeft).fadeIn(200);  
	});
	
	$('.popBtn').click(function(){
		var thisId = $(this).attr('id');
		var image = thisId.split("_");
		var galleryId = image[1];

		$('#mainImage_'+galleryId).html('<div id=\"loader\"></div>');
		
//kill previously active thumbnail and activate new one
		$('.popBtn').removeClass('active');
		$('#' + thisId).addClass('active');
		
//get the requested image		
		var myImgFile = $(this).children('img').attr("src");
		var myLgImgFile = myImgFile.replace("thumb_", "");
		var myData = '<div><img src="'+myLgImgFile+'" alt=""/></div>';
		$('div#mainImage_'+galleryId).html(myData);	
		
	});
		
	$(".btnClose").click(function() {  
		var thisId = $(this).attr('id');
		var idSplit = thisId.split("_");
		var galleryId = idSplit[1];
		$("#modal_"+galleryId).fadeOut(300); 
	}); 

	$('.btnR').click(function(){
//////////////  detect and setup variables for parent gallery  ///////////////		
		var thisId = $(this).attr('id');
		var idSplit = thisId.split("_");
		var galleryId = idSplit[1];
		var numImgs = $('#window_'+galleryId+' ul li').length; //get number of images
		var myImgViewModal = $('#numAcrossModal_'+galleryId).html()/1; //divide by one to force integer type
		var viewWidth = $('#imgWidth_'+galleryId).html()/1; //divide by one to force integer type
		var myPad = $('#imgPad_'+galleryId).html()/1;
		var viewWidth = viewWidth + myPad; //get width of images
		var myScrollWindow = 0 - (myImgViewModal * viewWidth);
		var myModalScroll = myScrollWindow+"px";
		var numPagesModal = Math.ceil(numImgs/myImgViewModal); //find the number of pages for the modal window
////////////////////////////////////////////////////////////////////////////////	
		if ((numImgs <= myImgViewModal) || (numImgs == myStopPosModal)){
			$(this).addClass('hidden');
		} else {
			$(this).removeClass('hidden');
			$('#listModal_'+galleryId).animate({
				opacity: 1,
				marginLeft: myModalScroll,
				borderWidth: "0px"
			}, 500);
			myStartPosModal = myStartPosModal + myImgViewModal;
			myStopPosModal = myStopPosModal + myImgViewModal;
			thisPageModal = thisPageModal + 1 ; 
			setBulletsModal(galleryId, thisPageModal);

			if (thisPageModal != 1) $('#backModal_'+galleryId).removeClass('hidden');	
			if (thisPageModal >= numPagesModal) $(this).addClass('hidden');
		}	
	});
	
	$('.btnL').click(function(){
//////////////  detect and setup variables for parent gallery  ///////////////		
		var thisId = $(this).attr('id');
		var idSplit = thisId.split("_");
		var galleryId = idSplit[1];
		var numImgs = $('#window_'+galleryId+' ul li').length; //get number of images
		var myImgViewModal = $('#numAcrossModal_'+galleryId).html()/1; //divide by one to force integer type
		var viewWidth = $('#imgWidth_'+galleryId).html()/1; //divide by one to force integer type
		var myPad = $('#imgPad_'+galleryId).html()/1;
		var viewWidth = viewWidth + myPad; //get width of images
		var myScrollWindow = (viewWidth * myImgViewModal) * (thisPageModal - 2);
		var numPagesModal = Math.ceil(numImgs/myImgViewModal); //find the number of pages for the modal window

////////////////////////////////////////////////////////////////////////////////
		if (thisPageModal == 1){
			$(this).addClass('hidden');
		} else {
			$(this).removeClass('hidden');
			$('#listModal_'+galleryId).animate({
				marginLeft: myScrollWindow+"px"
			}, 500);

			myStartPosModal = myStartPosModal - myImgViewModal;
			myStopPosModal = myStopPosModal - myImgViewModal;
			thisPageModal = thisPageModal - 1 ; 
			setBulletsModal(galleryId, thisPageModal);
	
			if (thisPageModal == 1) $(this).addClass('hidden');
			if (myStartPosModal != numImgs) $('#nextModal_'+galleryId).removeClass('hidden');	
		}

	});

	function makeBulletsModal(galleryId, numPages){
		if (numPages > 1){
			var myOutput = '';
			for (i = 1; i <= numPages; i++) {
				myOutput += '<img class=\"modal_bullet\" id=\"modal_bullet_'+i+'_'+galleryId+'\" src=\"/assets/img/modal/bullet_white.png\" alt=\"\" />';
			}
			$('td#galleryTopModal_'+galleryId).html(myOutput);
		}
	}
	function setBulletsModal(galleryId, thisPage){
		var myId = '#modal_bullet_'+thisPage+'_'+galleryId;
		$('img.modal_bullet').attr('src', resourcePath+'/bullet_white.png');
		$(myId).attr('src', resourcePath+'/bullet_black.png');
	}
});