function ColorField(colorPicker, id, color, cmykColor) {
	this.prefix = "colorpicker";
	this.selectedBorder = "2px #3e6ec8 solid";
	this.deselectedBorder = "2px #F0F0F0 solid";
	this.size = 20;
	
	this.colorPicker = colorPicker;
	this.id = id;
	this.color = color;
	this.cmykColor = cmykColor;
	
	this.getHtmlId = function() {
		return this.prefix+"_"+this.colorPicker.id+"_"+this.id;
	}
	
	this.setBorder = function(value) {
		var element = document.getElementById(this.getHtmlId());
		if (element != null) element.style.border = value;
	}
	
	this.write = function() {
		document.write("<td>");
		document.write("<a id=\""+this.getHtmlId()+"\" onClick=\"onColorPickerSelect("+this.colorPicker.id+", "+this.id+")\" style=\"background-color:"+this.color+"; display:block; width:"+this.size+"px; height:"+this.size+"px;\"></div>");
		document.write("</td>");
		this.deselect();
	}
	
	this.select = function() {
		this.setBorder(this.selectedBorder);
	}
	
	this.deselect = function() {
		this.setBorder(this.deselectedBorder);
	}
}

function ColorPicker(id, textFieldId, label) {
	this.id = id;
	this.textFieldId = textFieldId;
	this.selectedColorField = null;
	this.colorFields = new Array();
	this.group = null;
	this.label = label;
	
	this.getTextField = function() {
		return document.getElementById(textFieldId);
	}
	
	this.addColorField = function(color, cmykColor) {
		var colorFieldId = this.colorFields.length;
		this.colorFields[colorFieldId] = new ColorField(this, colorFieldId, color, cmykColor);
	}
	
	this.write = function() {
		document.write("<table border=\"0\" cellpadding=\"2\"><tr><td><table border=\"0\"><tr><td>");
		for (var i = 0; i < 7; i++) {  //this.colorFields.length
			this.colorFields[i].write();
		}
		document.write("</td></tr><tr><td>");
		for (var i = 8; i < this.colorFields.length; i++) {
			this.colorFields[i].write();
		}
		document.write("</td></tr></table></td><td width=\"50\"></td></tr></table>");
		this.selectColor(this.getTextField().value);
	}
	
	this.selectColor = function(color) {
		for (var i = 0; i < this.colorFields.length; i++) {
			//if (this.colorFields[i].color == color) {
			if (this.colorFields[i].cmykColor == color) {
				this.selectColorField(this.colorFields[i]);
				return;
			}
		}
		this.selectColorField(this.colorFields[0]);
	}
	
	this.selectColorField = function(colorField) {
		var firstSetsAllCheckBox = document.getElementById("firstsetsallcheckbox");
		if (firstSetsAllCheckBox != null) this.group.firstSetsAll = firstSetsAllCheckBox.checked;
		for (var i = 0; i < this.colorFields.length; i++) {
			this.colorFields[i].deselect();
		}
		colorField.select();
		this.selectedColorField = colorField;
		this.getTextField().value = this.selectedColorField.cmykColor;
		if (this.group != null) {
			if ((this.group.firstSetsAll) && (this.group.getColorPickerIndex(this) == 0)) {
				for (var i = 1; i < this.group.colorPickers.length; i++) {
					//this.group.colorPickers[i].selectColor(this.selectedColorField.color);
					this.group.colorPickers[i].selectColor(this.selectedColorField.cmykColor);
				}
			}
		}
	}
	
	//schwarz
	this.addColorField("#000000", "100 100 100 100");
	//grau
	this.addColorField("#CCCCCC", "0 0 0 30");
	//weiß
	this.addColorField("#FFFFFF", "0 0 0 0");
	//orange
	this.addColorField("#FF9900", "0 65 100 0");
	//rot
	this.addColorField("#FF0000", "0 100 100 0");
	//dunkelrot
	this.addColorField("#CC0000", "30 100 70 0");
	//gelb
	this.addColorField("#FFFF33", "0 0 100 0");
	//grün
	this.addColorField("#33CC33", "100 0 90 20");
	//grün
	this.addColorField("#33CC33", "100 0 90 20");
	//hellgrün
	this.addColorField("#66FF66", "45 0 75 0");
	//rosa
	this.addColorField("#FF33CC", "20 100 20 0");
	//blau
	this.addColorField("#3333FF", "100 80 0 0");
	//cyan
	this.addColorField("#00CCFF", "100 0 0 0");
}

function ColorPickerGroup() {
	this.colorPickers = new Array();
	this.firstSetsAll = false;
	
	this.getColorPickerIndex = function(colorPicker) {
		for (var i = 0; i < this.colorPickers.length; i++) {
			if (this.colorPickers[i] == colorPicker) return i;
		}
		return -1;
	}
}

function ColorPickerManager() {
	this.colorPickers = new Array();
	
	this.createColorPicker = function(textFieldId, label) {
		var colorPickerId = this.colorPickers.length;
		var colorPicker = new ColorPicker(colorPickerId, textFieldId, label);
		this.colorPickers[colorPickerId] = colorPicker;
		return colorPicker;
	}
	
	this.getColorPicker = function(colorPickerId) {
		return this.colorPickers[colorPickerId];
	}
}

function ColorPickerCalendarColorGroup(textFieldsBaseId, label) {
	this.group = new ColorPickerGroup();
	
	for (var i = 0; i < 12; i++) {
		var colorPicker = colorPickerManager.createColorPicker("FIELD_"+FieldIDs[textFieldsBaseId+(i+1)], label);
		this.group.colorPickers.push(colorPicker);
		colorPicker.group = this.group;
	}
}

function ColorPickerCalendarGroup() {
	this.calendarColorGroups = new Array();
	
	this.write = function() {
		for (var i = 0; i < 12; i++) {
			document.write("<div id=\"colorpicker_page"+(i+1)+"\" style=\"display:none\">");
			document.write("<br /><span class=\"upperCaseHeadline\">Kalenderseite "+(i+1)+"</span><br /><br />");
			if (i == 0) {
				// hack
				//document.write("<input type=\"checkbox\" id=\"firstsetsallcheckbox\" checked=\"checked\" />Setze f&uuml;r alle Seiten<br /><br />");
				document.write("<br /><b>Kalendarium nach Deinen W&#252;nschen</b><br /><br /><input type=\"checkbox\" id=\"firstsetsallcheckbox\" /> Willst Du die Farben Deines Kalendariums f&#252;r alle Monatsseiten festlegen, dann setze zun&#228;chst den Haken an dieser Stelle und w&#228;hle Deine Farben. Einmal gesetzt, werden die &#196;nderungen &#252;bernommen. <br /><br />");
			}
			for (var j = 0; j < this.calendarColorGroups.length; j++) {
				var colorPicker = this.calendarColorGroups[j].group.colorPickers[i];
				document.write(colorPicker.label);
				colorPicker.write();
			}
			document.write("</div>");
		}
	}
	
	this.showPage = function(nr) {
		for (var i = 0; i < 12; i++) {
			document.getElementById("colorpicker_page"+(i+1)).style.display = "none";
		}
		var element = document.getElementById("colorpicker_page"+nr);
		if (element != null) element.style.display = "block";
	}
	
	this.setFirstSetsAll = function(value) {
		// hack
		/*for (var i = 0; i < this.calendarColorGroups.length; i++) {
			this.calendarColorGroups[i].group.firstSetsAll = value;
		}*/
		
		for (var i = 0; i < this.calendarColorGroups.length; i++) {
			this.calendarColorGroups[i].group.firstSetsAll = false;
		}
	}
	this.calendarColorGroups.push(new ColorPickerCalendarColorGroup("calendarBackgroundColor", "Hintergrund"));
	this.calendarColorGroups.push(new ColorPickerCalendarColorGroup("dayOfWeekColor", "Wochentage"));
	this.calendarColorGroups.push(new ColorPickerCalendarColorGroup("dayColor", "Datum"));
	this.calendarColorGroups.push(new ColorPickerCalendarColorGroup("saturdayColor", "Samstage"));
	this.calendarColorGroups.push(new ColorPickerCalendarColorGroup("sundayColor", "Sonntage"));
	this.calendarColorGroups.push(new ColorPickerCalendarColorGroup("holidayColor", "Feiertage"));
	this.calendarColorGroups.push(new ColorPickerCalendarColorGroup("backgroundColor", "Hintergrundfl&#228;che Kalendarium<br /> <font size=1 color=#666666>Funktioniert nur wenn Diese in der Vorlage vorhanden.</font>"));

}

var colorPickerManager = new ColorPickerManager();

function onColorPickerSelect(colorPickerId, colorFieldId) {
	var colorPicker = colorPickerManager.getColorPicker(colorPickerId);
	colorPicker.selectColorField(colorPicker.colorFields[colorFieldId]);
}



function disableCalendarCalculateCheckboxOnNext(fieldName) {
	document.getElementById("StepArea_ctl07_TheLabelButton").onclick = function() {
	  document.getElementById("FIELD_"+FieldIDs[fieldName]).checked = false;
	}
}



function alertWrongImage(message)
{
try{
	var params = message.split("_");
	
	var varName = params[1];
	var warnFlag = params[0];
	
	var warnOnly = true;
	if(warnFlag == "err")
		warnOnly = false;

	var fieldID = 'FIELD_' + FieldIDs[varName];
	var divID = "DIV_" + FieldIDs[varName];
	var inputForImage = 'FIELD_' + FieldIDs[varName] + "_IMGNAME";
	
	//Label des Bildes aus dem Paragrpah in dem Div:
	var label;
	if(document.getElementById(divID).childNodes[0].textContent == null)
		label = document.getElementById(divID).childNodes[0].innerHTML;
	else
		label = document.getElementById(divID).childNodes[0].textContent;
		
	//Melden
	if(warnOnly)
	{
		alert("Das Bild '" + label + "' hat ein falsches Format oder eine falsche Auflösung, dies kann die Druckqualität mindern!");
	}		
	else
	{
		alert("Das Bild '" + label + "' hat ein falsches Format oder eine falsche Auflösung, bitte laden Sie ein entsprechend aufgelöstes Bild hoch!");
		
		//So wirds nicht gedruckt, also Variable leeren:
		try
		{
			document.getElementById(fieldID).value = '';
		}
		catch(err)
		{	
		}
		try
		{
			document.getElementById(inputForImage).value = '';
		}
		catch(err)
		{	
		}
	}
}
catch (myError)
{}

	
}