var port;
var ul;
var goback;
var gofwd;
var pos;
var cnt;
var portwidth;
var itemwidth = 108;
var visibleitems = 6;

function initscroller() {
	if ($('vacationport')) {
  	port = $('vacationport');
  	ul = port.select('ul')[0];
  	goback = $('goback');
  	gofwd = $('gofwd');  	
		pos = 0;
		
  	cnt = port.select('li').length;
  	portwidth = visibleitems * 108;  	
		
		loadLeftRightArrows();
		
		var p = findSelectedImage();
		// console.log("P: " + p + " - CNT: " + cnt);
  	
  	if (cnt > 6 && p <= (cnt - 6)) {
  		if (gofwd.hasClassName("deact")) {
  			gofwd.removeClassName("deact");
  		}
  	}
  	else {
  		gofwd.addClassName("deact");
  	}  		
	}
}

function findSelectedImage() {
		var max = cnt - 6;
		var p = 0;
		// console.log("MAX: " + max);
		ul.select('li').each(function(item, index) {
			if (item.hasClassName("selected")) {
				p = index + 1;								
				if (p > 6 && p <= max) {
					moveScrollerBy(2-p);
				}
				else if (p > max) {
					moveScrollerBy(-max);
				}
			}
		});
		return p;
}

function moveScrollerBy (anz, event) {	
		// if (event) cancelEvents();	
		cancelEvents();		
		var val = anz * itemwidth;
		var posL = pos;	
		var l = cnt * 108 - portwidth; 	// Länge der nicht sichtbaren Bilderreihe	= maximaler Wert um den nach links gescrollt werden kann
	
		if (val < 0 && (posL + val) < -l) { // negativer Wert = Bewegung nach links
			val = -(l + posL);
		}	
		else  if (val > -posL)  val = -posL;		
		
		new Effect.MoveBy(ul, 0, val);	
		pos = pos + val;		
		
		// < links - rechts > Pfeile bei Position 0 und l ausblenden
		if (ul.positionedOffset().left + val == 0) {
			goback.addClassName("deact");
		}
		else {
			goback.removeClassName("deact");
		}
		
		if (pos == -l) {
	  	gofwd.addClassName("deact");
	  }
		else {
			if (cnt > 6 && gofwd.hasClassName("deact")) {
				gofwd.removeClassName("deact");
			}
		}		
		// if (event) activateEvents();		
		activateEvents();		
}

function loadLeftRightArrows() {		
		goback.stopObserving('click');
		gofwd.stopObserving('click');
		
		// Rahmen um Links weg
		goback.observe('focus', function(event) {			
			goback.blur();
		});	
		gofwd.observe('focus', function(event) {
			gofwd.blur();
		});	
		
		// Bewegung nach < links + rechts > um Anzahl Items
		goback.observe('click', function(event) {
			moveScrollerBy(6, event);
		});	
		gofwd.observe('click', function(event) {
			moveScrollerBy(-6, event);
		});
	}

// Klicks auf Pfeile deaktivieren
function cancelEvents() {
		goback.stopObserving('click');
		gofwd.stopObserving('click');	
}
function activateEvents() {
		var timeout_ID = window.setTimeout(function() {
			loadLeftRightArrows();
		}, 1000);
	}

 Event.observe(window, 'load', initscroller, true);