// The URLs of your images. You may add as many images as you like
var imgurl=new Array("leer.jpg","beratung.jpg","jugendstilschloss.jpg","altbausanierung.jpg","Innenarchitektur Reichenau.jpg","schuetzenstrasse.jpg","leistungen.jpg", "dhh_paradies_aus.jpg", "anbau_dhh.jpg","gengenbach2.jpg","licht.jpg","licht2.jpg","licht3.jpg")

// The messages corresponding to the images above
var message=new Array("FEIST ARCHITEKTUR","Beratung","Beratung Jugendstilschloss","Altbausanierung","Sanierung historischer keller","Aufstockung Jugendstilhaus","Leistungsspektrum", "Neubau Stadtvilla", "Anbau DHH","Konzeptentwicklung Jugendhaus","Licht","Licht","Licht")

// The links corresponding to the images above
var imglink=new Array("./buero.html","./projekte.html","./beratung.html","./projekte","./projekte", "./projekte.html","./projekte.html", "./projekte.html", "./projekte.html","./projekte.html","./projekte.html","./projekte.html")

// Standstill of the images (seconds)
var standstill=5

// Width of slideshow (pixels)
var slideshow_width=200

// Height of slideshow (pixels)
var slideshow_height=270
var text_pos=-20;

// Height of the messagebox (pixels)
var messagebox_height=20

// The number of rows of pieces
var y_slices=4

// The number of pieces within one row
var x_slices=4


////////////////////////////////////////////////////////////////////////////
// CONFIGURATION ENDS HERE
////////////////////////////////////////////////////////////////////////////


// Do not change the variables below

// horizontal position of the slideshow: distance to the left margin of the window
var x_finalpos=0

// vertical position of the slideshow: distance to the top margin of the window
var y_finalpos=0


var imgpreload=new Array()
for (i=0;i<=imgurl.length-1;i++) {
	imgpreload[i]=new Image()
	imgpreload[i].src="./bilder/"+imgurl[i]
}
var imgheight
var imgwidth
var screenheight
var screenwidth
var x_step=new Array()
var y_step=new Array()
var x_randompos=300
var y_randompos=300
var i_loop=0
var max_loop=80
var i_image=1
var i_wholeimage=1
var width_slice
var height_slice
var cliptop=0
var clipbottom=height_slice
var clipleft=0
var clipright=width_slice
var spancounter=0
var pause=6
standstill=1000*standstill
var on_image=1;
var off_image=0;

function initiate() {
  	var offleft=parseInt(document.getElementById('wholepic').offsetParent.offsetLeft)
	var offtop=parseInt(document.getElementById('wholepic').offsetParent.offsetTop)
	screenwidth= parseInt(document.body.clientWidth)
	screenheight=parseInt(document.body.clientHeight)
	width_slice=Math.floor(imgwidth/x_slices)
	height_slice=Math.floor(imgheight/y_slices)
	cliptop=0
	clipbottom=height_slice
	clipleft=0
	clipright=width_slice
	i_loop=0
	spancounter=0
 	    for (i=0;i<=y_slices-1;i++) {
			for (ii=0;ii<=x_slices-1;ii++) {
				var thisspan=eval("document.getElementById('span"+spancounter+"').style")
				x_randompos=screenwidth*Math.random()-offleft-slideshow_width
				y_randompos=screenheight*Math.random()-offtop-slideshow_height
				thisspan.left=x_randompos
				thisspan.top=y_randompos
                thisspan.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
				clipleft+=width_slice
		        clipright+=width_slice
		        spancounter++
			}
        	clipleft=0
	        clipright=width_slice
	        cliptop+=height_slice
	        clipbottom+=height_slice
		}
  
 explode_IE()
}

function changeimage() {
	spancounter=0
	for (i=0;i<=y_slices-1;i++) {
		for (ii=0;ii<=x_slices-1;ii++) {
			var thisspan=eval("document.getElementById('span"+spancounter+"').style")	
			thisspan.left=-5000
			thisspan.top=-5000
			spancounter++
		}
	}
	spancounter=0
	if (i_image>imgurl.length-1) {i_image=0}
	for (i=0;i<=y_slices-1;i++) {
		for (ii=0;ii<=x_slices-1;ii++) {
			var thisinnerspan=eval("span"+spancounter)
    		thisinnerspan.innerHTML="<a href='"+imglink[i_image]+"' target='_top'><img src='./bilder/"+imgurl[i_image]+"' border=0></a>"
			spancounter++
		}
	}
	imgwidth=document.getElementById('span0').offsetWidth
	imgheight=document.getElementById('span0').offsetHeight
	i_wholeimage=i_image
	i_image++
	
	initiate()
}

function explode_IE() {
	spancounter=0
	if (i_loop<=max_loop-1) {
		for (i=0;i<=y_slices-1;i++) {
			for (ii=0;ii<=x_slices-1;ii++) {
				var thisspan=eval("document.getElementById('span"+spancounter+"').style")	
				x_step[spancounter]=(x_finalpos-parseInt(thisspan.left))/(max_loop-i_loop)
				y_step[spancounter]=(y_finalpos-parseInt(thisspan.top))/(max_loop-i_loop)	
				thisspan.left=parseInt(thisspan.left)+x_step[spancounter]
				thisspan.top=parseInt(thisspan.top)+y_step[spancounter]
				spancounter++
			}
		}
		i_loop++
		var timer=setTimeout("explode_IE()",pause)
	}
	else {
		spancounter=0
		clearTimeout(timer)
		document.getElementById("wholepic").innerHTML="<a href='"+imglink[i_wholeimage]+"' target='_top'><img src='./bilder/"+imgurl[i_wholeimage]+"' border=0></a>"
		addmessage()
	}
}



function addmessage() {
	document.getElementById("messagebox").innerHTML=message[i_wholeimage]
	var timer=setTimeout("changeimage()",standstill)
}


	spancounter=0

window.onload=changeimage