// Gallery.js by Chester Lam
// Contains code for the galleries

// Length = number of pictures in gallery
var length = document.getElementById('length').innerHTML; // The length is provided by information written down by PHP before the script is loaded
// Size = # of pics * (thumbnail width + margin/padding) - screen size
// Size indicates how much we can move the thumbnails without going too far
var size = length * (82 + 12) - 940 + 94;
if(size<0) size = 0;
var speed = 200; // Pixels per second. Speed costs money. How fast do you wanna go?
var current = 0;
// For those vars which need data from the rest of the page
var fade = 1;
var fader;
var mover;

// Smoothly fades out a picture by gradually adjusting its opacity.
// Used when changing pictures and the next pic isn't cached
function fadeOut(id){
	document.getElementById(id).style.opacity = fade + '';
	if(fade <= 0) {
		clearInterval(fader);
		return;
	}
	fade -= 0.1;
	document.getElementById('debug').innerHTML = 'Opacity: ' + fo;
}
// Same thing as fadeout except that opacity increases
// Used when the new pic finishes loading
function fadeIn(id){
	document.getElementById(id).style.display = 'block';
	document.getElementById(id).style.opacity = fade + '';
	if(fade >= 1) {
		clearInterval(fader);
		return;
	}
	fade += 0.1;
}
// Stuff that needs to be set, but can't be done when the script is first loaded (dumb browser issues)
function init(){
	current = document.getElementById('pics').getElementsByTagName('img').item(0).id;
}
/// Simply a helper method to make things simpler in the movePicsLeft function
function moveLeft(){
	var a = (parseInt(document.getElementById('pics').style.left)) - 2;
	document.getElementById('pics').style.left = ((a < -size)?-size:a) + 'px';
}
// When state is 1, it cont. moves pics left, and stops when state=0
function movePicsLeft(state){
	if(state == 1)                                           
		mover = setInterval("moveLeft()", 1000/speed);
	else
		clearInterval(mover);

}
// A helper function for the moveRight function (moves the pics 1 px to the right)
function moveRight(){
	var a = (parseInt(document.getElementById('pics').style.left)) + 2;
	document.getElementById('pics').style.left = ((a > 0)?0:a);
}
// When state is 1, it uses setInterval to continuously move the pics right 
// until it is called with state=0
function movePicsRight(state){
	if(state == 1)
		mover = setInterval("document.getElementById('pics').style.left = ((parseInt(document.getElementById('pics').style.left) + 2>0)?0:(parseInt(document.getElementById('pics').style.left) + 2))+ \"px\";", 1000/speed);
	else 
		clearInterval(mover);
}
// Displays a selected image
function getImage(id){
	// Stop any fading that is going on
	try {
		clearInterval(fader);
	} catch(e){
		// all is well
	}
	if(id == current) return;
	var tmp = document.getElementById('pics').getElementsByTagName('img');
	var last;
	// Make sure the one selected is the only one with a white outline
	for(i = 0;i < tmp.length;i++){
		tmp.item(i).style.outlineStyle = 'none';
	}
	last = tmp.item(i-1).id
		// Add a nice visible outline. Works better than border because it doesn't affect the box model
	document.getElementById(id).style.outline = '2px solid white';
	// Display the picture and the information. Grab the information from stuff the PHP wrote down with the thumbnails
	document.getElementById('picdesc').innerHTML = document.getElementById('desc' + id).innerHTML;
	document.getElementById('gall-picnum').innerHTML = document.getElementById('num' + id).innerHTML;
	document.getElementById('credit').innerHTML = document.getElementById('credit' + id).innerHTML;
	document.getElementById('pictitle').innerHTML = document.getElementById('pictitle' + id).innerHTML;
	document.getElementById('mainpic').src = '/tn/' + id + '/650/435/';
	
	// Fade out the current picture while we wait for the new one to load
	// The browser will call the fadeIn method when it finishes loading the main picture (mainpic has onload=fadeIn)
	fade = 1;
	fader = setInterval("fadeOut('mainpic');", 50); 

	// Keep track of what picture we are on
	current = id;
	if(last == current)
		document.getElementById('last').style.display = 'block';
	else
		document.getElementById('last').style.display = 'none';
	// Make sure the picture links to the correct picture page
	document.getElementById('mainpic-link').href = "/picture/" + id;
}

// Displays the next image
function nextImg(){
	if(current == 0) init(); // Properly initialize the current variable now that the page is loaded
	var tmp = document.getElementById('pics').getElementsByTagName('img');
	var i = 0;
	// Find the guy
	for(i = 0;i < tmp.length;i++){
		if(tmp.item(i).id == current){
			getImage(tmp.item((i+1<tmp.length)?i+1:i).id);
			return;
		}
	}
	/// pic not found = uh oh 
}

// Displays the previous image
function prevImg(){
	if(current == 0) init();
	var tmp = document.getElementById('pics').getElementsByTagName('img');
	var i = 0;
	// Again, find that guy
	for(i = 0;i < tmp.length;i++){
		if(tmp.item(i).id == current){
			getImage(tmp.item((i-1<0)?0:i-1).id);
			return;
		}
	}
}