// Globals
var mycontroler = null;
var _gUtil = null;

//---------------------------------------------------
//
// Layers
//
var Layer = function(layerId, picId) {
	if (!_gUtil) _gUtil = new Utility();
	this.elem = document.getElementById(layerId);
	this.img = document.getElementById(picId);
	
	this.initOnIndex = function(idx) {
		if (!this.elem || !this.elem.style) return;
		this.elem.style.zIndex = idx;
		this.elem.style.visibility = "visible";
	}
	this.setOpacity = function(o) {
		if (!this.elem || !this.elem.style) return;
		if (!_gUtil) _gUtil = new Utility();
		_gUtil.setOpacity(this.elem,o);
	}
	this.setImage = function(oimg) {
		if (!this.img ||  !oimg || !oimg.src) return;
		this.img.src = oimg.src;
		this.rePosition(oimg.width,oimg.height);
		return;
	}
	this.rePosition = function(imgwidth,imgheight) {
		if (!this.elem || !this.img) return;
		if (!imgwidth) { /*alert('blöd');*/ imgwidth = mycontroler.defaultWidth; }
//		var myimg = new Image();
//		myimg.src = this.img.src;
//		var imgwidth = (myimg.width) ? myimg.width : this.img.width;
//		var imgheight = (myimg.height) ? myimg.height : this.img.height;
//		var imgwidth = this.img.width;
//		var imgheight = this.img.height;
		var layerheight = this.img.height;
//		alert(' img loaded, layer: ' + this.elem.id + ' img: ' + this.img.src + ', width: ' + imgwidth + ' imgheight: ' + imgheight);
		var f = ((imgheight != 0) && (imgheight != layerheight)) ? (layerheight / imgheight) : 1;
		var imgwidth = (f != 1) ? (imgwidth * f) : imgwidth;
		if (!imgwidth) { alert(myimg.src + ' no imgwidth'); imgwidth = this.img.width; }
		_gUtil.setElementPosition(this.elem,0, Math.floor((_gUtil.availableWidth - imgwidth) / 2));
//		alert("elemID: " + this.elem.id + " | img: " + this.img.src + " | f: " + f + " | imgwidth: " + imgwidth + " | imgheight: " + imgheight  + " | layerheight: " + layerheight + " | left pos: " + _gUtil.getElementLeft(this.elem));
	}

}

//
// ImageList
//
var ImageList = function(arrimg) {
	this.list = arrimg;  // image sources
	this.cidx = 0; // current index
	this.imglist = null;  // list of Image() objects
	if (!this.list) return;
	this.imglist = new Array();
	var length;
	for (var i = 0; i < this.list.length; i++) {
		var img = new Image();
		img.src = this.list[i];
		length = this.imglist.push(img); 
	}
	this.firstImg = function() {
		this.cidx = 0;
		if (!this.list || !this.imglist) return null; 
		return this.imglist[this.cidx];
	}
	this.nextImg = function() {
		this.nextIdx();
		if (!this.list || !this.imglist) return null; 
		return this.imglist[this.cidx];
	}
	this.nextIdx = function() {
		if (this.list.length > 0) {
			this.cidx++;
		// random selection variante
		//	var next;
		//	do { next = Math.floor(Math.random() * this.arrshowsrc.length); } while(this.newidx == next);
		//	this.newidx = next;
			if (this.cidx >= this.list.length) this.cidx = 0;
		} else this.cidx = 0;
		return;
	}
} 

//-----------------------------------------
// Controler object: handles Image layers
//-----------------------------------------
var Controler = function() {
this.showtime = null;
this.newidx = 0;
this.timeout = null;
this.opacity = 0;
this.layer1 = null;
this.layer2 = null;
this.imagelist = null;
this.defaultWidth = 0;

this.init = function(imglist, defaultwidth, showtime, omax, omin, odelta, ftime) {
	if (!_gUtil) _gUtil = new Utility();
	this.imagelist = imglist;
	this.defaultWidth = defaultwidth;
	this.showtime = showtime;
	this.opacitymax = ((omax < 100) && (omax > 0)) ? omax : 100;  // maximum, usually 100%
	this.opacitymin = ((omin > 0) && (omin < 100)) ? omin : 0;  // minimum
	this.opacitydelta = odelta;  // fading out step size
	this.fadetime = ftime;  // fading out in this total time
	// some derived values
	this.newidx = 0;
	this.timeout = null;
	this.opacitytimeout = Math.floor(this.fadetime / (this.opacitymax / this.opacitydelta)) ;  // fading out in this total time
	this.opacity = this.opacitymax;  // initial
	this.opacitydir = 1; // 1 => fade up, -1 fade down
	
	// setup image layers
	this.initLayers("layer1","pic1", "layer2","pic2");
}

// setup image layers
this.initLayers = function(layerId1, imgId1, layerId2, imgId2) {
	this.layer1 = new Layer(layerId1,imgId1);
	this.layer2 = new Layer(layerId2,imgId2);
	this.layer1.initOnIndex(1);
	this.layer1.setOpacity(this.opacitymax);
	this.layer2.initOnIndex(2);
	this.layer2.setOpacity(100-this.opacitymax);
	// start with first image
	this.layer1.setImage(this.imagelist.firstImg());
}

// cross fade over, trigger image change if fade over complete 
this.fadeOver = function() {
	if (this.timeout) clearTimeout(this.timeout);
	if (!this.layer1 || !this.layer1.elem || !this.layer2 || !this.layer2.elem) return;
	var changeImage = 0;
	this.opacity += (this.opacitydir * this.opacitydelta);
	if (this.opacity < this.opacitymin) { this.opacity = this.opacitymin; this.opacitydir *= -1; changeImage = 1; } // turn round
	if (this.opacity > this.opacitymax) { this.opacity = this.opacitymax; this.opacitydir *= -1; changeImage = 2; } // turn round
	this.layer1.setOpacity(this.opacity);
	this.layer2.setOpacity(100-this.opacity);
	if (changeImage != 0) { this.setNextImage(changeImage); return; }
	this.timeout = setTimeout("mycontroler.fadeOver()",this.opacitytimeout);
}

// image swap on given layer
this.setNextImage = function(l) {
	if (this.timeout) clearTimeout(this.timeout);
	if (!this.layer1 || !this.layer2) return;
	if (l == 1) this.layer1.setImage(this.imagelist.nextImg());
	if (l == 2) this.layer2.setImage(this.imagelist.nextImg());
	// finally, start fadeover 
	this.timeout = setTimeout("mycontroler.fadeOver()",this.showtime);
}

} // end of Controler Class

// starting point
function start() {
	var imgsrc = initImageList();
	if (!mycontroler) mycontroler = new Controler(); 
	// Image Controler
	mycontroler.init(imgsrc /* image list */
					 ,600  /* image default Width */
					 ,2000 /* showtime*/
					 ,100  /* opacity max in %, usually 100 */
					 ,0    /* opacity min in % ususally 0 */
					 ,10   /* opacity delta */
					 ,500 /* fading total time */
					);
	this.timeout = setTimeout("mycontroler.fadeOver()",mycontroler.showtime);
	return;
}

// list of image URLs
function initImageList() {
	var length;
	arrsimgsrc = new Array();
	length = arrsimgsrc.push("./img/roller/BUW_BilderVorlageKarte2.jpg");           
	length = arrsimgsrc.push("./img/roller/BUW_Bauhaus_mit_Pool_Ausschnitt_Aus.jpg");    
	length = arrsimgsrc.push("./img/roller/BUW_Bauhaus_weiß2AUS.jpg");   
	length = arrsimgsrc.push("./img/roller/BUW_EL_AnsichtSuedNacht1.jpg");              
	length = arrsimgsrc.push("./img/roller/BUW_EL_PerspektiveMappe.jpg");             
	length = arrsimgsrc.push("./img/roller/BUW_Ferd_Ansicht_Ecke.jpg");             
	length = arrsimgsrc.push("./img/roller/BUW_Gleim_Fassade.jpg");             
	length = arrsimgsrc.push("./img/roller/BUW_Flachbau_1.jpg");             
	length = arrsimgsrc.push("./img/roller/BUW_HB_Anicht_Süd_2008_deckblatt.jpg");             
	length = arrsimgsrc.push("./img/roller/BUW_Luftaufnahmehomepage.jpg");            
	length = arrsimgsrc.push("./img/roller/BUW_Schlehbuschstr_ausschnitt.jpg");             
	length = arrsimgsrc.push("./img/roller/BUW_Alex_Persp2_Ausschnitt.jpg");            
	length = arrsimgsrc.push("./img/roller/BUW_Jugendhaus_Persp_1.jpg");            
	length = arrsimgsrc.push("./img/roller/BUW_Ferd_Ansicht_Vordach_Ausschnitt.jpg");             
	length = arrsimgsrc.push("./img/roller/BUW_Ferd_Mietplan_Ausschnitt.jpg");            
	length = arrsimgsrc.push("./img/roller/BUW_Ferdinandhof_Innenhof.jpg"); 
	return new ImageList(arrsimgsrc);
}

//---------------------------------------------------
// global utility
var Utility = function() {
	this.mybrowser=null;
	this.availableWidth = null;
	this.gtimeout = null;

	var browserAgent;
	browserAgent=navigator.userAgent;
	if (browserAgent.indexOf("Firefox") != -1) this.mybrowser="Firefox";
	if (browserAgent.indexOf("MSIE") != -1) this.mybrowser="IE";

	this.availableWidth = document.body.offsetWidth;
	this.setOpacity = function(elem,opacity) {
		if (opacity > 100) opacity = 100;
		if (opacity < 0) opacity = 0;
		if (this.mybrowser == "IE") this.setIEOpacity(elem,opacity);
		else this.setMozOpacity(elem,opacity);
	}
	this.setMozOpacity = function (elem,opacity) {	
		if (elem) elem.style.opacity=opacity/100;
		return;
	}
	this.setIEOpacity = function(elem,opacity) {	
		if (elem) elem.style.filter ="alpha(opacity=" + opacity + ")"; 
		return;
	}
	this.getElementLeft = function(elem) {
		if (!elem) return;
		if (elem.style) return(elem.style.left);
		return elem.left;
	}
	this.getElementTop = function(elem) {
		if (!elem) return;
		if (elem.style) return elem.style.top;
		return s.top;
	}
	this.setElementPosition = function(elem,top,left) {
		if (!elem) return;
		if (elem.style) { elem.style.top = top+'px'; elem.style.left = left+'px'; return; }
		elem.top = top; elem.left = left;  // try this if no style
		return;
	}
	this.sleep = function() {
		if (this.gtimeout) clearTimeout(this.gtimeout);
		return;
	}
	
}
//---------------------------------------------------