var subNavLiWidth = 74; //width of single li item
var subNavViewableArea = 518; //width of viewable area
var moveStep = 1; //how many pixels per step will be moved
var scrollSpeed = 25 // 1=fast 100=slow
var subNavLis;
var subNavUlWidth;
var scrollRightInterval;
var scrollObject = null;

var oldNavItem ="";




function initialiseScoller() {
	
	var objElement = document.getElementById('subNavigation');
	scrollObject = new scroll(objElement, 74,518);
	
	//count subnav-items to calculate real width
	subNavLis = $A($('subNavigation').getElementsByTagName('li')).map(Element.extend);
	subNavUlWidth = subNavLis.size()*74;
	
	//set real width of subnavigation		
	document.getElementById('subNavigation').style.width = parseInt(subNavUlWidth)+'px';

	//set starting value of left to 0
	document.getElementById('subNavigation').style.left = parseInt(0);	
	
}


function scroll(objElement, intHeight, intWidth) {
	var self = this;
	this._x = 0;
	this._y = 0;
	objElement.style.top = "0px";
	objElement.style.left = "0px";

	this.setPosition = function(strDirection, intPos, x) {
		if (intPos > 0) intPos = 0;
		switch (strDirection) {
			case 'x':
				if (intPos < intWidth - objElement.offsetWidth)
						intPos = intWidth - objElement.offsetWidth;
				this._x = intPos;
				objElement.style.left  = this._x +"px";
       		break;
			case 'y':
				if (intPos < intHeight - objElement.offsetHeight)
					intPos = intHeight - objElement.offsetHeight;
				this._y = intPos;
				objElement.style.top  = this._y +"px";
			break;
		}
	};

	this.scrollX = function(x) { this.setPosition('x', this._x + x, x); };
	this.scrollY = function(y) { this.setPosition('y', this._y + y, y); };

	this.startX = function(x) {
	this.scrollTimer = window.setInterval(
		function() { self.scrollX(x); }, scrollSpeed );
	};

	this.startY = function(y) {
	this.scrollTimer = window.setInterval(
		function() { self.scrollY(y); }, scrollSpeed );
	};
	
	this.stop = function() {
	if (this.scrollTimer) 
		window.clearInterval(this.scrollTimer); };
};



/* fadein fadeout watches */
xHide = new Array();

//hide watch detail
hideelement = function (id) {
	x = 0;
	hoverElements = document.getElementsByClassName('hoverElement');	
	for(var i=0; i < xHide.length; i++) {
		//console.log("fadeOUT:" + hoverElements[xHide[i]]);
		new Effect.Fade(hoverElements[xHide[i]], {
			duration:1.0, 
			from:1.0, to:0.0
		})
	}
}

//show watch detail
showelement = function (id) {
	
		//console.log("oldNavItem:" + oldNavItem + "id:" + id);
		
			//console.log("oldnavi empty or new id!");
			x = 0;
			xHide = new Array();
		    hoverElements = document.getElementsByClassName('hoverElement');
			
			
					
			//loop all watches		
			while (x < hoverElements.length) {
				
				//if visible watch found, save position from it in xHide
				if(hoverElements[x].style.display != 'none') {
					xHide.push(x);	
					
				}
				x++;
			}
			
			//console.log("total visible watch :" + xHide.length);
			
			//hoverElements[xHide[0]].style.display = "none";
			hideelement(xHide[0]);
			//console.log("start fadein for obj:" + id);
			
			//console.log("fadeIN:" + id);
			/* var fadeIn = new Effect.Appear(id, {
				duration:1.0, 
				from:0.0, to:1.0, 
				beforeStart: hideelement
			})*/
			
			var fadeIn = new Effect.Appear(id, {
				duration:1.0, 
				from:0.0, to:1.0
			})
		
}

// activate/deactivate clock in navigation
showthumb = function (thumb,id) {
	//console.log($(thumb).next(0).show());
	//console.log("showthumb:" + thumb + "id:" + id);
	var ROhoverElements = document.getElementsByClassName('ro');
	x = 0;	
	
	//loop all watches
	while (x < ROhoverElements.length) {
		
		//if visible watch found, hide it
		if(ROhoverElements[x].style.display != 'none') {
			ROhoverElements[x].style.display = 'none';		
		}
		x++;
	}
	
	y = 0;	
	NOhoverElements = document.getElementsByClassName('no');
	//loop all watches
	while (y < NOhoverElements.length) {
		
		//if invisible watch found, show it
		if(NOhoverElements[y].style.display == 'none') {
			NOhoverElements[y].style.display = 'block';		
		}
		y++;
	}
	
	
	$(thumb).next(0).show();
	$(thumb).hide();
	
	//if no watch was loaded before OR a new watch is loaded, show the new watch
	if(oldNavItem == "" || oldNavItem != id) {
		showelement(id);
		oldNavItem = id;
	}
}

hidethumb = function (thumb,id) {
	//console.log("hidethumb:" + thumb + "id:" + id);	
	//TODO hidethumb darf nicht bei jedem mouseout des aktiven thumbs gecalled werden, sondern nur wenn ein anderes thumb aufgerufen wird!
}