var API_URL = 'http://localhost/octopus-phpfog/api';
//var API_URL = 'http://octopus.phpfogapp.com/api';

function Event(id, name, desc, dtStart, dtEnd) {
    var self = this;
    self.id = ko.observable(id);
    self.name = ko.observable(name);
    self.desc = ko.observable(desc);
    self.dtStart = ko.observable(dtStart);
    self.dtEnd = ko.observable(dtEnd);
    self.registered = ko.observable(false);
}

function EventsViewModel() {
    var self = this;
    self.events = ko.observableArray([]);
    self.eventsCache = [];
    self.selectedEvent = ko.observable(null);
    self.searchQuery = ko.observable("");

    self.viewEvent = function(event) {
        self.selectedEvent(event);
        location.hash = "#" + event.id();
    };

    self.loadUpcoming = function() {
        // deep linking
        var id = location.hash.replace("#", "");

        $.getJSON(API_URL + '/events/upcoming', function(events) {
            $.each(events, function(i, event) {
                var evt = new Event(event.id, event.name, event.description, event.dtStart, event.dtEnd);
                self.events.push(evt);
                self.eventsCache.push(evt);

                if (evt.id() == id)
                    self.selectedEvent(evt);
                // check if event is registered already
                if ($.storage.get("reg" + event.id) == true)
                    evt.registered(true)
            });
        });
    };

    self.registrationValidationOpts = {
        rules: {
            name: {
                required: true,
                maxlength: 64
            },
            email: {
                required: true,
                maxlength: 128,
                email: true
            },
            contact: {
                required: true,
                digits: true,
                minlength: 8,
                maxlength: 8
            },
            faculty: {
                maxlength: 64
            },
            course: {
                maxlength: 64
            },
            year: {
                maxlength: 1,
                digits: true
            }
        },
        messages: {
            name: {
                required: "Please enter your name",
                maxlength: "Your name should not be more than {0} characters"
            },
            email: {
                required: "Please enter your email",
                maxlength: "Your email should not be more than {0} characters",
                email: "This email address appears to be invalid"
            },
            contact: {
                required: "Please enter your contact number",
                maxlength: "Your contact should be 8 digits long",
                minlength: "Your contact should be 8 digits long",
                digits: "Your contact should only contain digits"
            },
            faculty: {
                maxlength: "Your faculty should not be more than {0} characters"
            },
            course: {
                maxlength: "Your course should not be more than {0} characters"
            },
            year: {
                maxlength: "Your year of study should not be more than {0} digits long",
                digits: "Year of study should only contain digits"
            }
        }
    };

    self.submitRegistration = function() {
        var $frm = $("#frmRegister"),
        formData = $.parseJSON($.toJSON($frm.serializeObject()));

        // validation
        $frm.validate(self.registrationValidationOpts);
        if (!$frm.valid())
            return false;

        // store particulars in local storage
        $.storage.set("particulars", formData);
        populateRegistrationForm();

        // submit request to server
        $.post(API_URL + '/events/register/' + self.selectedEvent().id(),
            formData,
            function(json) {
                if (json.status == "success") {
                    // mark event as registered
                    self.selectedEvent().registered(true);
                    $.storage.set("reg" + self.selectedEvent().id(), true); // store in local storage too
                } else {
                    alert('Your registration was unsuccessful');
                }
            });

        return false;
    };

    self.search = function() {
        var q = $.trim(self.searchQuery()), i, len;

        if (q === "") {
            self.events.removeAll();
            for (i = 0, len = self.eventsCache.length; i < len; i++) {
                self.events.push(self.eventsCache[i]);
            }
        } else {
            self.events.removeAll();
            for (i = 0, len = self.eventsCache.length; i < len; i++) {
                if (self.eventsCache[i].name().toLowerCase().indexOf(q) >= 0) {
                    self.events.push(self.eventsCache[i]);
                }
            }
        }
    };

    self.populateRegistrationForm = function() {
        var user = $.storage.get("particulars");

        if (user) {
            console.log($("#frmRegister"));
            $("#frmRegister").find("input[name=name]").val(user.name).end()
            .find("input[name=email]").val(user.email).end()
            .find("input[name=contact]").val(user.contact).end()
            .find("input[name=faculty]").val(user.faculty).end()
            .find("input[name=course]").val(user.course).end()
            .find("input[name=year]").val(user.year).end();
        }
        console.log("out")
    }

}

$.fn.serializeObject = function() {
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name]) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

$(document).ready(function() {
    var eventsViewModel = new EventsViewModel();
    ko.applyBindings(eventsViewModel);
    eventsViewModel.loadUpcoming();
    eventsViewModel.searchQuery.subscribe(eventsViewModel.search);

    // init local storage (jQuery Plugin)
    $.storage = new $.store();

    // populate registration form with past data for convinence
    console.log($("#frmRegister"))
    eventsViewModel.populateRegistrationForm();
});