Ext.ns('S100');

S100.CarouselNav = function(carousel, imageNavId, imagePagingId) {
    this.carousel       = carousel;
    this.imageNav       = Ext.get(imageNavId);
    this.imagePaging    = Ext.get(imagePagingId);
    
    this.init();
    this.setupEvents();
};

S100.CarouselNav.prototype.init = function() {
    this.imageNavEls    = Ext.get('image-nav').select('ol.images li');
    this.videoNavEls    = Ext.get('image-nav').select('ol.images li.video');
    this.groupCount     = 4;
    this.totalPages     = Math.ceil(this.imageNavEls.getCount() / this.groupCount);
    this.currentPage    = 0;
    this.isBrowsing     = false;
    
    Ext.fly('image-paging').select('.total-pages').update(this.totalPages);
};

S100.CarouselNav.prototype.setupEvents = function() {
    this.imageNavEls.on('click', this.onImageNavClick, this);
    this.videoNavEls.on('click', this.onVideoThumbClick, this);
    this.carousel.on('change', this.onCarouselChange, this);
    Ext.fly('image-paging').select('li.next, li.prev').on('click', this.onPagingClick, this);
    Ext.get(document).on('keydown', function(evt, t) {
        switch(evt.getKey()){
            case 37:  this.carousel.prev();  break;
            case 39:  this.carousel.next();  break;
        }
    }, this);
};

S100.CarouselNav.prototype.onImageNavClick = function(evt, t) {
    var target = Ext.get(t);
    var index = target.findParentNode('li').getAttribute('data-index');
    this.carousel.pause();
    this.carousel.setSlide(index);
};

S100.CarouselNav.prototype.onVideoThumbClick = function(evt, t) {
    var target = Ext.get(t);
    var slideIndex = target.findParentNode('li').getAttribute('data-index');

    // calculate top and left offset for the lightbox
    var videoWidth = 580;
    var videoHeight = 355;
    var pageScroll = Ext.fly(document).getScroll();
    var lightboxTop = pageScroll.top + (Ext.lib.Dom.getViewportHeight()/2) - videoHeight/2;
    var lightboxLeft = pageScroll.left + (Ext.lib.Dom.getViewportWidth()/2) - videoWidth/2;  

    // Create video overlay which closes if docment is clicked
    var overlay = Ext.DomHelper.append(document.body, {
        id: 'ux-lightbox-overlay',
        style: {
            width: '100%',
            height: '100%',
            background: 'rgba(255,255,255,0.50)',
            position: 'absolute',
            top: 0,
            left: 0
        }
    }, true).on('click', function(evt, t) {
        Ext.removeNode(t);
        this.carousel.setSlide(slideIndex-1);
    }, this);
    if (Ext.isIE) {
        overlay.setStyle({
            background: 'url(/images/white50.png)'
        });
    }
    var video = Ext.DomHelper.append(overlay, {
        tag: 'iframe',
        width: videoWidth, 
        height: videoHeight,
        style: {
            position: 'absolute',
            top: lightboxTop + 'px',
            left: lightboxLeft + 'px'
        },
        src: target.findParentNode('li').getAttribute('data-video-embed-src')
    }, true);
};

// Update border on selected image
S100.CarouselNav.prototype.onCarouselChange = function(slide, index) {
    var item = this.imageNavEls.item(index);
    var pageNum = Math.floor(index / this.groupCount);
    item.radioClass('active');
    
    if (pageNum == this.currentPage) { this.isBrowsing = false; }
    
    if (!this.isBrowsing) {
        this.setNavPage(pageNum);
    }
    // Stop auto-play if we're on the last image
    if (this.carousel.playing 
        && this.carousel.activeSlide == (this.imageNavEls.getCount()-1 - this.videoNavEls.getCount())) {
        this.carousel.pause();
    }
};

S100.CarouselNav.prototype.updatePagination = function() {
    this.imagePaging.child('.page-num').update(this.currentPage+1);
};

S100.CarouselNav.prototype.onPagingClick = function(evt, t) {
    if (this.imageNavEls.getCount() < 4) { return; }
    
    this.isBrowsing = true;
    
    var forward = Ext.fly(t).hasClass('next');
    if (forward && this.currentPage+1 >= this.totalPages) { return; };
    if (!forward && this.currentPage-1 < 0) { return; };

    var pageNum = forward ? this.currentPage+1 : this.currentPage-1;
    this.setNavPage(pageNum);
};

S100.CarouselNav.prototype.setNavPage = function(pageNum) {
    this.currentPage = pageNum;
    this.updatePagination();
    
    var imageNavEl = this.imageNavEls.item(0);
    var imageNavElWidth = imageNavEl.getWidth();
    var groupWidth = imageNavElWidth*this.groupCount;
    var posX = -1 * groupWidth * pageNum;

    var imageNav = Ext.get('image-nav').first('ol.images');
    if (Modernizr.csstransitions) {
        imageNav.setStyle('left', posX + 'px');
    } else {
        imageNav.animate({left: {to: posX, unit: 'px'}}, 0.35, null, 'easeNone');
    }
};