/**
* @ desc News Slider for News- Container in main page
* @ desc tested in Opera 9.6, Firefox 2 & IE7
* @ author Rüdiger Evers
*/

// global variables
var sliderTimer = 0;				// Timer for slide effect
var div = null;						// Main Slider DIVs jumping- target
var sliderImgLeft = null;			// left slide image jumping- target
var sliderImgRight = null;			// right slide image jumping- target
var sliderImgFastLeft = null;		// left slide image jumping- target for return to 1st child of main slider DIV
var sliderMainWidth = 10;			// width of Main Slider DIV
var currentScrollLeft = -1;			// current Scrolling- Left (-1) means currently no effect operating
var targetScrollLeft = -1;
var scrollSpeed = 50;				// scroll adjustment in each timer- event (divided by 5 should become integer value for slow scroll finishing)
var shownBoxesWidth = 0;			// width of 3 DIV containers displayed at the same time, see load()
var boxes = 0;
var animationInProgress = false;

window.onload = load;

/**
* @ desc Loading function -> initializing DIV Targets and Main- Slider DIVs width for later use
*/
function load() {
	div = document.getElementById('content-slider-main10');
	sliderImgLeft = document.getElementById('sliderImgLeft');
	sliderImgFastLeft = document.getElementById('sliderImgFastLeft');
	sliderImgRight = document.getElementById('sliderImgRight');
	scrollLayer = document.getElementById('test');
	
	if (div.scrollLeft == 0) {
		sliderImgLeft.style.visibility = 'hidden';
		sliderImgFastLeft.style.visibility = 'hidden';
	}
	// getting number of Boxes shown in Slider -> every DIV container with class 'content-slider-box'
	var tmp = document.getElementsByTagName('div');
	for (var i=0;i<tmp.length;i++) {
		if (tmp[i].className == 'content-slider-box')
			boxes++;
	}
	// getting style information in 1st css File (main.css) of Boxes in Slider (width & padding)	-> declaration in div.content-slider-box
																// IE							// Gecko
	var styleObj = (document.styleSheets[0].rules)? document.styleSheets[0].rules : document.styleSheets[0].cssRules;
	for (i=0;i<styleObj.length;i++) {
		//alert(styleObj[i].selectorText.toLowerCase());
		if (styleObj[i].selectorText.toLowerCase() == 'div.content-slider-box') {
			var boxWidth = styleObj[i].style.width;
			//alert(boxWidth);
			var boxPaddingRight = styleObj[i].style.paddingRight;
			boxWidth = parseInt(boxWidth.substr(0,boxWidth.length-2));
			boxPaddingRight = parseInt(boxPaddingRight.substr(0,boxPaddingRight.length-2));
		}
	}
		
	// saving width of 3 News- DIV containers depending on declared width and padding in main.css
	shownBoxesWidth = boxWidth*3+boxPaddingRight*3;
	// setting width of main slider- DIV for boxes to be shown properly
	sliderMainWidth = boxWidth*boxes+boxPaddingRight*boxes;
	
	// preload hover images
	var images = new Array(
					'fileadmin/grafiken/icon-left-01-hover.png',
					'fileadmin/grafiken/icon-left-02-hover.png',
					'fileadmin/grafiken/icon-right-01-hover.png'
				)
	for (i=0;i<images.length;i++) {
		var image = new Image();
		image.src = images[i];
	}
}

/**
* @ desc sliding DIV container specified in load- function (recursive use)
* @ param int direction -> direction for sliding: -1: backward or 1: forward
*/
function slide (direction,timerevent) {
	// XOR ->  don't execute onClick- Event while Animation is in progress
	if (!animationInProgress ^ timerevent) {
		animationInProgress = true;
		stopSlide();
		var speed = 0;
		// backwards
		if (direction == -1) {
			// set visibility of scrolling- images
			sliderImgRight.style.visibility = 'visible';
			sliderImgFastLeft.style.visibility = 'hidden';
			// getting current scrollLeft Value
			if (currentScrollLeft == -1) {
				currentScrollLeft = div.scrollLeft;
				targetLeft = currentScrollLeft-shownBoxesWidth;
				if (targetLeft < 0)
					targetLeft += (3-(boxes%3))*(shownBoxesWidth/3);
			}
			
			// scrolling specified width backwards (shownBoxesWidth) until destination position or 1st Box reached 
			if (div.scrollLeft <= (currentScrollLeft-shownBoxesWidth) || div.scrollLeft <= 0) {
				div.scrollLeft = currentScrollLeft-shownBoxesWidth;
				currentScrollLeft = -1;
				targetLeft = -1;
				changeSliderWindow('default');
				stopSlide();
				animationInProgress = false;
				if (div.scrollLeft <= 0) {
					sliderImgLeft.style.visibility = 'hidden';
					sliderImgFastLeft.style.visibility = 'hidden';
				}
				return;
			}
			else {
				changeSliderWindow('scroll');
			}
			
			// adjust smooth scrolling speed at effect-finish
			if (div.scrollLeft <= targetLeft+50) speed = parseInt(scrollSpeed/5);
			else if (div.scrollLeft <= targetLeft+130) speed = parseInt(scrollSpeed*2/5);
			else if (div.scrollLeft <= targetLeft+200) speed = parseInt(scrollSpeed*3/5);
			else if (div.scrollLeft <= targetLeft+350) speed = parseInt(scrollSpeed*4/5);
			else speed = scrollSpeed;
			//speed = (div.scrollLeft < targetLeft+100)? parseInt(scrollSpeed / 5) : scrollSpeed;		// old setting of speed 
			div.scrollLeft -= speed;
		}
		
		// forward
		else if (direction == 1) {
			sliderImgLeft.style.visibility = 'visible';
			if (currentScrollLeft == -1) {
				currentScrollLeft = div.scrollLeft;
				targetLeft = currentScrollLeft+shownBoxesWidth;
				if (targetLeft >= parseInt(boxes/3)*shownBoxesWidth)
					targetLeft -= (3-(boxes%3))*(shownBoxesWidth/3);
			}
			
			// scrolling specified width forward (shownBoxesWidth) until destination position reached or no more seperate DIV containers (boxes) in Main DIV container
			if (div.scrollLeft >= currentScrollLeft+shownBoxesWidth || div.scrollLeft == (sliderMainWidth-shownBoxesWidth)) {
				changeSliderWindow('default');
				div.scrollLeft = currentScrollLeft+shownBoxesWidth;
				currentScrollLeft = -1;
				targetLeft = -1;
				stopSlide();
				animationInProgress = false;
				return;
			}
			else {
				changeSliderWindow('scroll');
			}
			
			if (div.scrollLeft >= targetLeft-100) speed = parseInt(scrollSpeed/5);
			else if (div.scrollLeft >= targetLeft-130) speed = parseInt(scrollSpeed*2/5);
			else if (div.scrollLeft >= targetLeft-200) speed = parseInt(scrollSpeed*3/5);
			else if (div.scrollLeft >= targetLeft-300) speed = parseInt(scrollSpeed*4/5);
			else speed = scrollSpeed;
			//speed = (div.scrollLeft > targetLeft-100)? parseInt(scrollSpeed / 5) : scrollSpeed;
			
			div.scrollLeft += speed;
			
			if (div.scrollLeft >= sliderMainWidth-shownBoxesWidth) {
				 sliderImgRight.style.visibility = 'hidden';
				 sliderImgFastLeft.style.visibility = 'visible';
			}
		}
		
		// back to 1st news DIV
		else if (direction == -2) {
			if (div.scrollLeft <= 0) {
				stopSlide();
				animationInProgress = false;
				sliderImgRight.style.visibility = 'visible';
				sliderImgLeft.style.visibility = 'hidden';
				sliderImgFastLeft.style.visibility = 'hidden';
				return;
			}
			if (div.scrollLeft <= 50) speed = parseInt(scrollSpeed/5);
			else if (div.scrollLeft <= 130) speed = parseInt(scrollSpeed*2/5);
			else if (div.scrollLeft <= 200) speed = parseInt(scrollSpeed*3/5);
			else if (div.scrollLeft <= 300) speed = parseInt(scrollSpeed*4/5);
			else speed = scrollSpeed;
			//speed = (div.scrollLeft < targetLeft+100)? parseInt(scrollSpeed / 5) : scrollSpeed;		// old setting of speed 
			div.scrollLeft -= speed;
		}
		
		else {
			alert('Wrong direction parameter!');
			return;
		}
		// recursive call of function after 25ms
		sliderTimer = window.setTimeout("slide("+direction+",true);",25);
	}
}

/**
* @ desc stopping slide- timer- event
*/
function stopSlide() {
	window.clearTimeout(sliderTimer);
}

/**
* @ desc changes width and margin values of main news DIV and right arrow image 
* @ desc to get some space between the items while sliding is in progress
* @ param str status -> 'scroll' || 'default'
*/
function changeSliderWindow(status) {
	if (status == 'scroll') {
		div.style.width = (shownBoxesWidth-15)+'px';
		sliderImgRight.style.marginLeft = '15px';
	}
	else if (status == 'default') {
		div.style.width = shownBoxesWidth+'px';
		sliderImgRight.style.marginLeft = '0px';
	}
}

/**
* @ desc changes image source for onmouseover- events of images (suffix '-hover') 
* @ desc -> see load function for preloading of images, so that seperate loading is not necessary
* @ param obj img -> the image
* @ param str status -> 'hover' || 'regular'
*/
function changeSliderImage(img,status) {
	var tmp = '';
	if (status == 'hover') {
		tmp = img.src.substr(0,img.src.length-4);
		img.src = tmp+'-hover.png';
	}
	else if (status == 'regular') {
		tmp = img.src.substr(0,img.src.length-10);
		img.src = tmp+'.png';
	}
}