$(function(){
	
	// config
	var active_accordion = 0;
	var actid = "0"+(active_accordion + 1);
	
	// repopulate container background & speech bubble set onload
 	$("div#sb-set-"+actid).show();
	$("div#container").removeAttr('class');
	$("div#container").addClass(document.getElementById("img-class-"+actid).value);
	
	$('#accordion').accordion({
		active: active_accordion,
		header: '.header',
		event: 'click',
		collapsible: false,
		autoHeight: false,
		animated: 'swing',
		duration: 600,
		change: function(event, ui) {
			// get header id						
			var newlength = ui.newHeader.length;
			var newbgsrc = ui.newHeader.attr('id');
			var oldbgsrc = ui.oldHeader.attr('id');
			
			var currbgsrc = oldbgsrc;			
			if (newlength == 1) currbgsrc = newbgsrc;	
			
			var currid = currbgsrc.replace("header-","");
						
			// change speech bubble
			$('.speech-bubbles').hide();
			$('#sb-set-'+currid).fadeIn();
			$("div#container").removeAttr('class');
			$("div#container").addClass(document.getElementById("img-class-"+currid).value);
		}
	});	
});