/*
	Image Organizer Handler
	UITS Web Development Lab - Justin DeMaris
*/

var image_count = 0;
var current_image = null;

function selectImage(index) {
	if(current_image != null) current_image.className = "";
	var obj = document.getElementById("image_"+index);

	// If the last image was deleted and there are no more images, this will be null
	if(obj != null) {
		obj.className="selected";
		current_image = obj;

		// Move the toolbox to hover beneath the image
		var toolbox = document.getElementById("controls");
		toolbox.style.display = "block";
		toolbox.style.position = "absolute";
		
		// If this works, we're in firefox
		try {
			toolbox.style.top  = (current_image.y + current_image.offsetHeight) + "px";
			// horizontally center it
			toolbox.style.left = (current_image.x + (current_image.offsetWidth / 2) - (toolbox.offsetWidth / 2)) + "px";
		}
		
		// Otherwise, we're in IE
		catch (e) {
			toolbox.style.top  = ( current_image.offsetTop+current_image.clientTop+current_image.clientHeight + 120) + "px";
			toolbox.style.left = (current_image.offsetLeft + (current_image.offsetWidth / 2) - (toolbox.offsetWidth / 2) + 175) + "px";
		}
	} 
	
	// If no more images, hide the toolbar
	else {
		var toolbox = document.getElementById("controls");
		toolbox.style.display = "none";
	}
}

function moveLeft() {
	if(current_image != null) {
		var index = current_image.id.substring(6);
		var toLeft = document.getElementById("image_"+(index - 1));
		if(toLeft != null) {
			var source = current_image.src;
			current_image.src = toLeft.src;
			toLeft.src = source;
			selectImage(index - 1);

			// Update the form fields with the correct order
			var curList = document.getElementById("img_"+index);
			var lefList = document.getElementById("img_"+(index - 1));
			source = curList.value;
			curList.value = lefList.value;
			lefList.value = source;
		}
	}
}

function moveRight() {
	if(current_image != null) {
		var index = current_image.id.substring(6);
		var toRight = document.getElementById("image_"+((index - 1) + 2));
		if(toRight != null) {
			var source = current_image.src;
			current_image.src = toRight.src;
			toRight.src = source;
			selectImage(((index - 1) + 2));
			
			// Update the form fields with the correct order
			var curList = document.getElementById("img_"+index);
			var rigList = document.getElementById("img_"+((index - 1) + 2));
			source = curList.value;
			curList.value = rigList.value;
			rigList.value = source;
		}
	}
}

function deleteSelected() {
	if(current_image != null) {
		var index = current_image.id.substring(6);
		
		// Rename all images above it
		for(i = index; i < image_count; i++) {
			// Update the displayed images
			var now = document.getElementById("image_"+i);
			var next = document.getElementById("image_" + (i - -1));
			if(now != null && next != null)
				now.src = next.src;
			
			// Update the form entries
			now = document.getElementById("img_"+i);
			next = document.getElementById("img_" + (i - -1));
			if(now != null && next != null)
				now.value = next.value;
		}
		
		// Delete last one
		var toDel = document.getElementById("image_"+(image_count - 1)).parentNode;
		toDel.parentNode.removeChild(toDel);
		toDel = document.getElementById("img_"+(image_count - 1));
		toDel.parentNode.removeChild(toDel);
		
		// Change count
		image_count--;
		
		// Hide the toolbar
		selectImage(index);
	}
}

function addImage(filename)
{
	// Unset previously current image
	if(current_image != null) current_image.className = "";
	
	// Get the photostrip we are adding the image to
	var obj = document.getElementById("photostrip");
	
	// Generate the new image and its control panel
	var newHTML = '<a id="handle_'+image_count+'" href="javascript:selectImage('+image_count+')"><img id="image_'+image_count+'" src="'+filename+'" class="selected"></a>';
	
	// Put the new stuff where it should go
	if(image_count == 0)
		obj.innerHTML = newHTML;
	else
		obj.innerHTML = obj.innerHTML + newHTML;
	
	// Update the form entries with the new list item
	var lists = document.getElementById("lists");
	newHTML = '<input type="hidden" id="img_'+image_count+'" name="img_'+image_count+'" value="'+filename+'">';
	if(image_count == 0)
		lists.innerHTML = newHTML;
	else
		lists.innerHTML = lists.innerHTML + newHTML;
	
	// Update Pointer
	setTimeout("selectImage("+image_count+")", 500);
	
	// Update system to reflect the new image
	image_count++;
}