/**
 *	ImageFlow 0.9
 *
 *	This code is based on Michael L. Perrys Cover flow in Javascript.
 *	For he wrote that "You can take this code and use it as your own" [1]
 *	this is my attempt to improve some things. Feel free to use it! If
 *	you have any questions on it leave me a message in my shoutbox [2].
 *
 *	The reflection is generated server-sided by a slightly hacked
 *	version of Richard Daveys easyreflections [3] written in PHP.
 *
 *	The mouse wheel support is an implementation of Adomas Paltanavicius
 *	JavaScript mouse wheel code [4].
 *
 *	Thanks to Stephan Droste ImageFlow is now compatible with Safari 1.x.
 *
 *
 *	[1] http://www.adventuresinsoftware.com/blog/?p=104#comment-1981
 *	[2] http://shoutbox.finnrudolph.de/
 *	[3] http://reflection.corephp.co.uk/v2.php
 *	[4] http://adomas.org/javascript-mouse-wheel/
 */

var imf = {

/* Configuration variables */
conf_reflection_p : 0.5,         		// Sets the height of the reflection in % of the source image
conf_focus : 4,                  		// Sets the numbers of images on each side of the focussed one
max_conf_focus : 0,
conf_slider_width : 14,          		// Sets the px width of the slider div
conf_images_cursor : 'pointer',  		// Sets the cursor type for all images default is 'default'
conf_slider_cursor : 'e-resize', 		// Sets the slider cursor type: try "e-resize" default is 'default'

/* Id names used in the HTML */
conf_imageflow : 'imageflow',    		// Default is 'imageflow'
conf_loading : 'imageflow_loading',       		// Default is 'loading'
conf_images : 'imageflow_images',          		// Default is 'images'
conf_captions : 'imageflow_captions',      		// Default is 'captions'
conf_scrollbar : 'imageflow_scrollbar',    		// Default is 'scrollbar'
conf_slider : 'imageflow_slider',          		// Default is 'slider'

/* Define global variables */
caption_id : 0,
new_caption_id : 0,
current : 0,
target : 0,
mem_target : 0,
timer : 0,
array_images : [],
new_slider_pos : 0,
dragging : false,
dragobject : null,
dragx : 0,
posx : 0,
new_posx : 0,
xstep : 150,
img_div : null,
imageflow_div : null,
scrollbar_div : null,
slider_div : null,
caption_div : null,
hide_slider : false,
hide_caption : false,
images_width : 0,
images_top : 0,
images_left : 0,
size : 0,
scrollbar_width : 0,
max_height : 0,
max : 0,

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

		default:
			imf.timer = 0;
			break;
	}
},

glideTo : function(x, new_caption_id)
{
	/* Animate gliding to new x position */
	imf.target = x;
	imf.mem_target = x;
	if (imf.timer == 0)
	{
		window.setTimeout(imf.step, 50);
		imf.timer = 1;
	}

	/* Display new caption */
	imf.caption_id = new_caption_id;
	var image = imf.img_div.childNodes.item(imf.array_images[imf.caption_id]);
	image = imf.getImage( image );
	var caption;

	if (imf.hide_caption)
	{
		caption = '';
	}
	else
	{
		caption = image.getAttribute('alt');
	}
	if (caption == '') caption = '&nbsp;';
	imf.caption_div.innerHTML = caption;

	/* Set scrollbar slider to new position */
	if (imf.dragging == false)
	{
		imf.new_slider_pos = (imf.scrollbar_width * (-(x*100/((imf.max-1)*imf.xstep))) / 100) - imf.new_posx;
		imf.slider_div.style.marginLeft = (imf.new_slider_pos - imf.conf_slider_width) + 'px';
	}
},

moveTo : function(x)
{
	imf.current = x;
	var zIndex = imf.max;

	/* Main loop */
	for (var index = 0; index < imf.max; index++)
	{
		var image = imf.img_div.childNodes.item(imf.array_images[index]);
		image = imf.getImage( image );

		var current_image = index * -imf.xstep;

		/* Don't display images that are not imf.conf_focussed */
		if ((current_image+imf.max_conf_focus) < imf.mem_target || (current_image-imf.max_conf_focus) > imf.mem_target)
		{
			image.style.visibility = 'hidden';
			image.style.display = 'none';
		}
		else
		{
			var z = Math.sqrt(10000 + x * x) + 100;
			var xs = x / z * imf.size + imf.size;

			/* Still hide images until they are processed, but set display style to block */
			image.style.display = 'block';

			/* Process new image height and image width */
			var new_img_h = (image.h / image.w * image.pc) / z * imf.size;
			var new_img_w = 0;
			switch ( new_img_h > imf.max_height )
			{
				case false:
					new_img_w = image.pc / z * imf.size;
					break;

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

			/* Set new image properties */
			image.style.left = xs - (image.pc / 2) / z * imf.size + imf.images_left + 'px';
			if(new_img_w && new_img_h)
			{
				image.style.height = new_img_h + 'px';
				image.style.width = new_img_w + 'px';
				image.style.top = new_img_top + 'px';
			}
			image.style.visibility = 'visible';

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

				default:
					zIndex = zIndex - 1;
					break;
			}

			/* Change zIndex and onclick function of the focussed image */
			switch ( image.i == imf.caption_id )
			{
				case false:
					//image.onclick = function() { imf.glideTo(this.x_pos, this.i); } kdl
					break;

				default:
					zIndex = zIndex + 1;
					//image.onclick = function() { document.location = this.url; }
					// Highslide hack
					//image.onclick = function() { return hs.expand(this, { src: this.getAttribute('longdesc') }); } kdl
					break;
			}
			image.style.zIndex = zIndex;
		}
		x += imf.xstep;
	}
},

getImage : function( image )
{
	if (image.nodeName == 'IMG' || image.childNodes.length == 0)
	{
		return image;
	}

	for (var i = 0; i < image.childNodes.length; i++)
	{
		if (image.childNodes[i].nodeName == 'IMG')
		{
			return image.childNodes[i];
		}
	}
	return image;
},

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

	/* Cache global variables, that only change on refresh */
	imf.images_width = imf.img_div.offsetWidth;
	imf.images_top = imf.img_div.offsetTop;
	imf.images_left = imf.img_div.offsetLeft;
	imf.max_conf_focus = imf.conf_focus * imf.xstep;
	imf.size = imf.images_width * 0.5;
	imf.scrollbar_width = imf.images_width * 0.6;
	imf.conf_slider_width = imf.conf_slider_width * 0.5;
	imf.max_height = imf.images_width * 0.51;

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

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

	/* Change captions div properties */
	imf.caption_div.style.width = imf.images_width + 'px';
	imf.caption_div.style.marginTop = imf.images_width * 0.03 + 'px';

	/* Change scrollbar div properties */
	imf.scrollbar_div.style.marginTop = imf.images_width * 0.02 + 'px';
	imf.scrollbar_div.style.marginLeft = imf.images_width * 0.2 + 'px';
	imf.scrollbar_div.style.width = imf.scrollbar_width + 'px';

	/* Set slider attributes */
	imf.slider_div.onmousedown = function () { imf.dragstart(this); };
	imf.slider_div.style.cursor = imf.conf_slider_cursor;

	/* Cache EVERYTHING! */
	imf.max = imf.img_div.childNodes.length;
	var i = 0;
	for (var index = 0; index < imf.max; index++)
	{
		var image = imf.img_div.childNodes.item(index);
		if (image.nodeType == 1)
		{
			imf.array_images[i] = index;
			image = imf.getImage( image );

			/* Set image onclick by adding i and x_pos as attributes! */
			//image.onclick = function() { imf.glideTo(this.x_pos, this.i); } kdl
			image.x_pos = (-i * imf.xstep);
			image.i = i;

			/* 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 + 1) > (image.h / (imf.conf_reflection_p + 1)))
			{
				/* Landscape format */
				case true:
					image.pc = 118;
					break;

				/* Portrait and square format */
				default:
					image.pc = 100;
					break;
			}
            /* Disabled doubleclick for a better highslide */
			/* Set ondblclick event */
			//image.url = image.getAttribute('longdesc');
			//image.ondblclick = function() { document.location = this.url; }
			//Highslide
			//image.ondblclick = function() { return hs.expand(this, { src: this.getAttribute('longdesc') }); }

			/* Set image cursor type */
			//image.style.cursor = imf.conf_images_cursor; kdl

			i++;
		}
	}
	imf.max = imf.array_images.length;

	/* Display images in current order */
	imf.moveTo(imf.current);
	imf.glideTo(imf.current, imf.caption_id);
},

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

hide : function(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 */
initOnLoad : function()
{
	if(document.getElementById(imf.conf_imageflow))
	{
		imf.hide(imf.conf_loading);
		imf.refresh(true);
		imf.show(imf.conf_images);
		if (imf.hide_slider === false)
		{
			imf.show(imf.conf_scrollbar);
		}
		imf.initMouseWheel();
		imf.initMouseDrag();
		imf.moveTo(5000);
	}
},

/* Refresh ImageFlow on window resize */
resize : function()
{
	if(document.getElementById(imf.conf_imageflow)) imf.refresh();
},

unload : function()
{
	if(navigator.userAgent.search(/msie/i)!= -1)
	{
		// nothing !!
	}
	else
	{
  		document = null;
	}
},

/* Handle the wheel angle change (delta) of the mouse wheel */
handle : function(delta)
{
	var change = false;
	switch (delta > 0)
	{
		case true:
			if(imf.caption_id >= 1)
			{
				imf.target = imf.target + imf.xstep;
				imf.new_caption_id = imf.caption_id - 1;
				change = true;
			}
			break;

		default:
			if(imf.caption_id < (imf.max-1))
			{
				imf.target = imf.target - imf.xstep;
				imf.new_caption_id = imf.caption_id + 1;
				change = true;
			}
			break;
	}

	/* Glide to next (mouse wheel down) / previous (mouse wheel up) image */
	if (change == true)
	{
		imf.glideTo(imf.target, imf.new_caption_id);
	}
},

/* Event handler for mouse wheel event */
wheel : function(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) imf.handle(delta);
	if (event.preventDefault) event.preventDefault();
	event.returnValue = false;
},

addEventListener : function (el, event, func) {
	try {
		el.addEventListener(event, func, false);
	} catch (e) {
		try {
			el.detachEvent('on'+ event, func);
			el.attachEvent('on'+ event, func);
		} catch (e) {
			el['on'+ event] = func;
		}
	}
},

/* Initialize mouse wheel event listener */
initMouseWheel : function()
{
	if(window.addEventListener) imf.imageflow_div.addEventListener('DOMMouseScroll', imf.wheel, false);
	imf.imageflow_div.onmousewheel = imf.wheel;
},

/* This function is called to drag an object (= slider div) */
dragstart : function(element)
{
	imf.dragobject = element;
	imf.dragx = imf.posx - imf.dragobject.offsetLeft + imf.new_slider_pos;
},

/* This function is called to stop dragging an object */
dragstop : function()
{
	imf.dragobject = null;
	imf.dragging = false;
},

/* This function is called on mouse movement and moves an object (= slider div) on user action */
drag : function(e)
{
	imf.posx = document.all ? window.event.clientX : e.pageX;
	if(imf.dragobject != null)
	{
		imf.dragging = true;
		imf.new_posx = (imf.posx - imf.dragx) + imf.conf_slider_width;

		/* Make sure, that the slider is moved in proper relation to previous movements by the glideTo function */
		if(imf.new_posx < ( - imf.new_slider_pos)) imf.new_posx = - imf.new_slider_pos;
		if(imf.new_posx > (imf.scrollbar_width - imf.new_slider_pos)) imf.new_posx = imf.scrollbar_width - imf.new_slider_pos;

		var slider_pos = (imf.new_posx + imf.new_slider_pos);
		var step_width = slider_pos / ((imf.scrollbar_width) / (imf.max-1));
		var image_number = Math.round(step_width);
		var new_target = (image_number) * -imf.xstep;
		var new_caption_id = image_number;

		imf.dragobject.style.left = imf.new_posx + 'px';
		imf.glideTo(new_target, new_caption_id);
	}
},

/* Initialize mouse event listener */
initMouseDrag : function()
{
	document.onmousemove = imf.drag;
	document.onmouseup = imf.dragstop;

	/* Avoid text and image selection while dragging  */
	document.onselectstart = function ()
	{
		if (imf.dragging == true)
		{
			return false;
		}
		else
		{
			return true;
		}
	};
},

getKeyCode : function(event)
{
	event = event || window.event;
	return event.keyCode;
},

keyHandler : function(event)
{
	var charCode  = imf.getKeyCode(event);
	switch (charCode)
	{
		/* Right arrow key */
		case 39:
			imf.handle(-1);
			break;

		/* Left arrow key */
		case 37:
			imf.handle(1);
			break;
	}
}

};

imf.addEventListener(document, 'keydown', imf.keyHandler);
imf.addEventListener(window, 'load', imf.initOnLoad);
imf.addEventListener(window, 'unload', imf.unload);
imf.addEventListener(window, 'resize', imf.resize);