var images = new Array();
var active_images = new Array();
var gallery;
var moving;

var move_offset = 3;

function registerGallery( directory ) {
	gallery = directory;
}

function registerImage( id, width, height ) {
	images[id-1]={width:width,height:height};
}

function buildNavigator( id ) {
	centerOnImageById(id);
}

function centerOnImageById( id ) {
	var navigator = document.getElementById('image_browser');
	for ( var i = 0; i < active_images.length; ++i ) navigator.removeChild(active_images[i].image);
	active_images = new Array();
	
	var current_left = navigator.offsetWidth / 2 - images[id-1].width / 2 - 3;
	var current_right = navigator.offsetWidth / 2 + images[id-1].width / 2 + 3;
	
	active_images.push(appendImage(id,current_left,'nav_active',navigator));
	var mid_id = id;
	
	while ( current_right <= navigator.offsetWidth ) {
		id = id%images.length+1;
		active_images.push(appendImage(id,current_right,'nav_normal',navigator));
		current_right += images[id-1].width+6;
	}
	
	id = mid_id;
	while ( current_left >= 0 ) {
		id = (id+images.length-1)%images.length;
		id = id > 0 ? id : images.length;
		current_left -= images[id-1].width+6;
		active_images.splice(0,0,appendImage(id,current_left,'nav_normal',navigator));
	}
	
	focusImage(mid_id);
}

function focusImage( id ) {
	document.getElementById('active_image').src = gallery+'pic'+id+'.md.jpg';
	document.getElementById('active_link').setAttribute('href',gallery+'pic'+id+'.lg.jpg');
	// AJAX calls
	getComments(id);
}

function makeFocuser( id ) {
	return function() {
		centerOnImageById(id);
	}
}

function appendImage( id, left, class_name, navigator ) {
	var image = document.createElement('img');
	image.src = gallery+'pic'+id+'.sm.jpg';
	image.style.height = images[id-1].height;
	image.style.left = left;
	image.style.position = 'absolute';
	image.style.top = navigator.offsetHeight / 2 - images[id-1].height / 2 - 3;
	image.style.width = images[id-1].width;

	image.onclick = makeFocuser(id);
	
	image.className = class_name;
	image.setAttribute('class',class_name);
	
	navigator.appendChild(image);
	//active_images.push({id:id,image:image});
	return {id:id,image:image};
}

function startMoveLeft() {
	moving = true;
	moveLeft();
	
	return false;
}

function moveLeft() {
	if ( moving ) {
		var to_remove = -1;
		var navigator = document.getElementById('image_browser');
		var max_right = 0;
		var middle = navigator.offsetWidth / 2;
		for ( id in active_images ) {
			var image = active_images[id].image;
			image.style.left = parseInt(image.style.left) - move_offset;
			var image_left = parseInt(image.style.left);
			var image_width = parseInt(image.style.width);
			if ( image_left <= middle && image_left + image_width > middle ) {
				if ( image.className != 'nav_active' && image.getAttribute('class') != 'nav_active' )
					focusImage(active_images[id].id);
				image.className = 'nav_active';
				image.setAttribute('class','nav_active');
			} else {
				image.className = 'nav_normal';
				image.setAttribute('class','nav_normal');
			}
			
			if ( image_left + image_width < 0 ) {
				to_remove = id;
				navigator.removeChild(image);
			}
			
			max_right = Math.max(max_right,image_left+image_width);
		}
		
		if ( to_remove >= 0 ) active_images.splice(to_remove,1);
		
		if ( max_right <= navigator.offsetWidth ) {
			var last_id = active_images[active_images.length-1].id;
			last_id = last_id%images.length+1;
			active_images.push(appendImage(last_id,max_right+6,'nav_normal',navigator));
		}
		
		setTimeout('moveLeft()',20);
	}
}

function startMoveRight() {
	moving = true;
	moveRight();
	
	return false;
};

function moveRight() {
	if ( moving ) {
		var navigator = document.getElementById('image_browser');
		var min_left = navigator.offsetWidth;
		var middle = navigator.offsetWidth / 2;
		for ( id in active_images ) {
			var image = active_images[id].image;
			image.style.left = parseInt(image.style.left) + move_offset;
			var image_left = parseInt(image.style.left);
			var image_width = parseInt(image.style.width);
			if ( image_left <= middle && image_left + image_width > middle ) {
				if ( image.className != 'nav_active' && image.getAttribute('class') != 'nav_active' )
					focusImage(active_images[id].id);
				image.className = 'nav_active';
				image.setAttribute('class','nav_active');
			} else {
				image.className = 'nav_normal';
				image.setAttribute('class','nav_normal');
			}
			
			if ( image_left > navigator.offsetWidth ) {
				active_images.splice(id,1);
				navigator.removeChild(image);
			}
			
			min_left = Math.min(min_left,image_left);
		}
		
		if ( min_left >= 0 ) {
			var last_id = active_images[0].id;
			last_id = (last_id+images.length-1)%images.length;
			last_id = last_id != 0 ? last_id : images.length;
			active_images.splice(0,0,appendImage(last_id,min_left-6-images[last_id-1].width,'nav_normal',navigator));
		}
	
		setTimeout('moveRight()',20);	
	}
}

function endMove() {
	moving = false;
}

function getComments( id ) {
	var tb_comments = document.getElementById('tb_comments');
	while ( tb_comments.firstChild ) tb_comments.removeChild(tb_comments.firstChild);
	
	document.getElementById('c_title').innerHTML = '<i>loading...</i>';

	var xml_request;
	if ( window.XMLHttpRequest ) xml_request = new XMLHttpRequest();
	else if ( window.ActiveXObject ) xml_request = new ActiveXObject('Microsoft.XMLHTTP');
	
	if ( xml_request ) {
		xml_request.onreadystatechange = function() {
			if ( xml_request.readyState == 4 ) {
				while ( tb_comments.firstChild ) tb_comments.removeChild(tb_comments.firstChild);
				
				var xml_content = xml_request.responseXML;
//				alert(xml_request.responseText);
				var comments = xml_content.documentElement.getElementsByTagName('comment');
				
				for ( var index = 0; index < comments.length; ++index ) {
//						if ( !comments[index].getElementsByTagName ) continue;

//					alert(comments[index].getElementsByTagName('text')[0].firstChild.data);
					var tf = comments[index].getElementsByTagName('photodescription')[0].firstChild.data;
					var photodescription = tf.replace(/\W+/g,'') == 'T';
					var postedby = comments[index].getElementsByTagName('postedby')[0].firstChild.data;
					var postedat = comments[index].getElementsByTagName('postedat')[0].firstChild.data;
					var text = '';
					
					var comment_node = comments[index].getElementsByTagName('text')[0];
					if ( comment_node.firstChild && comment_node.firstChild.data )
						text = comment_node.firstChild.data;
						
					//var text = comments[index].getElementsByTagName('text')[0].firstChild.data;
					
					if ( photodescription ) {
						document.getElementById('c_title').innerHTML = text;
					} else {
						var tr_title = makeElement('tr','comment_header');
						var tr_comment = makeElement('tr','comment_body');
						
						var td_postedby = makeElement('td','comment_header_by');
						var td_postedat = makeElement('td','comment_header_at');
						var td_comment = makeElement('td','comment_body');
						td_comment.setAttribute('colSpan','2');
					
						td_postedby.appendChild(document.createTextNode(postedby));
						td_postedat.appendChild(document.createTextNode(postedat));
						td_comment.appendChild(document.createTextNode(text));
					
						tr_title.appendChild(td_postedby);
						tr_title.appendChild(td_postedat);
						tr_comment.appendChild(td_comment);
						
						tb_comments.appendChild(tr_title);
						tb_comments.appendChild(tr_comment);
					}
				}
			}
		};
		xml_request.open('GET','get.comments.php?dir='+gallery+'&image='+id,true);
		xml_request.send(null);
	}
}

function makeElement( type, c ) {
	var element = document.createElement(type);
	element.className = c;
	element.setAttribute('class',c);
	
	return element;
}