/*
 * Static function to launch wizard as popup.
 */
KarmaWizard_launch = function(id) {
	var paramstr = "toolbar=no,directories=no,status=no,menubar=no,";
	paramstr += "scrollbars=yes,width=670,height=500";
	var url = '/sitebuilder/wizard/';
	var queryString = window.location.search.substring(1);
	var queryVars = queryString.split(";");
	for (var i=0;i<queryVars.length;i++) {
		var pair = queryVars[i].split("=");
		if (pair[0] == 'SKIN') { url += '?SKIN=' + pair[1]; }
	} 
	var wizardWin = window.open(url,"wizard",paramstr);
	wizardWin.focus();
	return wizardWin;
}

/*
 * Launching from the Admin Area
 */
KarmaWizard_AdminLaunch = function(id) {
	var paramstr = "toolbar=no,directories=no,status=no,menubar=no,";
	paramstr += "scrollbars=yes,width=670,height=500";
	var url = '/!cms/admin/wizard/?SKIN=' + id;
	var wizardWin = window.open(url,"wizard",paramstr);
	wizardWin.focus();
	//	window.location = 'http://' + location.host + '/?SKIN=' + id;
	return wizardWin;
}

/*
 * The KarmaWizard object.
 */
function KarmaWizard(targetWindow) {

this.objectName = 'wizard';
this.stylePrefix = 'style/';
this.filePrefix = 'file/';
this.flashPrefix = 'flash/';
this.statePrefix = 'state/';
this.targetWin = targetWindow;
this.defaultConfig = new Array();

this.getElementsByClassName = function(baseElement, tagName, desiredClass) {
	if (!baseElement) {baseElement = document.getElementsByTagName('body')[0];}
	var elements = baseElement.getElementsByTagName(tagName);
	var matches = new Array();
	for ( var i = 0; i < elements.length; i++ ) {
		if ( elements[i].className == desiredClass ) {
			matches.push(elements[i]);
		}
	}
	return matches;
}

this.doAction = function(action) {
	if ( action == 'clear' ) {
		var response = confirm('This will erase everything. Are you sure?');
		if ( response != true ) { return; }
	}
	var form = document.getElementById('KarmaWizard_form');
	form.setAttribute('action',action);
	form.setAttribute('onsubmit','');
	form.setAttribute('method','post');
	form.submit();
	form.setAttribute('action','javascript:void(0);');
	form.setAttribute('onsubmit','javascript:void(0)');
	form.setAttribute('method','');
	if ( action == 'import' || action == 'clear' ) {
		form.reset();
	}
	if ( action == 'upload' || action == 'import' || action == 'clear' ) {
		var msgElt = document.getElementById("overlayer_message");
		if ( action == 'upload' ) {
			msgElt.innerHTML = 'Applying Changes.';
		}
		else if ( action == 'import' ) {
			msgElt.innerHTML = 'Loading Design.';
		}
		else if ( action == 'clear' ) {
			msgElt.innerHTML = 'Erasing Current Design.';
		}
		document.getElementById("overlayer").style.display = 'block';
	}
}

this.setState = function(stateArray) {
	var notFound = new Array();
	for ( var d in stateArray ) {
		var e = document.getElementsByName(d)[0];
		if ( !e ) { notFound.push(d); continue; }
		if ( e.type == "text" || e.type == "hidden" ) {
			e.value = stateArray[d];
		}
		else if ( e.type == "select-one" ) {
			for ( var i=0; i < e.length; i++ ) {
				if ( e.options[i].value == stateArray[d] ) {
					e.selectedIndex = i;
					break;
				}
			}
		}
	}
	var l1 = document.getElementsByName('state/layout')[0];
	var l2 = document.getElementsByName('layout_on_load')[0];
	l2.value = l1.value;
	this.previewLayout();
	/*
	if ( notFound.length > 0 ) {
		var errmsg = "Input not found for state declarations:\n";
		for ( var i = 0; i<notFound.length; i++ ) {
			errmsg += notFound[i] + "\n";
		}
		alert(errmsg);
	}
	*/
}

this.previewLayout = function() {
	var layoutSelector = document.getElementsByName('state/layout')[0];
	var selectedLayout = layoutSelector.value;
	var photoshopLink = document.getElementById('layout_photoshop_link');
	photoshopTag = "&nbsp;&nbsp;&nbsp;";
	photoshopTag += "<a href='layouts/" + selectedLayout + "/layout.psd'>";
	photoshopTag += "Download Photoshop layout for layout ";
	photoshopTag += selectedLayout + "</a>";
	photoshopLink.innerHTML = photoshopTag;
	var previewDiv = document.getElementById('layout_preview');
	imgSrc = 'layouts/' + selectedLayout + '/preview.png';
	var imgTag = '<img src="' + imgSrc + '" alt="" />';
	previewDiv.innerHTML = imgTag;
}

this.setDiv = function(selectedDiv) {
	if ( !selectedDiv ) {
		var divsetter = document.getElementsByName('state/divselect')[0];
		selectedDiv = divsetter.options[divsetter.selectedIndex].value;
	}
	var form = document.getElementById('KarmaWizard_form');
	var elts = form.getElementsByTagName('div');
	for ( var i = 0; i < elts.length; i++ ) {
		var elt = elts[i];
		var eltId = elt.getAttribute('id');
		if ( !eltId ) { continue; }
		var prefix = 'KarmaWizard_formdiv_';
		if ( eltId.indexOf(prefix) == 0 ) {
			var shortId = eltId.substring(prefix.length,eltId.length);
			if ( shortId == selectedDiv ) { elt.style.display = 'block'; }
			else { elt.style.display = 'none'; }
		}
	}
}

this.expandOpts = function(id,num) {
	var expander = document.getElementById(id);
	for ( var i = 0; i < num; i++ ) {
		var e = document.getElementById(id+i);
		if ( expander.innerHTML == "+" ) { e.style.display = ''; }
		else { e.style.display = 'none'; }
	}
	expander.innerHTML = (expander.innerHTML == '+') ? '-' : '+';
}

this.randomString = function () {
	var chars = "abcdefghiklmnopqrstuvwxyz";
	var randomstring = '';
	for (var i=0; i<12; i++) {
		var rnum = Math.floor(Math.random() * chars.length);
		randomstring += chars.substring(rnum,rnum+1);
	}
	return randomstring;
}

this.getTableOpen = function() {
	return '<table>';
}

this.getTableClose = function() {
	return '</table>';
}

this.getPaddingInputs = function(cssName,flags) {
	var prefix = this.stylePrefix + cssName;
	var out = '';
	var name = prefix + "/padding-top";
	out += "<tr><th>Padding:</th><td>";
	out += "<span class='label'>Top:</span>";
	out += "<input type='text' size='5' name='" + name + "' />";
	out += "<span class='label'>Bottom:</span>";
	var name = prefix + "/padding-bottom";
	out += "<input type='text' size='5' name='" + name + "' />";
	out += "<span class='label'>Left:</span>";
	var name = prefix + "/padding-left";
	out += "<input type='text' size='5' name='" + name + "' />";
	out += "<span class='label'>Right:</span>";
	var name = prefix + "/padding-right";
	out += "<input type='text' size='5' name='" + name + "' />";
	out += "</td>"
	out += "</tr>";
	return out;
}

this.getMarginInputs = function(cssName,flags) {
	var prefix = this.stylePrefix + cssName;
	var out = '';
	out += "<tr><th>Margin:</th><td>";
	out += "<span class='label'>Top:</span>";
	var name = prefix + "/margin-top";
	out += "<input type='text' size='5' name='" + name + "' />";
	out += "<span class='label'>Bottom:</span>";
	var name = prefix + "/margin-bottom";
	out += "<input type='text' size='5' name='" + name + "' />";
	out += "<span class='label'>Left:</span>";
	var name = prefix + "/margin-left";
	out += "<input type='text' size='5' name='" + name + "' />";
	out += "<span class='label'>Right:</span>";
	var name = prefix + "/margin-right";
	out += "<input type='text' size='5' name='" + name + "' />";
	out += "</td>"
	out += "</tr>";
	return out;
}

this.popSelector = function(id) {
	var IE = document.all ? true : false;
	if (!IE) document.captureEvents(Event.MOUSEMOVE)
	document.onMouseMove = getMouseXY;
	var mouseX = 0;
	var mouseY = 0;
	function getMouseXY(e) {
		mouseX = (IE) ? event.clientX + document.body.scrollLeft : e.pageX;
		mouseY = (IE) ? event.clientY + document.body.scrollTop : e.pageY;
	}
	alert(id + "," + mouseX + "," + mouseY);
}

this.getColorSelector = function(id) {
	var output = "<a class='color_selector_link' href='javascript:void(0)' ";
	output += "onclick='javascript:ColorPicker.popup(\"" + id + "\")'>";
	output += "<img src='colorpicker/palette.gif' alt='' />";
	output += "</a>";
	return output;
}

this.getTextInputs = function(cssName,flags) {
	if (!flags) { flags = 'cfsa'; } // color, font, size, align
	var prefix = this.stylePrefix + cssName;
	var out = '';
	out += "<tr><th>Text:</th><td>";
	if ( flags.indexOf('c') != -1 ) {
		out += "<span class='label'>Color:</span>";
		out += "<input type='text' size='10' value='' ";
		var colorId = this.randomString();
		out += "id='" + colorId + "' ";
		out += "name='" + prefix + "/color' />";
		out += this.getColorSelector(colorId);
	}
	if ( flags.indexOf('f') != -1 ) {
		out += "<span class='label'>Font:</span>";
		out += "<select name='" + prefix + "/font-family'>";
		out += "<option value=''></option>";
		out += "<option value='Arial'>Arial</option>";
		out += "<option value='Helvetica'>Helvetica</option>";
		out += "<option value='Times New Roman'>Times</option>";
		out += "<option value='Verdana'>Verdana</option>";
		out += "<option value='Georgia'>Georgia</option>";
		out += "<option value='Courier'>Courier</option>";
		out += "<option value='Courier New'>Courier New</option>";
		out += "<option value='Impact'>Impact</option>";
		out += "</select>";
	}
	if ( flags.indexOf('s') != -1 ) {
		out += "<span class='label'>Size:</span>";
		out += "<select name='" + prefix + "/font-size'>";
		out += "<option value=''></option>";
		out += "<optgroup label='Point Size'>";
		out += "<option value='8pt'>8pt</option>";
		out += "<option value='9pt'>9pt</option>";
		out += "<option value='10pt'>10pt</option>";
		out += "<option value='11pt'>11pt</option>";
		out += "<option value='12pt'>12pt</option>";
		out += "<option value='14pt'>14pt</option>";
		out += "<option value='16pt'>16pt</option>";
		out += "<option value='18pt'>18pt</option>";
		out += "<option value='20pt'>20pt</option>";
		out += "<option value='24pt'>24pt</option>";
		out += "</optgroup>";
		out += "<optgroup label='Percent'>";
		out += "<option value='70%'>70%</option>";
		out += "<option value='80%'>80%</option>";
		out += "<option value='90%'>90%</option>";
		out += "<option value='100%'>100%</option>";
		out += "<option value='110%'>110%</option>";
		out += "<option value='120%'>120%</option>";
		out += "<option value='130%'>130%</option>";
		out += "<option value='140%'>140%</option>";
		out += "<option value='150%'>150%</option>";
		out += "</optgroup>";
		out += "</select>";
	}
	if ( flags.indexOf('a') != -1 ) {
		out += "<span class='label'>Align:</span>";
		out += "<select name='" + prefix + "/text-align'>";
		out += "<option value=''></option>";
		out += "<option value='left'>Left</option>";
		out += "<option value='right'>Right</option>";
		out += "<option value='center'>Center</option>";
		out += "</select>";
	}
	out += "</td></tr>";
	return out;
}

this.getDimensionInputs = function(cssName,flags) {
	if (!flags) { flags = 'wh'; }
	var prefix = this.stylePrefix + cssName;
	var out = '';
	out += "<tr><th>Dimensions:</th><td>";
	if ( flags.indexOf('w') != -1 ) {
		out += "<span class='label'>Width:</span>";
		out += "<input type='text' size='8' value='' ";
		out += "name='" + prefix + "/width' />";
	}
	if ( flags.indexOf('h') != -1 ) {
		out += "<span class='label'>Height:</span>";
		out += "<input type='text' size='8' value='' ";
		out += "name='" + prefix + "/height' />";
	}
	out += "</td></tr>";
	return out;
}

this.getLinkInputs = function(cssName,flags) {
	var prefix = this.stylePrefix + cssName + " a";
	var colorPrefix = prefix + ", " + cssName + " a img ";
	var bgPrefix = prefix + ":hover, " + cssName + " a:hover img ";
	var out = '';
	out += "<tr><th>Links:</th><td>";
	out += "<span class='label'>Color:</span>";
	out += "<input type='text' size='10' value='' ";
	var colorId1 = this.randomString();
	out += "id='" + colorId1 + "' ";
	out += "name='" + colorPrefix + "/color,border-color' />";
	out += this.getColorSelector(colorId1);
	out += "<span class='label'>Mouseover&nbsp;Color:</span>";
	out += "<input type='text' size='10' value='' ";
	var colorId2 = this.randomString();
	out += "id='" + colorId2 + "' ";
	out += "name='" + bgPrefix + "/color,border-color' />";
	out += this.getColorSelector(colorId2);
	out += "</td></tr>";
	return out;
}

this.getBackgroundInputs = function(cssName,flags) {
	if (!flags) { flags = 'ci'; }
	var prefix = this.stylePrefix + cssName;
	var out = '';
	out += "<tr><th>Background:</th><td>";
	if ( flags.indexOf('c') != -1 ) {
		out += "<span class='label'>Color:</span>";
		out += "<input type='text' size='10' value='' ";
		var colorId = this.randomString();
		out += "id='" + colorId + "' ";
		out += "name='" + prefix + "/background-color' />";
		out += this.getColorSelector(colorId);
	}
	if ( flags.indexOf('i') != -1 ) {
		out += "<span class='label'>Image:</span>";
		out += "<input type='file' size='32' name='file/bg/" +cssName+ "' />";
	}
	out += "</td></tr>";
	if ( flags.indexOf('i') != -1 ) {
	out += "<tr><th>BG&nbsp;Image:</th><td>";
		out += "<span class='label'>Position:</span>";
		out += "<select name='" + prefix + "/background-position'>";
		out += "<option value=''></option>";
		out += "<option value='top left'>Top Left</option>";
		out += "<option value='top center'>Top Center</option>";
		out += "<option value='top right'>Top Right</option>";
		out += "<option value='right'>Right</option>";
		out += "<option value='bottom right'>Bottom Right</option>";
		out += "<option value='bottom center'>Bottom Center</option>";
		out += "<option value='bottom left'>Bottom Left</option>";
		out += "<option value='left'>Left</option>";
		out += "<option value='center center'>Center</option>";
		out += "</select>";
		out += "<span class='label'>Repeat:</span>";
		out += "<select name='" + prefix + "/background-repeat'>";
		out += "<option value=''></option>";
		out += "<option value='repeat-x'>Horizontal</option>";
		out += "<option value='repeat-y'>Vertical</option>";
		out += "<option value='repeat'>Both Directions</option>";
		out += "<option value='no-repeat'>None</option>";
		out += "</select>";
		var imgName = cssName;
		imgName = imgName.replace(/ /g,'~');
		imgName = imgName.replace(/#/g,'~~');
		out += "<span class='label'>Disable:</span>";
		out += "<select name='" + prefix + "/background-image'>";
		out += "<option value='url(../images/bg/" + imgName + ")'>No</option>";
		out += "<option value='none'>Yes</option>";
		out += "</select>";
		out += "</td></tr>";
	}
	return out;
}

this.getContentEntryInputs = function() {
	var prefix = this.stylePrefix;
	var out = '';
	out += "<tr><th>Headings:</th><td>";
	out += "<span class='label'>Color:</span>";
	out += "<input type='text' size='10' value='' ";
	var colorId1 = this.randomString();
	out += "id='" + colorId1 + "' ";
	out += "name='style/#content .entry .heading/color' />";
	out += this.getColorSelector(colorId1);
	out += "<span class='label'>Background&nbsp;Color:</span>";
	out += "<input type='text' size='10' value='' ";
	var colorId2 = this.randomString();
	out += "id='" + colorId2 + "' ";
	out += "name='style/#content .entry .heading/background-color' />";
	out += this.getColorSelector(colorId2);
	//	out += "<span class='label'>Border:</span>";
	//	out += "<input type='text' size='10' value='' ";
	//	out += "name='style/#content .entry .heading/background-color' />";
	// change section headings
	// change table border colors and header backgrounds
	// change the div#entry border-bottom.
	// change the sublink button colors
}
this.getContentTableInputs = function() {
}


this.getFontInputs = function(configName,flags) {
	if (!flags) { flags = 'srcbd'; }
	var prefix = "config/" + configName + "_";
	var out = '';
	out += "<tr><th>Graphic Fonts:</th><td>";
	// This hidden input needs to be here for the config file. SERIOUSLY!
	out += "<input type='hidden' value='' ";
	out += "name='config/" + configName + "_font_file' />" ;
	out += "<span class='label'>File:</span>";
	out += "<input type='file' size='32' ";
	out += "name='file/font/" + configName + "' />";
	if ( flags.indexOf('s') != -1 ) {
		out += "<span class='label'>Font Size:</span>";
		out += "<input type='text' size='4' maxlength='2' value='' ";
		out += "name='" + prefix + "font_size' />px";
	}
	out += "</td></tr><tr><th></th><td>";
	if ( flags.indexOf('r') != -1 ) {
		out += "<span class='label'>Rotation:</span>";
		out += "<input type='text' size='5' value='' ";
		out += "name='" + prefix + "font_rotation' />";
	}
	if ( flags.indexOf('c') != -1 ) {
		out += "<span class='label'>Color:</span>";
		out += "<input type='text' size='8' value='' ";
		var colorId = this.randomString();
		out += "id='" + colorId + "' ";
		out += "name='" + prefix + "font_color' />";
		out += this.getColorSelector(colorId);
	}
	if ( flags.indexOf('b') != -1 ) {
		out += "<span class='label'>BG&nbsp;Color:</span>";
		out += "<input type='text' size='8' value='' ";
		var colorId = this.randomString();
		out += "id='" + colorId + "' ";
		out += "name='" + prefix + "font_bgcolor' />";
		out += this.getColorSelector(colorId);
	}
	if ( flags.indexOf('d') != -1 ) {
		out += "<span class='label'>Disable:</span>";
		out += "<select name='" + prefix + "font_disable'>";
		out += "<option value='' selected></option>";
		out += "<option value='0'>No</option>";
		out += "<option value='1'>Yes</option>";
		out += "</select>";
	}
	if ( flags.indexOf('l') != -1 ) {
		out += "</td></tr><tr><th></th><td>";
		out += "<span class='label'>Mouseover&nbsp;Color:</span>";
		out += "<input type='text' size='8' value='' ";
		var colorId1 = this.randomString();
		out += "id='" + colorId1 + "' ";
		out += "name='" + prefix + "font_ro_color' />";
		out += this.getColorSelector(colorId1);

		out += "<span class='label'>Mouseover&nbsp;BG&nbsp;Color:</span>";
		out += "<input type='text' size='8' value='' ";
		var colorId1a = this.randomString();
		out += "id='" + colorId1a + "' ";
		out += "name='" + prefix + "font_ro_bgcolor' />";
		out += this.getColorSelector(colorId1a);

		out += "</td></tr><tr><th></th><td>";

		out += "<span class='label'>Selected&nbsp;Color:</span>";
		out += "<input type='text' size='8' value='' ";
		var colorId2 = this.randomString();
		out += "id='" + colorId2 + "' ";
		out += "name='" + prefix + "font_id_color' />";
		out += this.getColorSelector(colorId2);

		out += "<span class='label'>Selected&nbsp;BG&nbsp;Color:</span>";
		out += "<input type='text' size='8' value='' ";
		var colorId2a = this.randomString();
		out += "id='" + colorId2a + "' ";
		out += "name='" + prefix + "font_id_bgcolor' />";
		out += this.getColorSelector(colorId2a);
	}
	out += "</td></tr>";
	return out;
}

this.getFlashInputs = function(label,configName) {
	var prefix = "config/flash_" + configName + "_";
	var out = '';
	out += "<tr><th>" + label + ":</th><td>";
	out += "<span class='label'>SWF File:</span>";
	out += "<input type='file' name='file/flash/" + configName + "'";
	out += " size='28' />";
	out += "<span class='label'>Disable:</span>";
	out += "<select name='" + prefix + "disable'>";
	out += "<option value='' selected></option>";
	out += "<option value='0'>No</option>";
	out += "<option value='1'>Yes</option>";
	out += "</select>";
	out += "</td></tr><tr><th></th><td>";
	out += "<span class='label'>Minimum Flash Version:</span>";
	out += "<input type='config' name='" + prefix + "version' size='3' />";
	out += "<span class='label'>Width:</span>";
	out += "<input type='config' name='" + prefix + "width' size='8' />";
	out += "<span class='label'>Height:</span>";
	out += "<input type='config' name='" + prefix + "height' size='8' />";
	out += "</td></tr>";
	return out;
}

this.getFlashPlayerInputs = function() {
//	var prefix = "config/flash_" + configName + "_";
	var out = '';
	out += "<tr><th>" + "Flash Player" + ":</th><td>";
	out += "<span class='label'>Skin:</span>";
	out += "<input type='file' name='file/flash/player_skin'";
	out += " size='28' />";
//	out += "<span class='label'>SWF File:</span>";
//	out += "<input type='file' name='file/flash/" + configName + "'";
//	out += " size='28' />";
//	out += "<span class='label'>Disable:</span>";
//	out += "<select name='" + prefix + "disable'>";
//	out += "<option value='' selected></option>";
//	out += "<option value='0'>No</option>";
//	out += "<option value='1'>Yes</option>";
//	out += "</select>";
	return out;
}

this.getHeaderTextDisabler = function() {
	var prefix = this.stylePrefix + "h1";
	var out = '';
	out += "<tr><th>Disable&nbsp;Title:</th><td>";
	out += "<span class='label'>Disable:</span>";
//	out += "<select name='style/h1 span/visibility'>";
	out += "<select name='style/h1 span/display'>";
	out += "<option value='' selected></option>";
	out += "<option value=''>No</option>";
//	out += "<option value='hidden'>Yes</option>";
	out += "<option value='none'>Yes</option>";
	out += "</select>";
//	out += " Set to 'Yes' if uploading a background image ";
//	out += "that contains a logo.";
	return out;
}

this.getBorderInputs = function(cssName,flags) {
	var positions = new Array('','top','bottom','left','right');
	var positionNames = new Array('','Top','Bottom','Left','Right');
	var prefix = this.stylePrefix + cssName;
	var out = '';
	var cssKey;
	var rand = this.randomString();
	for ( var i = 0; i < positions.length; i++ ) {
		if ( i == 0 ) {
			out += "<tr><th>";
			out += "<a class='expand_opts' id='" + rand + "' ";
			out += "style='text-decoration:none;' ";
			out += "href='javascript:" +this.objectName+ ".expandOpts(";
			out += '"' + rand + '",' + (positions.length-1) + ')' + "'>";
			out += "+</a>&nbsp;";
			out += "Border:";
			out += "</th><td>";
		}
		else {
			out += "<tr id='" + rand + (i-1) + "' style='display:none;'>";
			out += "<th class='subopt'>" + positionNames[i] + ":";
			out += "</th><td>";
		}
		out += "<span class='label'>Style:</span>";
		cssKey = '/border-';
		if ( i != 0 ) { cssKey += positions[i] + '-'; }
		cssKey += 'style';
		out += "<select name='" + prefix + cssKey + "' />";
		out += "<option value=''></option>";
		out += "<option value='none'>None</option>";
		out += "<option value='solid'>Solid</option>";
		out += "<option value='dotted'>Dotted</option>";
		out += "<option value='dashed'>Dashed</option>";
		out += "<option value='double'>Double</option>";
		out += "<option value='groove'>Groove</option>";
		out += "<option value='ridge'>Ridge</option>";
		out += "<option value='inset'>Inset</option>";
		out += "<option value='outset'>Outset</option>";
		out += "</select>";
		out += "<span class='label'>Width:</span>";
		cssKey = '/border-';
		if ( i != 0 ) { cssKey += positions[i] + '-'; }
		cssKey += 'width';
		out += "<select name='" + prefix + cssKey + "' />";
		out += "<option value=''></option>";
		out += "<option value='1px'>1px</option>";
		out += "<option value='2px'>2px</option>";
		out += "<option value='3px'>3px</option>";
		out += "<option value='4px'>4px</option>";
		out += "<option value='5px'>5px</option>";
		out += "<option value='6px'>6px</option>";
		out += "<option value='7px'>7px</option>";
		out += "<option value='8px'>8px</option>";
		out += "<option value='9px'>9px</option>";
		out += "<option value='10px'>10px</option>";
		out += "</select>";
		out += "<span class='label'>Color:</span>";
		cssKey = '/border-';
		if ( i != 0 ) { cssKey += positions[i] + '-'; }
		cssKey += 'color';
		out += "<input type='text' size='10' value='' ";
		var colorId = this.randomString();
		out += "id='" + colorId + "' ";
		out += "name='" + prefix + cssKey + "' />";
		out += this.getColorSelector(colorId);
		out += "</td></tr>";
	}
	return out;
}


this.getHookSelector = function(name) {
	var out = '';
	out += "<select name='" + name + "'>";
	out += "<option value=''></option>";
	out += "<option value='head,exit'>head,exit</option>";
	out += "<option value='body,enter'>body,enter</option>";
	out += "<option value='div#header_content_footer_wrapper_2,enter'>div#header_content_footer_wrapper_2,enter</option>";
	out += "<option value='div#main_links,exit'>div#main_menu,exit</option>";
	out += "<option value='div#main_links,after'>div#main_menu,after</option>";
	out += "<option value='div#footer,exit'>div#footer,exit</option>";
	out += "</select>";
	return out;
}



}