var detailNode = null;

function getSkillNode( id ) {
	return document.getElementById( id );
}

function getStatusNode( id ) {
	var statusNode = null;
	var node = document.getElementById( id );
	for ( var i = 2; i < node.childNodes.length; i++ ) {
		if ( 1 == node.childNodes[ i ].nodeType ) {
			var classAttribute = node.childNodes[ i ].className;
			if ( "status" == classAttribute ) {
				statusNode = node.childNodes[ i ];
				break;
			}
		}
	}
	return statusNode;
}

function clearNode( node ) {
	if ( null != node ) {
		while ( 0 < node.childNodes.length ) {
			var child = node.firstChild;
			node.removeChild( child );
		}
	}
}

function fillDetailNode( node, skill ) {
	// name
	var name = document.createElement( "span" );
	name.className = "name";
	name.appendChild( document.createTextNode( skill.name ) );
	node.appendChild( name );
	//description
	var description = document.createElement( "span" );
	description.className = "description";
//	description.appendChild( document.createTextNode( skill.description ) );
	description.innerHTML = skill.description;
	node.appendChild( description );
	//properties
	if ( 0 < skill.properties.length ) {
		for ( var i = 0; i < skill.properties.length; i++ ) {
			var property = document.createElement( "span" );
			property.className = "property";
			property.innerHTML = skill.properties[ i ].output;
			node.appendChild( property );
		}
	}
	//property groups
	if ( 0 < skill.propertyGroups.length ) {
		for ( var i = 0; i < skill.propertyGroups.length; i++ ) {
			var propertyGroup = document.createElement( "span" );
			propertyGroup.className = "property group";
			propertyGroup.innerHTML = skill.propertyGroups[ i ].output;
			node.appendChild( propertyGroup );
			for ( var j = 0; j < skill.propertyGroups[ i ].properties.length; j++ ) {
				var property = document.createElement( "span" );
				property.className = "property group detail";
				property.innerHTML = skill.propertyGroups[ i ].properties[ j ].output;
				node.appendChild( property );
			}
		}
	}
	//requirements
	if ( 0 < skill.requirements.length ) {
		var requirement = document.createElement( "span" );
		requirement.className = "requirementHead";
		requirement.innerHTML = "Requirements:"
		node.appendChild( requirement );
		for ( var i = 0; i < skill.requirements.length; i++ ) {
			var output = skill.requirements[ i ].output;
			if ( "" != output ) {
				var requirement = document.createElement( "span" );
//				requirement.className = skill.requirements[ i ].type;
				requirement.className = "requirement";
				if ( ! skill.requirements[ i ].complied() ) {
					requirement.className += " required";
				}
				requirement.innerHTML = output;
				node.appendChild( requirement );
			}
		}
	}
}

function updateSkill( id ) {
	var character = getCharacter(); 
	var skill = character.getSkill( id );
	node = document.getElementById( id );
	node.className = "skill";
	if( !activeCalc ) {
		if ( skill.canSelect() ) {
			node.className += " canselect";
		}
		if ( skill.canDeselect() ) {
			node.className += " candeselect";
		}
		if ( skill.selected() ) {
			node.className += " selected";
		}
	} else {
		if ( skill.selected() ) {
			if (skill.activationcandidate)
				node.className += " canactivate";
			else
				node.className += " cannotactivate";
			if( character.isActive( id ) )
				node.className += " active";
			if( character.isGroupActive( id ) )
				node.className += " groupactive";
		}
	}
}

function updateSkills() {
	for ( var skillId in getCharacter().skills ) {
		updateSkill( skillId );
	}
}

function updateLink() {
	var character = getCharacter();
	var skills = "";
	for ( groupid in character.skillGroups )
		skills += character.skillGroups[groupid].asChar();
	// update link
	var link = linkBase + character.characterClass + "/?l=" + character.level + "&s=" + skills;
	if( activeCalc )
		link += "&c=" + character.calcToChar();
	var node = document.getElementById( "outputlink" );
	clearNode( node );
	node.setAttribute( "href", link );
	node.appendChild( document.createTextNode( link ) );
}

function updateSkillPoints() {
	var pointNode = null;
	var node = document.getElementById( "skillpoints" );
	for ( var i = 1; i < node.childNodes.length; i++ ) {
		if ( 1 == node.childNodes[ i ].nodeType ) {
			if ( "points" == node.childNodes[ i ].className ) {
				pointNode = node.childNodes[ i ];
				break;
			}
		}
	}
	clearNode( pointNode );
	pointNode.appendChild( document.createTextNode( getCharacter().skillPoints ) );
}

function updateCalc() {
	var character = getCharacter();
	
	// update morale bar
	var txtnode = document.getElementById( "d1" );
	var barnode = document.getElementById( "d2" );
	var morale = character.morale;
	var percent = Math.min(100, morale);
	clearNode( txtnode );
	txtnode.appendChild( document.createTextNode( morale ) );
	barnode.style.width = percent + '%';
	
	// display effects
	var fx = '<span class="fxhead">Self Effects</span>';
	var fxnode = document.getElementById( "effects" );
	var fxlist = character.calculateEffects();
	for ( fxid in fxlist ) {
		var effect = fxlist[ fxid ];
		fx += '<span class="fxitem">' + effect.output +'</span>';
	}
	fxnode.innerHTML = fx;
}

function showSkillDetails( skillId ) {
	// fill details with skill informations
	var skill = getCharacter().getSkill( skillId );
	var detailNode = document.getElementById( "details_text" );
	fillDetailNode( detailNode, skill );
	// position details
	var skillNode = document.getElementById( skillId );
	var top = parseInt(skillNode.style.top.substring( 0, skillNode.style.top.length - 2 ));
	var left = parseInt(skillNode.style.left.substring( 0, skillNode.style.left.length - 2 ));
	detailNode = detailNode.parentNode;
	
	if ( ((skill.group.row - 1) % (6)) < 2 ) {
		detailNode.style.bottom = "auto";
		detailNode.style.top = (top + 32 ) + "px";
	} else {
		detailNode.style.top = "auto";
		detailNode.style.bottom = (480 - top) + "px";
	}
	if ( skill.group.row <= 6 ) {
		left = left + 50;
		detailNode.style.left = left + "px";
	} else {
		left = left - 270;
		detailNode.style.left = left + "px";
	}
	// show details
	recursiveVisibility ( detailNode, "visible" );
}

function hideSkillDetails( skillId ) {
	var node = document.getElementById( "details_text" );
	clearNode( node );
	recursiveVisibility (node.parentNode, "hidden");
}

function recursiveVisibility( node, visibility ) {
	node.style.visibility = visibility;
	for ( var i = 0; i < node.childNodes.length; i++ ) {
		node.childNodes[i].style.visibility = visibility;
	}
}

function updateSkillAndDeps( skill, skillId ) {
	updateSkill( skillId );
	for ( var i = 0; i < skill.dependentSkills.length; i++ ) {
		updateSkill( skill.dependentSkills[ i ].id );
	}
	for ( var i = 0; i < skill.requirements.length; i++ ) {
		if ( skill.requirements[ i ] instanceof SkillRequirement ) {
			updateSkill( skill.requirements[ i ].prevSkill.id );
		}
	}
	
}

function toggleSkill( skillId ) {
	if( !activeCalc ) {
		var skill = getCharacter().getSkill( skillId );
		if ( skill.selected() && skill.canDeselect() ) {
			skill.deselect();
			getCharacter().skillPoints++;
			if ( getCharacter().skillPoints == 1 ) {
				updateSkills();
			} else {
				updateSkillAndDeps( skill, skillId );
			}
			updateSkillPoints();
			updateLink();
		} else if ( (! skill.selected() ) && skill.canSelect() ) {
			skill.select();
			getCharacter().skillPoints--;
			if ( getCharacter().skillPoints == 0 ) {
				updateSkills();
			} else {
				updateSkillAndDeps( skill, skillId );
			}
			updateSkillPoints();
			updateLink();
		}
	} else {
		toggleActiveSkill( skillId );
	}
}

function toggleActiveSkill( skillId ) {
	clearStatusMsg();
	addStatusMsg( getCharacter().toggleActiveSkill( skillId ) );
	updateCalc();
//	updateSkill( skillId );
	updateSkills();
	updateLink();
}

function setClass() {
	window.location.href = "../" + document.forms.character.elements.characterclass.value + "/";
}

function setLevel() {
	var character = getCharacter();
	character.setLevel( document.forms['character'].elements['level'].value );
	document.forms['character'].elements['level'].selectedIndex = character.level - 1;
	updateSkills();
	updateSkillPoints();
	updateLink();
}

function skillreset() {
	var character = getCharacter();
	for ( var skillId in character.skills ) {
		var skill = character.getSkill( skillId );
		if(skill._selected && skill.type == "DEFAULT" ) {
			character.skillPoints++			
			skill._selected = false;
		}
	}
	updateSkillPoints();
	if ( activeCalc) 
		toggleCalculator();
	else {
		updateSkills();
		updateLink();
	}
}

var activeCalc = false;
function toggleCalculator() {
	var node = document.getElementById( "calculator" );
	if( activeCalc ) {
		node.style.visibility = "hidden";
		clearNode( node );
	} else {
		getCharacter().resetActiveSkills();
		node.innerHTML = createCalculator();
		updateCalc();
		addStatusMsg( "Click on a selected skill to add its effects" );
		node.style.visibility = "visible";
	}
	activeCalc = !activeCalc;
	updateSkills();
	updateLink();
}

function createCalculator() {
	var output = '';
	output += '<div id="attributes" class="attributes"><div class="label" id="lb_morale">Morale:</div><div id="morale" class="morale" align="left">';
	output += '<div id="d2" class="d2"><div id="d1" class="d1"></div></div></div></div>';
	output += '<div id="statusmsg"></div>';
	output += '<div id="effects" class="effects"></div>';
	return output;
}

function addStatusMsg( msg ) {
	var node = document.getElementById( "statusmsg" );
	var output = document.createElement( "span" );
	output.className = "statusmsg";
	output.appendChild( document.createTextNode( msg ) );
	node.appendChild( output );
}

function clearStatusMsg( msg ) {
	var node = document.getElementById( "statusmsg" );
	clearNode ( node ); 
}

function createHTML() {
	var output = '';

	// character
	output += '<form name="character" id="character">';
	output += '<div id="top"><span id="name">' + character.name + ' Skill Planner</span><span id="titleright"><label>Class</label>';
	output += '<select name="characterclass" id="characterclass" onchange="setClass()">';
	for ( var name in classes ) {
		output += '<option value="' + name + '"';
		if ( character.characterClass == name ) {
			output += ' selected="selected"';
		}
		output += '>' + classes[ name ] + '</option>';
	}
	output += '</select>';
	output += '&nbsp;&nbsp;&nbsp;<label>Level</label>';
	output += '<select name="level" id="level" onchange="setLevel()">';
	for ( var i = 1; i <= maxLevel; i++ ) {
		output += '<option value="' + i + '"';
		if ( character.level == i ) {
			output += ' selected="selected"';
		}
		output += '>' + i + '</option>';
	}
	output += '</select>';
	output += '</span></div>';
	
	output += '<div id="header">';
	output += '<div id="skillpoints">Remaining skill points: <span class="points"></span><img src="../images/scroll.gif" border="0" align="middle" /></div>';
	output += '<div class="skillpointsright">';
	output += '<span class="utility">';
	if( character.odd )
		output += '<img src="../images/new.png" alt="New!"><input type="button" class="calculator" onclick="toggleCalculator()" value="Calculator"/>&nbsp;&nbsp;';
	output += '<input type="button" class="reset" onclick="skillreset()" value="Reset"/>';
	output += '</span></div></div>';
	output += '<div class="outputlink">Link: <a id="outputlink" href=""></a></div>';
	output += '</form>';

	// skills
	output += '<div class="skilltree"><div class="skills">';
	var groupRows = 6;
	for ( var i = 0; i < character.skillGroups.length; i++ ) {
		var style = 'top: ';
		style += i<groupRows?(i * 70 + 30):((i - groupRows) * 70 + 30);		
		style += 'px; left: ';
		style += i<groupRows?20:320;
		style += 'px;';
		output += '<div class="skillgroup" id="' + character.skillGroups[i].id + '" style="' + style + '">';
		output += character.skillGroups[i].name + "</div>";
		for ( var j = 0; j < character.skillGroups[i].skills.length; j++ ) {
			var skill = character.skillGroups[i].skills[ j ];
			var style = 'top: ';
			style += i<groupRows?(i * 70 + 60):((i - groupRows) * 70 + 60);
			style += 'px; left: ';
			style += i<groupRows?(j * 50 + 30):(j * 50 + 330);
			style += 'px;';
            output += '<div class="skill" id="' + skill.id + '" style="' + style + '" onmouseover="showSkillDetails(\'' + skill.id + '\')" onmouseout="hideSkillDetails(\'' + skill.id + '\')" onclick="toggleSkill(\'' + skill.id + '\')">';
            output += '<div class="skill_icon">';
			output += '<img class="icon" src="' + iconPath + skill.id + '.png" /></div>';
			output += '</div>';
		}
	}
	output += '<div class="details" id="skilldetails">' +
			'<div class="details_bg"></div>' +
			'<div class="details_text" id="details_text"></div>' +
			'</div>';
			
			
	output += '</div></div>';


	var outputNode = document.getElementById( "charplanner" );
	outputNode.className = character.characterClass.toLowerCase() + " class";
	outputNode.innerHTML = output;

	updateSkillPoints();
	updateSkills();
	updateLink();
}

createCharacter();
createHTML();
parseSkillLink();
parseCalcLink();