enyo.kind({
    name: "CrumbButton",
    kind: "Control",
    classes: "crumb-button",
    published: {
        page: null
    },
    handlers: {
        ontap: "tapHandler",
    },
    tapHandler: function(inSender, inEvent) {
        this.bubble('onSelectPage', {page: this.page});
    }
});

enyo.kind({
    name: "Navigator",
    kind: "FittableRows",
    handlers: {
        onNavigate: "navigate",
        onSelectPage: "selectPage"
    },
    count: 0,
    components: [
        {name: "breadcrumbs", classes: "navigator-breadcrumbs"},
        {name: "carousel", kind: "Panels", arrangerKind: "CarouselArranger", classes: "navigator-carousel", fit: true}
    ],
    navigate: function(inSender, inEvent) {
        if (this.count > 0 && inEvent.originator instanceof Listing) {
            var i = this.$.carousel.children.indexOf(inEvent.originator);
            while (this.$.carousel.children.length - 1 > i) {
                this.$.carousel.children[i + 1].destroy();
                this.count--;
            }
        }

        var newpage = this.$.carousel.createComponent(inEvent)
        this.render();
        this.count++;
        this.$.carousel.setIndex(this.count - 1);
        this.updateBreadcrumbs();
    },
    updateBreadcrumbs: function() {
        while (this.$.breadcrumbs.children.length > 0)
            this.$.breadcrumbs.children[0].destroy();

        var crumbs = [];
        for (var i = 0; i < this.$.carousel.children.length; i++) {
            this.$.breadcrumbs.createComponent({
                kind: "CrumbButton",
                content: this.$.carousel.children[i].title,
                page: i
            });
            if (i < this.$.carousel.children.length - 1)
                this.$.breadcrumbs.createComponent({tag: null, content: " >> "});
        }
        this.$.breadcrumbs.render();
    },
    selectPage: function(inSender, inEvent) {
        this.$.carousel.setIndex(inEvent.page);
    }
});