Three buttons(span's), jQuery IF clicked, addClass - removeClass

Three buttons(span's), jQuery IF clicked, addClass - removeClass

I have three buttons (spans) that looks like this:
<span id="size_default"><?php echo JText::_('VIDEO_DEFAULT');?></span>
<span id="size_450"><?php echo JText::_('VIDEO_450');?></span>
<span id="size_600"><?php echo JText::_('VIDEO_600');?></span>
These are supposed to work like buttons, and they work now, but not
correctly, what I need is, when for example "size_600" is cliked, 2
actions must occur ->
<span id="size_600">
must get a "active" class + remove the "active" class on other 2 spans if
they were clicked before AND then add a class to OTHER div and remove
other classes that are related to the other 2 spans...
The description I made may look confusing, but here is the jQuery code I
wrote, this should be more clear:
$('size_default').addEvent('click',function(){
$('size_default').addClass('active');
$('youtube-player').addClass('h_355');
$('size_450').removeClass('active');
$('size_600').removeClass('active');
$('youtube-player').removeClass('h_450');
$('youtube-player').removeClass('h_600');
});
$('size_450').addEvent('click',function(){
$('size_450').addClass('active');
$('youtube-player').addClass('h_450');
$('size_355').removeClass('active');
$('size_600').removeClass('active');
$('youtube-player').removeClass('h_355');
$('youtube-player').removeClass('h_600');
});
$('size_600').addEvent('click',function(){
$('size_600').addClass('active');
$('youtube-player').addClass('h_600');
$('size_355').removeClass('active');
$('size_450').removeClass('active');
$('youtube-player').removeClass('h_355');
$('youtube-player').removeClass('h_450');
});
Currently it "does" it's work when you click ONE time for each 3
spans(buttons), but after that only the first block of jQuery code works
(size_default)...
Can somebody give me a hand on this please.. I'm not to good in jQuery...
Thank you