var UserRouteList = function(start, count, csrfmiddlewaretoken) {
    this.csrfmiddlewaretoken = csrfmiddlewaretoken;
    this.start = start;
    this.count = count;
    this.tablename = "user_routes";

    // attach the route_list to the table so we can find it later
    var table = document.getElementById(this.tablename);
    table.setAttribute('route_list', this);
    table.route_list = this;

};

UserRouteList.prototype.load = function(start, count) {
    var route_list = this;
    $.getJSON("/user_routes", {start:start, count:count},
        function(json) {
            var table = document.getElementById(route_list.tablename);
            while(table.rows.length > 1) {
                table.deleteRow(table.rows.length-1);
            }

            var row_format = "<tr id='row_route_{0}' class='routelist'><td class='routelist'>" +
	                         "    <div style='white-space:nowrap; overflow:hidden; width:225px'>" +
        	                 "     <div style='float:left; left:0px; list-style-type:none;'>" +
	                         "      <a href='#' onclick='edit_route({9}, \"" + route_list.csrfmiddlewaretoken + "\")'>" +
	                         "       <img src='/media/img/rename.png' /></a>" +
	                         "     </div>" +
	                         "     <div id='static_name_{0}' style='position:absolute; list-style-type:none; left:45px;'>" +
	                         "      <a id='static_name_link_{0}' href='/route/{0}?user=true'>{1}</a>" +
	                         "     </div>" +
	                         "    </div>" +
	                         "  </td>" +
                             "  <td class='routelist'><time datetime='{2}'>{2}</time></td>" +
                             "  <td class='routelist'>{3} miles</td>" +
                             "  <td class='routelist'>{4} ft</td>" +
                             "  <td class='routelist'>{5} ft</td>" +
                             "  <td class='routelist'>{6} mph</td>" +
                             "  <td class='routelist'>{7} mph</td>" +
                             "  <td class='routelist'><input type='checkbox' id='public_{0}' onclick='toggle_public({0}, \"" + route_list.csrfmiddlewaretoken + "\")'></td>" +
                             "  <td class='routelist'><div style='height:16px;float:left;width:130px'>" +
	                         "    <form>" +
                             "     <input class='auto-submit-star' type='radio' name='rating_{0}' value='1'/>" +
                             "     <input class='auto-submit-star' type='radio' name='rating_{0}' value='2'/>" +
                             "     <input class='auto-submit-star' type='radio' name='rating_{0}' value='3'/>" +
                             "     <input class='auto-submit-star' type='radio' name='rating_{0}' value='4'/>" +
                             "     <input class='auto-submit-star' type='radio' name='rating_{0}' value='5'/>" +
                             "     (<span id='avg_rating_{0}'>{8}</span>)" +
                             "    </form>" +
                             "   </div>" +
                             "   <div id='plusone_{0}'></div>" +
                             "  </td>" +
                             "</tr>";

            for (var i=0; i < json.length; i++) {
                var dict = json[i];

                $("#user_routes tr:last").after(row_format.format(dict["id"], dict["name"],
                                                dict["date"],
                                                convert_units(dict["distance"], "miles"),
                                                convert_units(dict["ascent"], "ft"),
                                                convert_units(dict["descent"], "ft"),
                                                convert_units(dict["avg_speed"], "miles"),
                                                convert_units(dict["max_speed"], "miles"),
                                                Math.round(dict["rating"]*10)/10,
                                                JSON.stringify(dict).replace(/'/g, "&#39;")));


                // update the rating
                var rating = Math.round(dict["rating"])
                if (rating > 0) {
                    $('input[name="rating_{0}"]'.format(dict["id"]))[rating-1].checked=true;
                }

                // update the public checkbox
                $('input[id=public_{0}]'.format(dict['id']))[0].checked=dict['public'];

                // render all the plusone tags
                gapi.plusone.render("plusone_" + dict['id'],
                                   {href:'/route/' + dict['id'], size:'small', 'annotation':'none'});
            }

            if (start <= 0) {
                var nav_cell = "<a href='#' onclick=''>Next -></a></td>";
            } else {
                var nav_cell = ("<a href='#' onclick=''><- Prev</a>\n" +
                               "<a href='#' onclick=''>Next -></a></td>");
            }

            var nav_row = "<tr><td></td><td/><td/><td/><td/><td/><td/><td/>" +
                      "<td>" + nav_cell + "</td></tr>";

            $("#user_routes tr:last").after(nav_row);

            $("#user_routes tr:last td:last a:first")[0].route_list = route_list;
            $("#user_routes tr:last td:last a:first")[0].onclick = prev_route_list;

            $("#user_routes tr:last td:last a:last")[0].route_list = route_list;
            $("#user_routes tr:last td:last a:last")[0].onclick = next_route_list;

            $('.auto-submit-star').rating({
                    callback: function(value, link){
                            rate_route(this.name.substr(7), value, route_list.csrfmiddlewaretoken);
                    }
            });

        }
    );
};

var PublicRouteList = function(start, count, url, tablename, csrfmiddlewaretoken) {
    this.start = start;
    this.count = count;
    this.csrfmiddlewaretoken = csrfmiddlewaretoken;
    this.tablename = tablename;
    this.url = url;

    // attach the route_list to the table so we can find it later
    var table = document.getElementById(this.tablename);
    table.setAttribute('route_list', this);
    table.route_list = this;
};

PublicRouteList.prototype.load = function(start, count) {
    var route_list = this;
    $.getJSON(this.url, {start:start, count:count},
        function(json) {
            var table = document.getElementById(route_list.tablename);
            while(table.rows.length > 1) {
                table.deleteRow(table.rows.length-1);
            }

            var row_format = "<tr class='routelist'><td class='routelist'><a href='/route/{0}'>{1}</a>" +
                             "  <td class='routelist'>{2} miles</td>" +
                             "  <td class='routelist'>{3} ft</td>" +
                             "  <td class='routelist'>{4} ft</td>" +
                             "  <td class='routelist'><div style='height:16px;float:left;width:130px'>" +
	                         "   <form>" +
                             "    <input class='auto-submit-star' type='radio' name='avg_rating_{0}' value='1'/>" +
                             "    <input class='auto-submit-star' type='radio' name='avg_rating_{0}' value='2'/>" +
                             "    <input class='auto-submit-star' type='radio' name='avg_rating_{0}' value='3'/>" +
                             "    <input class='auto-submit-star' type='radio' name='avg_rating_{0}' value='4'/>" +
                             "    <input class='auto-submit-star' type='radio' name='avg_rating_{0}' value='5'/>" +
                             "    (<span id='avg_rating_{0}'>{5}</span>)" +
                             "   </form>" +
                             "   </div>" +
                             "   <div id='plusone_{0}'></div>" +
                             "  </td>" +
                             "</tr>";

            for (var i=0; i < json.length; i++) {
                var dict = json[i];

                $("#" + route_list.tablename + " tr:last").after(row_format.format(dict["id"],
                                                dict["name"],
                                                convert_units(dict["distance"], "miles"),
                                                convert_units(dict["ascent"], "ft"),
                                                convert_units(dict["descent"], "ft"),
                                                Math.round(dict["rating"]*10)/10));

                // update the rating
                var rating = Math.round(dict["rating"])
                if (rating > 0) {
                    $('input[name="avg_rating_{0}"]'.format(dict["id"]))[rating-1].checked=true;
                }

                // render all the plusone tags
                gapi.plusone.render("plusone_" + dict['id'],
                                   {href:'/route/' + dict['id'], size:'small', 'annotation':'none'});
            }

            if (start <= 0) {
                var nav_cell = "<a href='#' onclick=''>Next -></a></td>";
            } else {
                var nav_cell = "<a href='#' onclick=''><- Prev</a>\n" +
                               "<a href='#' onclick=''>Next -></a></td>";
            }

            var nav_row = "<tr><td/><td/><td/><td/>" +
                      "<td>" + nav_cell + "</td></tr>";

            $("#" + route_list.tablename + " tr:last").after(nav_row);

            $("#" + route_list.tablename + " tr:last td:last a:first")[0].route_list = route_list;
            $("#" + route_list.tablename + " tr:last td:last a:first")[0].onclick = prev_route_list;

            $("#" + route_list.tablename + " tr:last td:last a:last")[0].route_list = route_list;
            $("#" + route_list.tablename + " tr:last td:last a:last")[0].onclick = next_route_list;


            $('.auto-submit-star').rating({
                    callback: function(value, link){
                            rate_route(this.name.substr(11), value, route_list.csrfmiddlewaretoken);
                    }
            });
        }
    );
};

var next_route_list = function() {
    // assumes <a> tag which with route_list attribute added
    var route_list = this.route_list;
    route_list.start += route_list.count;
    route_list.load(route_list.start, route_list.count);
}

var prev_route_list = function() {
    // assumes a tag which with route_list attribute added
    var route_list = this.route_list;
    route_list.start -= route_list.count;
    if (route_list.start < 0) {
        route_list.start = 0;
    }

    route_list.load(route_list.start, route_list.count);
}


function edit_route(json, csrf_token) {
    $('#edit_modal #delete_route_button')[0].setAttribute('onclick', "delete_route(" + json["id"] +",'" + csrf_token + "')")

    $('#edit_modal #edit_name_field')[0].value = json['name'];
    $('#edit_modal #edit_name_field')[0].setAttribute('onchange', "rename_route(" + json["id"] + ", this.value, '" + csrf_token + "')");

    $('#edit_modal #date')[0].setAttribute('datetime', json['date']);
    $('#edit_modal #date')[0].firstChild.data = json['date'];
    $('#edit_modal #total_time')[0].firstChild.data = convert_units(json['total_time'], 'hours');
    $('#edit_modal #active_time')[0].firstChild.data = convert_units(json['total_time'], 'hours');
    $('#edit_modal #distance')[0].firstChild.data = convert_units(json['distance'], 'miles') + " miles";
    $('#edit_modal #ascent')[0].firstChild.data = convert_units(json['ascent'], 'ft') + " ft";
    $('#edit_modal #descent')[0].firstChild.data = convert_units(json['descent'], 'ft') + " ft";
    $('#edit_modal #avg_speed')[0].firstChild.data = convert_units(json['avg_speed'], 'miles') + " mph";
    $('#edit_modal #max_speed')[0].firstChild.data = convert_units(json['max_speed'], 'miles') + " mph";
    $('#edit_modal #notes')[0].value = json['notes'];
    $('#edit_modal #notes')[0].setAttribute('onchange', "update_notes(" + json["id"] + ", this.value, '" + csrf_token + "')");
    $('#edit_modal #preview')[0].src = json['preview'];

    $('#edit_modal').modal();
};