$(document).ready(function() {
	$('#sound_on').addClass('Selected');
	$("#sound_on").show();
	$("#sound_off").hide();
	
	
	$("#soundObject").jPlayer( {
		ready: function () {
		  $(this).setFile("sounds/comptine.mp3").play(); // Auto-Plays the file
		},
		swfPath: "jPlayer/js"
	  });

});


// when a tab is clicked, remove .Selected from all tabs, then add it 
// to the clicked tab. Then set the #View "left: " attribute to whatever 
// number of px coresponds with the clicked tab (in 900px increments)
$(document).ready(function() {
		
var FadeView = function() {

		// reset all tabs
		$('#SoundImages ul').children().removeClass('Selected');
		// add the class .Selected to the clicked tab
		$(this).addClass('Selected');	
		
		
		// determine which tab was clicked by checking for it's tab number
		
		if ( $(this).hasClass('sound_on') ) {
			
			$("#sound_on").hide();
			$("#sound_off").show();
			$("#soundObject").pause();
		}
		
		else if ( $(this).hasClass('sound_off') ) {
			$("#sound_on").show();
			$("#sound_off").hide();
			$("#soundObject").play();
		}
};


// Attach the function FadeView to the click action any tab
$('#SoundImages ul li').click(FadeView);

});