/* Configuration variables */
var conf_reflection_p = 0.6;
var conf_focus = 3;
var conf_images_cursor = 'pointer';

/* Id names used in the HTML */
var conf_imageflow = 'imageflow';
var conf_loading = 'loading';
var conf_images = 'images';
var conf_captions = 'captions';

/* Define global variables */
var caption_id = 0;
var new_caption_id = 0;
var target = 0;
var mem_target = 0;
var timer = 0;
var array_images = new Array();
var array_reflections = new Array();
var xstep = 75;
var timerID;
var autoDirection = 1;
var current = 0;

function step() {
	switch (target < current-1 || target > current+1) {
		case true:
			moveTo(current + (target-current)/3);
			window.setTimeout(step, 50);
			timer = 1;
			break;

		default:
			timer = 0;
			/* Set up timer to auto-move to the next item */
			timerID = window.setTimeout(autoGlide, 1500);
			break;
	}
}

function autoGlide() {
	// Check if we have reached the limit and if so, go back the other way
	if (caption_id >= (max - 1) && autoDirection == 1) autoDirection = 2;
	if (caption_id <= 0 && autoDirection == 2) autoDirection = 1;
	
	// Check the direction and shift the target to the next item
	if (autoDirection == 1) {
		next_target = (target - xstep);
		next_caption_id = (caption_id + 1);
	}
	if (autoDirection == 2) {
		next_target = (target + xstep);
		next_caption_id = (caption_id - 1);
	}
	glideTo(next_target, next_caption_id);
}

function moveToMiddle() {
	next_target = (target - ((Math.floor(max/2)) * xstep));
	next_caption_id = (caption_id + (Math.floor(max/2)))
	glideTo(next_target, next_caption_id);
}

function glideTo(x, new_caption_id) {
	/* Kill auto-move timer */
	window.clearTimeout(timerID);
	
	/* Animate gliding to new x position */
	target = x;
	mem_target = x;
	if (timer == 0) {
		window.setTimeout(step, 50);
		timer = 1;
	}
	
	/* Display new caption */
	caption_id = new_caption_id;
	caption = img_div.childNodes.item(array_images[caption_id]).getAttribute('alt');
	imglink = img_div.childNodes.item(array_images[caption_id]).getAttribute('longdesc');
	if (caption == '') caption = '&nbsp;';
	if (imglink == '') {
		caption_div.innerHTML = caption;
	} else {
		caption_div.innerHTML = "<a href=\"" + imglink + "\">" + caption + "</a>";	
	}
}

function moveTo(x) {
	current = x;
	var zIndex = max;
	
	/* Main loop */
	for (var index = 0; index < max; index++) {
		var image = img_div.childNodes.item(array_images[index]);
		var reflection = img_div.childNodes.item(array_reflections[index]);
		var current_image = index * -xstep;
		
		/* Don't display images that are not conf_focussed */
		if ((current_image+max_conf_focus) < mem_target || (current_image-max_conf_focus) > mem_target) {
			image.style.visibility = 'hidden';
			image.style.display = 'none';
			reflection.style.visibility = 'hidden';
			reflection.style.display = 'none';
		} else {
			var z = Math.sqrt(10000 + x * x) + 75;
			var xs = x / z * size + size;

			/* Still hide images until they are processed, but set display style to block */
			image.style.display = 'block';
			reflection.style.display = 'block';
		
			/* Process new image height and image width */
			if (image.i != caption_id) {
				var new_img_h = (image.h / image.w * image.pc) / z * size;
			} else {
				var new_img_h = image.h;
			}
			var new_reflection_h = new_img_h * 0.301; // Reflection percentage is 30%
			switch ( new_img_h > max_height ) {
				case false:
					var new_img_w = image.pc / z * size;
					break;

				default:
					new_img_h = max_height;
					var new_img_w = image.w * new_img_h / image.h;
					break;
			}
			var new_img_top = (images_width * 0.31 - new_img_h) + (images_top - 50) + ((new_img_h / (conf_reflection_p + 1)) * conf_reflection_p);

			/* Set new image properties */
			if (image.i != caption_id) {
				image.style.width = new_img_w + 'px';
				reflection.style.width = (new_img_w + 2) + 'px';
				image.style.left = xs - (image.pc / 2) / z * size + images_left + 'px';
				reflection.style.left = xs - (image.pc / 2) / z * size + images_left + 'px';
			} else {
				image.style.width = image.w + 'px';
				reflection.style.width = (image.w + 2) + 'px';
				image.style.left = xs - ((image.pc / 2) / z * size + images_left) + 'px';
				reflection.style.left = xs - ((image.pc / 2) / z * size + images_left) + 'px';
			}
			
			image.style.height = new_img_h + 'px';
			reflection.style.height = new_reflection_h + 'px';
			
			image.style.top = new_img_top + 'px';
			reflection.style.top = (new_img_top + new_img_h + 1) + 'px';
		
			image.style.visibility = 'visible';
			reflection.style.visibility = 'visible';

			/* Set image layer through zIndex */
			switch ( x < 0 ) {
				case true:
					zIndex++;
					break;

				default:
					zIndex--;
					break;
			}
			
			/* Change zIndex and onclick function of the focussed image */
			switch ( image.i == caption_id ) {
				case false:
					image.onclick = function() { glideTo(this.x_pos, this.i); }
					image.onmouseover = function() { void(0); }
					image.onmouseout = function() { void(0); }
					image.className = "";
					break;

				default:
					zIndex = zIndex + 1;
					image.onclick = function() { document.location = this.url; }
					image.onmouseover = function() { this.className = "hover"; }
					image.onmouseout = function() { this.className = ""; }
					break;
			}
			image.style.zIndex = zIndex;
			reflection.style.zIndex = (zIndex - conf_focus);
		}
		x += xstep;
	}
}

/* Main function */
function refresh(onload) {
	/* Cache document objects in global variables */
	imageflow_div = document.getElementById(conf_imageflow);
	img_div = document.getElementById(conf_images);
	caption_div = document.getElementById(conf_captions);

	/* Cache global variables, that only change on refresh */
	images_width = img_div.offsetWidth;
	images_height = imageflow_div.offsetHeight;
	images_top = 0; //imageflow_div.offsetTop;
	images_left = 0; //imageflow_div.offsetLeft;
	max_conf_focus = conf_focus * xstep;
	size = images_width * 0.5;
	max_height = 150; //images_width * 0.51;

	/* Change imageflow div properties */
	//imageflow_div.style.height = max_height + 'px';

	/* Change images div properties */
	//img_div.style.height = "50px"; //images_width * 0.338 + 'px';

	/* Change captions div properties */
	caption_div.style.width = images_width + 'px';
	caption_div.style.top = (images_height - 30) + 'px';

	/* Cache EVERYTHING! */
	max = img_div.childNodes.length;
	var i = 0;
	var j = 0;
	for (var index = 0; index < max; index++) { 
		var image = img_div.childNodes.item(index);
		if (image.nodeType == 1) {
			if (image.className != "reflection") {
				array_images[i] = index;
				
				/* Set image onclick */
				image.onclick = function() { glideTo(this.x_pos, this.i); }
				
				/* Set image i and x_pos as attributes! */
				image.x_pos = (-i * xstep);
				image.i = i;
				
				/* Set url */
				image.url = image.getAttribute('longdesc');
	
				/* Set image cursor type */
				image.style.cursor = conf_images_cursor;
				
				i++;
			} else {
				array_reflections[j] = index;
				
				/* Set image i and x_pos as attributes! */
				image.x_pos = (-i * xstep);
				image.i = j;
				
				j++;
			}	
			
			/* Add width and height as attributes ONLY once onload */
			if(onload == true) {
				image.w = image.width;
				image.h = image.height;
			}

			/* Check source image format. Get image height minus reflection height! */
			switch ((image.w) > (image.h)) { // / (conf_reflection_p + 1))) {
				/* Landscape format */
				case true:
					image.pc = 110;
					break;

				/* Portrait and square format */
				default:
					image.pc = 77;
					break;
			}
		}
	}
	max = array_images.length;

	/* Display images in current order */
	moveTo(current);
	glideTo(current, caption_id);
	
	/* Move images to the middle */
	if(onload == true) moveToMiddle();
}

/* Show/hide element functions */
function show(id) {
	var element = document.getElementById(id);
	element.style.visibility = 'visible';
}
function hide(id) {
	var element = document.getElementById(id);
	element.style.visibility = 'hidden';
	element.style.display = 'none';
}

/* Hide loading bar, show content and initialize mouse event listening after loading */
//window.onload = function() {
//	if(document.getElementById(conf_imageflow)) {
//		hide(conf_loading);
//		refresh(true);
//		show(conf_images);
//	}
//}

/* Refresh ImageFlow on window resize */
//window.onresize = function() {
//	if(document.getElementById(conf_imageflow)) refresh();
//}