/* 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);
		scrollTo(count-1);
	}
}

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.detailsNo = image.getAttribute('alt');
			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)
}