ytdj.ui = {
	
	playlists : [],
	title : [],
	cuePoints : [],
	volumeSliders : [],
	
	STAR_PIXELS : 15,

	init : function() 
	{
		// Add presentational elements
		$('<div class="section-top"></div>').insertBefore('.section');
		$('<div class="section-bottom"></div>').insertAfter('.section');
		$('.loading').css("display","none")
		$('#MixVids, #MixControls, #QuickSearch, .hud').css("display","block");
		$("#QuickSearch .button").css("opacity", 0.999);

		var closeButton = $('<span />').addClass("close").attr("title","Close")
		closeButton.clone().insertAfter('#ImportExportBox h2');
		closeButton.clone().insertAfter('.feedback h2');
		closeButton.clone().insertAfter('.register h2');
		closeButton.clone().insertAfter('.loginbox h2');
		closeButton.clone().insertAfter('.publish h2');
		
		// showing/hiding sections
		$('.toggle').click( function() { 
			$(this).toggleClass('open');
			$(this).next('.toggle-area').slideToggle('fast');
			if ($(this).text().substring(0,4) == "Hide") {
				$(this).text($(this).text().replace(/Hide/, "Show"));
			} else {
				$(this).text($(this).text().replace(/Show/, "Hide"));
			}
		});
		
		// Get UI references for channels
		for( var i = 0; i < ytdj.channels.length; i++ )
		{					
			// TODO: These should all exist before assigning 
			this.title[ ytdj.channels[ i ] ] = $( "#" + ytdj.channels[ i ] + "_Title" );
			this.playlists[ ytdj.channels[ i ] ] = $( "#" + ytdj.channels[ i ] + "_Playlist" );
			this.cuePoints[ ytdj.channels[ i ] ] = $( "#" + ytdj.channels[ i ] + "_Cue");
			this.volumeSliders[ ytdj.channels[ i ] ] = $( "#" + ytdj.channels[ i ] + "_Volume" );
		}
	
		ytdj.ui.initCoreControls();		
		ytdj.ui.initPlaylistOptions();
		ytdj.ui.initCueControls();
			
		$(".play-toggle, .set-cue, .mute, .rewind").css( "opacity", .75 ).append("<div></div>");
		$(".play-toggle div, .set-cue div, .mute div, .rewind div").hide();
		$(".play-toggle, .set-cue, .mute").hover( function() { ytdj.ui.buttonOver($(this)) }, function(){ ytdj.ui.buttonOut($(this)) });
		$(".rewind").hover( function() { $(this).children("div").fadeIn(500) }, function() { $(this).children("div").fadeOut(500) });
		
		ytdj.ui.initHelp();
		ytdj.ui.initPublishOptions();
		ytdj.ui.initServerSideOptions();

		// Autoplay
		$("#AutoPlay").change( function()
		{
			ytdj.STATE = this.checked ? ytdj.AUTOPLAY_BEGIN : ytdj.AUTOPLAY_OFF;
			
			if( ytdj.STATE == ytdj.AUTOPLAY_OFF )
			{
				ytdj.autoplay_loading_track = null;
			}
		});
		
		$("#Playlists a").each( function() 
		{
			$(this).click(function()
			{
				ytdj.helper.loadSet( $(this).attr( "class" ), false, ytdj.ui.onSetLoading, ytdj.ui.onSetLoaded );
				$(this).parents( "li" ).effect( "highlight", { color: "#6d787d" },  3000 );
				return false;
			});
		});
		
		this.wireUpUserMessages();
				
		// Dont handle keypresseses on search
		$("#search, #FeedbackName, #FeedbackEmail, #FeedbackMessage, #RegisterNick, #RegisterEmail, #RegisterComment").keypress( function(e){ 
			e.stopPropagation();
		} );
		
		$("#LoginName, #LoginPass, #SetName, #publishTitle").keypress( function(e){ 
			e.stopPropagation();
		} );
		
	},
	
	// Presentational event handlers for playback buttons
	buttonOver : function(el) { $(el).fadeTo( "fast", 1 ) },
	buttonOut : function(el) { $(el).fadeTo( "fast", .75 ) },
	
	// Load/Save playlists
	onSetLoading : function( setName )
	{
		ytdj.ui.Title( ytdj.LEFT ).html( "<blink>... Loading set <em>" + setName + "</em> ...</blink>" );
	},
	
	onSetLoaded : function( setName, status )
	{	
		// Callback for loading a set
		var loadedMessage = "";
		
		switch( status )
		{
			case "success":
				// All good!
				loadedMessage = "Loaded set \"" + setName + "\".";
				break;
			
			case "not_found":
				// couldnt find the set...
				loadedMessage = "Could not find set \"" + setName + "\".";
				break;
				
			case "format_error":
				// bad set name
				loadedMessage = "Bad set name. Could not load.";
				break;
				
			case "error":
			default:
				// error or unknown
				loadedMessage = "An error occurred loading the set.";
				break;
		}
		
		ytdj.ui.Title( ytdj.LEFT ).text( loadedMessage );
			
	},
	
	onSetSaving : function( setName )
	{
		ytdj.ui.Title( ytdj.LEFT ).html( "<blink>... Saving set <em>" + setName + "</em> ...</blink>" );
	},
	
	onSetSaved : function( setName, status )
	{
		// Callback for saving a set
		
		var savedMessage = "Set " + setName + " : " + status;
		
		switch( status )
		{
			case "success":
				// All good!
				savedMessage = "Saved set \"" + setName + "\".";
				break;
				
			case "no_auth":
				savedMessage = "NOT LOGGED IN";
				break;
			
			case "taken":
				// set name already used...
				savedMessage = "The set name \"" + setName + "\" has already been used.";
				break;
				
			case "format_error":
				// bad set name
				savedMessage = "Bad set name. Too short, or bad characters.";
				break;
				
			case "error":
			case "dberror":
			default:
				// error or unknown
				savedMessage = "An error occurred saving the set.";
				break;
		}
		
		ytdj.ui.Title( ytdj.LEFT ).text( savedMessage );
	},
		
	setPlayState : function( channel, state )
	{
		if( state )
		{
			$( "#" + channel + "_Play" ).find( "div" ).fadeIn( 1000 );
		}
		else
		{
			$( "#" + channel + "_Play" )
				.css( "opacity", .75 )
				.hover( function() { $(this).fadeTo( "fast", 1 ) }, function(){ $( this ).fadeTo( "fast", .75 ) } )
				.find( "div" ).fadeOut( 1000 );
		}
	},
	
	// This is run after ajax updates to re-wire the behaviours
	wireUpUserMessages : function()
	{
		if( ytdj.user.loggedIn )
		{
			$("#loggedInName").text(ytdj.user.username);
			$("#logoutLink").click(function()
			{
				ytdj.server.logout();
				return false;
			});
		}
		else
		{
			$(".Status a:first").click(function()	{
				$(".register").fadeIn("slow");
				return false;
			});
			$(".Status #loginLink").click(function()	{
				$(".loginbox").fadeIn("slow");
				return false;
			});	
		}
		$(".Status a:last").click(function()	{
			$(".feedback").fadeIn("slow").children("h2").text("Send us some feedback...").siblings("form").show();
			return false;
		});
	},
	
	// View Properties
	Playlist : function( channel ){ return this.playlists[ channel ] },
	PlaylistItemContainer : function( channel ){ return this.playlists[ channel ].find("ul:first");	},
	PlaylistItems : function( channel ){ return this.playlists[ channel ].find("li"); },
	Title : function( channel ){ return this.title[ channel ]; },
	Cue : function( channel ){ return this.cuePoints[ channel ]; },
	Volume : function( channel ){ return this.volumeSliders[ channel ]; }
}