var jQuery = jQuery || {};
var bm = bm || {};

bm.sliderObserver = function(){

    var init = function(element, slideNr) {
        var initEvent = $.Event('init.bm.sliderObserver', {
            relatedTarget: element,
            slideNr: slideNr
        });
        $(element).trigger(initEvent)
    }
    var changed = function(element, slideNr) {
        //console.log('changed', element, slideNr);
        var changedEvent = $.Event('changed.bm.sliderObserver', {
            relatedTarget: element,
            slideNr: slideNr
        });
        $(element).trigger(changedEvent)
    }
    var change = function(element, slideNr) {
        //console.log('changed', element, slideNr);
        var changeEvent = $.Event('change.bm.sliderObserver', {
            relatedTarget: element,
            slideNr: slideNr
        });
        $(element).trigger(changeEvent)
    }
    return {
        init:init,
        changed:changed,
        change:change
    }
}

$('[data-role="slider-navigation"]').on('init.bm.sliderObserver', function(event) {

});

$('[data-role="slider-navigation"]').on('changed.bm.sliderObserver init.bm.sliderObserver', function(event){
    var slideNr = event.slideNr;
    $self = $(this);
    $self.find('[data-role="slider-navigation_item"]')
        .removeClass('active')
        .filter('[data-slide-nr="'+slideNr+'"]')
        .addClass('active');

});


 var  reposActiveMarker = function() {
     var $self          = $(this);
     var $parent        = $self.closest('[data-role="slider-navigation"]');
     var $activeItem    = $parent.find('[data-role="slider-navigation_item"].active').first();

     if ($activeItem.length <=0 ) return false;
     var posActiveItem  = $activeItem.position();
     var activeItemWidth = $activeItem.outerWidth();
     var selfWidth      = $self.outerWidth();

     var posLeft        = posActiveItem.left + ((activeItemWidth ) / 2);

     $self.css('left', posLeft);
}

$('.js-slider-navigation-marker').on('changed.bm.sliderObserver init.bm.sliderObserver', function(event){
    reposActiveMarker.call(this);

    //bm.sliderObserver().change(observer, event.slideNr);
});

$(window).on('resizeEnd', function () {
    reposActiveMarker.call($('.js-slider-navigation-marker'));
});

$('body').on('click', '[data-role="slider-navigation_item"]', function(e) {
    var $self  = $(this);
    var $parent = $self.closest('[data-role="slider-navigation"]');
    var observer = $('[data-observer="'+$parent.data('observer')+'"]');
    var slideNr = parseInt($self.data('slide-nr'));
    if (isNaN(slideNr)) {
        slideNr = 0;
    }
    bm.sliderObserver().change(observer, slideNr);
})