/**
 * Button configuration DIV parser.
 * @param configElemId
 */
function Config(configElemId) {
	this.configId = configElemId;
	this.configElem = document.getElementById(this.configId);
	this.buttons = {};
	this.parse();
	this.scrollUp = '<img src="image/arrow_up.png" style="margin-left: 49%;" onclick="scrollUp(this);">';
	this.scrollDown = '<img src="image/arrow_down.png" style="top: 9px; margin-left: 49%;" onclick="scrollDown(this);">';
}

Config.prototype.eventMark = "_eh_";

/**
 * Parse given DIV content and create/register eventHandlers on cloned button DIVs.
 * Any key of 
 */
Config.prototype.parse = function() {
	var textToParse = this.configElem.innerHTML;
	var rawLines = textToParse.split(";");
	for (var i = 0; i < rawLines.length; i++) {
		var line = rawLines[i].trim();
		if (line != null && line != "") {
			var x = line.split("#");
			if (x.length > 1) {
				var obj = {};//holds one line of the config div
				var buttonId = x[0].trim(); 
				for (var j = 1; j < x.length; j++) {
					var xj = x[j].trim();
					if (xj != "") {
						var pair = x[j].trim().split("=");
						var name = pair[0].trim();
						var value = pair[1].trim();
						if (name && value) {
							if (name == "coord" || name == "size") {
								var tmp = value;
								value = [];
								value.push(parseInt(tmp.substring(0,1)));
								value.push(parseInt(tmp.substring(1,2)));
								obj[name] = value;
							} else {
								obj[this.eventMark + name] = value;
							}
						}
					}
				}
				obj.clicked = false;
				obj.over = false;
				obj.id = buttonId;
				this.buttons[buttonId] = obj;
			}
		}
	}
};

/** 
 * @param id button id (see index.html)
 * @return configuration of a button
 */
Config.prototype.getButtonConfig = function(id) {
	return this.buttons[id];
};

/**
 * @param id button id (see index.html)
 * @return
 */
Config.prototype.getButton = function(id) {
	var b = this.buttons[id].button;
	if (b != null) {
		return b;
	}
	this.buttons[id].button = b = document.getElementById("cloned_" + id);
	return b;
};

/**
 * Get pressed button configuration.
 * @return
 */
Config.prototype.getActiveButtonConfig = function() {
	for (var key in this.buttons) {
		if (key != "undefined") {
			if (this.buttons[key].clicked) {
				this.getInfoBox(key);
				return this.buttons[key];
			}
		}
	}
	return null;
};

/**
 * @param id button id (see index.html)
 * @return DIV element linked to button with button id
 */
Config.prototype.getInfoBox = function(id) {
	if (id == null || id == "") {
		return null;
	}
	var i = this.buttons[id].infoBox;
	if (i != null) {
		return i;
	}
	this.buttons[id].infoBox = i = document.getElementById("i" + id.substring(1));
	if (i != null) {
		/* create control elements */
		/* top (X) container */
		var xc = document.createElement('div');
		xc.style.position = 'absolute';
		xc.style.top = '0px';
		xc.style.left = '0px';
		xc.style.width = '100%';
		xc.style.height = '26px';
		xc.style.padding = '0px';
		xc.style.color = '#00ff00';
		//xc.style.textAlign = 'center';
		xc.style.verticalAlign = 'middle';
		xc.id = 'xc' + id;
		xc.innerHTML = this.scrollUp;//important for creating the first child node
		
		/* X */
		var x = document.createElement('div');
		x.style.fontFamily = "BankGothicMdBTMedium";
		x.style.fontWeight = 'bold';
		x.style.color = '#000000';
		x.style.backgroundColor = '#00ff00';
		x.style.fontSize = '100%';
		x.style.width = '27px';
		x.style.height = '24px';
		x.style.lineHeight = '110%';
		x.style.cursor = 'pointer';
		x.style.borderBottom = '2px solid #00ff00';
		x.style.borderLeft = '2px solid #00ff00';
		x.style.padding = '0';
		x.style.margin = '0';
		x.style.textAlign = 'center';
		x.style.verticalAlign = 'middle';
		x.style.cssFloat = x.style.styleFloat = 'right';
		x.innerHTML = 'X';
		x.id = 'x' + id;
		
		/* bottom container */
		var bc = document.createElement('div');
		bc.style.position = 'absolute';
		bc.style.bottom = '0px';
		bc.style.left = '0px';
		bc.style.width = '100%';
		bc.style.height = '26px';
		bc.style.padding = '0px';
		bc.style.color = '#00ff00';
		//bc.style.textAlign = 'center';
		bc.style.verticalAlign = 'middle';
		bc.id = 'bc' + id;
		bc.innerHTML = this.scrollDown;
		
		addEvent(x, 'click', hideParent);
		addEvent(i.children[0], 'scroll', inspectScroll);
		xc.appendChild(x);
		i.appendChild(xc);
		i.topControl = xc;
		i.bottomControl = bc;
		i.content = i.children[0];
		i.appendChild(bc);
		this.buttons[id].infoBoxControl = xc;
		this.buttons[id].infoBoxBottom = bc;
		
		/* register inner resizable objects */
		var items = i.getElementsByTagName("img");
		var cc = 0;
		for (var ii = 0; ii < items.length; ii++) {
			var item = items[ii];
			if (item.id == null || item.id == '') {
				item.id = id + '_img_' + cc;
				cc++;
			}
			var imgObj = MSIE ? new Image() : document.createElement('img');
			imgObj.src = item.src;
			this.createRenderObject(item, new Anim(imgObj.width, imgObj.height));
			delete imgObj;
		}
	}
	return i;
};

/**
 * Callable after the first getInfoBox() call.
 */
Config.prototype.getElemConfig = function(elem) {
	for (var i = 0; i < this.buttons.lngth; i++) {
		if (this.buttons[id].infoBox == elem) {
			return this.buttons[id];
		}
	}
	return null;
};

/**
 * @param id button id
 * @return closing control of a content DIV
 */
Config.prototype.getInfoBoxControl = function(id) {
	if (this.buttons[id].infoBoxControl == null) {
		this.getInfoBox(id);
	}
	return this.buttons[id].infoBoxControl;
};

/**
 * @param id button id
 * @return bottom control of a content DIV
 */
Config.prototype.getInfoBoxBottom = function(id) {
	if (this.buttons[id].infoBoxBottom == null) {
		this.getInfoBox(id);
	}
	return this.buttons[id].infoBoxBottom;
};

/**
 * Create renderer object
 * @param elem HTML element to be registered
 * @param animation simple animation variant
 */
Config.prototype.createRenderObject = function (elem, animation) {
	/* non-positioned resizable only */
	renderObjects.push({'type': "static", 'elem': elem, 'animation': animation, 'alive': false});
};