/* ############################################################################################ */
/* Util */
/* ############################################################################################ */

function $(id) { return document.getElementById(id); }

var util = {
	
copy: function (src,tgt) {
	if (!src) return src;
	if (!tgt) tgt = {};
	for ( var prop in src ) {
		var val = src[prop];
		if ( src == val || undefined == val ) continue;
		tgt[prop] = val;
	}
	return tgt;
},

/* event fast DOM  ************************************************************* */

uni_event: function (evt, prop) {
	
	var oEvt = evt || window.event;
	if (!oEvt) return false;
	
	evt = util.copy(oEvt);

	// general
	if (!evt.target && evt.srcElement) evt.target = evt.srcElement;
	if (!evt.relatedTarget && evt.fromElement)
		evt.relatedTarget = evt.fromElement == evt.target ? evt.toElement : evt.fromElement;
	// key
	if (!evt.which && (evt.charCode || evt.keyCode)) evt.which = evt.charCode || evt.keyCode;
	if (!evt.metaKey && evt.ctrlKey) evt.metaKey = evt.ctrlKey;
	// mouse
	if ( null == evt.pageX && null != evt.clientX ) {
		var doc_e = document.documentElement, doc_b = document.body;
		evt.pageX = evt.clientX + (doc_e && doc_e.scrollLeft || doc_b.scrollLeft || 0);
		evt.pageY = evt.clientY + (doc_e && doc_e.scrollTop || doc_b.scrollTop || 0);
	}
	if (!evt.which && evt.button )
		evt.which = (1&evt.button ? 1 : (2&evt.button ? 3 : (4&evt.button ? 2 : 0 )));
	// propagate/bubble control
	if (prop) {
		evt.preventDefault = function () {
			if (oEvt.preventDefault) oEvt.preventDefault();
			oEvt.returnValue = false;
		};
		evt.stopPropagation = function () {
			if (oEvt.stopPropagation) oEvt.stopPropagation();
			oEvt.cancelBubble = true;
		};
	} else {
		if (oEvt.preventDefault) oEvt.preventDefault();
		if (oEvt.stopPropagation) oEvt.stopPropagation();
		oEvt.returnValue = false;
		oEvt.cancelBubble = true;
	}

	return evt;
},

/* ******************************************************************************** */
add_event: function (obj, typ, fun) {
	if (obj.addEventListener) {
		obj.addEventListener( typ, fun, false); 
		return true; 
	} else if (obj.attachEvent) {
		obj['e'+typ+fun] = fun;
		obj[typ+fun] = function() { obj['e'+typ+fun]( window.event ); }
		return obj.attachEvent('on'+typ, obj[typ+fun]);
	}
	return false;
},
	
/* ******************************************************************************** */	
off_elem: function (elem) {
	var x=0,y=0;
	while (elem) {
		x += elem.offsetLeft;
		y += elem.offsetTop;
		elem = elem.offsetParent;
	}
	return [x,y];
}	

}; // util


/* ############################################################################################ */
/* Master Objekt */
/* ############################################################################################ */

var band = {};

/* ############################################################################################ */
/* Variablen Initialisieren */
/* ############################################################################################ */

band.conf = {
	imageMargin : 20, bandbreite : 0, fensterbreite : 0, fensterhoehe : 0, scrolltobildbreite : 0, scrollbildbreite : 0, imageMarginLeft : 0
};

/* ############################################################################################ */
/* Main Init Funktion - onReady */
/* ############################################################################################ */

band.onReady = function () {
	
	//Wenn <li> existiert dann Margin auslesen sonst standardwert nehmen
	if (document.getElementsByTagName('li').length > 0){ 
		band.conf.imageMarginLeft = document.getElementsByTagName('li').item(0).offsetLeft;
	} else {
		band.conf.imageMarginLeft = band.conf.imageMargin;
	}

	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 != 'Stripview') return;
	
	/* Flag fuer initialisierungs Status (fuer refreshOnResize) */
	band.behaviourReady = false;

	/* Fenster Breite und Hoehe initialisieren */
	band.fensterdimensionen();
	
	/* Loading Images */
	band.prepareImages();

	/* Hinzufuegen von Scrollbar u Slider */
	band.addControls();

	/* Init Vars fuer Dimensionen und Position */
	band.initPainting();

	/* Init Mouserad */
	band.mouseWheel.init();

	/* Init Scrollbar Drag */
	band.sliderDrag.init();
	
	/* Refresh on Resize */
	window.onresize = band.refreshOnResize;
	
	/* Gallerie nicht auswaehlbar */
	band.container.style.MozUserSelect = 'none';
	
	/* Initialisierung abgeschlossen */
	band.behaviourReady = true;
	
	/* Start focus */
	band.focusPercent = 0;
	band.focus = 0;
	band.paint();

};

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

/* Loading Images */
band.prepareImages = function () {

	band.numberOfImages = 0;
	var xPosition = 0;
	
	/* Alle Images aus Gallerie */
	band.images = band.container.getElementsByTagName('img');
	for (var imageNumber = 0, image; image = band.images[imageNumber]; imageNumber++) {		
		band.numberOfImages++;

		image.rightPosition = xPosition + image.width;
		image.middlePosition = xPosition + (image.width / 2);
		
		xPosition += image.width + band.conf.imageMarginLeft ;
	}
	xPosition += 1; /*nur für Backpacking outback notwendig noch überprüfen */
  
  
  	/* Bandbreite bei Band nicht deklariert, ansonsten Band-Breite ueberschreiben */
  	if (band.conf.bandbreite != 0){
   		xPosition =  band.conf.bandbreite; 
   	} 
   
   	/* zu kleine Bandbreite abfangen */
   	if (band.conf.fensterbreite > xPosition){
		xPosition =  band.conf.fensterbreite - band.conf.imageMarginLeft; 
	}
		
  	band.imageListWidth = xPosition + band.conf.imageMarginLeft; /* + 20 _ Abstand hinter letztes Bild gewuenscht */
	band.imageList.style.width = xPosition + 'px';
	
};

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

/* Hinzufuegen von Scrollbar u Slider */
band.addControls = function () {

	function appendElement (tagName, name, parent) {
		var element = document.createElement(tagName);
		element.className = 'band-' + name; /* .Class in band.css "zB band-slider" */
		parent.appendChild(element);
		band[name] = element;
		
	}

	appendElement('div', 'controls', band.container); /* band.css band-controls */
	appendElement('div', 'scrollbar', band.controls); /* band.css band-scrollbar */
	appendElement('div', 'slider', band.scrollbar); /* band.css band-slider */

};

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

/* Init Vars fuer Dimensionen und Position */
band.initPainting = function () {
	
	var bandWidth = band.container.offsetWidth;
	band.halfWidth = bandWidth / 2;
	band.span = band.imageListWidth - bandWidth;

	var imageListHeight = band.imageList.offsetHeight;

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

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

};


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

band.paint = function () {
	
	band.focus = band.focusPercent * band.span;
	band.imageList.style.left = - band.focus + 'px';

};

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

band.mouseWheel = {};

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

/* Initialize Mousewheel EventListener */
band.mouseWheel.init = function () {

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

};

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

/* EventHandler Mousewheel */
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;
	}
	
	/* Fehler 'keine Zahl' abfangen (zu Zahl machen) */
	band.focusPercent = parseFloat(band.focusPercent);
	
	var verschiebenpx = 80; /* px die pro scroll verschoben werden sollen */
	var deltaproz = 1/band.imageListWidth*verschiebenpx;  /* in Prozent umrechnen */
	var prozalt = band.focusPercent;
	
	/* setzte neue Scrollposition Plus oder Minus*/
	if(delta < 0){ /* Rad dreht nach links -> delta = -1 */
		band.focusPercent = prozalt - deltaproz;
	} else if(delta > 0){ /* Rad dreht nach recht -> delta = 1 */
		band.focusPercent = prozalt + deltaproz;
	} else {
		//nix
	}

	/* Scroll ueber 0 u 1 abfangen */
	if (band.focusPercent < 0){
		band.focusPercent = 0;
	} else if (band.focusPercent > 1){
		band.focusPercent = 1;
	} else {
		/*  nix  */
	}
	
	band.setSlider();
	band.paint();

};

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

band.sliderDrag = {};

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

/* Initialisieren MouseEventListener */
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 bei mousedown */
band.sliderDrag.start = function (event) {
	event = util.uni_event(event);
	
	band.mousePositionOnSlider = event.offsetX || event.layerX || 0;
	band.draggingActive = true;
};

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

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

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

/* Handle mouse Aktionen und Slider im Div verschieben */
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 */
/* ########################################################################################### */

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

	if (!band.behaviourReady) {
		return;
	}
	/* Dimensionen neu definieren und repaint */
	band.initPainting();
	band.paint();
	
};

/* ########################################################################################### */
/* Fenstergroesse ermitteln */
/* ########################################################################################### */

band.fensterdimensionen = function () {

	//Fensterbreite u Fensterhoehe auslesen	
	if (self.innerWidth) // alle außer Explorer
	{
	 band.conf.fensterbreite = self.innerWidth;
	 band.conf.fensterhoehe = self.innerHeight;
	}
	else if (document.documentElement && document.documentElement.clientHeight)
	 // Explorer 6 Strict Mode
	{
	 band.conf.fensterbreite = document.documentElement.clientWidth;
	 band.conf.fensterhoehe = document.documentElement.clientHeight;
	}
	else if (document.body) // andere Explorer
	{
	 band.conf.fensterbreite = document.body.clientWidth;
	 band.conf.fensterhoehe = document.body.clientHeight;
	}

};

/* ########################################################################################### */
/* Get / Set Scrollbalken-Position */
/* ########################################################################################### */

band.getPosition = function () {

	return band.focusPercent;
	
};

band.setPosition = function (delta) {

	band.focusPercent = delta;
	band.setSlider();
	band.paint();
	
};

/* ########################################################################################### */
/* Get / Set Scrollbalken-Position */
/* ########################################################################################### */

/* Scroll to Bild, wenn von Slideshow kommend */
band.scrolltobild = function (bild) {

	band.setScrollto(bild); /* Init Bandbreite u Band X0 to Bild-Breite */
	var breite = band.conf.scrolltobildbreite;
	var bildbr = band.conf.scrollbildbreite;
	var scrollposition = 1/(band.imageListWidth-band.conf.fensterbreite)*(breite-band.conf.fensterbreite/2-bildbr/2);
	/* Scroll ueber Anfang / Ende abfangen */
	if(scrollposition < 0){ scrollposition = 0; } else if (scrollposition > 1){scrollposition = 1;}else{}

	return scrollposition;
};


/* Init des Bandes um Bildposition zu bestimmen */
band.setScrollto = function (bild) {

	var tempbreite = 0;

	/* alle Bilder laden */
	band.images = band.container.getElementsByTagName('img');
	/* Bilderbreite addieren */
	for (var imageNumber = 0, image; image = band.images[imageNumber]; imageNumber++) {		

		tem = band.images[imageNumber].src.split("/"); /* var $bild trennen */

		if(bild == tem[7]){ /* tem[7] == Bild.jpg */
			coo.bildnr = imageNumber;
		}
		
		tempbreite = tempbreite + image.width + 20;
		
		if (band.getScrolltobildnr() == imageNumber){
			band.conf.scrollbildbreite = image.width;
			band.conf.scrolltobildbreite = tempbreite;
		}
	}
	
};

/* ########################################################################################### */
/* Get / Set Funktionen */
/* ########################################################################################### */

/* Get BildNr zu der gescrollt werden soll */
band.getScrolltobildnr = function () {
	return coo.bildnr;
};

/* ########################################################################################### */
/* Tastatur Funktionen */
/* ########################################################################################### */

/* Get BildNr zu der gescrollt werden soll */
band.arrowleft = function () {
	temp = band.getPosition();
	temp = temp-0.02;
	
	/* Scroll ueber 0 u 1 abfangen */
	if (temp < 0){
		temp = 0;
	} else if (temp > 1){
		temp = 1;
	} else {
		/*  nix  */
	}
	
	band.setPosition(temp);
};

band.arrowright = function () {
	temp = band.getPosition();
	temp = temp+0.02;
	
	/* Scroll ueber 0 u 1 abfangen */
	if (temp < 0){
		temp = 0;
	} else if (temp > 1){
		temp = 1;
	} else {
		/*  nix  */
	}
	
	band.setPosition(temp);
};