<a href="#docName=Home/Index&id=123">Click me</a>

module ssp {
    export interface IDocumentNavigatorDescription {
        loader?: Loader;
    }

    var docNameKey = "docName";

    export class DocumentNavigator {
        loader: Loader;
        current = ko.observable<Control>();

        constructor(description?: IDocumentNavigatorDescription) {
            description = description || {};

            this.loader = description.loader || loader;

            $(window).on("hashchange", () => this.onHashChanged());
            this.onHashChanged();
        }

        private onHashChanged() {
            this.current(null);

            var parametersUrl = "?" + location.hash.substring(1);
            var parameters = ssp.url.parseParameters(parametersUrl);

            if (parameters[docNameKey]) {
                var docUrl = parameters[docNameKey] + parametersUrl;

                this.loader.loadControl(docUrl, parameters)
                    .subscribe(c => this.current(c));
            }
        }

        navigate(docName?: string, parameters?) {
            if (parameters && parameters[docNameKey])
                throw "parameters && parameters[docNameKey]";

            var hash = "#";

            if (docName) {
                var p = data.clone(parameters) || {};
                p[docNameKey] = docName;
                hash += ssp.url.encodeParameters(p);
            }

            location.hash = hash;
        }
    }
}