// ======================================
// Crossbrowser Layer Animatie-script V1
// ======================================
// Geschreven door: Paul Veugen
// E-mail: paul@flyers.nl
// ======================================
// Getest in: NS4, NS6 en IE6
// ======================================
// Dit script kan gebruikt worden om meerdere layers afzonderlijk van 
// elkaar te laten bewegen.
// Bij dit script hoort een voorbeeld bestand animatie.htm met daarin 
// een aantal voorgedefineerde layers. Mail bij vragen naar: paul@flyers.nl.
// ======================================

// Container breedte:
ContainerSize = 508;

//* Browsercheck
ns4 = (document.layers)? true:false;
ie4 = (document.all)? true:false;
dom = (document.getElementById)? true:false;

//* Speedsettings (oa ivm traag scrollen van Moz/NS6)
if ((dom == true) && (ie4 == false)) {
	Speed = 3 // Kleiner getal = sneller
}
else {
	Speed = 5 // Kleiner getal = sneller
}

function layerObj(id,layerID,startX) {
	this.id = id;
	this.layerID = layerID;
	this.startX = startX;
	this.x = this.startX;
	
	// Aan de hand van browser bepalen hoe de layers aan te spreken.
	if (dom) {
		this.css = document.getElementById(layerID).style;
		this.layer = document.getElementById(layerID);
	}
	else if (ie4) {
		this.css = document.all[layerID].style;
		this.layer = document.all[layerID];
	}
	else if (ns4) {
		this.css = document.layers[layerID];
		this.layer = document.layers[layerID];
	}
	
	//* Positie netjes meegeven
	this.css.left = this.startX;
	
	//* Breedte opvragen
	this.width = this.layer.offsetWidth
	
	//* Methods
	this.MoveRight = layerObjMoveRight;
	this.MoveLeft = layerObjMoveLeft;
	this.Right = layerObjAnimMoveRight;
	this.Left = layerObjAnimMoveLeft;
	this.Stop = layerObjStop;
	
	// Layers om te scrollen verbergen als de productenlayer niet breed genoeg is
	if (this.width < ContainerSize) {
		LayerVisibility("ProductenRight", "hidden");
		LayerVisibility("ProductenLeft", "hidden");
	}
	
}

function layerObjMoveLeft() {
	this.x = parseInt(this.css.left);
	
	//* stop at end
	if (this.x == this.startX) {
		window.clearInterval(this.Timer);
		this.Timer = null;
		LayerVisibility("ProductenLeft", "hidden");
	}
	else {
		this.x++;
		this.css.left = this.x;
		LayerVisibility("ProductenRight", "visible");
	}
	// Voor bug-hunting, weergave van positie in de statusbalk:
	//window.status = this.MovingDown + " - " + this.MovingUp;
}

function layerObjMoveRight() {
	this.x = parseInt(this.css.left);

	//* stop at end
	if (this.x == ContainerSize - this.width) { // Breedte container - breedte productenlayer
		window.clearInterval(this.Timer);
		this.Timer = null;
		LayerVisibility("ProductenRight", "hidden");
	}
	else {
		this.x--;
		this.css.left = this.x;
		LayerVisibility("ProductenLeft", "visible");
	}
	
	// Voor bug-hunting, weergave van positie in de statusbalk:
	//window.status = this.x + " - " + this.endX + " - " + this.startX + " - " + this.layer.offsetWidth;
}

function layerObjAnimMoveRight() {
	this.Timer = setInterval(this.id+".MoveRight()",Speed);
}

function layerObjAnimMoveLeft() {
	this.Timer = setInterval(this.id+".MoveLeft()",Speed);
}

function layerObjStop() {
	window.clearInterval(this.Timer);
}

function init(Aantal, Breedte) {
	Eindwaarde = Breedte * Aantal;
	Producten1 = new layerObj("Producten1","Producten",0);
}

function LayerVisibility(LayerID, Visibility)  {
	// Aan de hand van browser bepalen hoe de layers aan te spreken.
	if (dom) {
		this.css = document.getElementById(LayerID).style;
	}
	else if (ie4) {
		this.css = document.all[LayerID].style;
	}
	else if (ns4) {
		this.css = document.layers[LayerID];
	}
	this.css.visibility = Visibility;
}