/*!
Author:
	Mathias Schaefer - mathias.schaefer at 9elements dot com
*/
/* ############################################################################################ */
/* Master Wrapper Object */
/* ############################################################################################ */



var band = {};



/* ############################################################################################ */
/* Configuration Variables */
/* ############################################################################################ */



band.conf = {

	/* Left Margin of the image */
	imageMargin : 20

};

/* ############################################################################################ */
/* Main Init Function */
/* ############################################################################################ */



band.onReady = function () {
	var bandLink = $('band');
	if (bandLink) bandLink.className = '';

	var imgList = $('imgList');
	if (!imgList ) return;

	band.imageList = imgList;
	band.container = imgList.parentNode;
	if (!band.container || band.container.className != 'view00') return;
	
	/* Flag for the initialization status (for refreshOnResize) */
	band.behaviourReady = false;

	/* Add behaviour to the images */
	band.prepareImages();

	/* Add elements for scrollbar and slider */
	band.addControls();

	/* Set up some variables concerning the dimensions and positions */
	band.initPainting();

	/* Set up mouse wheel logic */
	band.mouseWheel.init();

	/* Set up scrollbar slider dragging */
	band.sliderDrag.init();
	
	/* Set up the reflow logic */
	window.onresize = band.refreshOnResize;
	
	/* The gallery should not be selectable (this accidentally happens during slider dragging) */
	band.container.style.MozUserSelect = 'none';
	
	/* Behaviour successfully attached */
	band.behaviourReady = true;
	
	/* Start focus */
	band.focusPercent = 0;
	band.focus = 0;
	
	band.paint();

};



/* ############################################################################################ */
/* Initialization Sub-Functions							*/
/* ############################################################################################ */



/* Look for images in the gallery element and add behaviour to them */
band.prepareImages = function () {

	band.numberOfImages = 0;
	
	var xPosition = 0;
	
	/* Get all image elements in the gallery element */
	band.images = band.container.getElementsByTagName('img');
	for (var imageNumber = 0, image; image = band.images[imageNumber]; imageNumber++) {
		
		/* Increase the number of images in the gallery */
		band.numberOfImages++;
		
		image.rightPosition = xPosition + image.width;
		image.middlePosition = xPosition + (image.width / 2);
		
		xPosition += image.width + band.conf.imageMargin;

	}

	band.imageListWidth = xPosition - band.conf.imageMargin;
	band.imageList.style.width = xPosition + 'px';

};

/* ******************************************************************************** */

/* Add elements for scrollbar and slider */
band.addControls = function () {

	function appendElement (tagName, name, parent) {
		var element = document.createElement(tagName);
		element.className = 'band-' + name;
		parent.appendChild(element);
		band[name] = element;
	}

	appendElement('div', 'controls', band.container);
	appendElement('div', 'scrollbar', band.controls);
	appendElement('div', 'slider', band.scrollbar);

};

/* ******************************************************************************** */

/* Set up some variables concerning the dimensions and positions, position some elements */
band.initPainting = function () {
	
	var bandWidth = band.container.offsetWidth;
	band.halfWidth = bandWidth / 2;
	band.span = band.imageListWidth - bandWidth;

	/* Set controls position */
	var imageListHeight = band.imageList.offsetHeight;
	//band.controls.style.top = imageListHeight + 'px';

	/* Controls sizes */
	band.scrollbar.span = band.scrollbar.offsetWidth - band.slider.offsetWidth;
	band.scrollbar.leftOffset = util.off_elem(band.scrollbar)[0];

	/* Fit the height of the container to the height of the list element */
	band.container.style.height = (25 + imageListHeight + band.controls.offsetHeight + (band.slider.offsetHeight / 2)) + 'px';

};



/* ############################################################################################ */
/* Slider Update */
/* ############################################################################################ */



band.setSlider = function () {

	if (band.draggingActive) {
		return;
	}
	
	band.slider.style.left = (band.focusPercent * band.scrollbar.span) + 'px';

};


/* ############################################################################################ */
/* Jumping */
/* ############################################################################################ */



band.jumpTo = function (delta) {

	var bandMiddlePosition = band.focus + band.halfWidth;
	
	var focussedImage;
	
	for (var imageNumber = 0, image; image = band.images[imageNumber]; imageNumber++) {
		if (image.rightPosition > bandMiddlePosition) {
			break;
		}
	}

	var newImageNumber = imageNumber + delta;
	
	/* Error handling, correct the image number */
	if (newImageNumber < 0) {
		newImageNumber = 0;
	} else if (newImageNumber + 1 > band.numberOfImages) {
		newImageNumber = band.numberOfImages - 1;
	}
	
	var focus = band.images[newImageNumber].middlePosition - band.halfWidth;
	
	if (focus < 0) {
		focus = 0;
	} else if (focus > band.span) {
		focus = band.span;
	}

	band.focusPercent = focus / band.span;
	
	band.setSlider();
	band.paint();

};

/* ############################################################################################ */
/* Painting */
/* ############################################################################################ */



band.paint = function () {

	band.focus = band.focusPercent * band.span;
	band.imageList.style.left = - band.focus + 'px';

};



/* ############################################################################################ */
/* Mousewheel Handling */
/* ############################################################################################ */



band.mouseWheel = {};

/* ******************************************************************************** */

/* Initialize mouse wheel event listener */
band.mouseWheel.init = function () {

	if (window.addEventListener) {
		band.container.addEventListener('DOMMouseScroll', band.mouseWheel.handle, false);
	}
	band.container.onmousewheel = band.mouseWheel.handle;

};

/* ******************************************************************************** */

/* Event handler for mouse wheel event */
band.mouseWheel.handle = function (event) {

	event = util.uni_event(event);

	var delta = 0;
	if (event.wheelDelta) {
		delta = - event.wheelDelta / 120;
	} else if (event.detail) {
		delta = event.detail / 3;
	} else {
		return;
	}

	band.jumpTo(delta);

};



/* ############################################################################################ */
/* Slider logic */
/* ############################################################################################ */



band.sliderDrag = {};

/* ******************************************************************************** */

/* Initialize mouse event listener */
band.sliderDrag.init = function (g) {

	band.slider.onmousedown = band.sliderDrag.start;
	document.onmouseup = band.sliderDrag.stop;
	document.onmousemove = band.sliderDrag.mousemove;

	band.draggingActive = false;

};

/* ******************************************************************************** */

/* Start dragging on mousedown */
band.sliderDrag.start = function (event) {
	event = util.uni_event(event);
	
	band.mousePositionOnSlider = event.offsetX || event.layerX || 0;
	band.draggingActive = true;
};

/* ******************************************************************************** */

/* Stop dragging on mouseup */
band.sliderDrag.stop = function () {
	band.draggingActive = false;
};

/* ******************************************************************************** */

/* Handle mouse movement and moves the slider div according */
band.sliderDrag.mousemove = function (event) {

	if (!band.draggingActive) {
		return;
	}

	event = util.uni_event(event);

	var mousePosition = event.pageX;

	var sliderPosition = mousePosition - band.scrollbar.leftOffset - band.mousePositionOnSlider;

	if (sliderPosition < 0) {
		sliderPosition = 0;
	} else if (sliderPosition > band.scrollbar.span) {
		sliderPosition = band.scrollbar.span;
	}
	
	var sliderPercent = sliderPosition / band.scrollbar.span;
	band.focusPercent = sliderPercent;
	
	band.slider.style.left = sliderPosition + 'px';

	band.paint();

};



/* ########################################################################################### */
/* 										Refresh logic											*/
/* ########################################################################################### */



/* Refresh on window resize */
band.refreshOnResize = function () {

	if (!band.behaviourReady) {
		return;
	}
	/* Re-initialize the dimensions and repaint */
	band.initPainting();
	band.paint();
	
};