// If you are looking at this be advised that this is a work in progess and i'm still only at the very beginning.
// This will turn into a handy little Javascript library at some point (i hope) and it will be named FreeD
// It will help to create fully fluid layouts with the functionality you normally lose when you actually care
// enough to make a fluid layout. Like scaling pictures on the fly or adding scaling grids or making elements
// equal in size. So don't steal this please. If you want to use it, no problem but please drop me a line
// when you do. Best regards, Christoph Stahl

// FreeD Javascript Library - version (its so early i havent even started with version numbers yet)
// Written by Christoph Stahl, all rights reserved (for now, itll get some creative common licence in the end)
// Use this at your own risk and do not remove these comments.
// I would be very happy if you would mention somewhere on your website that you are using this

var BrowserDetect = {
	init: function () {
		this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
		this.version = this.searchVersion(navigator.userAgent)
			|| this.searchVersion(navigator.appVersion)
			|| "an unknown version";
		this.OS = this.searchString(this.dataOS) || "an unknown OS";
	},
	searchString: function (data) {
		for (var i=0;i<data.length;i++)	{
			var dataString = data[i].string;
			var dataProp = data[i].prop;
			this.versionSearchString = data[i].versionSearch || data[i].identity;
			if (dataString) {
				if (dataString.indexOf(data[i].subString) != -1)
					return data[i].identity;
			}
			else if (dataProp)
				return data[i].identity;
		}
	},
	searchVersion: function (dataString) {
		var index = dataString.indexOf(this.versionSearchString);
		if (index == -1) return;
		return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
	},
	dataBrowser: [
		{ 	string: navigator.userAgent,
			subString: "OmniWeb",
			versionSearch: "OmniWeb/",
			identity: "OmniWeb"
		},
		{
			string: navigator.vendor,
			subString: "Apple",
			identity: "Safari"
		},
		{
			prop: window.opera,
			identity: "Opera"
		},
		{
			string: navigator.vendor,
			subString: "iCab",
			identity: "iCab"
		},
		{
			string: navigator.vendor,
			subString: "KDE",
			identity: "Konqueror"
		},
		{
			string: navigator.userAgent,
			subString: "Firefox",
			identity: "Firefox"
		},
		{
			string: navigator.vendor,
			subString: "Camino",
			identity: "Camino"
		},
		{		// for newer Netscapes (6+)
			string: navigator.userAgent,
			subString: "Netscape",
			identity: "Netscape"
		},
		{
			string: navigator.userAgent,
			subString: "MSIE",
			identity: "Explorer",
			versionSearch: "MSIE"
		},
		{
			string: navigator.userAgent,
			subString: "Gecko",
			identity: "Mozilla",
			versionSearch: "rv"
		},
		{ 		// for older Netscapes (4-)
			string: navigator.userAgent,
			subString: "Mozilla",
			identity: "Netscape",
			versionSearch: "Mozilla"
		}
	],
	dataOS : [
		{
			string: navigator.platform,
			subString: "Win",
			identity: "Windows"
		},
		{
			string: navigator.platform,
			subString: "Mac",
			identity: "Mac"
		},
		{
			string: navigator.platform,
			subString: "Linux",
			identity: "Linux"
		}
	]
};



var FreeD = {
	version: '0.2c',
	firsttime: true,
	scalefont: false,
	scalemode: 0, /* settings: 0 = scale only images with the class "FreeDImage" ; 1 = scale all but the ones with the class "FreeDnoscale"; 2 = scale all; 3 = no scale at all */
	imgloadstate : new Array(0),
	scaleimg : new Array(false),
	load: function () {
//		document.getElementById('debugelm').innerHTML += "LOAD ";
		var allisgood = true;

		var FreeDdiv=document.createElement("div");
		var FreeDdivid=document.createAttribute("id");
		FreeDdivid.nodeValue = "FreeDsetup";
		FreeDdiv.setAttributeNode(FreeDdivid);
		
		var FreeDtest=document.createElement("div");
		var FreeDtestid=document.createAttribute("id");
		FreeDtestid.nodeValue = "testoutput";
		FreeDtest.setAttributeNode(FreeDtestid);

//		var FreeDtestcol=document.createAttribute("color");
//		FreeDtestcol.nodeValue = "#00cc00";
//		FreeDtest.setAttributeNode(FreeDtestcol);

		FreeDtest.style.color="#00cc00";
		FreeDdiv.appendChild(FreeDtest);

		var FreeDdebug=document.createElement("div");
		var FreeDdebugid=document.createAttribute("id");
		FreeDdebugid.nodeValue = "debugelm";
		FreeDdebug.setAttributeNode(FreeDdebugid);

//		var Freedebugcol=document.createAttribute("color");
//		FreeDdebugcol.nodeValue = "#cc0000";
//		FreeDdebug.setAttributeNode(FreeDdebugcol);

		FreeDdebug.style.color="#cc0000";
		FreeDdiv.appendChild(FreeDdebug);

		var loadpic=document.createElement("img");
		var loadpicsrc=document.createAttribute("src");
		loadpicsrc.nodeValue = "http://www.datatrade.co.uk/bilder/loading.gif";
		loadpic.setAttributeNode(loadpicsrc);

		var loadpicid=document.createAttribute("id");
		loadpicid.nodeValue = "loadpic";
		loadpic.setAttributeNode(loadpicid);

		var loadpicname=document.createAttribute("name");
		loadpicname.nodeValue = "loadpic";
		loadpic.setAttributeNode(loadpicname);

		loadpic.style.width="32px";
		loadpic.style.height="32px";
		loadpic.setAttribute("width",32);
		loadpic.setAttribute("height",32);

		FreeDdiv.appendChild(loadpic);

		var FreeDspacer=document.createElement("div");
//		var FreeDspacerid=document.createAttribute("id");
//		FreeDspacerid.nodeValue = "FreeDspacerdiv";
//		FreeDspacer.setAttributeNode(FreeDspacerid);
		var FreeDspacerclass=document.createAttribute("class");
		FreeDspacerclass.nodeValue = "FreeDspacerdiv";
		FreeDspacer.setAttributeNode(FreeDspacerclass);
		FreeDspacer.style.margin="0";
		FreeDspacer.style.padding="0";
//		FreeDspacer.style.width="1px";
		FreeDspacer.style.height="0px";
		FreeDdiv.appendChild(FreeDspacer);


		document.getElementsByTagName("body")[0].insertBefore(FreeDdiv, document.getElementsByTagName("body")[0].firstChild);
		document.images[0].style.display = "none";
	},
	cleanup: function () {

		//needs to be done every time
		// mark all hidden divs (only display=none)
//		$('div[style="display: none;"]').addClass("showroomhidden");

//		document.getElementById('debugelm').innerHTML += " FIRST ";
		$('div').each(function(index) {
			if ($(this).css("display")=="none") { 
				$(this).addClass("showroomhidden"); 
//				document.getElementById('debugelm').innerHTML += " " + index + ':' + $(this).attr("id");
			}
		});

		//show all hidden divs (only display=none)
		$(".showroomhidden").css("display","block");

//		document.getElementById('debugelm').innerHTML += " ARROWRIGHT:";
		$(".arrow_right").each(function(index) {
//			document.getElementById('debugelm').innerHTML += " " + index + ':' + $(this).parent().parent().css("display");
		});
//		document.getElementById('debugelm').innerHTML += " GROUPMIDDLE:";
		$(".group_middle").each(function(index) {
//			document.getElementById('debugelm').innerHTML += " " + index + ':' + $(this).parent().parent().css("display");
		});
//		document.getElementById('debugelm').innerHTML += " ARROWLEFT:";
		$(".arrow_left").each(function(index) {
//			document.getElementById('debugelm').innerHTML += " " + index + ':' + $(this).parent().parent().css("display");
		});

		//NEAT GRID
		var griddevs = $("div[name*='FreeDng']");
		for (var elms=0; elms<griddevs.length; elms++) {
			$(griddevs[elms]).css("width","auto");
			$(griddevs[elms]).css("margin-left","0");
			$(griddevs[elms]).css("margin-right","0");
			var gridstep = griddevs[elms].getAttributeNode("name").nodeValue.split("|");
//			$(griddevs[elms]).removecss("width",newbodypercent +"%");
			var fullwidth = $(griddevs[elms]).outerWidth();
			var gridwidth = step(fullwidth,gridstep[1]);
			$(griddevs[elms]).css("width",gridwidth +"px");
			$(griddevs[elms]).css("margin-left","auto");
			$(griddevs[elms]).css("margin-right","auto");
//			document.getElementById('debugelm').innerHTML += " " + gridwidth;
		}

		var allmeimages = document.images.length;
		if (FreeD.firsttime) {
//			document.getElementById('debugelm').innerHTML += "SETUP ";
			// ONCE
			// 1 check all pictures for rev information
			// 2 check all pictures for rel information
			// save rev info

			for(var i=1; i<allmeimages; i++) {
//				FreeD.imgloadstate[i]=0;

				//first set a unique id for the picture
				var newpicname = "freedimg" + i;
				document.images[i].id = newpicname;
				var picwidth = document.getElementById(newpicname).offsetWidth;
				var picheight = document.getElementById(newpicname).offsetHeight;

				// check for freeD image class on this picture
				var checkclasses = $("#" + newpicname).attr("class");
				var classbits = checkclasses.split(" ");

				FreeD.scaleimg[i]=false;
				if (FreeD.scalemode==2 || FreeD.scalemode==1) { FreeD.scaleimg[i]=true; }
				for (var bitme=0; bitme<=classbits.length;bitme++) { 
					if (classbits[bitme]=="FreeDImage") { FreeD.scaleimg[i]=true; }
					if (FreeD.scalemode==1 && classbits[bitme]=="FreeDnoscale") { FreeD.scaleimg[i]=false; }
				}				
				if (FreeD.scalemode==3) { FreeD.scaleimg[i]=false; }
//				document.getElementById('debugelm').innerHTML += " | class:" + checkclasses + ">" + FreeD.scaleimg[i] + " ";


				//now only continue if you actually need to scale the image
				if (FreeD.scaleimg[i]) {
					
					// read the img name tag for freed image information
//					document.getElementById('debugelm').innerHTML += i + ":";
					var readrev = document.images[i].name;
//					document.getElementById('debugelm').innerHTML += readrev + " ";

					var picshown1= $("#" + newpicname).parent().css("display");
					if (picshown1=="none") { 
						picwidth=parseInt($("#" + newpicname).css("width"));
						picheight=parseInt($("#" + newpicname).css("height"));
					}

					// rahmen rausrechnen aus bildgröße! mache ich noch später!

					// check the sourcefilename for CACHE or Default infos.
					// this has to be optimised for all the CMS i use, so GET TO IT ALREADY!
					var sourcechecker=document.images[i].src;			
//					var nochange = 0;
//					document.getElementById('debugelm').innerHTML += " !" + j + " ";
					var sourcebits = sourcechecker.split("/");
					var sourcebitscount = sourcebits.length;

					var revparams ="";
					var cmscache = true;

					// wenn das Bild in einem Verzeichnis IMGdefault liegt, dann auch tauschen
					for(var k=1; k<sourcebitscount; k++) {
						if (sourcebits[k]=="IMGdefault") {
							cmscache=false;
//							nochange=1;
							var fjpicchecker = sourcebits[sourcebitscount-1].split(".");
							var fjpiccount=fjpicchecker.length;
//							sourcebits[sourcebitscount-1]="";

							var sourcepicname = fjpicchecker[0];
							picwidth = fjpicchecker[1];
							picheight = fjpicchecker[2];
							for(var fj=3; fj<fjpiccount-1; fj++) {
								revparams += "." + fjpicchecker[fj];
							}
							var sourcepicformat = fjpicchecker[fjpiccount-1];
//							document.getElementById('debugelm').innerHTML += " FJ " + sourcepicname + "." + picwidth + "." + picheight + revparams + "." + sourcepicformat + " ";
	
						}
					}
					if (cmscache) {

						var underscoreerror = false;
						for(var k=1; k<sourcebitscount; k++) {
							if (sourcebits[k]=="cache-vignettes") {
								if ((k+2) == sourcebitscount) {underscoreerror=true;}
//								nochange=1;
							}
						}

						if (underscoreerror) {
							var underscorecheck=sourcebits[sourcebitscount-1].split("_");
							var underscorecount=underscorecheck.length;
							sourcebits[sourcebitscount-1]= underscorecheck[1];
							for (var si=2;si<underscorecount; si++) { sourcebits[sourcebitscount-1] = sourcebits[sourcebitscount-1] + "_" + underscorecheck[si];}
						}

						var sourcepicchecker = sourcebits[sourcebitscount-1].split(".");
						var sourcepiccount=sourcepicchecker.length;
						var newpic2name = sourcepicchecker[0];
						for (var si=1;si<sourcepiccount-1; si++) { newpic2name = newpic2name + "." + sourcepicchecker[si];}

						var formatchecker = sourcepicchecker[sourcepiccount-1].split("?");
						var sourcepicformat = formatchecker[0];

						var minuschecker = newpic2name.split("-");
						var minuscount=minuschecker.length;
						var sourcepicname = minuschecker[0];
						var minuscounter=minuscount-1;
						if (sourcepicformat=="png") { minuscounter=minuscount-2; }
						for (var sj=1;sj<minuscounter; sj++) { sourcepicname = sourcepicname + "-" + minuschecker[sj];}
					}

					// now set the filename here
					var standardcache = "http://www.datatrade.co.uk/IMGCACHE/"
					var revpicsource = standardcache + sourcepicname;
					var revpicformat = sourcepicformat;

					//check for percentage settings in title and alt tags
					var scalepic=0;
					var scalecheck = document.images[i].title + "|" + document.images[i].alt;
					var scalebits = scalecheck.split("|");
					for (var sb1=0; sb1<scalebits.length; sb1++) {
//						var scalepercs = scalebits[sb1].split("%");
						if (parseInt(scalebits[sb1])>scalepic) { scalepic=parseInt(scalebits[sb1]);}
					}
					if (scalepic==0) {scalepic=1;}
					if (scalepic<=0.1) {scalepic=0.1;}
					if (scalepic>1 && scalepic<10) {scalepic=1/scalepic;}
					if (scalepic>10 && scalepic<=100) {scalepic=scalepic/100;}
					if (scalepic>100) {scalepic=1;}
					var revpercentage = scalepic;
	
//					document.getElementById('debugelm').innerHTML += " | REVBITS " + revbits.length + " |";
	
					// if the image tag is produced in freeD format then read it and override all the gathered info
					// havent changed this in a while so no idea if it works...
					var revbits = readrev.split("|");
					if (revbits[0]=="freed" && revbits.length>3) {
//						document.getElementById('debugelm').innerHTML += "| GETTING REVBITS | ";
						if (revbits[1]>0) { picwidth=revbits[1];}
						if (revbits[2]>0) { picheight=revbits[2];}
						if (revbits[3].length>5) {revpicsource=revbits[3]}
						if (revbits[4].length>0) {revparams=revbits[4]}
						if (revbits[5].length==3) {revpicformat=revbits[5]}
						if (revbits.length>5) {
							var revpicsizer=revbits[6].split("%");
							if (revpicsizer.length>1) { revpercentage = revpicsizer[0];}
							else {revpercentage = revpicsizer[0];}
							if (revpercentage<=0) {revpercentage=1;}
							if (revpercentage>1 && revpercentage<=100) {revpercentage=revpercentage/100;}
							if (revpercentage>100) {revpercentage=1;}
						}
					
					}

					document.images[i].name = "freed|" + picwidth + "|" + picheight + "|" + revpicsource + "|" + revparams + "|" + revpicformat + "|" + revpercentage;
//					document.getElementById('debugelm').innerHTML += " | REV " + document.images[i].name + " |";
				}
			}
			FreeD.firsttime=false;
//			document.getElementById('debugelm').innerHTML += "OK || ";
		}

		// every time
		// FreeD CRUNCH ON OVERFLOW *new* remove style width entries
		var cooelms = $("[name*='FreeDcoo']");
		for (var elms=0; elms<cooelms.length; elms++) {
			$(cooelms[elms]).children().each(function(index) {
				$(this).css("width","auto");
			});

			$(cooelms[elms]).children().children().each(function(index) {
				if ($(this).hasClass("ha")) {
					zoomme = 1;
					if (Weite<=800) { zoomme = 0.6;}
					if (Weite<=640) { zoomme = 0.3;}
//					document.getElementById('debugelm').innerHTML += " zoom:" + zoomme;
					$newpadding = 0 + "em " + Math.round(zoomme*12)/10 + "em " + 0 + "em " + Math.round(zoomme*12)/10 + "em ";
					$(this).css("padding",$newpadding);
//					$(this).css("height","auto");
//					$(this).css("padding-top","0");
//					$(this).css("padding-bottom","0");
				}
			});

		}

		// every time
		// sadly since images can be added into the page after it loaded, we need to check if images are supposed to be scaled every resize
		// so here we go:
		for(var i=1; i<allmeimages; i++) {
			//first set a unique id for the picture
			var newpicname = "freedimg" + i;
			document.images[i].id = newpicname;

			// check for freeD image class on this picture
			var checkclasses = $("#" + newpicname).attr("class");
			var classbits = checkclasses.split(" ");

			FreeD.scaleimg[i]=false;
			if (FreeD.scalemode==2 || FreeD.scalemode==1) { FreeD.scaleimg[i]=true; }
			for (var bitme=0; bitme<=classbits.length;bitme++) { 
				if (classbits[bitme]=="FreeDImage") { FreeD.scaleimg[i]=true; }
				if (FreeD.scalemode==1 && classbits[bitme]=="FreeDnoscale") { FreeD.scaleimg[i]=false; }
			}				
			if (FreeD.scalemode==3) { FreeD.scaleimg[i]=false; }
//			document.getElementById('debugelm').innerHTML += " | class:" + checkclasses + ">" + FreeD.scaleimg[i] + " ";
		}

		// every time
		// 3 turn off all pics that are gonna be resized
		for(var i=1; i<allmeimages; i++) {
			if (FreeD.scaleimg[i]) {
//				var readimg = document.images[i].id;
//				var selimg = document.getElementById(readimg);
				document.images[i].src=document.getElementById("loadpic").src;
				document.images[i].style.width="32px";
				document.images[i].style.height="32px";
	
//				$(selimg).width="32px";
//				$(selimg).height=document.getElementById("loadpic").height;
//				selimg.style.paddingLeft="20px";
//				document.getElementById('debugelm').innerHTML += "loadsize: " + selimg.width + "x" + selimg.height + ":" + selimg.style.paddingLeft + " || ";
			}
		}

		// every time
		// 4 reload them in the right size and turn them on one by one
//		document.getElementById('debugelm').innerHTML += "resize triggered || ";
//		document.getElementById('debugelm').innerHTML += BrowserDetect.browser + " " + BrowserDetect.version + " || ";
//		document.getElementById('debugelm').innerHTML += allmeimages + " | ";

		for(var i=1; i<allmeimages; i++) {
			if (FreeD.scaleimg[i]) {
				var newpicname = "freedimg" + i;
				document.images[i].id = newpicname;
//				document.getElementById('debugelm').innerHTML += i + " " + newpicname + " ";
			
				var readrev = document.images[i].name;
				var revbits = readrev.split("|");
				var picwidth=revbits[1];
				var picheight=revbits[2];
				var sourcefilename=revbits[3];
				var picparams=revbits[4];
				var sourceformat=revbits[5];
				var bildpercentage = revbits[6];

				// Maximale Bildgröße mit jQuery: Div einsetzen und dessen Breite messen, dann wieder löschen
				var FreeDruler=document.createElement("div");
				var FreeDrulerid=document.createAttribute("id");
				FreeDrulerid.nodeValue = "FreeDruler" + i;
				FreeDruler.setAttributeNode(FreeDrulerid);

				var picparent = newpicname + "p";
				document.getElementById(newpicname).parentNode.id = picparent;
				document.getElementById(picparent).insertBefore(FreeDruler, document.getElementById(newpicname));

				var picshown= $("#FreeDruler" + i).parent().css("display");
				if (picshown!="none") {
					picwidth= $("#FreeDruler" + i).innerWidth();
	
//					document.getElementById('debugelm').innerHTML += revbits[1] + "->" + picwidth + " * " + bildpercentage + " ";
					var verschwunden = document.getElementById(picparent).removeChild(FreeDruler);

					// neue Bildgröße setzen
					picheight = Math.round(picheight * picwidth / revbits[1]);
	
					// und prozent skalieren 
					picwidth = Math.round(picwidth*bildpercentage);
					picheight = Math.round(picheight*bildpercentage);
				}
	
				// BILD AKTUALISIEREN
				if (sourceformat=="jpg") {
					var newpicturesource=revbits[3] + "." + picwidth + "." + picheight + picparams + "." + sourceformat;
				} else {
//					could make that with .i. for png: var newpicturesource=revbits[3] + ".i." + picwidth + "." + picheight + "." + sourceformat;
					var newpicturesource=revbits[3] + "." + picwidth + "." + picheight + picparams + "." + sourceformat;
				}


//				document.getElementById('debugelm').innerHTML += picwidth + " " + picheight + " || ";
	
				// why block?
//				document.images[i].style.display = "block";
				document.images[i].src=newpicturesource;

//				document.images[i].style.paddingLeft="0px";
//				document.images[i].style.paddingRight="0px";
//				document.images[i].style.paddingTop="0px";
//				document.images[i].style.paddingBottom="0px";

				document.images[i].style.width=picwidth + "px";
				document.images[i].style.height=picheight + "px";

//				picturenumber++;

//				document.getElementById('debugelm').innerHTML += columnwidth + " " + columnheight + " || ";
	
			}
		}

		// FreeD CRUNCH ON OVERFLOW *new*
		cooelms = $("[name*='FreeDcoo']");
		for (var elms=0; elms<cooelms.length; elms++) {
			var thiselmkids = cooelms[elms].childNodes;
			var thiselmkidsnr = thiselmkids.length;
			var kidswidth = new Array();
			var kidsheight = new Array();
			var coomaxwidth = $(cooelms[elms]).parent().width();
			var kidswidthtotal = 0;
			var fatkid = 0;
			var coo = 0;
			$(cooelms[elms]).children().each(function(index) {
				kidswidth[coo] = $(this).outerWidth();
//				kidswidth[coo] = parseInt(kidswidth[coo]);
				if (kidswidth[coo]>fatkid) {fatkid = kidswidth[coo];}
//				document.getElementById('debugelm').innerHTML += " (" + coo + "," + kidswidth[coo] + ") ";
				kidswidthtotal += kidswidth[coo];
				coo++;
			});
			thiselmkidsnr = coo;

//			document.getElementById('debugelm').innerHTML += " COO width " + coomaxwidth + " kids " + thiselmkidsnr + " |";
//			document.getElementById('debugelm').innerHTML += " kidswidthtotal " + kidswidthtotal + " |";

			while (kidswidthtotal>=coomaxwidth-thiselmkidsnr) {
				kidswidthtotal=0;
				for (var o=0; o<thiselmkidsnr; o++) {
					if (kidswidth[o]>fatkid) {kidswidth[o]=fatkid;}
					kidswidthtotal += kidswidth[o];
				}
//				document.getElementById('debugelm').innerHTML += " " + fatkid + ":" + kidswidthtotal;
				fatkid--;
			}

			coo = 0;
			$(cooelms[elms]).children().each(function(index) {
//				$(this).style.width = kidswidth[coo] + "px";
				$(this).css("width",kidswidth[coo] + "px");
				kidsheight[coo] = $(this).height();
				kidsheight[coo] = parseInt(kidsheight[coo]);
//				document.getElementById('debugelm').innerHTML += " " + coo + ":" + kidsheight[coo] + "vs" + $(this).outerHeight(true);
				coo++;
			});

			// set same height
			fatkid = 0;
			for (var o=0; o<thiselmkidsnr; o++) {
					if (kidsheight[o]>fatkid) {fatkid=kidsheight[o];}
			}				

			var Weite = Fensterweite();
			$(cooelms[elms]).children().children().each(function(index) {
				if ($(this).hasClass("ha")) {
//					$(this).css("height",fatkid + "px");
					zoomme = 1;
					if (Weite<=800) { zoomme = 0.6;}
					if (Weite<=640) { zoomme = 0.3;}
//					document.getElementById('debugelm').innerHTML += " zoom:" + zoomme;
					$newpadding = Math.round(zoomme*10)/10 + "em " + Math.round(zoomme*12)/10 + "em " + Math.round(zoomme*10)/10 + "em " + Math.round(zoomme*12)/10 + "em ";
					$(this).css("padding",$newpadding);
//					$(this).css("height","20px");
				}
			});

//			document.getElementById('debugelm').innerHTML += " kidswidthtotal " + kidswidthtotal + " |";
		}


		// 5. Every time - das hier soll in die extra funktion
		// check all div elements for resize informations
		var reldevs = $("[name*='FreeDsh']");
//		var reldevs = $("div[name*='FreeDsh']");
		var reldevsnr = new Array();
		var reldevsal = new Array();
		var reldevsunique = new Array();
		for (var elms=0; elms<reldevs.length; elms++) {

			// löschen aller spacer divs
//			$(reldevs[elms]).height('auto');
			$(reldevs[elms]).children('.FreeDspacerdiv').remove();

			reldevsnr.push(reldevs[elms].getAttributeNode("name").nodeValue.split("|"));
			reldevsal.push(0);
			if (reldevsnr[elms].length>2) { 
				if (reldevsnr[elms][2]=="b") { reldevsal[elms] = 1; }
				if (reldevsnr[elms][2]=="c") { reldevsal[elms] = 2; }
				if (reldevsnr[elms][2]=="gb") { reldevsal[elms] = 3; }
				if (reldevsnr[elms][2]=="gt") { reldevsal[elms] = 4; }
//				document.getElementById('debugelm').innerHTML += " merk: b ";
			}
			var yesunique=true;
			for (var uniquecheck=0; uniquecheck<reldevsunique.length; uniquecheck++) {
				if  (reldevsunique[uniquecheck] == reldevsnr[elms][1]) { 
					yesunique = false;
//					document.getElementById('debugelm').innerHTML += " duplicate " + reldevsnr[elms][1] + " || ";
				}
			}
			if (yesunique) { 
				reldevsunique.push(reldevsnr[elms][1]); 
//				document.getElementById('debugelm').innerHTML += " " + reldevsnr[elms][1] + " || ";
			}
		}
		for (var anzahl=0; anzahl<reldevsunique.length; anzahl++) {
//			document.getElementById('debugelm').innerHTML += " " + anzahl + ": ";
			var hoechster = 0;
			for (var elms=0; elms<reldevs.length; elms++) {
//				if (reldevsnr[elms][1]==reldevsunique[anzahl]) { document.getElementById('debugelm').innerHTML += $(reldevs[elms]).height() + " (" + $(reldevs[elms]).outerHeight(true) + ") "; }
				if (reldevsnr[elms][1]==reldevsunique[anzahl] && $(reldevs[elms]).outerHeight(true)>hoechster) { 
					hoechster= Math.round($(reldevs[elms]).outerHeight(true));
//					document.getElementById('debugelm').innerHTML += $(reldevs[elms]).height() + " ";
				}
//				if (reldevsnr[elms][1]==reldevsunique[anzahl]) { document.getElementById('debugelm').innerHTML += reldevsunique[anzahl] + ":" + elms + ":" + Math.round($(reldevs[elms]).height()) + " "; }
			}

//			document.getElementById('debugelm').innerHTML += "->" + hoechster + " ";
			for (var elms=0; elms<reldevs.length; elms++) {
				if (reldevsnr[elms][1]==reldevsunique[anzahl]) { 
//					document.getElementById('debugelm').innerHTML += "|| " + elms + ": ";
					// setze neue höhe
//					$(reldevs[elms]).height(hoechster); 
					// oder besser setzte neue höhe mit spacer divs
				
					var addheight = hoechster - $(reldevs[elms]).outerHeight(true);
//					document.getElementById('debugelm').innerHTML += " " + hoechster + "-" + $(reldevs[elms]).outerHeight(true) + " (" + $(reldevs[elms]).height() + ") ";
					// oben bündig:
					if (reldevsal[elms]==0) {
						if (addheight != 0) { 
							$(reldevs[elms]).append($('.FreeDspacerdiv').first().clone().height(addheight));
//							document.getElementById('debugelm').innerHTML += " -> " + addheight + " ";
						}

					}

					// unten bündig:
					if (reldevsal[elms]==1) {
						if (addheight != 0) { 
							$(reldevs[elms]).prepend($('.FreeDspacerdiv').first().clone().height(addheight));
//							document.getElementById('debugelm').innerHTML += " -> " + addheight + " ";
						}

					}

					// mittig:
					if (reldevsal[elms]==2) {
						if (addheight != 0) { 
							var half1 = Math.round(addheight / 2);
							var half2 = addheight - half1;
							$(reldevs[elms]).append($('.FreeDspacerdiv').first().clone().height(half1));
							$(reldevs[elms]).prepend($('.FreeDspacerdiv').first().clone().height(half2));
//							document.getElementById('debugelm').innerHTML += " -> " + half1 + "/" + half2 + " ";
						}

					}
					//goldener schnitt oben
					if (reldevsal[elms]==3) {
						if (addheight != 0) { 
							var half1 = Math.round(addheight / 3.333);
							var half2 = addheight - half1;
							$(reldevs[elms]).append($('.FreeDspacerdiv').first().clone().height(half1));
							$(reldevs[elms]).prepend($('.FreeDspacerdiv').first().clone().height(half2));
//							document.getElementById('debugelm').innerHTML += " -> " + half1 + "/" + half2 + " ";
						}
					}
					//goldener schnitt unten
					if (reldevsal[elms]==4) {
						if (addheight != 0) { 
							var half2 = Math.round(addheight / 3.333);
							var half1 = addheight - half2;
							$(reldevs[elms]).append($('.FreeDspacerdiv').first().clone().height(half1));
							$(reldevs[elms]).prepend($('.FreeDspacerdiv').first().clone().height(half2));
//							document.getElementById('debugelm').innerHTML += " -> " + half1 + "/" + half2 + " ";
						}
					}

//					document.getElementById('debugelm').innerHTML += ">" + hoechster + ". ";
				}
			}
		}

//		CheckDivHeights();

		//needs to be done every time
		//hide again all hidden divs
		$(".showroomhidden").css("display","none");
		//remove hidden marker from class
		$(".showroomhidden").removeClass("showroomhidden");

		setshowroom();

//		document.getElementById('debugelm').innerHTML += "im done alright || ";
	}

};

// var divheightaktiv = window.setInterval("CheckDivHeights()", 1000);
// var divcheckstotal = 0;
// function CheckDivHeights() {

//	hier soll der kram von oben hin

//	divcheckstotal = divcheckstotal + 1;
//	if (divcheckstotal >= 4)
//	window.clearInterval(divheightaktiv);
//}


function Fensterweite() {
   return $("body").innerWidth();
//   if (window.innerWidth) return window.innerWidth;
//   else if (document.body && document.body.offsetWidth) return document.body.offsetWidth;
//   else return 0;
}

function Fensterhoehe() {
   return $("body").innerHeight();
//   if (window.innerHeight) return window.innerHeight;
//   else if (document.body && document.body.offsetHeight) return document.body.offsetHeight;
//   else return 0;
}

function setshowroom() {

	// make showroom big for testing
	$('#showroom').css('width','50000');

	var countwidth = 0;
	var countvisibles = 0;
	var countvisible = "block";
	$('#showroom').children().each(function(){ 
		if ($(this).css('display') != "none" && $(this).width() > 0) {
//			document.getElementById('debugelm').innerHTML += "<span style='color:#aaaaaa;'> show:" + $(this).attr("id") + " " + $(this).outerWidth(true) + "vs" + $(this).outerWidth() + "<span> ";
//			countwidth = countwidth + $(this).width();
			countvisibles++;
			countwidth = countwidth + $(this).outerWidth(true);
		}
		else {
//			document.getElementById('debugelm').innerHTML += " hidden:" + $(this).attr("id");
		}
	});

//	make some safety space
	countwidth = countwidth + Math.round(countvisibles * 0.5);

	$('#showroom').css('width',countwidth);
//	document.getElementById('debugelm').innerHTML += " showroom size:" + countwidth + "px (" + countvisibles + " elements) ";


//	document.getElementById('debugelm').innerHTML += " scale ";
//	$('div').each(function(index) {
//		if ($(this).css("display")=="none") { 
//			document.getElementById('debugelm').innerHTML += " " + index + ':' + $(this).attr("id");
//		}
//	});

//	document.getElementById('debugelm').innerHTML += " arrowright:";
//	$(".arrow_right").each(function(index) {
//		document.getElementById('debugelm').innerHTML += " " + index + ':' + $(this).parent().parent().css("display");
//	});
//	document.getElementById('debugelm').innerHTML += " groupmiddle:";
//	$(".group_middle").each(function(index) {
//		document.getElementById('debugelm').innerHTML += " " + index + ':' + $(this).parent().parent().css("display");
//	});
//	document.getElementById('debugelm').innerHTML += " arrowleft:";
//	$(".arrow_left").each(function(index) {
//		document.getElementById('debugelm').innerHTML += " " + index + ':' + $(this).parent().parent().css("display");
//	});
}

function scalefonts(really) {
if (really) {
	FreeD.scalefont=true;
	var Weite = Fensterweite();

// eigentlich diese Werte aus den CSS Dateien lesen. Aber zum Testen mal hier definiert:
	var bodypercent = 75;
	var h1percent = 350;
	var h2percent = 150;
	var h3percent = 150;
	var h4percent = 133.33;
	var h5percent = 116.67;
	var h6percent = 200;

	var defaultweite = 1000;
	var percentstep = 4;

	var bodyfontscaler = 0.5;

	var Wgroupstart = 110;
	var Wscrollcontentitem = 100;
	var Wgroupmiddle = 100;
	var Warrowright = 16;
	var Warrowleft = 16;

// für datatrade special scales. 1) eine limiter für die Seitenbreite und 2) ein limiter für die größe des Mainarticle Bildes 3) anpassung der showroom element breite

	// Datatrade Seitenränder anpassen
	var pagemaxwidth = 94;
	var biggerborders = pagemaxwidth;
	if (Weite>1024) { biggerborders = step(pagemaxwidth - (Weite - defaultweite)/60, 1);}
	$(".page_margins").css("maxWidth",biggerborders +"%");

	// Datatrade Main picture anpassen
	var mainpicturesize = 100;
	if (Weite>1000) { mainpicturesize = step(100 - (Weite - defaultweite)/30,5);}
	var mainpictureexist = false;
	$(".mainpicture").each(function(index) { mainpictureexist = true; });
	if (mainpictureexist) {
		$(".mainpicture").attr("alt",mainpicturesize +"%");
		var oldfreename = $(".mainpicture").attr("name");
		var oldfreenamebits = oldfreename.split("|");
		var newfreename = oldfreenamebits[0];
		for (nuff=1;nuff<oldfreenamebits.length-1;nuff++) {newfreename += "|" + oldfreenamebits[nuff];}
		newfreename += "|" + mainpicturesize/100;
		$(".mainpicture").attr("name",newfreename);
	}

	var newbodypercent = (Weite-defaultweite)/20*(bodypercent/100)+bodypercent;
	newbodypercent = step(newbodypercent,percentstep);

	//Datatrade showroomitems anpassen
//	var widthchange=(newbodypercent + bodypercent)/(bodypercent*2);
	var widthchange=newbodypercent/bodypercent;
	$(".scroll-content-item").css("width",step(Wscrollcontentitem*widthchange,4));
	$(".group_start").css("width",step(Wgroupstart*widthchange,4));
	$(".arrow_left").css("width",step(Warrowleft*widthchange,4));
	$(".arrow_right").css("width",step(Warrowright*widthchange,4));

	var smallfonthelper = 1;
	var headlinecruncher = h2percent;
	var mainheadlinecruncher = h1percent;

	if (Weite<=1000) {
		mainheadlinecruncher=parseInt(h1percent * Weite/1000);
		if (mainheadlinecruncher<160) {mainheadlinecruncher=160;}
		headlinecruncher=parseInt(h2percent * Weite/1000);
		if (headlinecruncher<h5percent) {headlinecruncher=h5percent;}

//		mainheadlinecruncher=0.47+parseInt(Weite/1000*53)/100;
//		headlinecruncher=0.47+parseInt(Weite/1000*53)/100;
//		mainheadlinecruncher=0.47+parseInt(Weite/1000*53)/100;
//		mainheadlinecruncher=parseInt(Weite/1000*100)/100;
	}

	if (Weite<=800) {
		smallfonthelper=0.27+parseInt(Weite/800*73)/100;
	}

//	document.getElementById('debugelm').innerHTML += "SCALEFONT: " + smallfonthelper + "->" + parseInt(12*Weite/1000/smallfonthelper) + ", " + headlinecruncher + "->" + parseInt(167*headlinecruncher)/100 + " || ";
//	document.getElementById('debugelm').innerHTML += Weite + " ";

	for (var sf=0; sf<document.getElementsByTagName("body").length; sf++) { 
		document.getElementsByTagName("body")[sf].style.fontSize=newbodypercent +"%"; 
	}

	for (sf=0; sf<document.getElementsByTagName("h1").length; sf++) { 
		document.getElementsByTagName("h1")[sf].style.fontSize=mainheadlinecruncher+"%"; 
	}

	for (sf=0; sf<document.getElementsByTagName("h2").length; sf++) { 
		document.getElementsByTagName("h2")[sf].style.fontSize=headlinecruncher+"%"; 
//		document.getElementsByTagName("h2")[sf].style.fontSize=parseInt(167*headlinecruncher)/100 +"em"; 
	}

	for (sf=0; sf<document.getElementsByTagName("h3").length; sf++) { 
//		document.getElementsByTagName("h3")[sf].style.fontSize=parseInt(167*headlinecruncher)/100 +"em"; 
	}
//		document.writeln("body { font-size: "+ parseInt(12*Weite/1000/multiplyer) +"pt; }");
//		document.writeln("h1 { font-size:"+ parseInt(48*Weite*multiplyer/1000) + "pt; }");
//		document.writeln("h3 { font-size:"+ parseInt(20*Weite*multiplyer/1000) + "pt; }");
}
}

BrowserDetect.init();

function correctPNG() {
	for(var i=0; i<document.images.length; i++)
	{
		var img = document.images[i]
		var imgName = img.src.toUpperCase()
		if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
		{
			var imgID = (img.id) ? "id='" + img.id + "' " : ""
			var imgClass = (img.className) ? "class='" + img.className + "' " : ""
			var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
			var imgStyle = "display:inline-block;" + img.style.cssText 
			if (img.align == "left") imgStyle = "float:left;" + imgStyle
			if (img.align == "right") imgStyle = "float:right;" + imgStyle
			if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle		
			var strNewHTML = "<span " + imgID + imgClass + imgTitle
				+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
				+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
				+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
			img.outerHTML = strNewHTML
			i = i-1
		}
	}
}

if (BrowserDetect.browser=="Explorer") { 
	if (BrowserDetect.version=="6") { 
//		window.attachEvent("onload", correctPNG); 
	} 
}
else { window.onresize = neuAufbau; }

function step(stepme, step) {
	var newresult = parseInt(stepme/step)*step;
	return newresult;
}

var savedWeite=0;
function neuAufbau() {
	if (BrowserDetect.browser=="Explorer") {
		if (document.documentElement.clientWidth!=savedWeite) {
//			window.location.href =window.location.href;
			savedWeite=document.documentElement.clientWidth;
			scalefonts(FreeD.scalefont);
			FreeD.cleanup();
		}
	}
	else {
//		window.location.href =window.location.href;
		scalefonts(FreeD.scalefont);
		FreeD.cleanup();
	}
//	window.location.href =window.location.href;
}

$(document).ready(function() {
//	$("#debugelm").css("border","3px solid red");
});

function showelm1(thiselm) {
	var thiselmcount = thiselm.childNodes.length;
	for(var i=0; i<thiselmcount; i++) {
		if (thiselm.childNodes[i].nodeName=="DIV") {
			thiselm.childNodes[i].style.display = "block";
		}
	}
}

function hideelm1(thiselm) {
	var thiselmcount = thiselm.childNodes.length;
	for(var i=0; i<thiselmcount; i++) {
		if (thiselm.childNodes[i].nodeName=="DIV") {
			thiselm.childNodes[i].style.display = "none";
		}
	}
}

function setscroll(thiselm,mode) {
	//mode: 0 = sroll to end; 1 = scroll to beginning; 2 = ?
	var mywindowwidth = $("body").innerWidth();
	var mypagewidth = $(".page_margins").innerWidth();
	var leftbar = Math.round((mywindowwidth-mypagewidth)/2);
	var myscrollleft = $("#scrollpr").scrollLeft();
//	if (myscrollleft<0) { myscrollleft=0; }
	var ichoffset = $("#"+thiselm).offset();
	ichoffset.left = Math.round(ichoffset.left - leftbar);
//	var mygroup = parseInt($(".group_start").css("width"));
	var mygroup = $(".group_start").innerWidth();
	var ichsize = $("#"+thiselm).innerWidth();
	var mybegin = myscrollleft + ichoffset.left - mygroup -6;
	var myend = myscrollleft + ichoffset.left + ichsize;
	
	if (mode==0) {
		if (mybegin<myscrollleft) {myscrollleft = mybegin;}
		if (myend>(mypagewidth+myscrollleft)) {	myscrollleft = myend - mypagewidth;}
	}
	if (mode==1) {
		if (myend>(mypagewidth+myscrollleft)) {	myscrollleft = myend - mypagewidth;}
		if (mybegin<myscrollleft) {myscrollleft = mybegin;}
	}
	$("#scrollpr").scrollLeft(myscrollleft);

//	var mywindowwidth = Fensterweite();
//	var mywindowwidth = $(".page_margins").outerWidth(true);
//	var leftbar = Math.round((mywindowwidth-mypagewidth)/2);
//	var leftbar = $(".page_margins").css("marginLeft");
//	var ichoffset = $("#"+thiselm).children().last().offset();
//	var ichoffset = $("#"+thiselm+"l").offset();
//	var parentoffset = $("#"+thiselm).parent().offset();
//	var ichsize = $("#"+thiselm).children().last().innerWidth();
//	document.getElementById('debugelm').innerHTML += "|| window:" + mywindowwidth + " + page:" + mypagewidth + " ";
//	document.getElementById('debugelm').innerHTML += "|| border:" + leftbar + " + scroll:" + myscrollleft + " + parent:" + Math.round(parentoffset.left) + " + me.left:" + Math.round(ichoffset.left) + " + width:" + Math.round(ichsize) + " ";
//	document.getElementById('debugelm').innerHTML = "page:" + mypagewidth + " border:" + leftbar + " + scroll:" + myscrollleft + " + left:" + Math.round(ichoffset.left) + " + width:" + Math.round(ichsize) + " myend:" + myend + " mybegin:" + mybegin + "mygroup:" + mygroup;
}


function showmodel(thiselm) {
	$("#"+thiselm).css("display","block");
//	document.getElementById(thiselm).style.display = "block";
	$("#"+thiselm+"b").css("display","none");
//	document.getElementById(thiselm).style.display = "none";
	setshowroom();
	setscroll(thiselm,0);
}

function hidemodel(thiselm) {
	$("#"+thiselm).css("display","none");
//	document.getElementById(thiselm).style.display = "none";
	$("#"+thiselm+"b").css("display","block");
//	document.getElementById(thiselm).style.display = "block";
	setshowroom();
	setscroll(thiselm+"b",1);
}