// 	JavaScript Document defines the Slider-class
// 	requires:
// 	defineClasss.js 
//	mkEl.js 
//	animateCSS.js

var Slider = defineClass({
	name: "Slider",
	// contruct arguments
	// sliderID: string, ID of a div that is used to contains the slider
		// sliderImages: array that contains the set of images to be used
	// sliderWidth: typically the width of the div with the sliderID
	// sliderHeight: typically the height of the div with the sliderID
	construct: function(sliderID, sliderImages, sliderWidth, sliderHeight) {
					this.totalWidth = 0;
					this.sliderID = sliderID;
					this.sliderWidth = sliderWidth;
					this.sliderHeight = sliderHeight;
					this.numberOfImages = sliderImages.length;
					this.sliderImages = [];
					for (var i=0;i<this.numberOfImages;i++) 
						this.sliderImages[i] = sliderImages[i];

//		alert("tijdelijke debug: " + this.numberOfImages + " plaatjes geladen");

					for (var i= 0; i<this.numberOfImages;i++) {
						this.totalWidth += parseInt(this.sliderImages[i].width) * this.sliderHeight / parseInt(this.sliderImages[i].height);
//					alert(i + " " + this.totalWidth);

					}
/*					this.sliderElement = document.getElementById(sliderID);
					for (var i= 0; i<this.numberOfImages;i++) {
						this.sliderElement.appendChild(mkImg(document,
															 {src: this.sliderImages[i].file, 
															 alt: this.sliderImages[i].file, 
															 height: sliderHeight, 
															 width: parseInt(this.sliderImages[i].width) * sliderHeight / parseInt(this.sliderImages[i].height),
															 float: "left"}
															 ));
//						this.totalWidth += this.sliderImages[i].width * sliderHeight / this.sliderImages[i].height;
					}
					var tempTotalWidth = 0;
					for (var i= 0; i<this.numberOfImages;i++) {
						this.sliderElement.appendChild(mkImg(document,
															 {src: this.sliderImages[i].file, 
															 alt: this.sliderImages[i].file, 
															 height: sliderHeight, 
															 width: parseInt(this.sliderImages[i].width) * sliderHeight / parseInt(this.sliderImages[i].height),
															 float: "left"}
															 ));
						tempTotalWidth += this.sliderImages[i].width * sliderHeight / this.sliderImages[i].height;
						if (tempTotalWidth > sliderWidth) break;
					}
*/				},
	methods:	{
				scaleImages: function() {
					this.sliderElement = document.getElementById(this.sliderID);
					for (var i= 0; i<this.numberOfImages;i++) {
						this.sliderElement.appendChild(mkA( document,
															{
																href: this.sliderImages[i].link, 
																title: this.sliderImages[i].file,
																target:	"_blank"
															},
															 mkImg(document,
															 {src: this.sliderImages[i].file, 
															 alt: this.sliderImages[i].file, 
															 height: this.sliderHeight, 
															 width: parseInt(this.sliderImages[i].width) * this.sliderHeight / parseInt(this.sliderImages[i].height),
															 float: "left"}
															 )));
					/* OUDE opzet zonder links
						this.sliderElement.appendChild(mkImg(document,
															 {src: this.sliderImages[i].file, 
															 alt: this.sliderImages[i].file, 
															 height: this.sliderHeight, 
															 width: parseInt(this.sliderImages[i].width) * this.sliderHeight / parseInt(this.sliderImages[i].height),
															 float: "left"}
															 ));*/
//						this.totalWidth += this.sliderImages[i].width * sliderHeight / this.sliderImages[i].height;
					}
					var tempTotalWidth = 0;
					for (var i= 0; i<this.numberOfImages;i++) {
						this.sliderElement.appendChild(mkA( document,
															{
																href: this.sliderImages[i].link, 
																title: this.sliderImages[i].file,
																target:	"_blank"
															},
															 mkImg(document,
															 {src: this.sliderImages[i].file, 
															 alt: this.sliderImages[i].file, 
															 height: this.sliderHeight, 
															 width: parseInt(this.sliderImages[i].width) * this.sliderHeight / parseInt(this.sliderImages[i].height),
															 float: "left"}
															 )));
						tempTotalWidth += this.sliderImages[i].width * this.sliderHeight / this.sliderImages[i].height;
						if (tempTotalWidth > this.sliderWidth) {alert("laatst is : " + i );break;}
					}
				},
				animate: function(frames, timeperframe) {
					that = this;
					animateCSS(that.sliderElement, frames, timeperframe, 	 
						{left: function(frame,time) {return (-1*frame *1) % (that.totalWidth ) + "px";}
						}
					);
				}
	}
});


var Blinker = defineClass({
	name: "Blinker",
	// contruct arguments
	// sliderID: string, ID of a div that is used to contains the slider
		// sliderImages: array that contains the set of images to be used
	// sliderWidth: typically the width of the div with the sliderID
	// sliderHeight: typically the height of the div with the sliderID
	construct: function(blinkerID, blinkerColorOn, blinkerColorOff) {
					this.blinkerID = blinkerID;
					this.blinkerColors = [blinkerColorOn, blinkerColorOff];
				},
	methods:	{
				animate: function(frames, timeperframe) {
					that = this;
					that.blinkerElement = document.getElementById(this.blinkerID);
					animateCSS(that.blinkerElement, frames, timeperframe, 	 
						{color: function(frame,time) {return that.blinkerColors[frame % 2];}
						}
					);
				}
	}
});