<!doctype html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>Test Model Renkan</title>
    <meta name="description" content="">
    <meta name="author" content="">

    <meta name="viewport" content="width=device-width">

    <link rel="stylesheet" href="css/style.css">
    
    <script type="text/javascript" src="js/config.js"></script>
    <script type="text/javascript" src="js/dojo.js" data-dojo-config="isDebug: true, parseOnLoad: true"></script>
    <script src="lib/jquery.min.js"></script>
    <script src="lib/underscore-min.js"></script>
    <script src="js/backbone.js"></script>
    <script src="js/backbone-relational.js"></script>
    <script src="js/main_test_models.js"></script>
    <script src="js/models.js"></script>
    <script type="text/javascript" src="js/config.js"></script>
    <script data-main="main" src="js/main_coweb.js"></script>
    <script type="text/javascript">
    
    function set_project(project) {
    	
    	require(["dojo/dom", "dojo/on", "corenkan"], function(dom, on, corenkan) {

    		var template_html = dom.byId("project_disp_template").innerHTML;
            var el = dom.byId("project_display");
    
            
            var project_form_view = new FormView({el: dom.byId("form_display"), model: project, template: dom.byId("project_form_template").innerHTML});
            
            project_view = new ModelView({
                el:el,
                model: project,
                template: template_html,
                form_view: project_form_view,
                form_el : dom.byId("form_display_div")
            });
            
            var user_list_view = new ColView({
                el: dom.byId("users_list_base"),
                collection: project.get("users"),
                element: {
                    template: dom.byId("user_disp_template").innerHTML
                },
                element_form: {
                    tagName: "div",
                    attributes: {
                        id:"form_display",
                    },
                    template: dom.byId("user_form_template").innerHTML
                },
                element_form_el : dom.byId("form_display_div")
            });
    
            var node_list_view = new ColView({
                el: dom.byId("nodes_list_base"),
                collection: project.get("nodes"),
                element: {
                    template: dom.byId("node_disp_template").innerHTML
                },
                element_form: {
                    tagName: "div",
                    attributes: {
                        id:"form_display",
                    },
                    template: dom.byId("node_form_template").innerHTML  
                },
                element_form_el : dom.byId("form_display_div") 
            });
            
            var current_user_view = new CurrentUserView({
                el: dom.byId("users_select"),
                model: project
            })
            
            project_view.render();
            user_list_view.render();
            node_list_view.render();
            current_user_view.render();
            
            on(dom.byId("add_user"), "click", function() {
                project.get("users").push(new Rkns.Models.User({}));
            });
            on(dom.byId("add_node"), "click", function() {
                project.get("nodes").push(new Rkns.Models.Node({project: project}));
            });
            
            on(dom.byId("users_select"), "change", function(evt) {
                var val = evt.currentTarget.value;
                var current_user = null;
                if(typeof val !== "undefined" && val != "") {               
                    current_user = project.get("users").get(val);
                }
                
                if(current_user != null) {
                    project.current_user = current_user;
                    dom.byId("current_user").innerHTML = current_user.get("title");
                }
                else {
                    project.current_user = null;
                    dom.byId("current_user").innerHTML = "";
                }
                 
            });
            
            project.get("users").on("change", function(evt) {
                if(project.current_user == null) {
                    dom.byId("current_user").innerHTML = "";
                }
                else if(evt.id == project.current_user.id) {
                    dom.byId("current_user").innerHTML = project.current_user.get("title");
                }
            });
            
            project.get("users").on("remove", function(evt) {
                if(typeof project.current_user === "undefined" || project.current_user == null || evt.id == project.current_user.id) {
                    dom.byId("current_user").innerHTML = "";
                }
            });
    
            corenkan.app.setProject(project);
        });
    }
    
    function load_project(project_id) {
    	var project = null;
    	
   		if(project_id) {
   		    project = new Rkns.Models.Project({_id: project_id});
   		}
   		else {
   			project = new Rkns.Models.Project({});
   		}
   		project.urlRoot = "rest/projects";
   		
   		if(project_id) {
   			project.fetch({
   				success: function(project, resp) {
   				    set_project(project);    					
   				}
   			});
   		}
   		else {
   			set_project(project);
   		}
    		    	
    	return project;
    }
    
    var current_project = null;
    
    require(["dojo/dom", "dojo/on", "dojo/domReady!"], function(dom, on) {
    	    	
    	var project_list_item_view = BasicModelView.extend({template: _.template(dom.byId("project_list_item_template").innerHTML), tagName: "li"});

        var project_list_col = new (Backbone.Collection.extend({model: Rkns.Models.Project.extend({idAttribute:'_id', urlRoot:'rest/projects'})}))();
        project_list_col.url = "rest/projects";
        project_list_col.on("all", function(){
        	if(!project_list_view) {
        		return;
        	}
            _(project_list_view.element_views).each(function(ev){
                if(ev.model.id === current_project.id) {
                    $(".project_load_button",ev.el).attr('disabled','disabled');
                    $(".project_delete_button",ev.el).attr('disabled','disabled');
                }
                else {
                    $(".project_load_button",ev.el).removeAttr('disabled');
                    $(".project_delete_button",ev.el).removeAttr('disabled');
                }
            });        	
        });

        var project_list_view = null; 
        
        project_list_col.fetch({
        	success:function(collection, response) {
        		project_list_view = new (BasicListView.extend({events: {
                    "click .project_load_button" : function(evt) {
                    	var proj_id = $(evt.target).val();
                    	if(current_project && current_project.id == proj_id) {
                    		return;
                    	}
                        current_project = load_project($(evt.target).val());
                        project_list_col.trigger("sync");
                    },
                    "click .project_delete_button": function(evt) {                    	
                    	var delete_id = $(evt.target).val();
                    	if(!current_project || delete_id != current_project.id) { 
                      	    _(project_list_col.where({_id: delete_id})).each(function(proj) {
                      	        proj.destroy();
                      	    });
                    	}
                    }
                }}))({collection: collection, element_view_constructor: project_list_item_view, el: dom.byId("project_list")});
                project_list_view.render();
        	} 
        });
        
        on(dom.byId("project_save_button"), "click", function(evt){
        	if(current_project) {
           	    current_project.save({}, {success: function(model, response) {
           		    if(project_list_view != null) {
           			    project_list_col.fetch({
           	                success:function(collection, response) {
           	                    project_list_view.render();
           	                } 
           	            });
           		    }        		
           	    }});
        	}
        });
        
        on(dom.byId("new_project_button"), "click", function(evt) {
        	current_project = load_project();        	
        });
                
    });
    </script>
</head>
<body>
<header>
</header>

<div>
<div class="project_current_user"><span class="project_label project_user_label">User: </span><span id="current_user"></span></div>
<select id="users_select">
    <option value="">None</option>
</select>
</div>

<button type="button" id="new_project_button">New Project</button>

<div id="project_list_div">
<ul id="project_list">
</ul>
</div>

<div role="main" id="project_display">
</div>
<button type="button" id="project_save_button" value="save">Save</button>

<div id="users_list_div">
    <button id="add_user">Add user</button>
    <ul id="users_list_base">
    </ul>    
</div>

<div id="nodes_list_div">
    <button id="add_node">Add node</button>
    <ul id="nodes_list_base">
    </ul>
</div>


<div id="form_display_div">
</div>

<footer>
</footer>

<script type="text/template" id="current_user_template">
</script>

<script type="text/template" id="project_disp_template">
    <div class="show_form">
    <h2 class="project_title">Project <%= _id %>: <%= title %></h2>
    <div class="project_desc"><span class="project_label project_desc_label">Desc: </span><%= description %></div>
    <div class="project_uri"><span class="project_label project_uri_label">Uri: </span><%= uri %></div>
    </div>
</script>
<script type="text/template" id="project_form_template">
    <table class="project_form">
        <thead>
            <tr><th>Field</th><th>Value</th></tr>
        </thead>
        <tbody>
            <tr><td>Title:</td><td><input type="text" name="title" id="project_form_title" class="form_field" value="<%= title %>"></input></td></tr>
            <tr><td>Uri :</td><td><input type="text" name="uri" id="project_form_text" class="form_field" value="<%= uri %>"></input></td></tr>
            <tr><td>Desc :</td><td><textarea name="description" id="project_form_description" class="form_field"><%= description %></textarea></td></tr>            
        </tbody>
    </table>
</script>
<script type="text/template" id="user_disp_template">
    <div class="show_form">
    <h2 class="user_title">User <%= _id %>: <%= title %></h2>
    <div class="user_desc"><span class="user_label user_desc_label">Desc: </span><%= description %></div>
    <div class="user_uri"><span class="user_label user_uri_label">Uri: </span><%= uri %></div>
    <div class="user_color"><span class="user_label user_color_label">Color: </span><%= color %></div>
    </div>
    <button type="button" class="remove_button" value="<%= _id %>">Remove<button>
</script>
<script type="text/template" id="user_form_template">
    <table class="user_form">
        <thead>
            <tr><th>Field</th><th>Value</th></tr>
        </thead>
        <tbody>
            <tr><td>Title:</td><td><input type="text" name="title" class="form_field" value="<%= title %>"></input></td></tr>
            <tr><td>Uri :</td><td><input type="text" name="uri" class="form_field" value="<%= uri %>"></input></td></tr>
            <tr><td>Color :</td><td><input type="text" name="color" class="form_field" value="<%= color %>"></input></td></tr>
            <tr><td>Desc :</td><td><textarea name="description" class="form_field"><%= description %></textarea></td></tr>
        </tbody>
    </table>
</script>
<script type="text/template" id="node_disp_template">
    <div class="show_form">
    <h2 class="user_title">Node <%= _id %>: <%= title %></h2>
    <div class="user_desc"><span class="user_label user_desc_label">Desc: </span><%= description %></div>
    <div class="user_uri"><span class="user_label user_uri_label">Uri: </span><%= uri %></div>
    <div class="user_creator"><span class="user_label user_uri_label">Creator: </span><%= created_by.title %></div>
    </div>
    <button type="button" class="remove_button" value="<%= _id %>">Remove<button>
</script>
<script type="text/template" id="node_form_template">
    <table class="node_form">
        <thead>
            <tr><th>Field</th><th>Value</th></tr>
        </thead>
        <tbody>
            <tr><td>Node title:</td><td><input type="text" name="title" class="form_field" value="<%= title %>"></input></td></tr>
            <tr><td>Node uri :</td><td><input type="text" name="uri" class="form_field" value="<%= uri %>"></input></td></tr>
            <tr><td>Node creator :</td><td><input type="text" name="created_by" class="form_field" value="<%= created_by.title %>" readonly="readonly"></input></td></tr>
            <tr><td>Node desc :</td><td><textarea name="description" class="form_field"><%= description %></textarea></td></tr>
        </tbody>
    </table>
</script>
<script type="text/template" id="project_list_item_template">
    <span class="title"><%= title %></span>&nbsp;<button type="button" class="project_load_button" value="<%= _id %>">Load</button><button type="button" class="project_delete_button" value="<%= _id %>">Delete</button>
</script>


</body>
</html>