/* Configuration variables */
/*
var conf_reflection_p = 0.5;         // Sets the height of the reflection in % of the source image
var conf_focus = 4;                  // Sets the numbers of images on each side of the focussed one
var conf_slider_width = 14;          // Sets the px width of the slider div
var conf_images_cursor = 'pointer';  // Sets the cursor type for all images default is 'default'
*/
var conf_menu_width = 1024;
var conf_image_width = 122;
var conf_image_spacing = 20;
var conf_images_cursor = 'pointer';  // Sets the cursor type for all images default is 'default'
var conf_center_offset = 609;
/* Id names used in the HTML */
var conf_imagemenu = 'imagemenu';    // Default is 'imageflow'
var conf_loading = 'loading';        // Default is 'loading'
var conf_details = 'details_area';	 //
var conf_images = 'images';          // Default is 'images'
var conf_captions = 'captions';      // Default is 'captions'
var conf_scrollbar = 'scrollbar';    // Default is 'scrollbar'
var conf_slider = 'slider';          // Default is 'slider'
var conf_menu = 'pics_menu';
var array_images = new Array();
var count;
var target = 0;
var current = 0;
var timer = 0;
var last_scrolled = 0;
var last_details = "00";
/* Hide loading bar, show content and initialize mouse event listening after loading */
window.onload = function()
{
if(document.getElementById(conf_imagemenu))
{
hide(conf_loading);
refresh(true);
//scrollTo(Math.round(count/2));
scrollTo(count-1);
show(conf_images);
//initMouseWheel();
//initMouseDrag();
window.setTimeout(show_details_area, 1000);
}
}
function show_details_area ()
{
show(conf_details);
}
function refresh(init)
{
img_div = document.getElementById(conf_images);
menu_div = document.getElementById(conf_menu);
count = img_div.childNodes.length;
img_div.style.width = (count * (conf_image_width + conf_image_spacing) - conf_image_spacing) + "px";
var i = 0;
for (var index = 0; index < count ; index++)
	{ 
		var image = img_div.childNodes.item(index);
		//if (image.nodeType == 1)
			if (image.nodeName == "IMG")
			{
				array_images[i] = index;
				
				/* Set image onclick by adding i and x_pos as attributes! */
				// image.onclick = function() { glideTo(this.x_pos, this.i); }
				// image.x_pos = (-i * xstep);
				// image.i = i;
				
				/* Set ondblclick event */
				image.url = image.getAttribute('longdesc');
				image.i = i; // stores the image position
				image.id = 'img_id' + i;
				image.detailsNo = image.getAttribute('detailsNo');
				image.onclick = function() { scrollTo(this.i); }
				
				var see_more = document.getElementById('see_more' + image.detailsNo);
				if (see_more) {
					see_more.url = image.url;
					see_more.onclick = function() { document.location = this.url;}
				}
				/* Set image cursor type */
				image.style.cursor = conf_images_cursor;
	
				/* fade out then unhide detail divs */
				if (image.detailsNo) 
					hide_detail_instant(image.detailsNo);
				// document.getElementById("details"+i).style.visibility = 'visible';
				
				i++;
			}
	}
	count = array_images.length;
	
	distribute();
	
}

function distribute()
{
	var img_div = document.getElementById(conf_images);
	var images = img_div.childNodes;
	for (var index=0 ; index<count ; index++)
	{
		var image = images.item(array_images[index]);
		var x_position = index * (conf_image_width + conf_image_spacing);
		
		image.style.left = x_position + 'px';
	}	
}

function highlight(number)
{
	var img_div = document.getElementById(conf_images);
	var images = img_div.childNodes;
	for (var index=0 ; index<count ; index++)
	{
		var image = images.item(array_images[index]);
		/* var distance = (index - number)/(6);
		currentOpac(image.id, 100*(1 - Math.abs(distance)), 0); */
		if (number == index)
			currentOpac(image.id, 100, 0)
		else
			currentOpac(image.id, 50, 0)
	}	
}

function jumpToPic(picture_number)
{
	var img_div = document.getElementById(conf_images);
	img_div.style.left = conf_center_offset - (picture_number - 0.5) * (conf_image_width + conf_image_spacing) + 'px';
}

function jumpToX(offset)
{
	var img_div = document.getElementById(conf_images);
	img_div.style.left = (offset) + 'px';
	current = offset;
}

function step()
{
	switch (target < current-1 || target > current+1)
	{
	case true:
	jumpToX(current + (target-current)/3);
	window.setTimeout(step, 50);
	timer = 1;
	break;
	default:
	the_image = document.getElementById('img_id' + last_scrolled);
	the_image.onclick = function() { document.location = this.url; }
	//show_detail(last_scrolled);
	show_detail(the_image.detailsNo);
	timer = 0;
	break;
	}
	}
	
	function scrollTo(picture_number)
	{
	/* Animate gliding to new x position */
	target = conf_center_offset - (picture_number + 0.5) * conf_image_width - picture_number * conf_image_spacing;
	if (last_scrolled != picture_number)
	{
	if (last_details) hide_detail(last_details);
	the_image = document.getElementById('img_id' + last_scrolled);
	the_image.onclick = function() { scrollTo(this.i); }
	last_scrolled = picture_number;
	the_image = document.getElementById('img_id' + last_scrolled);
	last_details = the_image.detailsNo;
	highlight(picture_number);
	if (timer == 0)
	{
	window.setTimeout(step, 50);
	timer = 1;
	}
	}
	}
	
	function handle(step)
	{
	if (last_scrolled + step < count && last_scrolled + step >= 0)
		scrollTo(last_scrolled + step);
		}
		
		/* 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';
		}
		//Event handler for mouse wheel event
		/*
		function wheel(event)
		{
		var delta = 0;
		if (!event) event = window.event;
		if (event.wheelDelta)
		{
		delta = event.wheelDelta / 120;
		}
		else if (event.detail)
		{
		delta = -event.detail / 3;
		}
		if (delta) handle(delta);
		if (event.preventDefault) event.preventDefault();
		event.returnValue = false;
		}
		// Initialize mouse wheel event listener
		function initMouseWheel()
		{
		if(window.addEventListener) menu_div.addEventListener('DOMMouseScroll', wheel, false);
		menu_div.onmousewheel = wheel;
		}
		*/
		function getKeyCode(event)
		{
		event = event || window.event;
		return event.keyCode;
		}
		document.onkeydown = function(event)
		{
		var charCode  = getKeyCode(event);
		switch (charCode)
		{
		/* Right arrow key */
		case 39:
		handle(1);
		break;
		/* Left arrow key */
		case 37:
		handle(-1);
		break;
		}
		}
		/**************************************************** OPACITY *****************************************************/
		function show_detail(num) {
		if (num) 
			opacity("details"+num, 0, 100, 250);
		}
		function hide_detail(num) {
		if (num) 
			opacity("details"+num, 100, 0, 250);
		}
		function hide_detail_instant(num) {
		if (num) 
			opacity("details"+num, 10, 0, 1);
		}
		
		function opacity(id, opacStart, opacEnd, millisec) {
		//speed for each frame
		var speed = Math.round(millisec / 100);
		var timer = 0;
		//determine the direction for the blending, if start and end are the same nothing happens
		if(opacStart > opacEnd) {
		for(i = opacStart; i >= opacEnd; i--) {
		setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
		timer++;
		}
		} else if(opacStart < opacEnd) {
		for(i = opacStart; i <= opacEnd; i++)
			{
			setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
			timer++;
		}
	}
}

//change the opacity for different browsers
function changeOpac(opacity, id) {
	if (id != "details00")
	{
		
		var object = document.getElementById(id).style; 
		if (object) 
		{
			object.opacity = (opacity / 100);
			object.MozOpacity = (opacity / 100);
			object.KhtmlOpacity = (opacity / 100);
			object.filter = "alpha(opacity=" + opacity + ")";
			if (opacity == 0)
			{
				object.display = 'none';
			}
			else
			{
				object.display = '';		
			}
		}
	}
}

function shiftOpacity(id, millisec) {
	//if an element is invisible, make it visible, else make it ivisible
	if(document.getElementById(id).style.opacity == 0) {
		opacity(id, 0, 100, millisec);
	} else {
		opacity(id, 100, 0, millisec);
	}
}

function blendimage(divid, imageid, imagefile, millisec) {
	var speed = Math.round(millisec / 100);
	var timer = 0;
	
	//set the current image as background
	document.getElementById(divid).style.backgroundImage = "url(" + document.getElementById(imageid).src + ")";
	
	//make image transparent
	changeOpac(0, imageid);
	
	//make new image
	document.getElementById(imageid).src = imagefile;

	//fade in image
	for(i = 0; i <= 100; i++) {
		setTimeout("changeOpac(" + i + ",'" + imageid + "')",(timer * speed));
		timer++;
	}
}

function currentOpac(id, opacEnd, millisec) {
	//standard opacity is 100
	var currentOpac = 100;
	
	//if the element has an opacity set, get it
	if(document.getElementById(id).style.opacity < 100) {
		currentOpac = document.getElementById(id).style.opacity * 100;
	}

	//call for the function that changes the opacity
	opacity(id, currentOpac, opacEnd, millisec)
}