// Author: Tam Nguyen
// Date: 12 July 2009
// Script addresses two elements:
// 1) Show/Hide elements of a page
// 2) Changing CSS

// 1) Show/Hide elements of a page
// Pressing the button shows the name of list of items. Once button is pressed
// the button text changes back to 'hide names,' so users can again hide the 
// list of items. This function uses a 'IF' loop.
$(document).ready(function() {
var $change = $('.hidden');
$change.hide();  
$('#switch').click(function() {
if ($change.is(':hidden')) {
$change.show(); 
$(this).text('hide names');
} else {
$change.hide();
$(this).text('show names');
}
return false;
});


// 2) Changing CSS
// Users have a choice of 3 buttons: large text, default and small text
// Pressing on each will change the class of the CSS to the selected option
// while removing the old class. This uses jQuery's bind function.
$('#default').bind('click', function() {
$('#middle').removeClass('small');
$('#middle').removeClass('large');
});
$('#small').bind('click', function() {
$('#middle').addClass('small');
$('#middle').removeClass('large');
});
$('#large').bind('click', function() {
$('#middle').removeClass('small');
$('#middle').addClass('large');
});

});