var DEBUG_IE = false; // Turn this on, if you really really want too
jQuery.debug = function(str)
{
	if(window.console)
	{
		window.console.log(str);
	 } else {
	// This is gonna ugly in IE ;P
	if(DEBUG_IE)
		alert(str);
	 }
}

var hlClr = '#ff0000';

function updatePreviewWindow() {
	_preview('body').html($('#sample').val());
	attachPreviewUID();
	getPreviewDomTree();
}

function resetPreviewValue() {
	$('#sample').val(_preview('body').html())
}

function attachPreviewUID() {
	var elements = $('body *', window.frames['preview'].document);
	for(var x = 0; x < elements.length; x++) {
		var e = $(elements[x]);
		e.addClass('DOMELEMENT[1000' + x + ']');
	}
}

function getPreviewDomTree() {
	$('#previewDom').empty();
	$('#previewDom').append(_getPreviewDomTreeRecursive(_preview('body').children()));
}

function _preview(expr) {
	return $(expr, window.frames['preview'].document)
}

function _getPreviewDomTreeRecursive(elements) {
	var ul = $(document.createElement('ul'));
	ul.addClass('domTreeList');
	ul.addClass('expanded');
	for(var x = 0; x < elements.length; x++) {
		var el = $(elements[x]);
		var li = $(document.createElement('li'));
		
		li.text(el[0].tagName + (el.attr('id') != undefined && el.attr('id').length > 0 ? '#' + el.attr('id') : ''));

		var uid = el.attr('class').match(/DOMELEMENT\[\d*]/ig);
		li.attr('rel', uid);

		li.dblclick(function(e) {
			var ul = $(this).children();
			ul.toggleClass('expanded');
			ul.toggleClass('collapsed');
			e.stopPropagation();
		});
		
		li.click(function(e) {
			$(this).toggleClass('selected');
			//if($(this).hasClass('selected')) {
				var uid = $(this).attr('rel');
				_preview("[class*='" + uid + "']").toggleClass('selectorSelection');
				$('#previewDomCurrent').empty();
				
				if (_preview("[class*='" + uid + "']").hasClass('selectorSelection') && _preview("[class*='" + uid + "']")[0].attributes.length > 0) {
				
					var attrs = _preview("[class*='" + uid + "']")[0].attributes;
					for (var x = 0; x < attrs.length; x++) {
						var name = attrs[x].nodeName;
						var val = attrs[x].nodeValue;
						
						val = val.replace(uid, '');
						val = val.replace('selectorSelection', '');
						
						$('#previewDomCurrent').append(name + ': ' + val);
						$('#previewDomCurrent').append('<br />');
					}
				}
			//}
			e.stopPropagation();			
		})
		
		ul.append(li);
		if(el.children().length > 0)
			li.append(_getPreviewDomTreeRecursive(el.children()));
		else if($('#domTreeListShowText').attr('checked') && el.text().length > 0)
			li.append( $(document.createElement('ul')).append($(document.createElement('li')).addClass('nochildren').text('#TEXT')) );
	}
	return ul;
}

$(document).ready(function() {
	$('#sampleUpdate').click(function() {
		updatePreviewWindow();
	});
	
	$(window.frames['preview'].document).ready(function() {
		resetPreviewValue();
		updatePreviewWindow();
	});
	
	$('#highlightColor td.picker').click(function() {
		hlClr = $(this).css('background-color');
		$('#currentHighlightColor').css('color', hlClr);
	});
	
	$('#customHighlightColor').change(function() {
		hlClr = $(this).val();
		$('#currentHighlightColor').css('color', hlClr);		
	});
	
	$('#sampleReset').click(function() {
		resetPreviewValue();
	});
	
	$('#queryTest').click(function() {
		//alert($('#query').val());
		var q = $('#query').val();
		_preview('*').css('border', 'none');
		if(q.length > 0) {
			var matches = _preview(q); 
			for(var x = 0; x < matches.length; x++) {
				var match = $(matches[x]);
				match.css('border', '1px solid ' + hlClr);
			}
		}
	});
});