var xMousePos = 0; // Horizontal position of the mouse on the screen
var yMousePos = 0; // Vertical position of the mouse on the screen

if (document.layers) { // Netscape
    document.captureEvents(Event.MOUSEMOVE);
    document.onmousemove = captureMousePosition;
} else if (document.all) { // Internet Explorer
    document.onmousemove = captureMousePosition;
} else if (document.getElementById) { // Netcsape 6
    document.onmousemove = captureMousePosition;
}
function captureMousePosition(e) {
    if (document.layers) {
        xMousePos = e.pageX;
		yMousePos = e.pageY;
    } else if (document.all) {
        xMousePos = window.event.x+document.body.scrollLeft;
		yMousePos = window.event.y+document.body.scrollTop;
    } else if (document.getElementById) {
        // Netscape 6 behaves the same as Netscape 4 in this regard
        xMousePos = e.pageX;
		yMousePos = e.pageY;
    }
	var scrollerWidth = $('scroller').getStyle('width').toInt();
	var scrollerHeight = $('scroller').getStyle('height').toInt();
	var scrollerLeft = $('scroller').getPosition().x;
	var scrollerTop = $('scroller').getPosition().y;

	var switchButtonL = $('switchL').getElement('img');
	var switchButtonR = $('switchR').getElement('img');

	if((xMousePos - scrollerLeft) >= -22 && (xMousePos - scrollerLeft) <= 50 && scrollerTop <= yMousePos && (scrollerTop + scrollerHeight) >= yMousePos) {
			switchButtonL.setProperty('src','fileadmin/templates/default/img/icon_arrowRound_l_active.png');
	}
	else if((scrollerWidth + scrollerLeft - xMousePos ) <= 50  && (scrollerWidth + scrollerLeft - xMousePos ) >= -22  && scrollerTop <= yMousePos && (scrollerTop + scrollerHeight) >= yMousePos ) {
			switchButtonR.setProperty('src','fileadmin/templates/default/img/icon_arrowRound_r_active.png');
	} else {
			switchButtonL.setProperty('src','fileadmin/templates/default/img/icon_arrowRound_l.png');
			switchButtonR.setProperty('src','fileadmin/templates/default/img/icon_arrowRound_r.png');
	}
}

// ********* Arrow Image Mouse Over **********//
var arrowLeftActive = function() {
	var switchButtonL = $('switchL').getElement('img');
	switchButtonL.setProperty('src','fileadmin/templates/default/img/icon_arrowRound_l_active.png');
}
var arrowLeftReset = function() {
	var switchButtonL = $('switchL').getElement('img');
	switchButtonL.setProperty('src','fileadmin/templates/default/img/icon_arrowRound_l.png');
}
var arrowRightActive = function() {
	var switchButtonL = $('switchR').getElement('img');
	switchButtonL.setProperty('src','fileadmin/templates/default/img/icon_arrowRound_r_active.png');
}
var arrowRightReset = function() {
	var switchButtonL = $('switchR').getElement('img');
	switchButtonL.setProperty('src','fileadmin/templates/default/img/icon_arrowRound_r.png');
}

window.addEvent('domready', function(){

	//************ Mouseover Content Area 50 pix from left, right fire the function *************//
	if($('scroller')) {
		var scroller = new Scroller('scroller', {area: 50, velocity: 0.2});

		var switchButtonL = $('switchL').getElement('img');
		var switchButtonR = $('switchR').getElement('img');

		$('scroller').addEvent('mouseover', scroller.start.bind(scroller));
		$('scroller').addEvent('mouseout', scroller.stop.bind(scroller));

		$('scroller').addEvents({

			'mouseover':captureMousePosition,
			'mousemove': captureMousePosition,
			'mouseleave': function(){
				arrowLeftReset;
				arrowRightReset;
			}
		});

	//************ Arrow Mouseover *************//
		var myFx = new Fx.Scroll('scroller', {duration: 2500});

		$('switchL').addEvent('mouseenter', function() {
				myFx.toLeft();
				arrowLeftActive;
		});
		$('switchL').addEvent('mouseleave', function() {
				myFx.stop();
				arrowLeftReset;
		});
		$('switchR').addEvent('mouseenter', function() {
				myFx.toRight();
				arrowRightActive;
		});
		$('switchR').addEvent('mouseleave', function() {
				myFx.stop();
				arrowRightReset;
		});


	}
});