// This is the widget for a list of teams *before* the draft process.
// You can add, delete, edit, and sort the teams.  All that is displayed is the name
$.widget("ui.teamList", {
    _init: function() {
        this.element.addClass("teamList");
    },

    destroy: function() {
        this.element.removeClass("teamList");
    },

    hide: function() {
        this.element.addClass('hidden');
    },

    // This method expects teams to just be a simple list of:
    // [{teamId, name, owner}, ...]
    dataBind: function(teams) {
        var self = this;
        this.element.empty();
        this.element.removeClass('hidden');
        var header = $("<h3 />")
                        .text("Teams")
                        .appendTo(this.element);

        $("<input />")
                .attr("type", "button")
		        .attr("id", "addTeamLink")
		        .val("add team")
		        .appendTo(header)
		        .bind("click", function(event) {
		            self.options.addTeamClicked(event);
		        });

        var scrollDiv = $("<div />")
                .addClass("scrollableTeamList")
                .appendTo(this.element);

        if (teams.length > 0) {
            var ul = $("<ol/>")
				.appendTo(scrollDiv);

            for (var i = 0; i < teams.length; i++) {
                var displayName = teams[i].Name + ", " + teams[i].Owner;

                var li = $("<li />")
					.addClass(teams[i].IsUsers ? "usersTeam" : "")
					.appendTo(ul);

                var div = $("<div />")
					.appendTo(li);

                var h3 = $("<h4 />")
					.appendTo(div);

                if (!teams[i].IsUsers) {
                    var deleteLink = $("<a />")
						.addClass("teamListDeleteLink")
						.bind("click", { TeamId: teams[i].TeamId }, function(event) {
						    if (confirm("Are you sure you want to delete this team?")) {
						        self.options.deleteTeamClicked(event.data.TeamId);
						    }
						    event.preventDefault();
						})
						.appendTo(h3);

                    $("<img src='/images/DraftTool/delete-btn.gif' />")
						.appendTo(deleteLink);


                    var editLink = $("<a />")
					    .addClass('teamEditLink')
					    .text('[edit]')
					    .appendTo(h3);

                    editLink
					    .bind("click", { TeamId: teams[i].TeamId }, function(event) {
					        self.options.editTeamClicked(event.data.TeamId);
					        event.preventDefault();
					    });
                }
                var headerLink = $("<a />")
					.addClass('teamHeader')
					.addClass(teams[i].IsUsers ? "usersTeam" : "")
					.text(displayName)
					.appendTo(h3);

                $("<input />")
					.attr("type", "hidden")
					.addClass("teamListTeamId")
					.val(teams[i].TeamId)
					.appendTo(h3);
            }

            ul.sortable({
                axis: 'y',
                stop: function(event, ui) {
                    var ids = [];
                    $($(ui)[0].item)
					.parents('.teamList')
					.find('.teamListTeamId')
					.each(function(index) {
					    ids[index] = $(this).val();
					});

                    self.options.orderChanged(ids);

                    if (event.originalEvent) {
                        event.originalEvent.stopImmediatePropagation();
                    }
                },
                handle: '.teamHeader'
            });

            if (teams.length > 1) {
                $("<input />")
			        .attr("type", "button")
			        .attr("id", "clearAllButton")
			        .addClass("clearAllButton")
			        .val("Clear All")
			        .bind("click", function(event) {
			            if (confirm("Are you sure you want to clear all teams but your own?")) {
			                self.options.removeAllTeamsButUsersFromLeague();
			                event.preventDefault();
			            }
			        })
			        .appendTo(this.element);
            }
        }
    }
});