PropertyViewModel = function () {
    var self = this;

    self.properties = ko.observableArray();

    self.currentProperty = ko.observable(new Property()),

    self.intilialize = function () {
        var model = $.get("api/properties", function (results) {
            self.properties(results);
        });
    };

    self.loadCurrentProperty = function (id) {
        $.get("api/properties/" + id, function (result) {
            self.currentProperty(ko.mapping.fromJS(result));
        });
    };

    ko.bindingHandlers.starRating = {
        init: function (element, valueAccessor) {
            $(element).addClass("starRating");
            for (var i = 0; i < 5; i++)
                $("<span>").appendTo(element);

            // Handle mouse events on the stars
            $("span", element).each(function (index) {
                $(this).hover(
                    function () { $(this).prevAll().add(this).addClass("hoverChosen") },
                    function () { $(this).prevAll().add(this).removeClass("hoverChosen") }
                ).click(function () {
                    var observable = valueAccessor();  // Get the associated observable
                    observable(index + 1);               // Write the new rating to it
                });
            });
        },
        update: function (element, valueAccessor) {
            // Give the first x stars the "chosen" class, where x <= rating
            var observable = valueAccessor();
            $("span", element).each(function (index) {
                $(this).toggleClass("chosen", index < observable());
            });
        }
    };
 };