var delay = 6000;		// set timer for slide effect
var move;				// distance to move the list item - set at initSlider()
var moveBackup;
var timer;				// timer-object for start/stop timer
var list;				// list-object, contains all list items
var position;			// counter to detect position of list items
var currentPos = 1;		// current position for active page link
var stopSlide = false;	// global var for stopping slide-show
var firstLoad = true;

// call this function to start rotation
function initSlider( ) {
//	$('sliderFrame').setStyle({ 'height': '270px' });			// set heigt to show pageination
	$('#paging').toggle();										// show pageination
	$('#slideTo-1').addClass( 'activePage' );
	list = $('#slider li').get();				 				// get native list of slides
	var firstClone = $('#sliderItem-1').clone( true ); 			// create clone of first list element
	var i = list.length + 1 
	firstClone.attr( 'id', 'sliderItem-'+i ); 					// change ID-attribute for clone
	firstClone.attr( 'rel', i ); 								// set rel-attribute - important for direkt linking
	$('#slider').append( firstClone );							// add clone to end of slider-lisst
	list = $('#slider li').get();									// get full list of slides with clone at the end
	
//	eventObserver();											// check for user events
	moveBackup = move = -820; 									// set to width of li-element
	position = 0;												// set start position
	
	timer = setInterval('rotateSwitch( )', delay);				// start rotation
}

// main function for rotating list items
function rotateSwitch( ) {
	if( position == list.length - 1 ) {
		$('.sliderItem').stop();
		// if rotation is at last position: move every list item to start
		$('.sliderItem').css( { 'left': '0px', 'position': 'relative', 'top': '0px' } );	
		position = 0;
		move = moveBackup;
	}
	position++;
	var moveTo = move*position;
	// move to next item in list
	$('.sliderItem').css( { position: 'relative' } ).animate({ 
		left: moveTo + 'px',
		top: '0px'
	}, 500 );
	
	if( position == list.length - 1) {
		currentPos = 1;
	} else {
		currentPos = position + 1;
	}
	$("#paging a").removeClass('activePage'); 					// remove all active class
	$('#slideTo-'+currentPos).addClass( 'activePage' );			// add activePage class to current page link	
}

function showSlide( element ) {
	clearInterval( timer ); 									// stop the rotation
	$("#paging a").removeClass('activePage'); 					// remove all active class
	element.addClass( 'activePage' );							// add active class to clicked button
	if( element.attr( 'id' ) == 'sliderStartStop' ) {			// action for clicking start/stop button
		if( element.html() == 'stop' ) {
			stopSlide = true;
		} else {
			element.html( 'stop' );
			stopSlide = false;									// stop slideer globaly
			timer = setInterval('rotateSwitch( )', delay);		// start rotation
		}
	}
	else {														// action for clicking page button
		$("#sliderStartStop").html( 'start' );					// set start/stop button to start
		position = element.attr( 'rel' );						// get position of clicked button
		var moveTo = move*position - move;
		// move to clicked item in list
		$('.sliderItem').css( { position: 'relative' } ).animate({ 
			left: moveTo + 'px',
			top: '0px'
		}, 500 );
		stopSlide = true;										// stop slideer globaly
	}
}

// http://www.thefutureoftheweb.com/blog/detect-browser-window-focus
function onBlur() {
	clearInterval( timer );
	$("#sliderStartStop").html( 'start' );
};
function onFocus(){
	if( firstLoad || stopSlide == true ) {
		firstLoad = false;
	} else {
		$("#sliderStartStop").html( 'stop' );					// set start/stop button to start
		timer = setInterval('rotateSwitch( )', delay);
	}
};

if (/*@cc_on!@*/false) { // check for Internet Explorer
	document.onfocusin = onFocus;
	document.onfocusout = onBlur;
} else {
	window.onfocus = onFocus;
	window.onblur = onBlur;
}