/**
 * RESOLVE:
 * Organize the code in a more structured way to make adding possible changes easier, if necessary
 */

(function () {

	var $ = function (id) { return document.getElementById(id); };

	var Utility = {
		getElementsByClassName : function (target, className, isRecursive) {
			var result = [];
			var re = new RegExp('\\b' + className + '\\b');
			var elements = isRecursive ? target.getElementsByTagName('*') : target.childNodes;
			for (var i = 0, length = elements.length; i < length; i++) {
				var element = elements[i];
				if (element && element.className && element.className.match(re)) {
					result.push(element);
				}
			}
			return result;
		}
	};

	var TYPE_TO_CLASS_NAME = {  
		'small'  : 'SmallWidget', 
		'medium' : 'MediumWidget', 
		'big1'   : 'LargeWidget1', 
		'big2'   : 'LargeWidget2'
	};

	var CLASS_NAME_TO_TYPE = { 
		'SmallWidget'  : 'small', 
		'MediumWidget' : 'medium', 
		'LargeWidget1' : 'big1', 
		'LargeWidget2' : 'big2'
	};

	var containers = {
		types   : Utility.getElementsByClassName(document, 'WidgetSizes', true)[0],
		layouts : Utility.getElementsByClassName(document, 'WidgetColors', true)[0],
		preview : Utility.getElementsByClassName(document, 'WidgetArea', true)[0]
	};

	var current = { type : null };

	var defaults = {
		type : TYPE_TO_CLASS_NAME[$($('widgetTypeHolder').value).value],
		color : $($('widgetColorHolder').value).value || null
	}

	var setCurrentType = function (typeClassName) {
		containers.preview.className = typeClassName + ' WidgetArea';
		current.type = typeClassName;
		(function () {
			var isActiveLayoutSet = false;
			var items = containers.layouts.getElementsByTagName('li');
			for (var i = 0, length = items.length; i < length; i++) {
				var item = items[i];
				if (!item.className.match(new RegExp('\\b' + typeClassName + '\\b'))) {
					item.style.display = 'none';
				} else {
					item.style.display = '';
					if (!isActiveLayoutSet) {
						setActiveLayout(item.getElementsByTagName('a').item(0));
						isActiveLayoutSet = true;
					}
				}
			}
		})();
	};

	var setActiveLayout = function (trigger) {
		var items = containers.layouts.getElementsByTagName('a');
		for (var i = 0, length = items.length; i < length; i++) {
			var item = items[i];
			item.className = item.className.replace(/\s*Active/i, '');
			if (item == trigger) {
				item.className += ((0 < item.className.length) ? ' ' : '') + 'Active';
				var layout = (function (href) {
					var layout = href.replace(/^[^#]*#(.+)/gi, '$1');
					var match = current.type.match(/^LargeWidget([12])$/i);
					if (match) {
						return 'Form' + match[1] + ' F' + match[1] + layout;
					} else {
						return layout;
					}
				})(trigger.href);
				if (layout) {
					var iframe = containers.preview.getElementsByTagName('iframe').item(0);
					
					var url = document.getElementById('widgetBaseUrlHolder').value;
					var place = document.getElementById(document.getElementById('widgetPlaceUidHolder').value).value || '1';
					var color = layout.replace(/^(?:Form[12] F[12])?(.+?)Layout[12]?$/i, '$1');
					var type = CLASS_NAME_TO_TYPE[current.type];

					$($('widgetColorHolder').value).value = color;
					$($('widgetTypeHolder').value).value = type;

					iframe.src = url + '/' + place + '/' + type + '/' + color;
				}
			}
		}
	};

	(function () {
		var items = containers.types.getElementsByTagName('li');
		for (var i = 0, length = items.length; i < length; i++) {
			var item = items[i];
			var trigger = item.getElementsByTagName('a').item(0);
			if ((!defaults.type && 0 == i) || (defaults.type && defaults.type == item.className)) {
				trigger.className = 'Active';
				setCurrentType(item.className);
			}
			trigger.onclick = (function (parent) {
				return function () {
					var items = containers.types.getElementsByTagName('a');
					for (var i = 0, length = items.length; i < length; i++) {
						var item = items[i];
						item.className = item.className.replace(/\s*Active/i, '');
						if (item == this) {
							item.className += ((0 < item.className.length) ? ' ' : '') + 'Active';
						}
					}
					setCurrentType(parent.className);
					return false;
				};
			})(item);
		}
	})();

	(function () {
		var items = containers.layouts.getElementsByTagName('a');
		for (var i = 0, length = items.length; i < length; i++) {
			var item = items[i];
			if (defaults.color == item.href.replace(/^[^#]*#(.+?)Layout$/gi, '$1')) {
				setActiveLayout(item);
			}
			item.onclick = function () {
				setActiveLayout(this);
				return false;
			};
		}
	})();
})();