var _caseSelector;

function InitCaseSelector() {
	if(_caseSelector == null) {
		_caseSelector = new CaseSelector();
	}
}

function CaseSelector() {
    this.cases= new Array();
	this.selectedIndex = 0;
    // add question to survey and create reference in question to the survey
    CaseSelector.prototype.addCase = function(casen) { casen.caseSelector = this; this.cases.push(casen); return; };

    // find answer option
    this.getCaseByIndex = GetCaseByIndex;
	CaseSelector.prototype.changeSelectedIndex = function(index) { this.selectedIndex = index; RenderCaseSelector() };

    
}

function Case(name, headline, teaser, url) {
	this.caseSelector;
	this.name = name;
	this.headline = headline;
	this.teaser = teaser;
	this.url = url;
}

function GetCaseByIndex(index) {
	return caseSelector.cases[index];
}

function RenderCaseSelector() {

	var contentfield = document.getElementById('divcaseselector');
	var content = "";
	content += "<div style='overflow:auto; height:20px;'>";
	content += "<div style='float:left; width:20px;'><a href='javascript:_caseSelector.changeSelectedIndex(" + (_caseSelector.selectedIndex - 1) + ")'><</a></div>";
	content += "<div style='float:left; width:220px; text-align:center; color:white; font-size:11px;'>";
	    for(var i = 0; i<_caseSelector.cases.length; i++) {

	        content += "";
		    if(i != _caseSelector.selectedIndex) {
		        content += "<div style='float:left; margin:0px; 5px 0px 5px; width:70px;'><a href='javascript:_caseSelector.changeSelectedIndex(" + i + ");' style='color:white;'>" + _caseSelector.cases[i].name + "</a></div>";
		    }
		    else {
		        content += "<div style='float:left; margin:0px; 5px 0px 5px; width:70px;'>" + _caseSelector.cases[i].name + "</div>"; 
		    }
		    
			content += "";
			
	    }
	content += "</div>";
	var currentCase = _caseSelector.cases[_caseSelector.selectedIndex];

	content += "<div style='float:left; width:20px; text-align:right;'><a href='javascript:_caseSelector.changeSelectedIndex(" + (_caseSelector.selectedIndex + 1) + ")'>></a></div>";
	content += "</div>";
	content += "<div style='height:1px; background-color:silver;'></div>";
	content += "<div>";
	content += "<div style='font-size:14px; font-weight:bold; color:silver; margin:10px 0px 5px 0px;'>" + currentCase.headline + "</div>";
	content += "<div style='color:silver; margin:10px 0px 20px 0px; color:white;'>" + currentCase.teaser + "</div>";
	content += "<div><a href='" + currentCase.url + "' style='color:white;'>Se hele casen</a></div>";
	content += "</div>";

	contentfield.innerHTML = content;
}