// image loader class definition
function ImageLoader(interval) {
	this.interval = interval;
	this._interval = null;
	this.images = new Array();
}

// start to poll image loader until all images are loaded
ImageLoader.prototype.start = function(interval)
{
	var closure = this; // create closure
	var fn = function() { closure.poll() };
	if(!interval) interval = this.interval;
	// alert("start poll at " + interval);
	this._interval = window.setInterval(fn, interval);
}

// add an image object to the loader
ImageLoader.prototype.add = function(img, onload)
{
	if(img.complete) document.images[img.name].src = img.src;
	else { this.images[this.images.length] = img; this.start(); }
}

// poll method is used as the interval callback
ImageLoader.prototype.poll = function()
{
	var stop = true;
	for(var i = this.images.length - 1; i >= 0; i--)
	{ 	var img = this.images[i];
		if(img.complete) {
			document.images[img.name].src = img.src;
			this.images.splice(i, i + 1);
		} else stop = false;
	}
	if(stop) window.clearInterval(this._interval);
}

// global image store 
var images = new Array();
// create instance of image loader		
var loader = new ImageLoader(25)

// replace given image (when loaded completely)
function replace(name, src) {
	// enable do not switch between images if not yet loaded
	if(document.images[name].src == src) return;
	if(!images[name]) images[name] = new Image();
	images[name].name = name; images[name].src = src; 
	loader.add(images[name]); // disable below if above sis enabled
	// if(document.images[name].src != src) loader.add(images[name]);
}

var company = "";
var product = "";
var selected = "";

// select a company product
function slct(name) {
	if(name == product) return;
	replace(product, 'img/' + company + "/" + product + '_kl_off.jpg')
	replace(name, 'img/' + company + "/" + name + '_kl_on.jpg')
	selected = "img/" + company + "/" + name + "_gr.jpg"
	replace("product", selected); product = name;
}