Menu = Backbone.Model.extend({
    idAttribute: "Name",
    initialize: function () {
        this.set({
            htmlId: 'movie_' + this.cid
        })
   }
});
Menus = Backbone.Collection.extend({
    model: Menu,
    url: '/Menus'
});
productions = new Menus();
ListView = Backbone.View.extend({
    initialize: function () {
        _.bindAll(this, 'render');
        //console.log('lvinit');
    },
    events: {
        "click li": "showForm"
    },
    showForm: function (evt) {
        var id = $(evt.currentTarget).data('production-id');
        if (("#" + id) != document.location.hash) {
            $("#innerRightSide").fadeOut();
            app.navigate("" + id, true);
        }
        return false;
    },
    render: function () {
        // console.log('render');
        var html = $("#user-list-template").tmpl(this.collection.toJSON());
        $(this.el).html(html);
        return this;
    }
});

MainView = Backbone.View.extend({
    initialize: function () {
        _.bindAll(this, 'render');
        //console.log('lvinit');
    },
    events: {
    },
    render: function () {
        $("#innerRightSide").fadeIn();
        var html = $("#RightSide-template").tmpl(this.model.toJSON());
        //$(this.el).fadeOut().html(html).fadeIn();
        $(this.el).load(this.model.get('Url'), function () {
            $("#main").height($("#innerRightSide").height() + 50);
            $("#RightSide").height($("#innerRightSide").height() + 50);
            
        });
        return this;
    }
});




BackboneTunes = Backbone.Router.extend({
    initialize: function () {
        //  console.log('init');
        listView = new ListView({ collection: productions, el: "#SideBarUL" });
        listView.render();
        mainView = new MainView({ el: "#innerRightSide" });
        //notifierView = new NotifierView({ el: "#notifications" });
    },
    routes: {
        '': 'home',
        ":id": "edit"
    },
    home: function () {
        this.edit(0);
        //        var selected = productions.at(0);
        //        listView.render();
        //        mainView.model = selected;
        //        mainView.render();
        //        $("#" + selected.get('htmlId')).addClass('active');
    },
    edit: function (id) {
        var selected = productions.get(id) || productions.at(id);
        mainView.model = selected;
        mainView.render();
        $("#" + selected.get('htmlId')).addClass('active').siblings().removeClass('active');
    }
});

$(function () {
    productions.fetch({
        success: function () {
            //create the router
          //  console.log('foo');
            window.app = new BackboneTunes();
            Backbone.history.start();
        },
        error: function () {
         //   console.log('bar');
            //display a nice error page
        }
    });
});