Killing animations...

app/views/shared/_app_layout.blade.php

@@ -88,7 +88,7 @@
 				</ul>
 			</nav>
 		</section>
-		<section ui-view class="site-content" ng-animate="'site-content-animate'">
+		<section ui-view class="site-content">
 			@yield('app_content')
 		</section>
 	</div>

public/scripts/app/app.coffee

@@ -8,56 +8,88 @@ angular.module 'ponyfm', ['ui.bootstrap', 'ui.state', 'ui.date', 'ui.sortable'],
 			url: '/account'
 			templateUrl: '/templates/account/settings.html'
 			controller: 'account-settings'
+			navigation:
+				index: 9
 
 		state.state 'account-content',
 			url: '/account'
 			abstract: true
 			templateUrl: '/templates/account/content/_layout.html'
+			navigation:
+				index: 8
 
 		state.state 'account-content.tracks',
 			url: '/tracks'
 			templateUrl: '/templates/account/content/tracks.html'
 			controller: 'account-tracks'
+			navigation:
+				index: 8
+				subIndex: 1
 
 		state.state 'account-content.tracks.edit',
 			url: '/edit/:track_id'
+			navigation:
+				index: 8
+				subIndex: 1
 
 		state.state 'account-content.albums',
 			url: '/albums'
 			templateUrl: '/templates/account/content/albums.html'
 			controller: 'account-albums'
+			navigation:
+				index: 8
+				subIndex: 2
 
 		state.state 'account-content.albums.create',
 			url: '/create'
 			templateUrl: '/templates/account/content/album.html'
 			controller: 'account-albums-edit'
+			navigation:
+				index: 8
+				subIndex: 2
 
 		state.state 'account-content.albums.edit',
 			url: '/edit/:album_id'
 			templateUrl: '/templates/account/content/album.html'
 			controller: 'account-albums-edit'
+			navigation:
+				index: 8
+				subIndex: 2
 
 		state.state 'account-content-playlists',
 			url: '/account/playlists'
 			templateUrl: '/templates/account/content/playlists.html'
 			controller: 'account-playlists'
+			navigation:
+				index: 6
 
 		state.state 'account-favourites',
 			url: '/account/favourites'
 			abstract: true
 			templateUrl: '/templates/account/favourites/_layout.html'
+			navigation:
+				index: 7
 
 		state.state 'account-favourites.tracks',
 			url: ''
 			templateUrl: '/templates/account/favourites/tracks.html'
+			navigation:
+				index: 7
+				subIndex: 1
 
 		state.state 'account-favourites.playlists',
 			url: '/playlists'
 			templateUrl: '/templates/account/favourites/playlists.html'
+			navigation:
+				index: 7
+				subIndex: 3
 
 		state.state 'account-favourites.albums',
 			url: '/albums'
 			templateUrl: '/templates/account/favourites/albums.html'
+			navigation:
+				index: 7
+				subIndex: 2
 
 		# Tracks
 
@@ -65,39 +97,53 @@ angular.module 'ponyfm', ['ui.bootstrap', 'ui.state', 'ui.date', 'ui.sortable'],
 			url: '/tracks'
 			templateUrl: '/templates/tracks/index.html'
 			controller: 'tracks'
+			navigation:
+				index: 2
 
 		# Albums
 
 		state.state 'albums',
 			url: '/albums'
 			templateUrl: '/templates/albums/index.html'
+			navigation:
+				index: 3
 
 		# Playlists
 
 		state.state 'playlists',
 			url: '/playlists'
 			templateUrl: '/templates/playlists/index.html'
+			navigation:
+				index: 4
 
 		state.state 'playlist',
 			url: '/playlist/:id/:slug'
 			templateUrl: '/templates/playlists/show.html'
 			controller: 'playlist'
+			navigation:
+				index: 4
 
 		# Artists
 
 		state.state 'artists',
 			url: '/artists'
 			templateUrl: '/templates/artists/index.html'
+			navigation:
+				index: 5
 
 		# Pages
 
 		state.state 'faq',
 			url: '/faq'
 			templateUrl: '/templates/pages/faq.html'
+			navigation:
+				index: 11
 
 		state.state 'about',
 			url: '/about'
 			templateUrl: '/templates/pages/about.html'
+			navigation:
+				index: 10
 
 		# Auth
 
@@ -105,10 +151,14 @@ angular.module 'ponyfm', ['ui.bootstrap', 'ui.state', 'ui.date', 'ui.sortable'],
 			url: '/login'
 			templateUrl: '/templates/auth/login.html'
 			controller: 'login'
+			navigation:
+				index: 12
 
 		state.state 'register',
 			url: '/register'
 			templateUrl: '/templates/auth/register.html'
+			navigation:
+				index: 13
 
 		# Hompage
 
@@ -117,10 +167,14 @@ angular.module 'ponyfm', ['ui.bootstrap', 'ui.state', 'ui.date', 'ui.sortable'],
 				url: '/'
 				templateUrl: '/templates/dashboard.html'
 				controller: 'dashboard'
+				navigation:
+					index: 0
 		else
 			state.state 'home',
 				url: '/'
 				templateUrl: '/templates/home/index.html'
+				navigation:
+					index: 0
 
 		route.otherwise '/'
 

public/scripts/app/controllers/application.coffee

@@ -9,8 +9,44 @@ angular.module('ponyfm').controller "application", [
 			auth.logout().done -> location.reload()
 
 		$scope.isActive = (loc) -> $location.path() == loc
-		$scope.$on '$viewContentLoaded', () -> window.handleResize()
+		$scope.$on '$viewContentLoaded', () ->
+			window.setTimeout window.handleResize, 500
 
 		# Show loading screen here?
 		taxonomies.refresh()
+
+		$scope.mainViewAnimation = 'slide-down';
+
+		$scope.$on '$stateChangeStart', (e, newState, newParams, oldState) ->
+			oldIndex =
+				if (oldState && oldState.navigation && oldState.navigation.index)
+					oldState.navigation.index
+				else
+					0
+
+			newIndex =
+				if (newState && newState.navigation && newState.navigation.index)
+					newState.navigation.index
+				else
+					0
+
+			oldSubIndex =
+				if (oldState && oldState.navigation && oldState.navigation.subIndex)
+					oldState.navigation.subIndex
+				else
+					0
+
+			newSubIndex =
+				if (newState && newState.navigation && newState.navigation.subIndex)
+					newState.navigation.subIndex
+				else
+					0
+
+			$scope.mainViewAnimation = 'slide-down' if oldIndex > newIndex
+			$scope.mainViewAnimation = 'slide-up' if oldIndex < newIndex
+			$scope.mainViewAnimation = 'slide-right' if oldIndex == newIndex
+
+			$scope.subViewAnimation = 'slide-right' if oldSubIndex > newSubIndex
+			$scope.subViewAnimation = 'slide-left' if oldSubIndex < newSubIndex
+			$scope.subViewAnimation = 'slide-up' if oldSubIndex == newSubIndex
 ]

public/scripts/shared/layout.coffee

@@ -2,16 +2,17 @@ window.handleResize = () ->
 	windowHeight = $(window).height()
 	$siteBody = $ '.site-body'
 	$siteBody.height windowHeight - $('header').height() - 1
+	redo = false
 
 	$('.stretch-to-bottom').each () ->
 		$this = $ this
-		$this.height windowHeight - $this.offset().top
+		newHeight = windowHeight - $this.offset().top + 1
+		if newHeight <= 0
+			redo = true
+		else
+			$this.height newHeight
 
-	backgroundOne = $ '.background-one'
+	window.setTimeout(window.handleResize, 0) if redo
-	backgroundTwo = $ '.background-two'
-
-	backgroundOne.css 'left', $('.site-content ').offset().left - backgroundOne.width()
-	backgroundTwo.css 'left', $('.site-content').offset().left + $('.site-content').width()
 
 window.alignVertically = (element) ->
 	$element = $(element)

public/styles/animations.less

@@ -0,0 +1,94 @@
+@import 'base/bootstrap/bootstrap';
+@import 'mixins';
+
+.slide-down-enter, .slide-down-leave,
+.slide-up-enter, .slide-up-leave,
+.slide-right-enter, .slide-right-leave {
+  position: absolute;
+}
+
+// ---------------------------------------
+// Down
+// ---------------------------------------
+.slide-down-enter {
+  .transition(all 400ms ease-out);
+  .transform(translate(0, -100%));
+}
+
+.slide-down-enter.slide-down-enter-active {
+  .transform(translate(0, 0));
+}
+
+.slide-down-leave {
+  .transition(all 400ms ease-out);
+  .transform(translate(0, 0));
+}
+
+.slide-down-leave.slide-down-leave-active {
+  .transform(translate(0, 100%));
+}
+
+// ---------------------------------------
+// Up
+// ---------------------------------------
+.slide-up-enter {
+  .transition(all 400ms ease-out);
+  .transform(translate(0, 100%));
+}
+
+.slide-up-enter.slide-up-enter-active {
+  .transform(translate(0, 0));
+}
+
+.slide-up-leave {
+  .transition(all 400ms ease-out);
+  .transform(translate(0, 0));
+}
+
+.slide-up-leave.slide-up-leave-active {
+  .transform(translate(0, -100%));
+}
+
+// ---------------------------------------
+// Right
+// ---------------------------------------
+
+.slide-right-enter {
+  .transition(all 400ms ease-out);
+  .transform(translate(-100%, 0));
+}
+
+.slide-right-enter.slide-right-enter-active {
+  .transform(translate(0, 0));
+}
+
+.slide-right-leave {
+  .transition(all 400ms ease-out);
+  .transform(translate(0, 0));
+}
+
+.slide-right-leave.slide-right-leave-active {
+  .transform(translate(100%, 0));
+}
+
+// ---------------------------------------
+// Left
+// ---------------------------------------
+
+.slide-left-enter {
+  .transition(all 400ms ease-out);
+  .transform(translate(100%, 0));
+}
+
+.slide-left-enter.slide-left-enter-active {
+  .transform(translate(0, 0));
+}
+
+.slide-left-leave {
+  .transition(all 400ms ease-out);
+  .transform(translate(0, 0));
+}
+
+.slide-left-leave.slide-left-leave-active {
+  .transform(translate(-100%, 0));
+}

public/styles/app.less

@@ -6,4 +6,5 @@
 @import 'account-content';
 @import 'components';
 @import 'forms';
-@import 'tracks';
+@import 'tracks';
+@import 'animations';

public/styles/layout.less

@@ -21,60 +21,6 @@ html body {
   z-index: -5;
 }
 
-.background-one, .background-two {
-  z-index: -4;
-  background-repeat: no-repeat;
-  background-position: bottom right;
-  height: 100%;
-  width: 350px;
-  position: fixed;
-  background-size: 35%;
-}
-
-html .background-one {
-  background-image: url('/images/octavia.png');
-  background-position: bottom right;
-  opacity: .1;
-}
-
-html .background-two {
-  background-image: url('/images/vinyl.png');
-  background-position: bottom left;
-  opacity: .1;
-  display: none;
-}
-
-.site-content {
-  .perspective();
-  position: relative;
-}
-
-.site-content-animate-enter, .site-content-animate-leave {
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  width: 100%;
-  height: 100%;
-}
-
-.site-content-animate-enter {
-  .transition(all 400ms ease-out);
-  .transform(translate(0, -100%));
-}
-
-.site-content-animate-enter.site-content-animate-enter-active {
-  .transform(translate(0, 0));
-}
-
-.site-content-animate-leave {
-  .transition(all 400ms ease-out);
-  .transform(translate(0, 0));
-}
-
-.site-content-animate-leave.site-content-animate-leave-active {
-  .transform(translate(0, 100%));
-}
-
 header {
   .clearfix();
   background: #222;
@@ -392,17 +338,18 @@ header {
   }
 
   .site-content {
+	.perspective();
 	overflow: hidden;
 	border: 5px solid #222;
 	border-top: none;
 	border-bottom: none;
+	position: relative;
 
 	height: 100%;
 	margin-left: 148px;
 
 	> div {
 	  .box-sizing(border-box);
-	  overflow: hidden;
 	  width: 100%;
 	  height: 100%;
 	  background: #fff;
@@ -412,6 +359,17 @@ header {
   }
 }
 
+.inner-view {
+  position: relative;
+
+  > div {
+	width: 100%;
+	height: 100%;
+	background: #fff;
+	position: relative;
+  }
+}
+
 .site-content {
   h1 {
 	border: none;

public/templates/account/content/_layout.html

@@ -4,5 +4,5 @@
 		<li ng-class="{active: $state.includes('account-content.albums')}"><a href="/account/albums">Albums</a></li>
 	</ul>
 
-	<div ui-view></div>
+	<div ui-view class="inner-view"></div>
 </div>

public/templates/account/content/albums.html

@@ -1,27 +1,29 @@
-<ul class="dropdowns">
+<div>
-	<li class="dropdown">
+	<ul class="dropdowns">
-		<a class="btn" href="/account/albums/create" ng-class="{'btn-primary': data.isEditorOpen && data.selectedAlbum == null}">
+		<li class="dropdown">
-			<i class="icon-plus"></i> Create Album
+			<a class="btn" href="/account/albums/create" ng-class="{'btn-primary': data.isEditorOpen && data.selectedAlbum == null}">
-		</a>
+				<i class="icon-plus"></i> Create Album
-	</li>
+			</a>
-</ul>
+		</li>
+	</ul>
 
-<div class="two-pane-view" ng-class="{open: data.isEditorOpen, closed: !data.isEditorOpen}">
+	<div class="two-pane-view" ng-class="{open: data.isEditorOpen, closed: !data.isEditorOpen}">
-	<div class="list">
+		<div class="list">
-		<ul class="account-albums-listing stretch-to-bottom">
+			<ul class="account-albums-listing stretch-to-bottom">
-			<li ng-repeat="album in albums" ng-class="{selected: album.id == data.selectedAlbum.id}">
+				<li ng-repeat="album in albums" ng-class="{selected: album.id == data.selectedAlbum.id}">
-				<a href="/account/albums/edit/{{album.id}}">
+					<a href="/account/albums/edit/{{album.id}}">
-					<img class="image" ng-src="{{album.covers.normal}}" />
+						<img class="image" ng-src="{{album.covers.normal}}" />
-					<span class="title">{{album.title}}</span>
+						<span class="title">{{album.title}}</span>
-					<span class="published">{{album.created_at | pfmdate:'MM/dd/yyyy'}}</span>
+						<span class="published">{{album.created_at | pfmdate:'MM/dd/yyyy'}}</span>
-				</a>
+					</a>
-			</li>
+				</li>
-			<li ng-show="!albums.length" class="empty">
+				<li ng-show="!albums.length" class="empty">
-				No albums found...
+					No albums found...
-			</li>
+				</li>
-		</ul>
+			</ul>
-	</div>
+		</div>
 
-	<div class="editor" ui-view>
+		<div class="editor" ui-view>
+		</div>
 	</div>
 </div>

public/templates/account/content/tracks.html

@@ -1,176 +1,178 @@
-<ul class="dropdowns">
+<div>
-	<li class="dropdown">
+	<ul class="dropdowns">
-		<a class="dropdown-toggle btn">
+		<li class="dropdown">
-			Published: <strong>{{filter.published.title}}</strong>
+			<a class="dropdown-toggle btn">
-		</a>
+				Published: <strong>{{filter.published.title}}</strong>
-		<ul class="dropdown-menu">
+			</a>
-			<li ng-repeat="filter in filters.published">
+			<ul class="dropdown-menu">
-				<a pfm-eat-click href="#" ng-click="updateFilter('published', filter)">{{filter.title}}</a>
+				<li ng-repeat="filter in filters.published">
-			</li>
+					<a pfm-eat-click href="#" ng-click="updateFilter('published', filter)">{{filter.title}}</a>
-		</ul>
-	</li>
-	<li class="dropdown">
-		<a class="dropdown-toggle btn">
-			Sort: <strong>{{filter.sort.title}}</strong>
-		</a>
-		<ul class="dropdown-menu">
-			<li ng-repeat="filter in filters.sort">
-				<a pfm-eat-click href="#" ng-click="updateFilter('sort', filter)">{{filter.title}}</a>
-			</li>
-		</ul>
-	</li>
-	<li class="dropdown">
-		<a class="dropdown-toggle btn">
-			Type: <strong>{{titles.trackTypes}}</strong>
-		</a>
-		<ul class="dropdown-menu">
-			<li ng-repeat="type in taxonomies.trackTypes" ng-class="{selected: filter.trackTypes[type.id]}">
-				<a pfm-eat-click href="#" ng-click="toggleFilter('trackTypes', type.id); $event.stopPropagation();">{{type.title}}</a>
-			</li>
-		</ul>
-	</li>
-	<li class="dropdown">
-		<a class="dropdown-toggle btn">
-			Genera: <strong>{{titles.genres}}</strong>
-		</a>
-		<ul class="dropdown-menu">
-			<li ng-repeat="genre in taxonomies.genres" ng-class="{selected: filter.genres[genre.id]}">
-				<a pfm-eat-click href="#" ng-click="toggleFilter('genres', genre.id);  $event.stopPropagation();">{{genre.name}}</a>
-			</li>
-		</ul>
-	</li>
-</ul>
-
-<div class="two-pane-view" ng-class="{open: selectedTrack != null, closed: selectedTrack == null}">
-	<div class="list">
-		<ul class="account-tracks-listing stretch-to-bottom">
-			<li ng-repeat="track in tracks" ng-class="{selected: track.id == selectedTrack.id, 'is-not-published': !track.is_published}">
-				<a href="/account/tracks/edit/{{track.id}}">
-					<img class="image" ng-src="{{track.cover_url}}" />
-					<span class="title">{{track.title}}</span>
-					<span class="published">{{track.created_at | pfmdate:'MM/dd/yyyy'}}</span>
-				</a>
-			</li>
-		</ul>
-	</div>
-
-	<div class="editor">
-		<form novalidate ng-submit="updateTrack(edit)">
-			<ul class="toolbar">
-				<li>
-					<button type="submit" class="btn" ng-class="{disabled: (selectedTrack.is_published && !isDirty) || isSaving, 'btn-primary': !selectedTrack.is_published || isDirty}">
-						<span ng-show="selectedTrack.is_published">
-							Save Changes
-						</span>
-						<span ng-hide="selectedTrack.is_published">
-							Publish Track
-						</span>
-
-						<i ng-show="isSaving" class="icon-cog icon-spin icon-large"></i>
-					</button>
 				</li>
-				<li class="delete"><a ng-class="{disabled: isSaving}" class="btn btn-danger" href="#" ng-click="deleteTrack(selectedTrack)" pfm-eat-click>Delete Track</a></li>
 			</ul>
-			<div class="stretch-to-bottom">
+		</li>
-				<div class="form-row" ng-class="{'has-error': errors.title != null}">
+		<li class="dropdown">
-					<label for="title" class="strong">Title:</label>
+			<a class="dropdown-toggle btn">
-					<input ng-disabled="isSaving" ng-change="touchModel()" placeholder="Track Title" type="text" id="title" ng-model="edit.title" />
+				Sort: <strong>{{filter.sort.title}}</strong>
-					<div class="error">{{errors.title}}</div>
+			</a>
-				</div>
+			<ul class="dropdown-menu">
-				<div class="row-fluid">
+				<li ng-repeat="filter in filters.sort">
-					<div class="span6 form-row" ng-class="{'has-error': errors.description != null}">
+					<a pfm-eat-click href="#" ng-click="updateFilter('sort', filter)">{{filter.title}}</a>
-						<label for="description" class="strong">Description:</label>
+				</li>
-						<textarea ng-disabled="isSaving" ng-change="touchModel()" placeholder="Description (optional)" id="description" ng-model="edit.description"></textarea>
+			</ul>
-						<div class="error">{{errors.description}}</div>
+		</li>
+		<li class="dropdown">
+			<a class="dropdown-toggle btn">
+				Type: <strong>{{titles.trackTypes}}</strong>
+			</a>
+			<ul class="dropdown-menu">
+				<li ng-repeat="type in taxonomies.trackTypes" ng-class="{selected: filter.trackTypes[type.id]}">
+					<a pfm-eat-click href="#" ng-click="toggleFilter('trackTypes', type.id); $event.stopPropagation();">{{type.title}}</a>
+				</li>
+			</ul>
+		</li>
+		<li class="dropdown">
+			<a class="dropdown-toggle btn">
+				Genera: <strong>{{titles.genres}}</strong>
+			</a>
+			<ul class="dropdown-menu">
+				<li ng-repeat="genre in taxonomies.genres" ng-class="{selected: filter.genres[genre.id]}">
+					<a pfm-eat-click href="#" ng-click="toggleFilter('genres', genre.id);  $event.stopPropagation();">{{genre.name}}</a>
+				</li>
+			</ul>
+		</li>
+	</ul>
+
+	<div class="two-pane-view" ng-class="{open: selectedTrack != null, closed: selectedTrack == null}">
+		<div class="list">
+			<ul class="account-tracks-listing stretch-to-bottom">
+				<li ng-repeat="track in tracks" ng-class="{selected: track.id == selectedTrack.id, 'is-not-published': !track.is_published}">
+					<a href="/account/tracks/edit/{{track.id}}">
+						<img class="image" ng-src="{{track.cover_url}}" />
+						<span class="title">{{track.title}}</span>
+						<span class="published">{{track.created_at | pfmdate:'MM/dd/yyyy'}}</span>
+					</a>
+				</li>
+			</ul>
+		</div>
+
+		<div class="editor">
+			<form novalidate ng-submit="updateTrack(edit)">
+				<ul class="toolbar">
+					<li>
+						<button type="submit" class="btn" ng-class="{disabled: (selectedTrack.is_published && !isDirty) || isSaving, 'btn-primary': !selectedTrack.is_published || isDirty}">
+							<span ng-show="selectedTrack.is_published">
+								Save Changes
+							</span>
+							<span ng-hide="selectedTrack.is_published">
+								Publish Track
+							</span>
+
+							<i ng-show="isSaving" class="icon-cog icon-spin icon-large"></i>
+						</button>
+					</li>
+					<li class="delete"><a ng-class="{disabled: isSaving}" class="btn btn-danger" href="#" ng-click="deleteTrack(selectedTrack)" pfm-eat-click>Delete Track</a></li>
+				</ul>
+				<div class="stretch-to-bottom">
+					<div class="form-row" ng-class="{'has-error': errors.title != null}">
+						<label for="title" class="strong">Title:</label>
+						<input ng-disabled="isSaving" ng-change="touchModel()" placeholder="Track Title" type="text" id="title" ng-model="edit.title" />
+						<div class="error">{{errors.title}}</div>
 					</div>
-					<div class="span6 form-row" ng-class="{'has-error': errors.lyrics != null}">
+					<div class="row-fluid">
-						<label for="is_vocal" class="strong"><input ng-disabled="isSaving" ng-change="touchModel(); updateIsVocal()" id="is_vocal" type="checkbox" ng-model="edit.is_vocal" /> Is Vocal</label>
+						<div class="span6 form-row" ng-class="{'has-error': errors.description != null}">
-						<textarea ng-disabled="isSaving" ng-change="touchModel()" ng-show="edit.is_vocal" ng-animate="'fade'" placeholder="Lyrics (required)" id="lyrics" ng-model="edit.lyrics"></textarea>
+							<label for="description" class="strong">Description:</label>
-						<div class="error">{{errors.lyrics}}</div>
+							<textarea ng-disabled="isSaving" ng-change="touchModel()" placeholder="Description (optional)" id="description" ng-model="edit.description"></textarea>
-					</div>
+							<div class="error">{{errors.description}}</div>
-				</div>
-				<div class="row-fluid">
-					<div class="form-row span6" ng-class="{'has-error': errors.genre_id != null}">
-						<label for="genre" class="strong">Genre:</label>
-						<select ng-disabled="isSaving" id="genre" ng-change="touchModel()" ng-model="edit.genre_id" ng-options="genre.id as genre.name for genre in taxonomies.genres">
-							<option value="">Please select a genre...</option>
-						</select>
-						<div class="error">{{errors.genre_id}}</div>
-					</div>
-					<div class="form-row span6" ng-class="{'has-error': errors.track_type_id != null}">
-						<label for="track_type" class="strong">This track is...</label>
-						<select ng-disabled="isSaving" id="track_type" ng-change="touchModel()" ng-model="edit.track_type_id" ng-options="type.id as type.editor_title for type in taxonomies.trackTypes">
-							<option value="">Please select a type...</option>
-						</select>
-						<div class="error">{{errors.track_type_id}}</div>
-					</div>
-				</div>
-				<div class="row-fluid">
-					<div class="form-row album span6" ng-class="{'has-error': errors.show_song_ids != null}">
-						<a pfm-popup="album-selector" href="#" class="btn btn-small">
-							Album:
-							<strong ng-show="selectedAlbum">{{selectedAlbum.title}}</strong>
-							<strong ng-hide="selectedAlbum">None</strong>
-						</a>
-						<div id="album-selector" class="pfm-popup">
-							<ul>
-								<li ng-class="{selected: selectedAlbum == null}">
-									<a pfm-eat-click href="#" ng-click="selectAlbum(null);">None</a>
-								</li>
-								<li ng-repeat="album in albums" ng-class="{selected: selectedAlbum.id == album.id}">
-									<a pfm-eat-click href="#" ng-click="selectAlbum(album);">{{album.title}}</a>
-								</li>
-							</ul>
 						</div>
-						<div class="error">{{errors.album_id}}</div>
+						<div class="span6 form-row" ng-class="{'has-error': errors.lyrics != null}">
-					</div>
+							<label for="is_vocal" class="strong"><input ng-disabled="isSaving" ng-change="touchModel(); updateIsVocal()" id="is_vocal" type="checkbox" ng-model="edit.is_vocal" /> Is Vocal</label>
-					<div class="form-row show-songs span6" ng-show="edit.track_type_id == 2" ng-class="{'has-error': errors.show_song_ids != null}">
+							<textarea ng-disabled="isSaving" ng-change="touchModel()" ng-show="edit.is_vocal" ng-animate="'fade'" placeholder="Lyrics (required)" id="lyrics" ng-model="edit.lyrics"></textarea>
-						<a pfm-popup="song-selector" href="#" class="btn btn-small">Show Songs: <strong>{{selectedSongsTitle}}</strong></a>
+							<div class="error">{{errors.lyrics}}</div>
-						<div id="song-selector" class="pfm-popup">
-							<ul>
-								<li ng-repeat="song in taxonomies.showSongs" ng-class="{selected: selectedSongs[song.id]}">
-									<a pfm-eat-click href="#" ng-click="toggleSong(song); $event.stopPropagation();">{{song.title}}</a>
-								</li>
-							</ul>
 						</div>
-						<div class="error">{{errors.show_song_ids}}</div>
 					</div>
-				</div>
+					<div class="row-fluid">
-				<div class="row-fluid">
+						<div class="form-row span6" ng-class="{'has-error': errors.genre_id != null}">
-					<div class="form-row span6" ng-class="{'has-error': errors.cover != null}">
+							<label for="genre" class="strong">Genre:</label>
-						<label class="strong">Track Cover: </label>
+							<select ng-disabled="isSaving" id="genre" ng-change="touchModel()" ng-model="edit.genre_id" ng-options="genre.id as genre.name for genre in taxonomies.genres">
-						<pfm-image-upload set-image="setCover" image="edit.cover" />
+								<option value="">Please select a genre...</option>
+							</select>
+							<div class="error">{{errors.genre_id}}</div>
+						</div>
+						<div class="form-row span6" ng-class="{'has-error': errors.track_type_id != null}">
+							<label for="track_type" class="strong">This track is...</label>
+							<select ng-disabled="isSaving" id="track_type" ng-change="touchModel()" ng-model="edit.track_type_id" ng-options="type.id as type.editor_title for type in taxonomies.trackTypes">
+								<option value="">Please select a type...</option>
+							</select>
+							<div class="error">{{errors.track_type_id}}</div>
+						</div>
 					</div>
-					<div class="form-row span6">
+					<div class="row-fluid">
-						<label for="released_at" class="strong">Release Date:</label>
+						<div class="form-row album span6" ng-class="{'has-error': errors.show_song_ids != null}">
-						<input ng-disabled="isSaving" type="text" id="released_at" ui-date ng-model="edit.released_at" ng-change="touchModel()" ui-date-format="yy-mm-dd" />
+							<a pfm-popup="album-selector" href="#" class="btn btn-small">
-						<div class="error">{{errors.released_at}}</div>
+								Album:
-					</div>
+								<strong ng-show="selectedAlbum">{{selectedAlbum.title}}</strong>
-				</div>
+								<strong ng-hide="selectedAlbum">None</strong>
-				<div class="row-fluid">
+							</a>
-					<div class="span6 form-row">
+							<div id="album-selector" class="pfm-popup">
-						<label for="is_explicit"><input ng-disabled="isSaving" ng-change="touchModel()" id="is_explicit" type="checkbox" ng-model="edit.is_explicit" /> Contains Explicit Content</label>
+								<ul>
-					</div>
+									<li ng-class="{selected: selectedAlbum == null}">
-					<div class="span6 form-row">
+										<a pfm-eat-click href="#" ng-click="selectAlbum(null);">None</a>
-						<label for="is_downloadable"><input ng-disabled="isSaving" ng-change="touchModel()" id="is_downloadable" type="checkbox" ng-model="edit.is_downloadable" /> Is Downloadable</label>
+									</li>
-					</div>
+									<li ng-repeat="album in albums" ng-class="{selected: selectedAlbum.id == album.id}">
-				</div>
+										<a pfm-eat-click href="#" ng-click="selectAlbum(album);">{{album.title}}</a>
-				<div class="form-row">
+									</li>
-					<label class="strong">Choose a License:</label>
+								</ul>
-					<ul class="license-grid">
-						<li ng-repeat="license in taxonomies.licenses" ng-class="{selected: edit.license_id == license.id}">
-							<div ng-click="edit.license_id = license.id; touchModel()">
-								<strong>{{license.title}}</strong>
-								<p>{{license.description}}</p>
-								<a href="#" pfm-eat-click class="btn" ng-class="{'btn-primary': edit.license_id == license.id, 'disabled': isSaving}">
-									<span ng-hide="edit.license_id == license.id">Select</span>
-									<span ng-show="edit.license_id == license.id">Selected</span>
-								</a>
 							</div>
-						</li>
+							<div class="error">{{errors.album_id}}</div>
-					</ul>
+						</div>
+						<div class="form-row show-songs span6" ng-show="edit.track_type_id == 2" ng-class="{'has-error': errors.show_song_ids != null}">
+							<a pfm-popup="song-selector" href="#" class="btn btn-small">Show Songs: <strong>{{selectedSongsTitle}}</strong></a>
+							<div id="song-selector" class="pfm-popup">
+								<ul>
+									<li ng-repeat="song in taxonomies.showSongs" ng-class="{selected: selectedSongs[song.id]}">
+										<a pfm-eat-click href="#" ng-click="toggleSong(song); $event.stopPropagation();">{{song.title}}</a>
+									</li>
+								</ul>
+							</div>
+							<div class="error">{{errors.show_song_ids}}</div>
+						</div>
+					</div>
+					<div class="row-fluid">
+						<div class="form-row span6" ng-class="{'has-error': errors.cover != null}">
+							<label class="strong">Track Cover: </label>
+							<pfm-image-upload set-image="setCover" image="edit.cover" />
+						</div>
+						<div class="form-row span6">
+							<label for="released_at" class="strong">Release Date:</label>
+							<input ng-disabled="isSaving" type="text" id="released_at" ui-date ng-model="edit.released_at" ng-change="touchModel()" ui-date-format="yy-mm-dd" />
+							<div class="error">{{errors.released_at}}</div>
+						</div>
+					</div>
+					<div class="row-fluid">
+						<div class="span6 form-row">
+							<label for="is_explicit"><input ng-disabled="isSaving" ng-change="touchModel()" id="is_explicit" type="checkbox" ng-model="edit.is_explicit" /> Contains Explicit Content</label>
+						</div>
+						<div class="span6 form-row">
+							<label for="is_downloadable"><input ng-disabled="isSaving" ng-change="touchModel()" id="is_downloadable" type="checkbox" ng-model="edit.is_downloadable" /> Is Downloadable</label>
+						</div>
+					</div>
+					<div class="form-row">
+						<label class="strong">Choose a License:</label>
+						<ul class="license-grid">
+							<li ng-repeat="license in taxonomies.licenses" ng-class="{selected: edit.license_id == license.id}">
+								<div ng-click="edit.license_id = license.id; touchModel()">
+									<strong>{{license.title}}</strong>
+									<p>{{license.description}}</p>
+									<a href="#" pfm-eat-click class="btn" ng-class="{'btn-primary': edit.license_id == license.id, 'disabled': isSaving}">
+										<span ng-hide="edit.license_id == license.id">Select</span>
+										<span ng-show="edit.license_id == license.id">Selected</span>
+									</a>
+								</div>
+							</li>
+						</ul>
+					</div>
 				</div>
-			</div>
+			</form>
-		</form>
+		</div>
 	</div>
 </div>