Moved footer layout to template

index.html

@@ -33,34 +33,7 @@
 
 	<div class="ui-layout-center" class="loading"></div>
 
-	<div class="ui-layout-south row-fluid">
+	<div class="ui-layout-south row-fluid"></div>
-		<div id="wrapperFooterLeft" class="span4 row-fluid">
-			<div class="span2">
-				<button class="btn btn-mini btn-inverse" type="button" data-target="sidebar"><i class="icon-chevron-left icon-white"></i></button>
-			</div>
-			<button class="btn btn-mini btn-inverse" type="button" data-target="random"><i class="icon-random icon-white"></i></button>
-			<button class="btn btn-mini btn-inverse" type="button" data-target="repeat"><i class="icon-retweet icon-white"></i></button>
-		</div>
-		<div id="wrapperFooterCenter" class="span4">
-			<span class="list-count">0</span>&nbsp;items
-		</div>
-		<div id="wrapperFooterRight" class="span4">
-			<!-- <div class="btn-group">
-				<button class="btn btn-inverse btn-mini"><i class="icon-download-alt icon-white"></i>Download</button>
-				<button class="btn btn-inverse btn-mini dropdown-toggle" data-toggle="dropdown">
-					<span class="caret"></span>
-				</button>
-				<ul class="dropdown-menu pull-up" role="menu" aria-labelledby="dLabel">
-					<li><a tabindex="-1" href="#">Action</a></li>
-					<li><a tabindex="-1" href="#">Another action</a></li>
-					<li><a tabindex="-1" href="#">Something else here</a></li>
-					<li class="divider"></li>
-					<li><a tabindex="-1" href="#">Separated link</a></li>
-				</ul>
-			</div> -->
-			<button class="btn btn-mini btn btn-inverse" type="button" data-target="about"><i class="icon-question-sign icon-white"></i></button>
-		</div>
-	</div>
 
 	<ul id="listItemContextMenu" class="context-menu dropdown-menu">
 		<li><a href="javascript:void(0);" data-target="listItemDetails"><i class="icon-info-sign"></i>&nbsp;Details...</a></li>

resources/js/views/footer.js

@@ -9,8 +9,17 @@ define([
 	, "jquery"
 	, "backbone"
 	, "bootstrap"
+
+	, "text!../../templates/player/layout.html"
 ]
-, function (_, $, Backbone, Bootstrap) {
+, function (
+_
+, $
+, Backbone
+, Bootstrap
+
+, tmplFooterLayout
+) {
 	"use strict";
 
 	var Footer = Backbone.View.extend({
@@ -37,6 +46,10 @@ define([
 			;
 
 			Footer.__super__.initialize.apply(that, arguments);
+
+			that.$el.html(tmplFooterLayout);
+
+			return that;
 		}
 
 		, __eventToggleButtonRandom:	function (event) {

resources/templates/footer/layout.html

@@ -0,0 +1,26 @@
+<div id="wrapperFooterLeft" class="span4 row-fluid">
+	<div class="span2">
+		<button class="btn btn-mini btn-inverse" type="button" data-target="sidebar"><i class="icon-chevron-left icon-white"></i></button>
+	</div>
+	<button class="btn btn-mini btn-inverse" type="button" data-target="random"><i class="icon-random icon-white"></i></button>
+	<button class="btn btn-mini btn-inverse" type="button" data-target="repeat"><i class="icon-retweet icon-white"></i></button>
+</div>
+<div id="wrapperFooterCenter" class="span4">
+	<span class="list-count">0</span>&nbsp;items
+</div>
+<div id="wrapperFooterRight" class="span4">
+	<!-- <div class="btn-group">
+		<button class="btn btn-inverse btn-mini"><i class="icon-download-alt icon-white"></i>Download</button>
+		<button class="btn btn-inverse btn-mini dropdown-toggle" data-toggle="dropdown">
+			<span class="caret"></span>
+		</button>
+		<ul class="dropdown-menu pull-up" role="menu" aria-labelledby="dLabel">
+			<li><a tabindex="-1" href="#">Action</a></li>
+			<li><a tabindex="-1" href="#">Another action</a></li>
+			<li><a tabindex="-1" href="#">Something else here</a></li>
+			<li class="divider"></li>
+			<li><a tabindex="-1" href="#">Separated link</a></li>
+		</ul>
+	</div> -->
+	<button class="btn btn-mini btn btn-inverse" type="button" data-target="about"><i class="icon-question-sign icon-white"></i></button>
+</div>