var ui = {
	
	treeFadeDistance: 20,
	currentSkill: 0,

	init: function(){
		//clicking on stars
		$('#skills .skill').click(function(e){
			$('#skills .skill').removeClass('active');
			$(e.target).addClass('active');
			ui.showSkill($(e.target));
		});
		$('#skills .skill:first').click();
		
		
		//hovering over stars (show tooltip)
		$('.star').live('mouseenter', function(e){
			$star = $(e.target);
			$star = !$star.hasClass('star') ? $star.closest('.star') : $star;
			ui.showTooltip($star);
		}).live('mouseleave', function(e){
			ui.hideTooltip();
		});
		
		//save build
		$('#linkbuild').click(ui.linkBuild);
		
		//donate button
		$('#donatebutton').click(function(){document.forms['paypaldonateform'].submit()});
		
		//reset perks
		$("#resetall").click(function(e){
			e.preventDefault();
			if(!confirm('Are you sure?')) return;
			
			for(var index in calculator.chosenPerks){
				calculator.chosenPerks[index] = [];
			}
			
			$('.currentrank').text('0');
			calculator.updateStats();
			calculator.updateStars();
		});
		
	},
	
	/*tipsy: function(skill_id){
		$('.skilltree[data-skill='+skill_id+'] .star').tipsy({
			delayIn: 150,      					// delay before showing tooltip (ms)
			delayOut: 250,     					// delay before hiding tooltip (ms)
			fade: true,     					// fade tooltips in/out?
			fallback: '-',    					// fallback text to use when no tooltip text
			gravity: 's',    					// gravity
			html: true,     					// is tooltip content HTML?
			live: true,     					// use live event support?
			offset: 100,       					// pixel offset of tooltip from element
			opacity: 0.7,						// opacity of tooltip
			title: function(){
				
				
			},	// attribute/callback containing tooltip text
			trigger: 'hover'					// how tooltip is triggered - hover | focus | manual			
		});
	},*/
	
	showTooltip: function($star){
		var perk = calculator.skills[ui.currentSkill].perks[$star.data('id')];
		var rank = calculator.chosenPerks[ui.currentSkill][perk.id] | 0;
		var html = perk.ranks[Math.max(0, rank - 1)].description;
		
		if(rank > 0 && perk.ranks[rank] != undefined)
			html += "<br /> Next rank: "+perk.ranks[rank].description;
				
		if(rank > 0)
			html += "<br /><small>Right click to remove a point";
		
		$("#tip").html(html).stop().fadeTo(250, 0.7);
	},
	
	hideTooltip: function(){
		$("#tip").stop().fadeOut(250);
	},
	
	linkBuild: function(){
		if(parseInt($('#levelrequired').text()) == 1){
			alert('You have to pick some perks first.');
			return;
		}
		
		api.post('perks/savebuild', {perksjson: $.toJSON(calculator.chosenPerks)}, function(data){
			window.prompt('Here you go. Use this url to link to your build.', data.url);
		});
	},
	
	showSkill: function($target){
		if(calculator.loading) return;
		var id = $target.data('skill');
		var name = $target.text();
		
		if(id == ui.currentSkill) return;
		$('.currentskillname').text(name);
		
		if(ui.currentSkill)
			$('.skilltree[data-skill='+ui.currentSkill+']').css('top', 0).stop().fadeOut(500).animate({top: ui.treeFadeDistance}, {duration:500, queue:false});
		$('.skilltree[data-skill='+id+']').css('top', -ui.treeFadeDistance).stop().fadeTo(500, 1).animate({top: 0}, {duration:500, queue:false});
				
		ui.currentSkill = id;		
		calculator.loadSkill(id);
	},
	
	dragStars: function(){
		$('.star').draggable();
	}
	
}