function toggleGroup(swtch, elmnt)
{
	if (!$(elmnt).visible()) {
		$(swtch).siblings().each(function(s) {$(s).removeClassName('active');});
		$(swtch).addClassName('active');
		// $(elmnt).siblings().each(function(e) {$(e).hide();});
		// new Effect.Fade(elmnt);

		// $(elmnt).setStyle({'position': 'absolute'});
		$(elmnt).siblings().each(function(e) {new Effect.Fade(e);});
		new Effect.Appear(elmnt);
		// $(elmnt).setStyle({'position': 'static'});

		// $(elmnt).siblings().each(function(e) {$(e).hide();});
		// $(elmnt).siblings().each(function(e) {new Effect.Shrink$(e).hide();});
		// new Effect.Grow(elmnt, {direction: 'top-left'});
	}
}



function toggleTracks(bttn, composition)
{
	if ($(composition).innerHTML == $(composition + "_0").innerHTML) {
		new_content = composition + "_1";

		$(bttn).removeClassName("plus");
		$(bttn).addClassName("minus");
	} else {
		new_content = composition + "_0";

		$(bttn).removeClassName("minus");
		$(bttn).addClassName("plus");
	}

	$(new_content).setStyle({width: $(composition).getWidth() + 'px'});

	current_height = $(composition).getHeight();
	new_height = $(new_content).getHeight();


	new Effect.Morph(composition, {
		duration: 0.5,
		queue: 'end',
		style: 'opacity: 0;',
		beforeStart: function(){
			// Resize.
			if (current_height < new_height) {
				new Effect.Morph(composition, {
					duration: 1.0,
					style: 'height: ' + new_height + 'px;'
				});
			} else {
				$(composition).setStyle({height: current_height + 'px'});
			}
		}.bind(this),
		afterFinish: function(){
			$(composition).update($(new_content).innerHTML);
		}.bind(this)
	});
	new Effect.Morph(composition, {
		duration: 1.0,
		queue: 'end',
		style: 'opacity: 1;',
		afterFinish: function(){
			// Resize.
			if (current_height >= new_height) {
				new Effect.Morph(composition, {
					duration: 1.0,
					queue: 'end',
					style: 'height: ' + new_height + 'px;'
				});
			}
		}.bind(this)
	});
}



function changeTexts(swtch, elmnt, text_container)
{
	if ($(elmnt).innerHTML != $(text_container).innerHTML) {
		$(text_container).setStyle({width: $(elmnt).getWidth() + 'px'});

		height_elmnt = $(elmnt).getHeight();
		height_text_container = $(text_container).getHeight();


		$(swtch).siblings().each(function(s) {
			if ($(s).hasClassName('active'))
				swtch_prev = $(s).identify();
		});
		$(swtch_prev).removeClassName('active');

		new Effect.Morph(elmnt, {
			duration: 0.5,
			style: 'color: #8f8f8f;',
			beforeStart: function(){
				// Resize.
				if (height_elmnt < height_text_container) {
					new Effect.Morph(elmnt, {
						duration: 1.0,
						style: 'height: ' + height_text_container + 'px;'
					});
				} else {
					$(elmnt).setStyle({height: height_elmnt + 'px'});
				}
			}.bind(this)
		});
		new Effect.Morph(elmnt, {
			duration: 0.5,
			queue: 'end',
			style: 'color: #ffffff;',
			afterFinish: function(){
				$(elmnt).update($(text_container).innerHTML);
			}.bind(this)
		});
		new Effect.Morph(elmnt, {
			duration: 0.5,
			queue: 'end',
			style: 'color: #faaa00;',
			beforeStart: function(){
				$(swtch).addClassName('active');
			}.bind(this)
		});
		new Effect.Morph(elmnt, {
			duration: 1.0,
			queue: 'end',
			style: 'color: #000000;',
			afterFinish: function(){
				// Resize.
				if (height_elmnt >= height_text_container) {
					new Effect.Morph(elmnt, {
						duration: 1.0,
						queue: 'end',
						style: 'height: ' + height_text_container + 'px;'
					});
				}
			}.bind(this)
		});


	}
}



function sonoZoom(sono_id, max_width, sibling_width, initial_state)
{
	siblings_count = 0;
	$(sono_id).siblings().each(function(s){
		siblings_count++;
	});
	if (siblings_count > 0) {
		sono_width = max_width - siblings_count * sibling_width;

		if ($(sono_id).getWidth() >= (sono_width - 3) || $(sono_id).getWidth() >= (sono_width + 3)) {
		// Shrink sono.
			new Effect.Morph(sono_id, { 
				duration: 1,
				style: {
					width: eval("initial_state." + sono_id) + 'px'
				},
				beforeStart: function(){
					// Playlist self element.
					s_playlist = eval("'" + sono_id + "'.sub('sono_', '')");
					$(s_playlist).removeClassName('selected');

					$(sono_id).siblings().each(function(s){
						// Playlist sibling element.
						s_playlist = eval("'" + s.identify() + "'.sub('sono_', '')");
						$(s_playlist).removeClassName('selected');

						if (s != sono_id)
							$(s).morph('width: ' + eval("initial_state." + s.identify()) + 'px;');
					});
				}.bind(this)
			});
		} else {
		// Increase sono.
			new Effect.Morph(sono_id, { 
				duration: 1,
				style: {
					width: sono_width + 'px'
				},
				beforeStart: function(){
					// Playlist self element.
					s_playlist = eval("'" + sono_id + "'.sub('sono_', '')");
					$(s_playlist).addClassName('selected');

					$(sono_id).siblings().each(function(s){
						// Playlist sibling element.
						s_playlist = eval("'" + s.identify() + "'.sub('sono_', '')");
						$(s_playlist).removeClassName('selected');

						$(s).morph('width: ' + (sibling_width - 1) + 'px;');
					});
				}.bind(this)
			});
		}
	}
}



var SlimPlayer = Class.create();
SlimPlayer.prototype = 
{
	initialize: function(cmd_url, player_id)
	{
		this.cmd_url = cmd_url;
		this.player_id = player_id;

		this.observe_slim_interval = 5;
	},
	cmd: function(act)
	{
		new Ajax.Request(this.cmd_url, {
			encoding: 'UTF-8',
			method: 'get',
			parameters: 'player=' + this.player_id + '&do=' + act
		});

		this.set_pressed(act);
	},
	observe_slim: function()
	{
		this.slim_observer = new PeriodicalExecuter(function(){
			new Ajax.Request(this.cmd_url, {
				encoding: 'UTF-8',
				method: 'get',
				requestHeaders: {Accept: 'X-JSON'},
				parameters: 'player=' + this.player_id + '&do=status',
				onSuccess: function(transport, json){
					//if (json == null) {
						//json = transport.headerJSON;
					//}
					$('mode').value = json.mode;
					$('last_known_index').value = $F('playlist_cur_index');
					$('playlist_cur_index').value = json.playlist_cur_index;
					$('playlist_cur_title').value = json.playlist_cur_title;
					$('time').value = json.time;

					// Update timer.
					var time_arr = json.time.split(':');
					var time = parseInt(time_arr[0]) * 60 + parseInt(time_arr[1]);
					var duration_arr = json.playlist.tracks[json.playlist_cur_index]["duration"].split(':');
					var duration = parseInt(duration_arr[0]) * 60 + parseInt(duration_arr[1]);
					var part = Math.floor(10 * time / duration);
					$('part').value = part;

					var i = 0;
					$('progress_bar').childElements().each(function(item){
						if (i < part) {
						// Already played.
							item.removeClassName('playing');
							item.addClassName('played');
						} else if (i > part) {
						// To be played.
							item.removeClassName('playing');
							item.removeClassName('played');
						} else {
						// Now playing.
							item.addClassName('playing');
						}

						i++;
					});

					// TODO: Update the playlist.
				}
		})}.bind(this), this.observe_slim_interval);
	},
	set_pressed: function(active_ctrl)
	{
		if (active_ctrl == 'pause') {
			$('pause').addClassName('pressed');
			$('play').removeClassName('pressed');
			$('stop').removeClassName('pressed');
		} else if (active_ctrl == 'play') {
			$('pause').removeClassName('pressed');
			$('play').addClassName('pressed');
			$('stop').removeClassName('pressed');
		} else if (active_ctrl == 'stop') {
			$('pause').removeClassName('pressed');
			$('play').removeClassName('pressed');
			$('stop').addClassName('pressed');

			//$('playlist').childElements().each(function(ctrl){
				//$('ctrl_' + ctrl.identify()).removeClassName('playing');
				//$('ctrl_' + ctrl.identify()).addClassName('jump');
			//});

			$$("#playlist li").each(function(ctrl){
				$('ctrl_' + ctrl.identify()).removeClassName('playing');
				$('ctrl_' + ctrl.identify()).addClassName('jump');
			});
		} else {
			//$('pause').removeClassName('pressed');
			//$('play').removeClassName('pressed');
			//$('stop').removeClassName('pressed');
		}
	},
	start: function()
	{
		// Set the form observer.
		new Form.Observer('status', 0.5, function(form, value){
			if ($F('last_known_index') != $F('playlist_cur_index')) {
				// Change the sonogram.
				new Effect.Morph($('sonogram'), {
					duration: 2.0,
					style: 'opacity: 0;',
					afterFinish: function(){
						$('sonogram').setStyle({backgroundImage: "url('../../skins/common/ideama/sonograms/" + $F('playlist_cur_title') + ".gif')"});
					}.bind(this)
				});
				new Effect.Morph($('sonogram'), {
					duration: 2.0,
					queue: 'end',
					style: 'opacity: 1;',
				});

				if ($($F('playlist_cur_index')).visible()) {
				// The playlist is not closed.
					//$('playlist').select('.info').each(function(elmnt){
						//elmnt.writeAttribute({onClick:'player.cmd("jump' + elmnt.ancestors()[0].identify() + '";'});
					//});
					if ($F('last_known_index')) {
						$('ctrl_' + $F('last_known_index')).writeAttribute({onClick:"player.cmd('jump" + $F('last_known_index') + "');"});
						$('ctrl_' + $F('last_known_index')).removeClassName('playing');
						$('ctrl_' + $F('last_known_index')).addClassName('jump');
					}

					new Effect.Highlight($('track_' + $F('playlist_cur_index')), {startcolor:'#ffffff', endcolor:'#faaa00'});
					//$('ctrl_' + $F('playlist_cur_index')).writeAttribute({onClick:'player.toggle_playlist();'});
					$('ctrl_' + $F('playlist_cur_index')).removeClassName('jump');
					$('ctrl_' + $F('playlist_cur_index')).addClassName('playing');
				/*} else {
				// The playlist is closed.
					var cur = $($F('playlist_cur_index'));
					$('playlist').childElements().each(function(item){
						item.relativize();

						if (item.visible())
							prev = item;
					});

					// update the current track.
					$('ctrl_' + cur.identify()).writeAttribute({onClick:'player.toggle_playlist();'});
					$('ctrl_' + cur.identify()).removeClassName('jump');
					$('ctrl_' + cur.identify()).addClassName('playing');

					new Effect.toggle(cur, 'appear');
					new Effect.toggle(prev, 'appear', {
						beforeStart: function(){
							prev.absolutize();
						}.bind(this),
						afterFinish: function(){
							// reset the previous track.
							$('ctrl_' + prev.identify()).writeAttribute({onClick:"player.cmd('jump" + prev.identify() + "');"});
							$('ctrl_' + prev.identify()).removeClassName('playing');
							$('ctrl_' + prev.identify()).addClassName('jump');
							prev.relativize();
						}.bind(this)
					});*/
				}
			}

			this.set_pressed($F('mode'));
		}.bind(this));

		this.observe_slim();
	},
	toggle_playlist: function()
	{
		$('playlist').childElements().each(function(item){
			if (item.identify() != $F('playlist_cur_index')) {
				new Effect.toggle(item, 'appear', {
					beforeStart: function(){
						item.relativize();
					}.bind(this)
				});
			}
		}.bind(this));
	}
}





/*var hide_link = '<a href="javascript: void(0)" onClick="togglePlaylist();">-</a>';
var show_link = '<a href="javascript: void(0)" onClick="togglePlaylist();">+</a>';

function togglePlaylist()
{
	var link = hide_link;

	$('playlist').childElements().each(function(item){
		if (item.identify() != $F('playlist_cur_index')) {
			if (item.visible())
				link = show_link;

			item.relativize();
			new Effect.toggle(item, 'appear', {duration: 1.0});
		}
	});

	$($F('playlist_cur_index')).childElements().each(function(item){
		if (item.match('.info')) {
			item.update(link);
		}
	});
}

function startPlayer()
{
	//$($F('playlist_cur_index')).select('.info').each(function(info){
			//info.update(hide_link);
	//})

	// Set the form observer.
	new Form.Observer('now_playing', 0.5, function(form, value){
		if ($F('last_known_index') != $F('playlist_cur_index')
					&& $($F('playlist_cur_index')).visible()){
		// The playlist is not closed.
			$('playlist').select('.info').each(function(info){
				info.update("");
			})
			new Effect.Highlight($($F('playlist_cur_index')), {startcolor:'#ffffff', endcolor:'#faaa00'});
			$($F('playlist_cur_index')).select('.info').each(function(info){
				info.update(hide_link);
			});
		} else if ($F('last_known_index') != $F('playlist_cur_index')) {
		// The playlist is closed.
			var cur = $($F('playlist_cur_index'));
			$('playlist').childElements().each(function(item){
				item.relativize();

				if (item.visible()) {
					prev = item;
				}
			});

			//// update the current track.
			//cur.firstDescendant().next().addClassName('now_playing');
			//cur.firstDescendant().next().next().addClassName('now_playing');
			cur.firstDescendant().update(show_link);

			new Effect.toggle(cur, 'appear');
			new Effect.toggle(prev, 'appear');
			prev.absolutize();

			// reset the previous track.
			//prev.firstDescendant().next().removeClassName('now_playing');
			//prev.firstDescendant().next().next().removeClassName('now_playing');
			prev.firstDescendant().update("");
		}
	})

	updatePlayer();
}

function updatePlayer()
{
	var slim_cmd = '<?= "{$wgServer}{$wgScriptPath}/slim.php" ?>';
	var player_id = '<?= $player_num ?>';

	this.exec = new PeriodicalExecuter(function(){
		new Ajax.Request(slim_cmd, {
			encoding: 'UTF-8',
			method: 'get',
			requestHeaders: {Accept: 'X-JSON'},
			parameters: 'player=' + player_id + '&do=status',
			onSuccess: function(transport, json){
				$('mode').value = json.mode;
				$('last_known_index').value = $F('playlist_cur_index');
				$('playlist_cur_index').value = json.playlist_cur_index;
				$('time').value = json.time;

				// Update timer.
				var time_arr = json.time.split(':');
				var time = time_arr[0] * 60 + time_arr[1];
				var duration_arr = json.playlist[json.playlist_cur_index]["duration"].split(':');
				var duration = duration_arr[0] * 60 + duration_arr[1];
				var part = Math.floor(10 * time / duration);
				$('tmp').value = part;

				var i = 0;
				$('timer').childElements().each(function(item){
					if (i < part) {
						item.update('+');
					} else if (i > part) {
						item.update('-');
					} else {
						item.update('=');
					}

					i++;
				});

				// Update the playlist.
				//json.playlist.each(function(track, id){
					//if ($(id).empty()) {
						//alert(id);
					//} else {
						//if (track.title != $(id + '.title').innerHTML) {
							//$(id + '.title').update(track.title);
						//} if (track.duration != $(id + '.duration').innerHTML) {
							//$(id + '.duration').update(track.duration);
						//}
					//}
				//});
			}
	})}, 5);
}

function cmd(player_id, act)
{
	var slim_cmd = '<?= "{$wgServer}{$wgScriptPath}/slim.php" ?>';
	new Ajax.Request(slim_cmd, {
		encoding: 'UTF-8',
		method: 'get',
		parameters: 'player=' + player_id + '&do=' + act
	});
}
*/