/**

 *	ImageFlow For Joomla 1.0.8 based on 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

conf_slider_width : 14,          		// Sets the px width of the slider div

conf_slider_cursor : 'e-resize', 		// Sets the slider cursor type: try "e-resize" default is 'default'

conf_thumbnail : null,					// Thumbnail classname



/* Id names used in the HTML */

conf_imageflow : 'imageflow',    		// Default is 'imageflow'

conf_loading : 'imageflow_loading',     // Default is 'imageflow_loading'

conf_images : 'imageflow_images',       // Default is 'imageflow_images'

conf_captions : 'imageflow_captions',   // Default is 'imageflow_captions'

conf_scrollbar : 'imageflow_scrollbar', // Default is 'imageflow_scrollbar'

conf_slider : 'imageflow_slider',       // Default is 'imageflow_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,

loaded : false,

max_conf_focus : 0,

visible_images : [],



step : function()

{

	if (imf.target < imf.current-1 || imf.target > imf.current+1)

	{

		imf.moveTo(imf.current + (imf.target-imf.current)/3);

		window.setTimeout(imf.step, 50);

		imf.timer = 1;

	}

	else

	{

		imf.timer = 0;

	}

},



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 caption = '&nbsp';



	if (! imf.hide_caption)

	{

		var image = imf.getImage( imf.caption_id );

		if (image != null)

		{

			caption = image.getAttribute('alt');

		}

	}

	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';

	}

},



hideImage : function( image, thumb )

{

	if( !image.ishidden )

	{

		image.ishidden = true;

		image.style.visibility = 'hidden';

		image.style.display = 'none';

		if (thumb != null)

		{

			thumb.style.visibility = 'hidden';

			thumb.style.display = 'none';

		}

	}

},



showImage : function( image, thumb )

{

	if (image.ishidden)

	{

		image.style.display = 'block';

		image.style.visibility = 'visible';

		if (thumb != null)

		{

			thumb.style.display = 'block';

			thumb.style.visibility = 'visible';

		}

		image.ishidden = false;

		imf.visible_images.push( image.i );

	}

},



moveTo : function(x)

{

	var image = null;

	var thumb = null;

	for (var index = 0; index < imf.visible_images.length; index++)

	{

		var vndx = imf.visible_images.shift();

		image = imf.getImage( vndx );

		thumb = imf.getThumb( vndx );



		/* Don't display images that are not imf.conf_focussed */

		if (image.max_focus_right < imf.mem_target || image.max_focus_left > imf.mem_target)

		{

			imf.hideImage( image, thumb );

		}

		else

		{

			imf.visible_images.push( vndx );

		}

	}



	imf.current = x;

	var zIndex = imf.max;

	var low = Math.max( 0, imf.caption_id - (imf.conf_focus + 2) );

	var high = Math.min( imf.max, imf.caption_id + (imf.conf_focus + 2));

	x += imf.xstep * low;





	/* Main loop */

	for (low; low < high; low++)

	{

		image = imf.getImage( low );

		thumb = imf.getThumb( low );



		/* Don't display images that are not imf.conf_focussed */

		if (image.max_focus_right < imf.mem_target || image.max_focus_left > imf.mem_target)

		{

			imf.hideImage( image, thumb );

		}

		else

		{

			var z = Math.sqrt(10000 + x * x) + 100;

			var xs = x / z * imf.size + imf.size;



			/* 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;



			if ( new_img_h > imf.max_height )

			{

				new_img_h = imf.max_height;

				new_img_w = image.max_width;

			}

			else

			{

				new_img_w = image.pc / z * imf.size;

			}

/*			var thmb = imf.max_height / (imf.conf_reflection_p + 1);

			var rflct = imf.max_height - thmb;

			var new_img_top = (thmb - new_img_h) + imf.images_top + ((new_img_h / (imf.conf_reflection_p + 1)+ .5) * imf.conf_reflection_p); */

			var new_thumb_h = new_img_h / (imf.conf_reflection_p + 1);

			var new_img_top = (imf.images_width * .34 - new_img_h) + imf.images_top + (new_thumb_h * imf.conf_reflection_p + .5);



			/* Set new image properties */

			image.style.left = xs - (image.pc / 2) / z * imf.size + imf.images_left + 'px';

			/* Set image layer through zIndex */

			if ( x < 0 )

			{

				zIndex++;

			}

			else

			{

				zIndex--;

			}



			/* Change zIndex and onclick function of the focussed image */

			if ( image.i == imf.caption_id )

			{

				zIndex++;

			}

			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.zIndex = zIndex;

				if (thumb != null)

				{

					thumb.style.left = image.style.left;

					thumb.style.height = new_thumb_h + 'px';

					thumb.style.width = image.style.width;

					thumb.style.top = image.style.top;

					thumb.style.zIndex = zIndex;

				}

			}

			imf.showImage( image, thumb );

		}

		x += imf.xstep;

	}

},



getThumb : function( index )

{

	var image = imf.img_div.childNodes.item(imf.array_images[index]);



	if ( image.childNodes.length == 0

	   ||imf.conf_thumbnail == null

	   ||imf.conf_thumbnail == "")

	{

		return null;

	}



	for (var i = 0; i < image.childNodes.length; i++)

	{

		if (image.childNodes[i].className == imf.conf_thumbnail)

		{

			return image.childNodes[i];

		}

	}

	return null;

},





findImage : 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;

},



getImage : function( index )

{

	var image = null;



	try

	{

		image = imf.img_div.childNodes.item(imf.array_images[index]);

	}

	catch(e)

	{

		imf.cacheImages( false );

		image = imf.img_div.childNodes.item(imf.array_images[index]);

	}



	if (image.nodeType != 1 || (image.nodeName != 'A' && image.nodeName != 'IMG'))

	{

		imf.cacheImages( false );

		image = imf.img_div.childNodes.item(imf.array_images[index]);

	}

	if (image.nodeName == 'A' && image.nextExists && (image.nextSibling == null || image.nextSibling.nodeName != image.nextNodeName))

	{

		imf.cacheImages( false );

		image = imf.img_div.childNodes.item(imf.array_images[index]);

	}

	return imf.findImage( image );

},



cacheImages : function(onload)

{

	/* Cache EVERYTHING! */

	imf.array_images.length = 0;

	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)

		{

			if (image.nodeName == 'A')

			{

				if (image.nextSibling != null)

				{

					image.nextExists = true;

					image.nextNodeName = image.nextSibling.nodeName;

				}

				else

				{

					image.nextExists = false;

				}

			}

			image = imf.findImage( image );

			if (image.nodeName == "IMG")

			{

				var x_pos = (-i * imf.xstep);

				imf.array_images[i] = index;

				image.max_focus_right = x_pos + imf.max_conf_focus;

				image.max_focus_left = x_pos - imf.max_conf_focus;

				image.i = i;



				/* Add width and height as attributes ONLY once onload */

				if(onload == true)

				{

					image.w = image.width;

					image.h = image.height;

					image.max_width = Math.round(image.w * imf.max_height / image.h);

					var thumb = imf.getThumb( i );

					imf.hideImage( image, thumb );

				}



				/* Check source image format. Get image height minus reflection height! */

				if ((image.w + 1) > (image.h / (imf.conf_reflection_p + 1)))

				{

					/* Landscape format */

					image.pc = 95;

				}

				else

				{

					/* Portrait and square format */

					image.pc = 80;

				}

				i++;

			}

		}

	}

	imf.max = imf.array_images.length;

},



/* 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.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.35;

	imf.max_conf_focus = imf.conf_focus * imf.xstep;



	/* 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.cacheImages( onload );



	imf.caption_div.style.zIndex = imf.max + imf.conf_focus + 10;

	imf.scrollbar_div.style.zIndex = imf.max + imf.conf_focus + 11;

	imf.slider_div.style.zIndex = imf.max + imf.conf_focus + 12;



	/* Display images in current order */

	imf.moveTo(imf.current);

},



/* 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.glideTo(imf.current, imf.caption_id);

		imf.moveTo(5000);

		imf.loaded = true;

	}

},



/* Refresh ImageFlow on window resize */

resize : function()

{

	if(document.getElementById(imf.conf_imageflow) && imf.loaded === true) imf.refresh(false);

},



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;

	if (delta > 0)

	{

		if (imf.caption_id >= 1)

		{

			imf.target = imf.target + imf.xstep;

			imf.new_caption_id = imf.caption_id - 1;

			change = true;

		}

	}

	else

	{

		if (imf.caption_id < (imf.max-1))

		{

			imf.target = imf.target - imf.xstep;

			imf.new_caption_id = imf.caption_id + 1;

			change = true;

		}

	}



	/* 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 ()

	{

		return (!(imf.dragging == 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;



		default:

			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);