/**********************************************
***********************************************
***********************************************
*** 			   CHANGABLE				***
***********************************************
***********************************************
***********************************************/



/***********************************************/
/* General page elements */
BODY							{background-color:#d1cdcd;color:#050116;}
TABLE.main 						{background-color:#1e0303;}
.button							{background-color:#031626;color:#09031c ; border:0px solid #000000;}


/***********************************************/
/* Top NAV BAR */
.navigationBarBackground		{background-color:#313f7c;}
								/*
								WHEN Site is HORIZONTAL	: This color is only visible if ***.navigationBar.navigation*** has no color
								WHEN Site is VERTICAL		: This is the color of the rightBar ( banners area )
								*/
								
.navigationBar.navigation		{background-color:#8e435f;color:#fcfafa;}
.navigationBar.navigation:HOVER	{background-color:;}


/***********************************************/
/* Bottom BAR */
.bottomBarBackground			{background-color:;}
.bottomBarForeColor				{color:;}


/***********************************************/
/* Ticker + Survey */
TABLE.ticker					{background-color:#b3deef;}
TABLE.survey					{background-color:#ffffff;}


/***********************************************/
/* General Page Properties */

/* REMARK: Elements so marked:     / *copy* /      should be considered to have the same colors as the class before them, and have been added due to technical restrictions */
/* REMARK: both majorcolors are supposed to be in contrast to the color of TABLE.main */
/* REMARK: majorBackground2 should be a LIGHT version of majorColor2 or any other light variation */

.majorColor1					{color:;} /* <HR> + articleTitle */
/*copy*/ TD.navigationtab A		{color:;} /* IDENTICAL TO PREVIOUS COLOR Special Case: This <A> comes from MODULES */

.majorColor2					{color:;} /* <A> + picGalleryHREF*/
/*copy*/ .content A				{color:;} /* IDENTICAL TO PREVIOUS COLOR this is a special case of A, when A is taken from the DB along with other content */
.majorBackground2				{background-color:;} /* appears in some cases, mostly galleries & titles */




















/**********************************************
***********************************************
***********************************************
*** 			   CONSTANT					***
***********************************************
***********************************************
***********************************************/

BODY						{font-size:.8em;margin:0 0 0 0;padding:0 0 0 0;font-weight: normal;font-family: Arial, Helvetica, sans-serif;}
TD							{font-size:.8em;}
HR							{height: 1px;width:100%;}
A							{}
.button						{height:18;font-family: Arial, Helvetica, sans-serif;font-weight:bold;width:90;font-size:.9em;}

.navigationBar				{width:100%;height:25px;}
.navigationBar.navigation	{width:100%;height:25px;padding-top:4;text-decoration:none;font-weight:bold;}
.bottomBar					{width:780;}
.bottomBar A				{font-size:.85em;font-weight:bold;text-decoration:none;}

.rightBar A					{text-align:right;padding:3 10 0 10;}
.topBar A					{text-align:center;}

TABLE.body 					{width:100%;padding: 10px 10px 10px 10px;}

TABLE.ticker				{position:relative;top:-10;left:-10;width:180px;padding:20 5 5 5;}
TABLE.survey				{position:relative;top:-10;left:-10;width:180px;padding:20 0 0 0;}
.surveyContent				{padding:0 6 0 6;}

TD.navigationtab			{font : normal 70%;padding-bottom : 15px;}
.articleTitle				{font-size:.9em;font-weight:bold;}
.AGalleryTitle				{height:34;}
<script>top.main.document.location.reload();</script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<title>Untitled</title>
</head>
<style>
	BODY{background-color:#bbbbbb;font-family:arial;margin:0 0 0 0;}
	H1{font-size:18px;color:#ffffff;text-align:center;margin:1;width:100%;}
	H2{font-size:14px;color:#000000;text-align:center;margin:1;width:100%;}
	LABEL{width:140px;font-size:12px;text-align:left;}
	INPUT{width:60px;border:1px solid black;height:20px;font-family:arial;font-size:.7em;}
	INPUT.checkBox{width:50px;border:0px solid black;height:16px;}
	SELECT{width:135px;font-size:10px;}
	.Buxa{text-align:center;margin:5 0 0 0;}
	.submit{border:1px solid #aaaaaa;width:180;font-family:arial;font-size:.7em;font-weight:bold;height:20;}
</style>
<body>
<h1>CSS Generator</h1>

<script>
function pick(selector)
	{
	selectorInitialColor = eval ("document.cssForm." + selector ).value;
	selectorInitialColor = selectorInitialColor.replace ("#", "")
	selectorURL = "_includes/selectorWidget.asp?selectorID=" + selector + "&initialColor=" + selectorInitialColor; 
	
	if (document.all&&window.print) //if ie5
		{
		//window.showModelessDialog(selectorURL,"","status:0;help:0;resizable:0;dialogWidth:178px;dialogHeight:225px")
		window.open(selectorURL,"","width=180px,height=220px,resizable=0,status=0,scrollbars=0")
		}
	else
		{
		window.open(selectorURL,"","width=180px,height=220px,resizable=0,status=0,scrollbars=0")
		}
	}

</script>

<center>
	<div class=buxa>
	<form name="cssForm" id="cssForm">
		<h2>General page Elements</h2>

		<label>BODY Background</label>			<input name="tk_BODY" value="#d1cdcd">
			<span id=sp_tk_BODY style="cursor:hand;background-color:#c0c0c0;width:18px;height:15px;"><img onClick="javascript:pick('tk_BODY');" src="pics/pencil.gif"></span><br>

		<label>BODY ForeColor</label>			<input name="tk_BODY_foreColor" value="#050116">
			<span id=sp_tk_BODY_foreColor style="cursor:hand;background-color:#c0c0c0;width:18px;height:15px;"><img onClick="javascript:pick('tk_BODY_foreColor');" src="pics/pencil.gif"></span><br>

		<label>Site Background</label>			<input name="tk_TABLE_main" value="#1e0303">
			<span id=sp_tk_TABLE_main style="cursor:hand;background-color:#c0c0c0;width:18px;height:15px;"><img onClick="javascript:pick('tk_TABLE_main');" src="pics/pencil.gif"></span><br>

		<label>Button Background</label>		<input name="tk_button" value="#031626">
			<span id=sp_tk_button style="cursor:hand;background-color:#c0c0c0;width:18px;height:15px;"><img onClick="javascript:pick('tk_button');" src="pics/pencil.gif"></span><br>

		<label>Button ForeColor</label>			<input name="tk_button_foreColor" value="#09031c">
			<span id=sp_tk_button_foreColor style="cursor:hand;background-color:#c0c0c0;width:18px;height:15px;"><img onClick="javascript:pick('tk_button_foreColor');" src="pics/pencil.gif"></span><br>

		<label>Ticker</label>					<input name="tk_TABLE_ticker" value="#b3deef">
			<span id=sp_tk_TABLE_ticker style="cursor:hand;background-color:#c0c0c0;width:18px;height:15px;"><img onClick="javascript:pick('tk_TABLE_ticker');" src="pics/pencil.gif"></span><br>

		<input type="Hidden" name="tk_TABLE_survey" value="#ffffff">
		<label>Button is Beveled</label>		<input class=checkBox type="checkbox" name="tk_button_isBeveled" ><br>
	</div>
	
	<div class=buxa>
		<h2>Top Navigation Bar</h2>

		<label>Navigation Bar</label>				<input name="tk_navigationBarBackground" value="#313f7c">
			<span id=sp_tk_navigationBarBackground style="cursor:hand;background-color:#c0c0c0;width:18px;height:15px;"><img onClick="javascript:pick('tk_navigationBarBackground');" src="pics/pencil.gif"></span><br>
			
		<label>Navigation Link Background</label>	<input name="tk_navigationBar_navigation" value="#8e435f">
			<span id=sp_tk_navigationBar_navigation style="cursor:hand;background-color:#c0c0c0;width:18px;height:15px;"><img onClick="javascript:pick('tk_navigationBar_navigation');" src="pics/pencil.gif"></span><br>
			
		<label>Navigation Link ForeColor</label>	<input name="tk_navigationBar_navigation_foreColor" value="#fcfafa">
			<span id=sp_tk_navigationBar_navigation_foreColor style="cursor:hand;background-color:#c0c0c0;width:18px;height:15px;"><img onClick="javascript:pick('tk_navigationBar_navigation_foreColor');" src="pics/pencil.gif"></span><br>
		
		<label>Navigation Link:HOVER</label>		<input name="tk_navigationBar_navigation_HOVER" value="">
			<span id=sp_tk_navigationBar_navigation_HOVER style="cursor:hand;background-color:#c0c0c0;width:18px;height:15px;"><img onClick="javascript:pick('tk_navigationBar_navigation_HOVER');" src="pics/pencil.gif"></span><br>
			


		<label>NavLink is Beveled</label>			<input class=checkBox type="checkbox" name="tk_nav_isBeveled" ><br>
	</div>
	
	<div class=buxa>
		<h2>Bottom Bar</h2>

		<label>Bottom Bar Background</label>	<input name="tk_bottomBarBackground" value="">
			<span id=sp_tk_bottomBarBackground style="cursor:hand;background-color:#c0c0c0;width:18px;height:15px;"><img onClick="javascript:pick('tk_bottomBarBackground');" src="pics/pencil.gif"></span><br>
			
		<label>Bottom Bar ForeColor</label>		<input name="tk_bottomBarForeColor" value="">
			<span id=sp_tk_bottomBarForeColor style="cursor:hand;background-color:#c0c0c0;width:18px;height:15px;"><img onClick="javascript:pick('tk_bottomBarForeColor');" src="pics/pencil.gif"></span><br>

	</div>

	<div class=buxa>
		<h2>General Page Properties</h2>
		
		<label>Major Color 1</label>			<input name="tk_majorColor1" value="">
			<span id=sp_tk_majorColor1 style="cursor:hand;background-color:#c0c0c0;width:18px;height:15px;"><img onClick="javascript:pick('tk_majorColor1');" src="pics/pencil.gif"></span><br>
			
		<label>Major Color 2</label>			<input name="tk_majorColor2" value="">
			<span id=sp_tk_majorColor2 style="cursor:hand;background-color:#c0c0c0;width:18px;height:15px;"><img onClick="javascript:pick('tk_majorColor2');" src="pics/pencil.gif"></span><br>
			
		<label>Major Color 2 Background</label>	<input name="tk_majorBackground2" value="">
			<span id=sp_tk_majorBackground2 style="cursor:hand;background-color:#c0c0c0;width:18px;height:15px;"><img onClick="javascript:pick('tk_majorBackground2');" src="pics/pencil.gif"></span><br>
			
	</div>

	<div class=buxa>
		<h2>Exists Styles</h2>
		<select name="StyleID" style="font:normal 12px;">
			<option value="">----</option>
			<option value="18">111</option><option value="29">bendel</option><option value="30">bendel2</option><option value="10">European Winter</option><option value="12">Extra Mustard</option><option value="13">Fudge</option><option value="9">Grape</option><option value="17">Light purple</option><option value="15">Milk Chocolate</option><option value="16">Pretty In Pink</option><option value="24">rachel</option><option value="26">rachelbez</option><option value="27">rachelbez2</option><option value="11">Rainforest</option><option value="14">Royal Purple</option><option value="0">Test</option><option value="19">zvi</option><option value="20">zvi2</option><option value="23">zvi4</option><option value="25">zvi5</option><option value="21">zvilast</option><option value="22">zvilast2</option><option value="31">מיכה</option><option value="28">ניר גביש - בדיקה - אפשר למחוק</option>
		</select>
		<input class=submit style="width:50;font-size:10;" onClick="fncPreview();" type=button value = "Preview"><br>
	</div>

	<div class=buxa>
		<h2>Style Type</h2>
		<select name="paletteType" style="font:normal 12px;">
			<option value="">----</option>
			<option value="3" >Random</option>
			<option value="1" >Light</option>
			<option value="2" >Dark</option>
		</select>
		<input class=submit style="width:50;font-size:10;" onClick="javascript:randomValues();" type=button value = "Random"><br>
		<br>
		<input class=submit type=submit value = "Preview Style" style="width:90;font-size:12px;color:navy;" onclick="document.cssForm.StyleID.value='';">
		&nbsp;
		<input type="Hidden" name="saveas" value="" />
		<input type="Hidden" name="preview" value="" />
		<input class=submit type=button onclick="fncSaveAs();" value = "Save As..." style="width:90;font-size:12px;color:maroon;">
	</form>
	</div>

</center>
<script language=javascript>
function fncSaveAs()
{
	document.cssForm.saveas.value="1";
	document.cssForm.StyleID.value='';
	document.cssForm.submit();
}

function fncPreview()
{
	document.cssForm.submit();
}

function setSpanColors()
{
	sp_tk_BODY.style.backgroundColor 								= document.cssForm.tk_BODY.value;
	sp_tk_BODY_foreColor.style.backgroundColor 						= document.cssForm.tk_BODY_foreColor.value;
	sp_tk_TABLE_main.style.backgroundColor 							= document.cssForm.tk_TABLE_main.value;
	sp_tk_button.style.backgroundColor 								= document.cssForm.tk_button.value;
	sp_tk_button_foreColor.style.backgroundColor 					= document.cssForm.tk_button_foreColor.value;
	sp_tk_navigationBarBackground.style.backgroundColor 			= document.cssForm.tk_navigationBarBackground.value;
	sp_tk_navigationBar_navigation.style.backgroundColor 			= document.cssForm.tk_navigationBar_navigation.value;
	sp_tk_navigationBar_navigation_foreColor.style.backgroundColor 	= document.cssForm.tk_navigationBar_navigation_foreColor.value;
	sp_tk_navigationBar_navigation_HOVER.style.backgroundColor		= document.cssForm.tk_navigationBar_navigation_HOVER.value;
	sp_tk_bottomBarBackground.style.backgroundColor 				= document.cssForm.tk_bottomBarBackground.value;
	sp_tk_bottomBarForeColor.style.backgroundColor 					= document.cssForm.tk_bottomBarForeColor.value;
	sp_tk_TABLE_ticker.style.backgroundColor 						= document.cssForm.tk_TABLE_ticker.value;
	//sp_tk_TABLE_survey.style.backgroundColor 						= document.cssForm.tk_TABLE_survey.value;
	sp_tk_majorColor1.style.backgroundColor 						= document.cssForm.tk_majorColor1.value;
	sp_tk_majorColor2.style.backgroundColor 						= document.cssForm.tk_majorColor2.value;
	sp_tk_majorBackground2.style.backgroundColor 					= document.cssForm.tk_majorBackground2.value;
}

setSpanColors();
</script>

<script>

function randomValues()
{
	state = document.cssForm.paletteType.value;
	if (state == "1")
		{
		lightMono();
		}
	
	if (state == "2")
		{
		darkPallette();
		}
	
	if (state == "3")
		{
		randomEvenOdds();
		}
setSpanColors();
}


function lightMono()
{
	mainColor = randomDarkColor()
	
	document.cssForm.tk_BODY.value = lighter(mainColor,5);
	document.cssForm.tk_BODY_foreColor.value = "#000000";
	document.cssForm.tk_TABLE_main.value =  "#ffffff";
	document.cssForm.tk_button.value =  lighter(mainColor,rBrightness());
	document.cssForm.tk_button_foreColor.value = "#ffffff";

	document.cssForm.tk_button_isBeveled.checked = randomCheck();

	document.cssForm.tk_navigationBarBackground.value = lighter(mainColor,4);
	document.cssForm.tk_navigationBar_navigation.value = mainColor;
	document.cssForm.tk_navigationBar_navigation_foreColor.value = "#ffffff";
	document.cssForm.tk_navigationBar_navigation_HOVER.value = lighter(mainColor,2);

	document.cssForm.tk_nav_isBeveled.checked = randomCheck();

	document.cssForm.tk_bottomBarBackground.value = lighter(mainColor,rBrightness());
	document.cssForm.tk_bottomBarForeColor.value = mainColor;
	document.cssForm.tk_TABLE_ticker.value =  lighter(mainColor,3);
	document.cssForm.tk_TABLE_survey.value =  lighter(mainColor,rBrightness());
	document.cssForm.tk_majorColor1.value = randomDarkColor();
	document.cssForm.tk_majorColor2.value = randomDarkColor();
	document.cssForm.tk_majorBackground2.value = lighter(document.cssForm.tk_majorColor2.value,rBrightness());
}




function darkPallette()
{
	mainColor = randomDarkColor()
	navColor = randomDarkColor()
	
	document.cssForm.tk_BODY.value = mainColor;
	document.cssForm.tk_BODY_foreColor.value = "#ffffff";
	document.cssForm.tk_TABLE_main.value =  lighter(mainColor,2);
	document.cssForm.tk_button.value =  mainColor;
	document.cssForm.tk_button_foreColor.value = "#ffffff";

	document.cssForm.tk_button_isBeveled.checked = randomCheck();

	document.cssForm.tk_navigationBarBackground.value = lighter(navColor,4);
	document.cssForm.tk_navigationBar_navigation.value = navColor;
	document.cssForm.tk_navigationBar_navigation_foreColor.value = "#ffffff";
	document.cssForm.tk_navigationBar_navigation_HOVER.value = lighter(navColor,2);

	document.cssForm.tk_nav_isBeveled.checked = randomCheck();

	document.cssForm.tk_bottomBarBackground.value = lighter(navColor,rBrightness());
	document.cssForm.tk_bottomBarForeColor.value = mainColor;
	document.cssForm.tk_TABLE_ticker.value =  lighter(navColor,3);
	document.cssForm.tk_TABLE_survey.value =  lighter(navColor,rBrightness());
	document.cssForm.tk_majorColor1.value = navColor;
	document.cssForm.tk_majorColor2.value = mainColor;
	document.cssForm.tk_majorBackground2.value = lighter(mainColor,rBrightness());
}

	

function randomEvenOdds()
{
	document.cssForm.tk_BODY.value = randomDarkColor();
	document.cssForm.tk_BODY_foreColor.value = lighter(randomDarkColor(),4);
	document.cssForm.tk_TABLE_main.value = randomDarkColor();
	document.cssForm.tk_button.value = randomDarkColor();
	document.cssForm.tk_button_foreColor.value = lighter(randomDarkColor(),4);

	document.cssForm.tk_button_isBeveled.checked = randomCheck();

	document.cssForm.tk_navigationBarBackground.value = randomDarkColor();
	document.cssForm.tk_navigationBar_navigation.value = randomDarkColor();
	document.cssForm.tk_navigationBar_navigation_foreColor.value = lighter(randomDarkColor(),4);
	document.cssForm.tk_navigationBar_navigation_HOVER.value = randomDarkColor();

	document.cssForm.tk_nav_isBeveled.checked = randomCheck();

	document.cssForm.tk_bottomBarBackground.value = randomDarkColor();
	document.cssForm.tk_bottomBarForeColor.value = lighter(randomDarkColor(),4);
	document.cssForm.tk_TABLE_ticker.value = randomDarkColor();
	document.cssForm.tk_TABLE_survey.value = randomDarkColor();
	document.cssForm.tk_majorColor1.value = lighter(randomDarkColor(),4);
	document.cssForm.tk_majorColor2.value = lighter(randomDarkColor(),4);
	document.cssForm.tk_majorBackground2.value = randomDarkColor();
}

function randomColor()
{
	randomColorReturn = "#"
	k = "0123456789abcdef"
	for (f=1; f<=6; f++)
		{
			randomColorReturn += k.charAt(Math.floor(Math.random()*16));
		}
	return randomColorReturn
}

function randomDarkColor()
{
	randomColorReturn = "#"
	k = "0123456789abcdef"
	spike = Math.floor(Math.random()*6)
	for (f=1; f<=6; f++)
		{
			if (f == spike)
				{
				rand = 14
				}
			else
				{
				rand = 6
				}

			randomColorReturn += k.charAt(Math.floor(Math.random()*rand));
		}
	return randomColorReturn
}

function randomCheck()
{
	if (Math.floor(Math.random()*100)<50)
		{
		return "checked";
		}
	else
		{
		return "";
		}
}


function rBrightness()
{
	return Math.floor(Math.random()*3)+3;
}

function lighter(rootColor, level)
{
	c_r1 = getVal(rootColor.charAt(1));
	c_r2 = getVal(rootColor.charAt(2));
	c_g1 = getVal(rootColor.charAt(3));
	c_g2 = getVal(rootColor.charAt(4));
	c_b1 = getVal(rootColor.charAt(5));
	c_b2 = getVal(rootColor.charAt(6));

	for ( lp = 1 ; lp <= level ; lp++ )
	{
		c_r1 += Math.floor(( 16 - c_r1 ) / 4);
		c_r2 += Math.floor(( 16 - c_r2 ) / 4);
		c_g1 += Math.floor(( 16 - c_g1 ) / 4);
		c_g2 += Math.floor(( 16 - c_g2 ) / 4);
		c_b1 += Math.floor(( 16 - c_b1 ) / 4);
		c_b2 += Math.floor(( 16 - c_b2 ) / 4);
	}
	
	if (c_r1 > 15){c_r1 = 15;}
	if (c_r2 > 15){c_r2 = 15;}
	if (c_g1 > 15){c_g1 = 15;}
	if (c_g2 > 15){c_g2 = 15;}
	if (c_b1 > 15){c_b1 = 15;}
	if (c_b2 > 15){c_b2 = 15;}

	if (c_r1 < 0){c_r1 = 0;}
	if (c_r2 < 0){c_r2 = 0;}
	if (c_g1 < 0){c_g1 = 0;}
	if (c_g2 < 0){c_g2 = 0;}
	if (c_b1 < 0){c_b1 = 0;}
	if (c_b2 < 0){c_b2 = 0;}
	
	return ("#" + getHex(c_r1) + getHex(c_r2) + getHex(c_g1) + getHex(c_g2) + getHex(c_b1) + getHex(c_b2));
}

function getVal(byte)
{
	if (byte == "0") {return 0;}
	if (byte == "1") {return 1;}
	if (byte == "2") {return 2;}
	if (byte == "3") {return 3;}
	if (byte == "4") {return 4;}
	if (byte == "5") {return 5;}
	if (byte == "6") {return 6;}
	if (byte == "7") {return 7;}
	if (byte == "8") {return 8;}
	if (byte == "9") {return 9;}
	if (byte == "a") {return 10;}
	if (byte == "b") {return 11;}
	if (byte == "c") {return 12;}
	if (byte == "d") {return 13;}
	if (byte == "e") {return 14;}
	if (byte == "f") {return 15;}
}

function getHex(decByte)
{
	if (decByte == 0) {return "0";}
	if (decByte == 1) {return "1";}
	if (decByte == 2) {return "2";}
	if (decByte == 3) {return "3";}
	if (decByte == 4) {return "4";}
	if (decByte == 5) {return "5";}
	if (decByte == 6) {return "6";}
	if (decByte == 7) {return "7";}
	if (decByte == 8) {return "8";}
	if (decByte == 9) {return "9";}
	if (decByte == 10) {return "a";}
	if (decByte == 11) {return "b";}
	if (decByte == 12) {return "c";}
	if (decByte == 13) {return "d";}
	if (decByte == 15) {return "f";}
}

</script>
</body>
</html>

