/*
 *	'Framework' UI Framework, early Alpha
 *	Made by Ronni Persson
 *
 */

framework.Extend({
	ui: {
		form: {
			Checkbox: function(options)
			{
				if (!framework.core.CheckOptions(options, ['normal','checked','selector'])) return;
				
				var normal = new Image();
				normal.src = options.normal;
	
				var checked = new Image();
				checked.src = options.checked;
				
				window.setTimeout(function(){
					framework.GetElements(options.selector).foreach(function(){
						if (!(framework.NodeName(this) == 'input' && this.type == 'checkbox')) return;
						var cb = this;
						var im = document.createElement('img');
						im.src = this.checked ? checked.src : normal.src;
						im.onclick = function(){
							cb.checked = !cb.checked;
							this.src = cb.checked ? checked.src : normal.src;
						}
						/*
						var rp = document.createElement('div');
						rp.className = this.checked ? options.checked : options.normal;
						rp.onclick = function(){
							cb.checked = !cb.checked;
							this.src = cb.checked ? checked.src : normal.src;
						}
						*/
						this.parentNode.insertBefore(im, this);
						this.style.display = 'none';
					});
				}, 1);
			},
			Radio: function(options)
			{
				if (!framework.core.CheckOptions(options, ['normal','checked','selector'], {allowDeselect: false})) return;
	
				var normal = new Image();
				normal.src = options.normal;
	
				var checked = new Image();
				checked.src = options.checked;
				
				window.setTimeout(function(){
					framework.GetElements(options.selector).foreach(function(){
						if (!(framework.NodeName(this) == 'input' && this.type == 'radio')) return;
						var cb = this;
						var im = document.createElement('img');
						//var im = document.createElement('div');
						cb._replacement = im;
						im.src = this.checked ? checked.src : normal.src;
						//im.className = this.checked ? options.checked : options.normal;
						im.onclick = function(){
							if (cb.checked == true && options.allowDeselect == true)
							{
								cb.checked = false;
								//this.className = options.normal;
								this.src = normal.src;
								return;
							}
							framework.GetElements(options.selector).foreach(function(){
								this.checked = false;
								this._replacement.src = normal.src;
								//this._replacement.className = options.normal;
							});
							cb.checked = true;
							//this.className = options.checked;
							this.src = checked.src;
						}
						this.parentNode.insertBefore(im, this);
						this.style.display = 'none';
					});
				}, 1);
			},
			Select: function(options)
			{
				if (!framework.core.CheckOptions(options, ['normal','clicked','dropdown','selector'], {useFirstOptionAsLabel: false, relative: {top: 0, left: 0}, use2DWrappers: false, forceLabel: false })) return;
				
				window.setTimeout(function(){
					framework.GetElements(options.selector).foreach(function(){
						if (!(framework.NodeName(this) == 'select')) return;
						var select = this;
						if (document.getElementById(select.id+'_replacement'))
						{
							var _rep = document.getElementById(select.id+'_replacement');
							var _opt = document.getElementById(select.id+'_options');
							if (_rep && _rep.parentNode)
							{
								_rep.parentNode.removeChild(_rep);
							}
							if (_opt && _opt.parentNode)
							{
								_opt.parentNode.removeChild(_opt);
							}
						}
						// Create select-replacement
						var replacement = document.createElement('div');
						if (select.id)
						{
							replacement.id = select.id+'_replacement';
						}
						replacement.className = options.normal;
						var replacementLabel = document.createElement('div');
						replacementLabel.className = 'label';
						replacementLabel.innerHTML = (options.forceLabel == true && options.useFirstOptionAsLabel == true ? select.options[0].text : select.options[select.selectedIndex].text);
						replacement.appendChild(replacementLabel);
						replacement.onclick = function(){
							if (roptions.style.display == 'none')
							{
								this.style.zIndex = '100';
								roptions.style.zIndex = '99';
								var offset = framework.GetOffset(this);
								this.className = options.normal + ' ' + options.clicked;
								roptions.style.display = 'block';
								roptions.style.position = 'absolute';
								roptions.style.top = (offset.top+offset.height+options.relative.top)+'px';
								roptions.style.left = (offset.left+options.relative.left)+'px';
							}
							else
							{
								this.style.zIndex = '1';
								roptions.style.zIndex = '1';
								this.className = this.className.replace(options.clicked, '');
								roptions.style.display = 'none';
							}
						}
						// Create options-replacement
						var roptions = document.createElement('div');
						roptions.style.display = 'none';
						roptions.className = options.dropdown;

						var roptions_list = document.createElement('ul');
						if (select.id)
						{
							roptions_list.id = select.id+'_options';
						}
					
						var option;
						var className;
						for (var n = 0, j = select.options.length; n < j; n++)
						{
							className = select.selectedIndex == n ? 'selected' : '';
							option = document.createElement('li');
							option.style.display = 'block';
							option.className = className;
							option.id = 'option_'+n;
							option.onclick = function(){
								roptions_list.childNodes[select.selectedIndex].className = '';
								var n = this.id.replace('option_','');
								select.options[n].selected = true;
								replacementLabel.innerHTML = select.options[n].text;
								this.className = 'selected';
								replacement.className = replacement.className.replace(options.clicked, '');
								roptions.style.display = 'none';
								if (select.onchange)
								{
									select.onchange();
								}
							}
							option.onmouseover = function(){
								this.className += ' hover';
							}
							option.onmouseout = function(){
								this.className = this.className.replace('hover','');
							}
							roptions_list.appendChild(option);
							option.innerHTML = select.options[n].text;
							if (options.useFirstOptionAsLabel && n == 0)
							{
								option.style.display = 'none';
							}
						}
						
						if (options.use2DWrappers == true)
						{
							var wrap;
							var pwrap;
							for (var q = 1; q <= 4; q++)
							{
								if (q == 1)
								{
									wrap = roptions;
									wrap.className = options.dropdown + ' ' + options.dropdown + '_wrap' + q;
								}
								else
								{
									wrap = document.createElement('div');
									wrap.className = options.dropdown + '_wrap' + q;
								}
								if (pwrap)
								{
									pwrap.appendChild(wrap);
								}
								else
								{
									document.body.appendChild(wrap);
								}
								pwrap = wrap;
							}
							pwrap = null;
							wrap.appendChild(roptions_list);
						}
						else
						{
							document.body.appendChild(roptions_list);
						}
						
						// Implements the possibility, via CSS, to relatively position the options-dropdown
						// Usage via CSS properties 'position' (set to 'relative'), 'top' and 'left' (only px)
						if (framework.GetStyle(roptions, 'position') == 'relative')
						{
							var top  = parseInt(framework.GetStyle(roptions, 'top'));
							var left = parseInt(framework.GetStyle(roptions, 'left'));
							if (top && top != 'NaN')
								options.relative.top = parseInt(top);
							if (left && left != 'NaN')
								options.relative.left = parseInt(left);
						}
						
						this.parentNode.insertBefore(replacement, this);
						this.style.display = 'none';
						// Close on document mousedown
						framework.event.Add(document, 'mousedown', function(e){
							e = e || event;
							var target = e.srcElement || e.target;
							if (target != roptions && target != replacement && target != replacementLabel && !framework.dom.ChildOf(roptions, target, true) && roptions.style.display == 'block')
							{
								replacement.style.zIndex = '1';
								roptions.style.zIndex = '1';
								replacement.className = replacement.className.replace(options.clicked, '');
								roptions.style.display = 'none';
							}
						})
					});
				}, 1);
			}
		}
	}
});