var index = 0;
var allan;
var ellen;

var colors = new Array(
	 {"name": "purple", "color": "#b5237b"}
	,{"name": "orange", "color": "#eb9a2b"}
	/*,{"name": "yellow", "color": "#f8c91f"}*/
	,{"name": "green", "color": "#a6b52a"}
	,{"name": "blue", "color": "#00a7ca"}
	,{"name": "red", "color": "#cb2b5a"}
);

var graphics = new Array(
	 "tshirt"
	,"bowling"
	,"tecken"
	,"hjarta"
	,"vin"
	,"lappstift"
	,"arm"
	,"krona"
);

function $(id){
	if (document.getElementById)
		return document.getElementById(id);
	else if (document.all)
		return document.all[id];
	
	return null;
}

function toggleColor(){
	if(index == colors.length)
		index = 0;
		
	if(!this.over){
		this.over = true;
		
		if(this.id == "allan"){
			$('ellen').style.backgroundColor = 
			ellen.pratbubbla.graphic.style.backgroundColor = "#fff";
			ellen.span.className = "";
			ellen.span.style.backgroundColor = colors[index].color;
			ellen.el.over = false;
		}else if(this.id == "ellen"){
			$('allan').style.backgroundColor = 
			allan.pratbubbla.graphic.style.backgroundColor = "#fff";
			allan.span.className = "";
			allan.span.style.backgroundColor = colors[index].color;
			allan.el.over = false;
		}
		
		var body = document.getElementsByTagName('body')[0];
		body.style.backgroundColor = colors[index].color;

		this.span.className = "over";
		this.span.style.backgroundColor = colors[index].color;
		this.style.backgroundColor = colors[index].color;
		
		var g = Math.floor(Math.random()*(graphics.length));
		this.pratbubbla.graphic.className = graphics[g];
		this.pratbubbla.graphic.style.backgroundColor = colors[index].color;
		
		$('color').value = colors[index].name;
		$('graphics').value = graphics[g];
		$('form1').action = this.link;
		index++;
	}
}

function onClick(){
	$('form1').submit();
	return false;
}

function ClickObject(el, link){
	el.over = false;
	el.span = el.getElementsByTagName('span')[0];
	el.pratbubbla = el.getElementsByTagName('div')[0];
	el.pratbubbla.graphic = el.pratbubbla.getElementsByTagName('div')[0];
	el.onmouseover = toggleColor;
	el.onclick = onClick;
	el.link = link;
	this.el = el;
	this.pratbubbla = el.pratbubbla;
	this.span = el.span;
}

window.onload = function(){
	for(var i = 0; i < graphics.length; i++){
		var img = new Image();
		img.src = "/img/intro/" + graphics[i] + ".png";
	}
	allan = new ClickObject($('allan'), "/allan/");
	ellen = new ClickObject($('ellen'), "/ellen/");
}