var $D = $D || YAHOO.util.Dom;
var $E = $E || YAHOO.util.Event;
var $A = $A || YAHOO.util.Anim;
var $C = $C || YAHOO.util.ColorAnim;
var $CN = $CN || YAHOO.util.Connect;
var $M = $M || YAHOO.util.Motion;
var $DD = $DD ||YAHOO.util.DD;
var $ = $D.get;
var $S = $S || YAHOO.util.Selector;
var $$ = $$ || ($S ? $S.query : null);

window.Danbolig = window.Danbolig || {};

(function() {

	Danbolig.Chrome = {
		init: function() {
			this.initCompactLabels();
			this.Boxes.init();
			this.initFullClicker();
		},
		initCompactLabels: function() {
			var inputs = $$("#body .compact-label input");
			$E.on(inputs, "focus", onFocusHandler);
			$E.on(inputs, "blur", onBlurHandler);
			for (var i=0; i<inputs.length; i++)
				onBlurHandler.apply(inputs[i]);
		},
		initFullClicker: function() {
			var elms = $S.query("div.full-clicker");
			for (var i=0, elm; elm=elms[i]; i++) {
				var a = $S.query("a.full-clicker-link, a", elm, true);
				if (a) {
					var href = a.getAttribute("href", 2);
					if (href) {
						css(elm, { "cursor": "pointer" });
						elm._full_clicker_link = href;
						$E.on(elm, "click", function() { document.location = this._full_clicker_link; });
					}
				}
			}
		}
	};
	
	function onFocusHandler() {
		$D.setStyle(this, "background-color", "#fff");
	}
	function onBlurHandler() {
		if (!this.value) $D.setStyle(this, "background-color", "transparent");
	}
	
	function getLabelForFormElement(elm) {
		var labels = $S.query("label"); // YUI has lousy support for attribute matching in selector. Do manually.
		var _ = [];
		for (var i=0; i<labels.length; i++)
			if (labels[i].getAttribute("for") == elm.id || labels[i].getAttribute("htmlFor") == elm.id)
				return labels[i];
		return null;
	}
	
	Danbolig.Chrome.Boxes = {
		colors: { // 1 = outer border, 2 = outer fill, 3 = inner border, 4 = inner fill
			"default": ["ffffff", "c5c5c5", "c5c5c5", "ffffff"],
			"gray":    ["ffffff", "dadada", "dadada", "f6f6f6"],
			"brown":   ["ffffff", "ebe7de", "ebe7de", "f3f2ed"],
			"green":   ["ffffff", "09863a", "09863a", "f9f9f9"]
		},
		init: function() {
			//var boxes = $S.query("#body div[class*=dbg-i]"); // Bad YUI. This doesn't work when the div has a child div with an id...
			var boxes = $S.query("div.dbg-i1, div.dbg-i2, div.dbg-i3, div.dbg-i4, div.dbg-i1_2, div.dbg-i2_8");
			for (var b=0; b<boxes.length; b++) {
				var box = boxes[b];
				var width = box.offsetWidth;
				
				var box_colors = this.colors["default"];
				if (/\bdbg-color-(\w+)(\s|$)/.test(box.className)) {
					// Handle a predefined color mapping
					box_colors = this.colors[RegExp.$1];
				} else if (/\bdbg-color-([\da-f]{6})-([\da-f]{6})(?:-([\da-f]{6})-([\da-f]{6}))?(\s|$)/.test(box.className)) {
					// Handle 2 or 4 specific colors, #3 and #4 defaults to 2 and 1.
					box_colors = [RegExp.$1, RegExp.$2, RegExp.$3 || RegExp.$2, RegExp.$4 || RegExp.$1];
				}
				
				var padding = {
					x: $D.getStyle(box, "padding-left"),
					y: $D.getStyle(box, "padding-top")
				}
				
				var outer = document.createElement("div");
				outer.className = "dbg-wrapper-outer";
				css(outer, {
					"padding": "1px 0",
					"width": "100%",
					"background": "url(/static/boximage.ashx?w=" + width + "&bc=" + box_colors[0] + "&fc=" + box_colors[1] + ") repeat-y top left"
				});
				var inner = document.createElement("div");
				inner.className = "dbg-wrapper-inner";
				css(inner, {
					"background": "url(/static/boximage.ashx?w=" + width + "&bc=" + box_colors[2] + "&fc=" + box_colors[3] + ") repeat-y top left",
					"padding": padding.y + " " + (parseInt(padding.x) + 1) + "px",
					"overflow": "hidden",
					"zoom": "1"
				});
				while (box.firstChild) inner.appendChild(box.firstChild);
				outer.appendChild(inner);
				box.appendChild(outer);
				css(box, {
					"padding": "0",
					"border": "none",
					"background": "none",
					"width": width + "px"
				});
			}
		}
	};

	function css(element, hash) {
		for (var i in hash) $D.setStyle(element, i, hash[i]);
	}

	$E.onDOMReady(function() {
		Danbolig.Chrome.init();
	});

})();