var currentThumbIndex = 0;
var currentThumbCount = 0;
var previousThumbIndex = null;
var numPages = 1;
var currentPage = 0;

var viewerimgcontainer = '<table id="imgpanel">'
						  + '<tr><td class="tleft"> </td><td class="tmid"> </td><td class="tright"> </tr>'
						  + '<tr><td class="mleft"> </td><td class="panel"> </td><td class="mright"> </tr>'
						  + '<tr><td class="bleft"> </td><td class="bmid"> </td><td class="bright"> </tr>'						 
						  + '</table>'

var navGallery_thumbClick = function(nimg) {
	if(previousThumbIndex != null) $('.thumbpane ul li:eq('+previousThumbIndex+')').find('img').fadeTo(1,0.5);
	previousThumbIndex = currentThumbIndex;
	$('.thumbpane ul li:eq('+currentThumbIndex+')').find('img').fadeTo(1,1);
	
	$('#imgload').addClass('imgloader');
	var img = new Image();
		$(img)
			.load(function () {
			$(this).hide();
			$('#imgload')
				.removeClass('imgloader')
				.append(viewerimgcontainer).find('.panel').append(this)
			$(this).fadeIn();
				
			if($('#imgload').find('img').length > 1) {
				$('#imgload #imgpanel:first').remove();	
				$('#ngallery_captions').html('');
			}
			$('#viewernavpanel').css({'width':img.width+'px', 'margin':'14px'})	
			$('#ngallery_captions').html($(nimg).attr('alt'));		
		})	
		.attr('src',$(nimg).attr('src').replace('small',''));	
		
	
}

var goBack = function(e) {
	if((currentThumbIndex - 1) <= 0) {
		currentThumbIndex = currentThumbCount-1;	
	}else{
		currentThumbIndex--;
	}

	navGallery_thumbClick($('.thumbpane ul li:eq('+currentThumbIndex+')').find('img'));		
}

var goForward = function(e) {
	if((currentThumbIndex + 1) == currentThumbCount) {
		currentThumbIndex = 0;	
	}else{
		currentThumbIndex++;
	}

	navGallery_thumbClick($('.thumbpane ul li:eq('+currentThumbIndex+')').find('img'));			
}

var xmlReceived = function(e) {
	var xmlDoc = e;
	var page = $(xmlDoc).find('pages page[id='+pageID+']');
	var imgsrc = page.attr('imagesrc');
	var thumbsrc = page.attr('thumbsrc');

	var images = page.find('img');
	//9 rows x 3 cols per view
	var cellCount=1;
	$('.nnav').append('<div class="thumbpane"></div>');
	$('.nnav').append('<div class="thumbnav" style="display:none"><a href="#" class="btnup">&lt; back</a>&nbsp;&nbsp;<a href="#" class="btndown">next &gt;</a></div>');
	if($(images).length > 27) {
    	$('.thumbnav').show();
	}

	$('.btnup').hide();
	$('.thumbpane').append('<ul></ul>');
	$(images).each(function(idx){
		var thumb = '<li><a href=\'#\' rel="ngallery">';
			thumb += '<div class=\'thumbcnt\'>';
			thumb += '<img src="'+thumbsrc+$(this).attr('src')+'" alt="'+$(this).attr('caption')+'" />';
			thumb += '</div></a></li>';
		//create element in div[nnav]
		$('.nnav .thumbpane ul').append(thumb)
		$('.nnav .thumbpane ul:last a:last div img').fadeTo(0,0.5);
		//check every 27 cells to start a new pane;
		if(cellCount % 27==0) {
			//$('.nnav').append('<div class="thumbpane"></div>');	
		}
		cellCount++;
	});
	currentThumbCount = $('.thumbpane ul').find('li').length;
	numPages = Math.round(Math.ceil(currentThumbCount/27));
	
	navGallery_thumbClick($('.nnav:first').find('img'));
	
	$('.thumbpane ul li').click(function(e) {
		currentThumbIndex = $(this).index();
		navGallery_thumbClick($(this).find('img'));	
	});	
	$('.thumbpane ul li').hover(
		function () {
			$(this).find('img').fadeTo(1,1);	
		},
		function () {
			if(currentThumbIndex == $(this).index()) { return;}
			$(this).find('img').fadeTo(1,0.5);			
		}
	);	
	$('.btnup').click(function() {
		currentPage++;		
		if(currentPage >= 0){
			currentPage = 0;
			$('.btnup').hide();
		}
		if(Math.abs(currentPage)< (numPages - 1)){
			$('.btndown').show();
			}
		console.log(currentPage+","+numPages)
		$('.thumbpane ul').animate({'margin-top':currentPage*440+'px'}, 300);//css({'margin-top':currentPage*440+'px'});	
	})
	$('.btndown').click(function() {
		currentPage--;
		if(Math.abs(currentPage)== numPages){
			//$('.btndown').hide();
			currentPage++;
			}
		if(Math.abs(currentPage)== (numPages - 1)){
			$('.btndown').hide();
			}
			console.log(currentPage+","+numPages)
		$('.btnup').show();
		$('.thumbpane ul').animate({'margin-top':currentPage*440+'px'},300);//css({'margin-top':currentPage*440+'px'});							 
	})
//		$('.btnup').hide();
}


$(document).ready(function(){

	//make sure element exists
	if($('#ngallery').length > 0) {
		$('#ngallery').append('<div class="nviewer"></div>');
		$('#ngallery').append('<div class="nnav"></div>');
		$('#ngallery').append('<div class="clearme"></div>');

		$('.nviewer').append('<div id="imgload"></div>');
		
		var viewerNav = '<div id="viewernavpanel">'
						+ '<div id="leftpane"> <div class="btnback">Back</div> </div>'
						+ '<div id="rightpane"> <div class="btnnext">Next</div> </div>'
						+ '<div class="clearme"></div>'
						+ '</div>';
		
		$('#imgload').append(viewerNav);	
		$('.nviewer').append('<div class="clearme"> </div>');
		
		$('#leftpane').hover(
			function() {
				$(this).find('div').fadeTo(1,1);
			},
			function() {
				$(this).find('div').fadeTo(1,0);
			}
		)
		.click(function() {
			goBack();	
		});
		$('#rightpane').hover(
			function() {
				$(this).find('div').fadeTo(1,1);
			},
			function() {
				$(this).find('div').fadeTo(1,0);
			}
		)	
		.click(function() {
			goForward();	
		});		
		//get XML;	
		$.get("data/ngallery.xml",xmlReceived);
	}

					   
});