var deleteButton = '<a href="#" onclick="removeSkill(this)" ><img src="images/xButton.png" /></a>' ;


function removeSkill(item) 
{
	type = $(item).parent().parent().attr('id') ;
	
	if( type == 'selected_chillout_skills' ) 
	{
		$( "img.chillout_bottle" ).last().remove() ;
	}
	if( type == 'selected_performance_skills' ) 
	{
		$( "img.performance_bottle" ).last().remove() ;
	}
	if( type == 'selected_basic_skills' ) 
	{
		$( "img.basic_bottle" ).last().remove() ;
	}	
	
	$(item).parent().remove() ;
}

function getRandomMargin() 
{
	margin = (Math.floor((Math.random() * 10)) + 1) + 'px ';
	return 'style="margin-left: 5px; margin-bottom: ' + margin +'"' ;
}

function initSkillNavi() 
{
	$( "ul.chillout_skills li a" ).click( function() {
		if( $( "ul#selected_chillout_skills" ).html().indexOf( $(this).html() ) != -1 ) return ;
		
		$( "div#bar_bottles" ).append( '<img class="chillout_bottle" ' + getRandomMargin() + ' src="images/bottles/bottle3_' + (Math.floor((Math.random() * 5)) + 1)   + '.png" />' ) ;
		$( "ul#selected_chillout_skills" ).append( '<li>'+$(this).html() + deleteButton +'</li>') ;
	});
	
	$( "ul.performance_skills li a" ).click( function() {
		if( $( "ul#selected_performance_skills" ).html().indexOf( $(this).html() ) != -1 ) return ;
		
		$( "div#bar_bottles" ).append( '<img class="performance_bottle" ' + getRandomMargin() + ' src="images/bottles/bottle2_' + (Math.floor((Math.random() * 5)) + 1)   + '.png" />' ) ;
		$( "ul#selected_performance_skills" ).append( '<li>'+$(this).html() + deleteButton +'</li>') ;
	});
	
	$( "ul.basic_skills li a" ).click( function() {
		if( $( "ul#selected_basic_skills" ).html().indexOf( $(this).html() ) != -1 ) return ;
		
		
		
		$( "div#bar_bottles" ).append( '<img class="basic_bottle" ' + getRandomMargin() + ' src="images/bottles/bottle1_' + (Math.floor((Math.random() * 5)) + 1)   + '.png" />' ) ; 
		$( "ul#selected_basic_skills" ).append( '<li>'+$(this).html() + deleteButton +'</li>') ;
	});
}


$( function() {
	initSkillNavi() ;
	
}) ;