figured out how to get tabs to work in backbone.

NzbDrone.Web/AddSeries/Views/addSeriesView.js

@@ -0,0 +1,80 @@
+NzbDrone.AddSeriesView = Backbone.Marionette.ItemView.extend({
+    template: "#add-series-template",
+
+    initialise: function () {
+    },
+    
+    onRender: function () {
+       this.$el.find('#myTab a').click(function (e) {
+            e.preventDefault();
+            $(this).tab('show');
+        });
+    },
+    
+});
+
+NzbDrone.AddNewSeriesView = Backbone.Marionette.ItemView.extend({
+    template: "#add-new-series",
+
+    ui: {
+        seriesSearch: '#series-search'
+    },
+
+    onRender: function () {
+
+
+        console.log('binding auto complete');
+        var self = this;
+
+        this.ui.seriesSearch
+            .autocomplete({
+                source: "http://localhost:1232/api/series/lookup",
+                minLength: 1,
+                delay: 500,
+                select: function (event, ui) {
+                    $(this).val(ui.item.Title);
+                    $(this).siblings('.seriesId').val(ui.item.Id);
+                    return false;
+                },
+                open: function (event, ui) {
+                    $('.ui-autocomplete').addClass('seriesLookupResults');
+                },
+                close: function (event, ui) {
+                    $('.ui-autocomplete').removeClass('seriesLookupResults');
+                }
+
+            })
+            .data("autocomplete")._renderItem = function (ul, item) {
+
+                return $("<li></li>")
+               .data("item.autocomplete", item)
+               .append("<a>" + item.SeriesName + "<img src='../../Content/Images/thetvdb.png' class='tvDbLink' title='Click to see series details from TheTVDB' rel='" + item.Url + "' /></a>")
+               .appendTo(ul);
+            };
+    },
+});
+
+NzbDrone.AddExistingSeriesView = Backbone.Marionette.ItemView.extend({
+    template: "#add-existing-series",
+
+    events: {
+        'click #single': 'single',
+        'click #multiple': 'multiple'
+    },
+
+    single: function () {
+        NzbDrone.Router.navigate(NzbDrone.Routes.Series.AddExistingSingle, { trigger: true });
+    },
+
+    multiple: function () {
+        NzbDrone.Router.navigate(NzbDrone.Routes.Series.AddExistingMultiple, { trigger: true });
+    }
+});
+
+NzbDrone.AddExistingSeriesSingleView = Backbone.Marionette.ItemView.extend({
+    template: "#add-existing-series-single"
+});
+
+NzbDrone.AddExistingSeriesMultipleView = Backbone.Marionette.ItemView.extend({
+    template: "#add-existing-series-multiple"
+})

NzbDrone.Web/CassetteConfiguration.cs

@@ -9,9 +9,9 @@ namespace NzbDrone.Web
     /// </summary>
     public class CassetteBundleConfiguration : IConfiguration<BundleCollection>
     {
-        public const string JQUERY_BUNDLE = "jquery";
         public const string BASE_STYLE = "BASE_STYLE";
         public const string BASE_SCRIPT = "BASE_SCRIPT";
+        public const string BACKBONE = "BACKBONE";
         public const string FONTS = "FONTS";
         public const string VALIDATION_SCRIPTS = "VALIDATION_SCRIPTS";
         public const string FILEBROWSER_SCRIPT = "FILEBROWSER_SCRIPT";
@@ -20,7 +20,6 @@ namespace NzbDrone.Web
         public void Configure(BundleCollection bundles)
         {
             bundles.AddUrlWithAlias<StylesheetBundle>("//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,600,300'", FONTS);
-            bundles.AddUrlWithAlias<ScriptBundle>("//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js", JQUERY_BUNDLE);
 
 
             bundles.Add<StylesheetBundle>(BASE_STYLE, new[]{
@@ -33,10 +32,23 @@ namespace NzbDrone.Web
                 bundle => bundle.AddReference("/" + FONTS));
 
             bundles.Add<ScriptBundle>(BASE_SCRIPT, new[]{
+                "scripts2\\jquery-1.8.2.js",
                 "scripts2\\jquery.livequery.js",
                 "scripts2\\bootstrap-mvc.js",
-                "scripts2\\metro\\jquery.metro.js"},
-                bundle => bundle.AddReference("/" + JQUERY_BUNDLE));
+                "scripts2\\bootstrap.js",
+                "scripts2\\metro\\jquery.metro.js"});
+
+            bundles.Add<ScriptBundle>(BACKBONE, new[]{
+                    "JsLibraries\\underscore.js",
+                    "JsLibraries\\backbone.js",
+                    "JsLibraries\\backbone.marionette.js",
+            
+                    "app.js",
+                    "AddSeries\\Views\\addSeriesView.js"},
+                    bundle => bundle.AddReference("/" + BASE_SCRIPT));
+
+         
+
 
 
             bundles.Add<StylesheetBundle>(FILEBROWSER_STYLE, new[]{

NzbDrone.Web/NzbDrone.Web.csproj

@@ -189,6 +189,8 @@
     <Compile Include="Helpers\RenderActionHelper.cs" />
     <Compile Include="Helpers\Validation\RequiredIfAnyAttribute.cs" />
     <Compile Include="Helpers\Validation\RequiredIfAttribute.cs" />
+    <Content Include="AddSeries\Views\addSeriesView.js" />
+    <Content Include="app.js" />
     <Content Include="Content2\base.css" />
     <Content Include="Content2\bootstrap-metro.css" />
     <Content Include="Content2\bootstrap-overrides.css" />
@@ -390,6 +392,12 @@
     <Compile Include="Models\UpcomingEpisodeModel.cs" />
     <Compile Include="Models\UpdateModel.cs" />
     <Compile Include="Properties\AssemblyInfo.cs" />
+    <Content Include="JsLibraries\backbone.js" />
+    <Content Include="JsLibraries\backbone.marionette.js" />
+    <None Include="JsLibraries\jquery-1.8.2.intellisense.js" />
+    <Content Include="JsLibraries\jquery-1.8.2.js" />
+    <Content Include="JsLibraries\jquery-ui-1.9.0.js" />
+    <Content Include="JsLibraries\underscore.js" />
     <Content Include="Scripts2\bootstrap-mvc.js" />
     <Content Include="Scripts2\bootstrap.js" />
     <None Include="Scripts2\jquery-1.8.2.intellisense.js" />

NzbDrone.Web/Views/AddSeries/bt.cshtml

@@ -1,26 +1,48 @@
 @{
-    ViewBag.Title = "Bootstrap Page";
+    ViewBag.Title = "Add Series";
     Layout = "~/Views/Shared/_Bootstrap.cshtml";
 }
 
+<script type="text/template" id="add-series-template">
 
-Hello World
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
+<div id="add-series" class="row">
+    <ul class="nav nav-tabs" id="myTab">
+        <li class="active"><a href="#home">Home</a></li>
+        <li><a href="#profile">Profile</a></li>
+        <li><a href="#messages">Messages</a></li>
+        <li><a href="#settings">Settings</a></li>
+    </ul>
+
+    <div class="tab-content">
+        <div class="tab-pane active" id="home">.eeeeee..</div>
+        <div class="tab-pane" id="profile">...ddddd</div>
+        <div class="tab-pane" id="messages">..dddd.</div>
+        <div class="tab-pane" id="settings">..ggggggggggggggggggggggg.</div>
+    </div>
+</div>
+</script>
+@*
+<div id="add-existing-series">
+    <h1>Add Existing</h1>
+    <h2 id="single">Single Series</h2>
+    <h2 id="multiple">All of my series</h2>
+</div>
+
+
+<div id="add-new-series">
+    <h1>Add New</h1>
+    <div class="well">
+        <input type="text" id="series-search" name="series-search" placeholder="Search for a series to add ..." class="span12" autocomplete="off" />
+    </div>
+</div>
+
+
+<div id="add-existing-series-single">
+    <h1>single
+    </h1>
+</div>
+
+<div id="add-existing-series-multiple">
+    <h1>multiple</h1>
+</div>
+*@

NzbDrone.Web/Views/Shared/_Bootstrap.cshtml

@@ -4,7 +4,7 @@
 @using NzbDrone.Web.Helpers
 @{   
     Bundles.Reference<StylesheetBundle>(CassetteBundleConfiguration.BASE_STYLE);
-    Bundles.Reference<ScriptBundle>(CassetteBundleConfiguration.BASE_SCRIPT);
+    Bundles.Reference<ScriptBundle>(CassetteBundleConfiguration.BACKBONE);
 }
 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
@@ -26,6 +26,9 @@
     @Bundles.RenderStylesheets()
 </head>
 <body>
+    <script type="text/template" id="search_template">
+        @RenderBody()
+    </script>
     <div class="container">
 
         <div id="menu" class="row">
@@ -54,7 +57,9 @@
                 <div class="row sub-menu">
                     @RenderSection("ActionMenu", required: false)
                 </div>
-                @RenderBody()
+                <div class="row">
+                    <div id="main-region"></div>
+                </div>
             </div>
         </div>
         <div id="footer" class="row">
@@ -66,5 +71,10 @@
 
     @Bundles.RenderScripts()
 
+
+    <script type="text/javascript">
+        NzbDrone.start();
+    </script>
+
 </body>
 </html>

NzbDrone.Web/app.js

@@ -0,0 +1,78 @@
+NzbDrone = new Backbone.Marionette.Application();
+
+NzbDrone.Constants = {
+
+
+};
+
+NzbDrone.Events = {
+    DisplayInMainRegion: "DisplayInMainRegion",
+};
+
+
+NzbDrone.Routes = {
+    Series: {
+        Add: 'series/add',
+        AddNew: 'series/addnew',
+        AddExisting: 'series/addExisting',
+        AddExistingSingle: 'series/addExisting/single',
+        AddExistingMultiple: 'series/addExisting/multiple',
+    },
+};
+
+
+NzbDrone.Controller = Backbone.Marionette.Controller.extend({
+
+    AddSeries: function () {
+        NzbDrone.mainRegion.show(new NzbDrone.AddSeriesView());
+    },
+
+    AddNewSeries: function () {
+        NzbDrone.mainRegion.show(new NzbDrone.AddNewSeriesView());
+    },
+
+    AddExistingSeries: function () {
+        NzbDrone.mainRegion.show(new NzbDrone.AddExistingSeriesView());
+    },
+    
+    AddExistingSeriesSingle: function () {
+        NzbDrone.mainRegion.show(new NzbDrone.AddExistingSeriesSingleView());
+    },
+    
+    AddExistingSeriesMultiple: function () {
+        NzbDrone.mainRegion.show(new NzbDrone.AddExistingSeriesMultipleView());
+    },
+    
+
+});
+
+
+NzbDrone.MyRouter = Backbone.Marionette.AppRouter.extend({
+
+    controller: new NzbDrone.Controller(),
+    // "someMethod" must exist at controller.someMethod
+    appRoutes: {
+        "":"AddSeries",
+        "series/add": "AddSeries",
+        "series/addnew": "AddNewSeries",
+        "series/addExisting": "AddExistingSeries",
+        "series/addExisting/single": "AddExistingSeriesSingle",
+        "series/addExisting/multiple": "AddExistingSeriesMultiple",
+    }
+
+});
+
+NzbDrone.addInitializer(function (options) {
+
+    console.log("starting application");
+
+
+    NzbDrone.addRegions({
+        mainRegion: "#main-region",
+    });
+
+    NzbDrone.Router = new NzbDrone.MyRouter();
+    Backbone.history.start();
+
+
+});