// JavaScript Document

var firstColour; //#ab0f39 //1a82ab
var secondColour;
var thirdColour;
var fourthColour;
var fifthColour;

var currentTheme;

// Christmas theme
function theme(themename) {
	currentTheme = themename;
	if (themename == "christmas") {
		firstColour = "#bf352f"; //#ab0f39 //1a82ab
		secondColour = "#224732";
		thirdColour = "#88a34f";
		fourthColour = "#FFFFFF";
		fifthColour = "#142326";
	} else if (themename == "summer") {
		firstColour = "#2b5497"; //#ab0f39 //1a82ab
		secondColour = "#ed4d2b";
		thirdColour = "#ba4f40";
		fourthColour = "#fff4f2";
		fifthColour = "#091221";
	} else if (themename == "tweetmeme") {
		firstColour = "#0f618a"; //#ab0f39 //1a82ab
		secondColour = "#b5d60f";
		thirdColour = "#2197ff";
		fourthColour = "#ffffff";
		fifthColour = "#142326";
	} else {
		firstColour = "#000000";
		secondColour = "#555555";
		thirdColour = "#AAAAAA";
		fourthColour = "#EEEEEE";
		fifthColour = "#222222";
	}
	recolor()
}

var code;

var hFont;
var pFont;
var textColor;
var fontSize;

var overlay = "false";

function checkKey() {
	if (window.event.keyCode == 126)
	{
		if (overlay == "false") {
			//alert("false");
			overlay = "true";
			document.styleSheets[0].addRule('#overlay', 'display: block;');
			document.styleSheets[0].insertRule('#overlay { display: block; }',oLength);
			
		} else {
			//alert("true");
			overlay = "false";
			document.styleSheets[0].addRule('#overlay', 'display: none;');
			document.styleSheets[0].insertRule('#overlay { display: none; }',oLength);
			
		}
	}
}

function initialise() { 
	
	theme("tweetmeme");
	recolor();
}	

function recolor() { 
	
	//document.styleSheets[0].deleteRule(1); //delete the second rule
	//document.styleSheets[0].insertRule('body { background: #779; }',oLength); //add a new rule at the end
	//var oRule = document.styleSheets[0].cssRules[oLength]; //reference the new rule we just added
	
	hFont = document.optionsForm.hFont.value;
	pFont = document.optionsForm.pFont.value;
	textColor = document.optionsForm.defaultChooser.value;
	fontSize = document.optionsForm.fontSize.value;
	
	
	//document.styleSheets[0].insertRule('white_content { border: 16px solid '+fifthColour+'; }',oLength);
	
	//changeElement("body", "backgroundColor", fifthColour);
	changeElement("logo", "color", firstColour);
	//changeElement("logo", "fontFamily", hFont);
	changeElement("getCode", "fontFamily", hFont);
	
	changeElement("firstColour", "backgroundColor", firstColour);
	changeElement("secondColour", "backgroundColor", secondColour);
	changeElement("thirdColour", "backgroundColor", thirdColour);
	changeElement("fourthColour", "backgroundColor", fourthColour);
	changeElement("fifthColour", "backgroundColor", fifthColour);
	
	changeElement("firstColourSmall", "backgroundColor", firstColour);
	changeElement("secondColourSmall", "backgroundColor", secondColour);
	changeElement("thirdColourSmall", "backgroundColor", thirdColour);
	changeElement("fourthColourSmall", "backgroundColor", fourthColour);
	changeElement("fifthColourSmall", "backgroundColor", fifthColour);
	
	
	
	
	try { // IE
		document.styleSheets[0].addRule('h1', 'color: '+secondColour);
		document.styleSheets[0].addRule('p', 'color: '+textColor+'; font-family: '+pFont+'; font-size: '+fontSize);
		document.styleSheets[0].addRule('li', 'color: '+textColor+'; font-family: '+pFont+'; font-size: '+fontSize);
		document.styleSheets[0].addRule('a', 'color: '+firstColour);
		document.styleSheets[0].addRule('h2', 'color: '+thirdColour);
		document.styleSheets[0].addRule('h3', 'color: '+firstColour);
		document.styleSheets[0].addRule('h4', 'color: '+fifthColour);
		
		document.styleSheets[0].addRule('h1', 'font-family: '+hFont);
		document.styleSheets[0].addRule('h2', 'font-family: '+hFont);
		document.styleSheets[0].addRule('h3', 'font-family: '+hFont);
		document.styleSheets[0].addRule('h4', 'font-family: '+hFont);
		
		document.styleSheets[0].addRule('body', 'background-color: '+fifthColour);
		
		document.styleSheets[0].addRule("#menu li a", "background-color: "+fifthColour);
		document.styleSheets[0].addRule("#menu li a:hover", "background-color: "+fifthColour);
		
		document.styleSheets[0].addRule('#twitter_update_list li' , 'color: '+textColor+'; font-family: '+pFont+'; font-size: '+fontSize);
		
		document.styleSheets[0].addRule("#menu li a", "color: "+fourthColour);
		document.styleSheets[0].addRule("#menu li a:hover", "color: "+fourthColour)
		document.styleSheets[0].addRule("#widefooter p", "color: "+fourthColour);
		document.styleSheets[0].addRule("#widefooter a", "color: "+fourthColour);
		
		document.styleSheets[0].addRule("#menu li a", "filter:alpha(opacity=80);");
		document.styleSheets[0].addRule("#menu li a:hover", "filter:alpha(opacity=100);");
		document.styleSheets[0].addRule("#widefooter a", "filter:alpha(opacity=60);");
		document.styleSheets[0].addRule("#widefooter a:hover", "filter:alpha(opacity=100);");
		
		document.styleSheets[0].addRule("#menu li a", "opacity:.8;");
		document.styleSheets[0].addRule("#menu li a:hover", "opacity:1;");
		document.styleSheets[0].addRule("#widefooter a", "opacity:.6;");
		document.styleSheets[0].addRule("#widefooter a:hover", "opacity:1;");
	}
	catch(msie) {
	try { // FF Chrome
	
		var oLength = document.styleSheets[0].cssRules.length;
		
		document.styleSheets[0].insertRule('h1 { color: '+secondColour+'; }',oLength);
		document.styleSheets[0].insertRule('p { color: '+textColor+'; font-family: '+pFont+'; font-size: '+fontSize+'; }',oLength);
		document.styleSheets[0].insertRule('li { color: '+textColor+'; font-family: '+pFont+'; font-size: '+fontSize+'; }',oLength);
		document.styleSheets[0].insertRule('a { color: '+firstColour+'; }',oLength);
		document.styleSheets[0].insertRule('h2 { color: '+thirdColour+'; }',oLength);
		document.styleSheets[0].insertRule('h3 { color: '+firstColour+'; }',oLength);
		document.styleSheets[0].insertRule('h4 { color: '+fifthColour+'; }',oLength);
		
		document.styleSheets[0].insertRule('h1 { font-family: '+hFont+'; }',oLength);
		document.styleSheets[0].insertRule('h2 { font-family: '+hFont+'; }',oLength);
		document.styleSheets[0].insertRule('h3 { font-family: '+hFont+'; }',oLength);
		document.styleSheets[0].insertRule('h4 { font-family: '+hFont+'; }',oLength);
		
		document.styleSheets[0].insertRule('body { background-color: '+fifthColour+'; }',oLength);
		
		document.styleSheets[0].insertRule('#menu li a { background-color: '+fifthColour+'; }',oLength);
		document.styleSheets[0].insertRule('#menu li a:hover { background-color: '+fifthColour+'; }',oLength);
		document.styleSheets[0].insertRule('#menu li a { color: '+fourthColour+'; }',oLength);
		document.styleSheets[0].insertRule('#menu li a:hover { color: '+fourthColour+'; }',oLength);
		
		document.styleSheets[0].insertRule('#twitter_update_list li { font-family: '+pFont+'; font-size: '+fontSize+'; }',oLength);
		
		document.styleSheets[0].insertRule('#menu li a { opacity:.8; }',oLength);
		document.styleSheets[0].insertRule('#menu li a:hover { opacity:1; }',oLength);
		
		document.styleSheets[0].insertRule('#widefooter a { color: '+fourthColour+' }',oLength);
		document.styleSheets[0].insertRule('#widefooter p { color: '+fourthColour+' }',oLength);
		
		document.styleSheets[0].insertRule('#widefooter a { opacity:.6; }',oLength);
		document.styleSheets[0].insertRule('#widefooter a:hover { opacity:1; }',oLength);
		
		}
		catch(err) {alert("Sorry, your browser is not supported.");}
	}
	
	
	//changeElement("menu", "backgroundColor", fifthColour);
	//filter:alpha(opacity=50);
	//-moz-opacity:0.5;
	//-khtml-opacity: 0.5;
	//opacity: 0.5;
	
	
	//tfb.color = thirdColour;
	//tfb.showbadge();
	
	changeElement("widefooter", "backgroundColor", fifthColour);
	
	document.choosers.firstChooser.value = firstColour;
	changeElement("firstChooser", "backgroundColor", firstColour);
	changeElement("firstChooser", "color", "#FFF");
	document.choosers.secondChooser.value = secondColour;
	changeElement("secondChooser", "backgroundColor", secondColour);
	changeElement("secondChooser", "color", "#FFF");
	document.choosers.thirdChooser.value = thirdColour;
	changeElement("thirdChooser", "backgroundColor", thirdColour);
	document.choosers.fourthChooser.value = fourthColour;
	changeElement("fourthChooser", "backgroundColor", fourthColour);
	document.choosers.fifthChooser.value = fifthColour;
	changeElement("fifthChooser", "backgroundColor", fifthColour);
	changeElement("fifthChooser", "color", "#FFF");
	
	
	
	// Write Code //
	document.codeBox.codeText.value = "";
	
	for (var i=0; i < document.optionsForm.group1.length; i++)
	   {
	   if (document.optionsForm.group1[i].checked)
		  {
		  var cssSize = document.optionsForm.group1[i].value;
		  }
	   }
	
	
	if (cssSize == "Small") {
		//SMALL CODE
		code = '@charset "utf-8";\n/* CSS Document */\n\n/* Small CSS Code created by Colour My CSS (www.colourmycss.com)*/\n\n/* REQUIRED */\n\n';
		code += "p {\n	font-family:"+ pFont +";\n	color: " + textColor + ";\n	font-size: " +fontSize+";\n}\n";
		code += "h1 {\n	font-family:"+hFont+";\n	font-size:150%;\n	color:"+secondColour+";\n}\n";
		code += "h2 {\n	font-family:"+hFont+";\n	font-size:110%;\n	color:"+thirdColour+";\n}\n";
		code += "h3 {\n	font-family:"+hFont+";\n	font-size:100%;\n	color:"+fifthColour+";\n}\n";
		code += "a {\n	color:"+firstColour+";\n}\n";
	} else {
		// LARGE CODE
		code = '@charset "utf-8";\n/* CSS Document */\n\n/* Large CSS Code created by Colour My CSS (www.colourmycss.com)*/\n\n/* REQUIRED */\n\n';
		
		code += "body {\n	padding: 0 0;\n	margin: 0 0; \n	font-family:"+ pFont +";\n	font-size:100%;\n}\n";
		
		code += "p {\n	font-family:"+ pFont +";\n	line-height:170%;\n	margin:15px 0px;\n	color: " + textColor + ";\n	font-size: " +fontSize+";\n}\n";
		code += "h1 {\n	font-family:"+hFont+";\n	font-size:150%;\n	color:"+secondColour+";\n	font-style:italic;\n	font-weight:lighter;\n	margin:0px 0px 8px 0px;\n	line-height:1.2em;\n}\n";
		code += "h2 {\n	font-family:"+hFont+";\n	font-size:110%;\n	color:"+thirdColour+";\n	font-weight:lighter;\n	margin:0px 0px 8px 0px;\n	line-height:1.2em;\n}\n";
		code += "h3 {\n	font-family:"+hFont+";\n	font-size:100%;\n	color:"+fifthColour+";\n	font-weight:lighter;\n	margin:0px 0px 8px 0px;\n	line-height:1.2em;\n}\n";
		code += "a {\n	text-decoration:none; \n	color:"+firstColour+";\n}\n";
		code += "a:hover {\n	text-decoration:underline;\n}\n";
		code += "\n/* STRUCTURE */\n\n";
		code += "#container {\n	margin: 0 auto;\n	width: 1000px;\n}\n";
		code += "#header {\n	position:relative;\n	height:160px;\n	width:980px;\n	padding: 0px 10px;\n}\n";
		code += "#content {\n	position:relative;\n	min-height:380px;\n	width:960px;\n	padding: 0px 20px;\n}\n";
		code += ".narrowColumn {\n	position:relative;\n	float:left;\n	width:220px;\n	margin:0px 10px;\n}\n";
		code += ".wideColumn {\n	position:relative;\n	float:left;\n	width:380px;\n	margin:0px 10px;\n}\n";
		code += ".halfColumn {\n	position:relative;\n	float:left;\n	width:460px;\n	margin:0px 10px;\n}\n";
		code += ".singleColumn {\n	position:relative;\n	float:left;\n	width:300px;\n	margin:0px 10px;\n}\n";
		code += ".doubleColumn {\n	position:relative;\n	float:left;\n	width:620px;\n	margin:0px 10px;\n}\n";
		code += ".tripleColumn {\n	position:relative;\n	float:left;\n	width:940px;\n	margin:0px 10px;\n}\n";
		code += ".row {\n	position:relative;\n	clear:both;\n	padding: 10px 0px 0px 0px;\n}\n";
		code += ".clearFix {\n	width:100%;\n	height:1px;\n	clear:both;\n}\n";
		code += "#footer {\n	position:relative;\n	width:980px;\n	padding: 30px 10px;\n	color:"+ fourthColour +";\n	background-color: "+ fifthColour +";\n	text-align:center;\n}\n";
		code += "#footer p {\n	color:"+ fourthColour +";\n	font-size:75%;\n}\n";
		code += "#footer a {\n	color:"+ fourthColour +";\n	text-decoration:none;\n}\n";
		code += "#footer a:hover {\n	color:"+ fourthColour +";\n	text-decoration:underline;\n}\n";
		
		









		
		
		//Add code
		code += "";
	}
	document.codeBox.codeText.value = code;
}


function changeElement(id, property, value) {
	element = document.getElementById(id);
	element.style[property] = value;
}

function hide(item) {
	//document.getElementById(item).style.display='none';
	
}

function show(item) {
	//document.getElementById(item).style.display='block';
	//$(item).fadeIn(100);
	
}