$(document).ready(function() {
	// next image
	$("#nextImage").click(function () {
		nextPage();
	});
	
	// previousImage
	$("#previousImage").click(function () {
		previousPage();
	});
	
	// hover on nextImage
	$("#nextImage").hover(function() {
		// highlight
		this.src = 'img/arrowR_on.gif';
		//alert('on');
	}, function() {
		// remove effect
		this.src = 'img/arrowR_off.gif';
	});
	
	// hover on previousImage
	$("#previousImage").hover(function() {
		// highlight
		this.src = 'img/arrowL_on.gif';
		//alert('on');
	}, function() {
		// remove effect
		this.src = 'img/arrowL_off.gif';
	});
	
	// brigten the numbers on hover, but only if the user is not
	// using IE5 as this looks really bad
	if(!isIE5()) {
		// current states
		$("#galleryPage").fadeTo(0, 0);
		$("#galleryPage").fadeTo(750, 0.40);	
		
		// events
		$("#galleryPage").hover(function() {
			$("#galleryPage").fadeTo(250, 0.90);
		}, function() {
			$("#galleryPage").fadeTo(250, 0.40);
		});
	}
	
	// make the gallery image pop
	popImage('popImage');
});

// refresh gallery image
function refreshGalleryImage() {
	// update the navigation
	var html = '';
	for (i=0; i<galleries.length; i++) {
		html += '<a href="#" onclick="gotoPage('+ (i) +')" '+ ((i==(current_gallery_cursor)) ? 'id="current"' : '') +'>'+ (i+1) +'</a> ';
	}
	
	document.getElementById('galleryPage').innerHTML = html;
	
	// update the big image
	html = '<img src="'+ galleries[current_gallery_cursor] +'" id="popImage" />';
	document.getElementById('projectRight').innerHTML = html;
	popImage('popImage');
		
	// update the content
	if ((current_gallery_cursor >= 0) && (current_gallery_cursor < pages.length)) { 
		html = pages[current_gallery_cursor];
	} else {
		html = '';
	}
	
	document.getElementById('thisContentForLayout').innerHTML = html;
}

function nextPage() {
	current_gallery_cursor ++;
	gotoPage(current_gallery_cursor);
}

function previousPage() {
	current_gallery_cursor --;
	gotoPage(current_gallery_cursor);
}

function gotoPage(id) {
	current_gallery_cursor = id;
	if (current_gallery_cursor > galleries.length - 1) { current_gallery_cursor = 0; }
	if (current_gallery_cursor < 0 ) { current_gallery_cursor = galleries.length - 1; }
	refreshGalleryImage();	
}

function popImage(element_id) {
	$("#"+element_id).fadeTo(0, 0);
	$("#"+element_id).fadeTo(750, 1);
}