reliance.load('browser');
// This file contains generic DOM-related utility functions only.
// For functions that are not DOM-related, include them in reliance.utilities.js
(function() {
	var _userAgent = navigator.userAgent.toLowerCase();

	// Gets the current style of an object reguardless if the style is inline or in a stylesheet.
	// Can be expensive especially if there are a lot of style declarations, use only when 
	// absolutely necessary. This is cross-browser. 
	function getCurrentStyle(element) {
		if (document.defaultView) {
			return document.defaultView.getComputedStyle(element, null);
		} else {
			return element.currentStyle;
		}
	}
	
	// Maps internet explorer event info over to gecko-based event info for cross browser support.
	function fixEvent(evnt) {
		if (evnt === undefined) evnt = window.event;
		if (evnt.layerX === undefined) evnt.layerX = evnt.offsetX;
		if (evnt.layerY === undefined) evnt.layerY = evnt.offsetY;
		if (evnt.which === undefined) evnt.which = evnt.button;
		if (evnt.target === undefined) evnt.target = evnt.srcElement;
		
		// Cross platform support for checking to see if a "modifier key" has been pressed. 
		// On a mac, the command key (metaKey) is the windows equivalent to the control key.
		evnt.modKey = evnt.metaKey || evnt.ctrlKey;
		return evnt;
	}
	
	// Gets the absolute pixel position of the element relative to the browser window.
	function getOffset(element) {
		var offset = {x:0, y:0, toString:function() { return '(' + this.x + ', ' + this.y + ')' } };
		while (element) {
			offset.x += element.offsetLeft;
			offset.y += element.offsetTop;
			element = element.offsetParent;
		}
		return offset;
	}
	
	function clearChildNodes(element) {
		var child;
		while (child = element.firstChild)
			element.removeChild(child);
	}
	
	function createFormElement(tag, opts) {
		opts = opts || {};
		var element;
		var name = opts.name || null;
		var id = opts.id || null;
		var type = opts.type || null;
		var width = opts.width || null;
		var size = opts.size || null;
		if (reliance.browser.isIE()) {
			element = document.createElement('<' + tag + (type ? ' type="' + type + '"' : '') + (name ? ' name="' + name + '"' : '') + (id ? ' id="' + id + '"' : '') + (size ? ' size="' + size + '"' : '') + '>' + (tag.match(/textarea/i) ? '</' + tag + '>' : ''));
		} else {
			element = document.createElement(tag);
			if (type)
				element.setAttribute('type', type);
			if (name)
				element.setAttribute('name', name);
			if (id)
				element.setAttribute('id', id);
			if (size)
				element.setAttribute('size', size);
		}
		if (type == 'image')
			element.style.cursor = 'pointer';
		if (width) {
			if (tag == 'input' && (!type || (type && type == 'text')))
				width = width - reliance.browser.inputWidthCorrection();
			element.style.width = width + 'px';
		}
			
		return element;
	}
	
	function getUniqueID(element, id) {
		var id = [element.id, id];
		var parent;
		while (parent = element.parentNode) {
			id.unshift(parent.id);
			element = parent;
		}
		return id.join('_');
	}
	
	function TextBox(id, opts) {
		opts = opts || {}

		var _width = (opts.width || 155) + 6;
		var _required = opts.required || false;

		var input = reliance.domUtilities.createFormElement('input', { type: 'text' });
		input.style.cssText = 'border:#7f9db9 1px solid; padding:2px';

		if (_required) {
			var dummySize = 16;

			//var uniqueID = getUniqueID(document.getElementById('test'), id);

			input.style.width = (_width - dummySize - 4) + 'px';
			input.style.paddingRight = dummySize + 'px';
			input.id = id;

			// TODO: remove hardcode
			var img = reliance.domUtilities.createPngElement('http://dev1.com/static/reliance.web.ui.webcontrols/textbox/requiredmask.png');
			img.style.width = '12px';
			img.style.height = '12px';
			img.style.position = 'absolute';
			img.style.left = '-1px';
			img.style.top = '-1px';
			img.className = 'Reliance_Web_UI_WebControls_TextBox_RequiredMask';

			var icon = document.createElement('div');
			icon.style.cssText = 'background-color:#999999; width:10px; height:10px; overflow:hidden; position:absolute; top:6px; right:5px';
			icon.appendChild(img);

			var label = document.createElement('label');
			label.style.cssText = 'cursor:text';
			label.htmlFor = id;
			label.appendChild(icon);

			var wrapper = document.createElement('div');
			wrapper.style.cssText = 'position:relative; width:' + _width + 'px';
			wrapper.appendChild(input);
			wrapper.appendChild(label);

			if (reliance.browser.isIE()) {
				var dummy = input.cloneNode(false);
				dummy.style.width = dummySize + 'px';
				dummy.style.borderLeft = '0px';
				dummy.style.cursor = 'text';
				dummy.style.padding = '2px 0px';
				dummy.readOnly = true;

				label.insertBefore(dummy, icon);

				input.style.borderRight = '0px';
				input.style.paddingRight = '0px';

				icon.style.top = '7px';
			}
			this.__n = wrapper;
		} else {
			input.style.width = (_width - 6) + 'px';
			this.__n = input;
		}

		this.__f = input;
	}
	TextBox.prototype.getNode = function() {
		return this.__n;
	}
	TextBox.prototype.getField = function() {
		return this.__f;
	}
	
	function pixelToEmSize(pixelSize) {
		if (isNaN(pixelSize)) return;
		return pixelSize * .0833;
	}

	// Creates a new Png image with the appropriate filter set if the 
	// browser does not natively support png images.
	function createPngElement(imagePath) {
		var png = document.createElement('img');
		png.src = imagePath;
		if (!reliance.browser.supportsNativePng()) {
			png.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + png.src + '\',sizingMethod=\'scale\')';
			png.src = reliance.loader.mediaPath() + '/global/invis.gif';
		}
		return png;
	}
	
	// Adds "idle" behavior to a text box.
	function IdleInputField(input, idleText, opts) {
		this.input = input;
		this.idleText = idleText;
		this.idleColor = opts && opts.idleColor ? opts.idleColor : '#999999';
		this.activeColor = opts && opts.activeColor ? opts.activeColor : '#000000';
		this.focus = function() {this.input.focus()}
		this.blur = function() {this.input.blur()}
		this.setValue = function(value) {
			this.input.value = value;
			this.input.style.color = this.activeColor;
			if (this.input.value.replace(/^\s*|\s*$/g, '').length == 0) { this.reset(); }
		}
		this.reset = function() {if (this.isIdle()) return; this.focus(); this.input.style.color = this.idleColor; this.input.value = this.idleText; this.blur(); reliance.event.trigger(this, 'reset')}
		this.isIdle = function() {return this.input.value.replace(/^\s*|\s*$/g, '') == this.idleText}
		this.getValue = function() {return this.input.value}
		input.style.color = this.idleColor;
		input.value = this.idleText;
		var self = this;
		reliance.event.addDomListener(input, 'focus', function() {
				if (self.isIdle()) {
					this.value = '';
					this.style.color = self.activeColor;
				}
			});
		reliance.event.addDomListener(input, 'keydown', function(evnt) {
				evnt = evnt || event;
				switch (evnt.keyCode) {
					case 27: // Escape key
						self.reset();
						break;
				}
			});
		reliance.event.addDomListener(input, 'blur', function() {
				if (this.value.replace(/^\s*|\s*$/g, '').length == 0) {
					this.style.color = self.idleColor;
					this.value = self.idleText;
					reliance.event.trigger(self, 'reset')
				}
			});
	}
	
	function applyStyle(node, styleOpts) {
		styleOpts = styleOpts || {};
		for (var style in styleOpts)
			node.style[style] = styleOpts[style];
	}

	var _symbols = [
		['getCurrentStyle', getCurrentStyle],
		['applyStyle', applyStyle],
		['fixEvent', fixEvent],
		['getOffset', getOffset],
		['clearChildNodes', clearChildNodes],
		['createFormElement', createFormElement],
		['TextBox', TextBox],
		['pixelToEmSize', pixelToEmSize],
		['createPngElement', createPngElement],
		['IdleInputField', IdleInputField]
	];
	window.reliance_exportSymbols('reliance.domUtilities', _symbols);
})();