/*! lightgallery - v1.2.0 - 2015-08-26
* http://sachinchoolur.github.io/lightgallery/
* copyright (c) 2015 sachin n; licensed apache 2.0 */
(function($, window, document, undefined) {

    'use strict';

    var defaults = {
        thumbnail: true,

        animatethumb: true,
        currentpagerposition: 'middle',

        thumbwidth: 100,
        thumbcontheight: 100,
        thumbmargin: 5,

        exthumbimage: false,
        showthumbbydefault: true,
        tooglethumb: true,

        enablethumbdrag: true,
        enablethumbswipe: true,
        swipethreshold: 50,

        loadyoutubethumbnail: true,
        youtubethumbsize: 1,

        loadvimeothumbnail: true,
        vimeothumbsize: 'thumbnail_small'
    };

    var thumbnail = function(element) {

        // get lightgallery core plugin data
        this.core = $(element).data('lightgallery');

        // extend module default settings with lightgallery core settings
        this.core.s = $.extend({}, defaults, this.core.s);

        this.$el = $(element);
        this.$thumbouter = null;
        this.thumbouterwidth = 0;
        this.thumbtotalwidth = (this.core.$items.length * (this.core.s.thumbwidth + this.core.s.thumbmargin));
        this.thumbindex = this.core.index;

        // thumbnail animation value
        this.left = 0;

        this.init();

        return this;
    };

    thumbnail.prototype.init = function() {
        if (this.core.s.thumbnail && this.core.$items.length > 1) {
            if (this.core.s.showthumbbydefault) {
                this.core.$outer.addclass('lg-thumb-open');
            }

            this.build();
            if (this.core.s.animatethumb) {
                if (this.core.s.enablethumbdrag && !this.core.istouch && this.core.docss()) {
                    this.enablethumbdrag();
                }

                if (this.core.s.enablethumbswipe && this.core.istouch && this.core.docss()) {
                    this.enablethumbswipe();
                }

                this.thumbclickable = false;
            } else {
                this.thumbclickable = true;
            }

            this.toogle();
            this.thumbkeypress();
        }
    };

    thumbnail.prototype.build = function() {
        var _this = this;
        var thumblist = '';
        var viemoerrorthumbsize = '';
        var $thumb;
        var html = '<div class="lg-thumb-outer">' +
            '<div class="lg-thumb group">' +
            '</div>' +
            '</div>';

        switch (this.core.s.vimeothumbsize) {
            case 'thumbnail_large':
                viemoerrorthumbsize = '640';
                break;
            case 'thumbnail_medium':
                viemoerrorthumbsize = '200x150';
                break;
            case 'thumbnail_small':
                viemoerrorthumbsize = '100x75';
        }

        _this.core.$outer.addclass('lg-has-thumb');

        _this.core.$outer.find('.lg').append(html);

        _this.$thumbouter = _this.core.$outer.find('.lg-thumb-outer');
        _this.thumbouterwidth = _this.$thumbouter.width();

        if (_this.core.s.animatethumb) {
            _this.core.$outer.find('.lg-thumb').css({
                width: _this.thumbtotalwidth + 'px',
                position: 'relative'
            });
        }

        if (this.core.s.animatethumb) {
            _this.$thumbouter.css('height', _this.core.s.thumbcontheight + 'px');
        }

        function getthumb(src, thumb, index) {
            var isvideo = _this.core.isvideo(src, index) || {};
            var thumbimg;
            var vimeoid = '';

            if (isvideo.youtube || isvideo.vimeo) {
                if (isvideo.youtube) {
                    if (_this.core.s.loadyoutubethumbnail) {
                        thumbimg = 'http://img.youtube.com/vi/' + isvideo.youtube[1] + '/' + _this.core.s.youtubethumbsize + '.jpg';
                    } else {
                        thumbimg = thumb;
                    }
                } else if (isvideo.vimeo) {
                    if (_this.core.s.loadvimeothumbnail) {
                        thumbimg = 'https://i.vimeocdn.com/video/error_' + viemoerrorthumbsize + '.jpg';
                        vimeoid = isvideo.vimeo[1];
                    } else {
                        thumbimg = thumb;
                    }
                }
            } else {
                thumbimg = thumb;
            }

            thumblist += '<div data-vimoe-id="' + vimeoid + '" class="lg-thumb-item" style="width:' + _this.core.s.thumbwidth + 'px; margin-right: ' + _this.core.s.thumbmargin + 'px"><img src="' + thumbimg + '" /></div>';
            vimeoid = '';
        }

        if (_this.core.s.dynamic) {
            for (var i = 0; i < _this.core.s.dynamicel.length; i++) {
                getthumb(_this.core.s.dynamicel[i].src, _this.core.s.dynamicel[i].thumb, i);
            }
        } else {
            _this.core.$items.each(function(i) {

                if (!_this.core.s.exthumbimage) {
                    getthumb($(this).attr('href') || $(this).attr('data-src'), $(this).find('img').attr('src'), i);
                } else {
                    getthumb($(this).attr('href') || $(this).attr('data-src'), $(this).attr(_this.core.s.exthumbimage), i);
                }

            });
        }

        _this.core.$outer.find('.lg-thumb').html(thumblist);

        $thumb = _this.core.$outer.find('.lg-thumb-item');

        // load vimeo thumbnails
        $thumb.each(function() {
            var $this = $(this);
            var vimeovideoid = $this.attr('data-vimoe-id');

            if (vimeovideoid) {
                $.getjson('http://www.vimeo.com/api/v2/video/' + vimeovideoid + '.json?callback=?', {
                    format: 'json'
                }, function(data) {
                    $this.find('img').attr('src', data[0][_this.core.s.vimeothumbsize]);
                });
            }
        });

        // manage active class for thumbnail
        $thumb.eq(_this.core.index).addclass('active');
        _this.core.$el.on('onbeforeslide.lg.tm', function() {
            $thumb.removeclass('active');
            $thumb.eq(_this.core.index).addclass('active');
        });

        $thumb.on('click.lg touchend.lg', function() {
            var _$this = $(this);
            settimeout(function() {

                // in ie9 and bellow touch does not support
                // go to slide if browser does not support css transitions
                if ((_this.thumbclickable && !_this.core.lgbusy) || !_this.core.docss()) {
                    _this.core.index = _$this.index();
                    _this.core.slide(_this.core.index, false, true);
                }
            }, 50);
        });

        _this.core.$el.on('onbeforeslide.lg.tm', function() {
            _this.animatethumb(_this.core.index);
        });

        $(window).on('resize.lg.thumb orientationchange.lg.thumb', function() {
            settimeout(function() {
                _this.animatethumb(_this.core.index);
                _this.thumbouterwidth = _this.$thumbouter.width();
            }, 200);
        });

    };

    thumbnail.prototype.settranslate = function(value) {
        // jquery supports automatic css prefixing since jquery 1.8.0
        this.core.$outer.find('.lg-thumb').css({
            transform: 'translate3d(-' + (value) + 'px, 0px, 0px)'
        });
    };

    thumbnail.prototype.animatethumb = function(index) {
        var $thumb = this.core.$outer.find('.lg-thumb');
        if (this.core.s.animatethumb) {
            var position;
            switch (this.core.s.currentpagerposition) {
                case 'left':
                    position = 0;
                    break;
                case 'middle':
                    position = (this.thumbouterwidth / 2) - (this.core.s.thumbwidth / 2);
                    break;
                case 'right':
                    position = this.thumbouterwidth - this.core.s.thumbwidth;
            }
            this.left = ((this.core.s.thumbwidth + this.core.s.thumbmargin) * index - 1) - position;
            if (this.left > (this.thumbtotalwidth - this.thumbouterwidth)) {
                this.left = this.thumbtotalwidth - this.thumbouterwidth;
            }

            if (this.left < 0) {
                this.left = 0;
            }

            if (this.core.lgalleryon) {
                if (!$thumb.hasclass('on')) {
                    this.core.$outer.find('.lg-thumb').css('transition-duration', this.core.s.speed + 'ms');
                }

                if (!this.core.docss()) {
                    $thumb.animate({
                        left: -this.left + 'px'
                    }, this.core.s.speed);
                }
            } else {
                if (!this.core.docss()) {
                    $thumb.css('left', -this.left + 'px');
                }
            }

            this.settranslate(this.left);

        }
    };

    // enable thumbnail dragging and swiping
    thumbnail.prototype.enablethumbdrag = function() {

        var _this = this;
        var startcoords = 0;
        var endcoords = 0;
        var isdraging = false;
        var ismoved = false;
        var templeft = 0;

        _this.$thumbouter.addclass('lg-grab');

        _this.core.$outer.find('.lg-thumb').on('mousedown.lg.thumb', function(e) {
            if (_this.thumbtotalwidth > _this.thumbouterwidth) {
                // execute only on .lg-object
                e.preventdefault();
                startcoords = e.pagex;
                isdraging = true;

                // ** fix for webkit cursor issue https://code.google.com/p/chromium/issues/detail?id=26723
                _this.core.$outer.scrollleft += 1;
                _this.core.$outer.scrollleft -= 1;

                // *
                _this.thumbclickable = false;
                _this.$thumbouter.removeclass('lg-grab').addclass('lg-grabbing');
            }
        });

        $(window).on('mousemove.lg.thumb', function(e) {
            if (isdraging) {
                templeft = _this.left;
                ismoved = true;
                endcoords = e.pagex;

                _this.$thumbouter.addclass('lg-dragging');

                templeft = templeft - (endcoords - startcoords);

                if (templeft > (_this.thumbtotalwidth - _this.thumbouterwidth)) {
                    templeft = _this.thumbtotalwidth - _this.thumbouterwidth;
                }

                if (templeft < 0) {
                    templeft = 0;
                }

                // move current slide
                _this.settranslate(templeft);

            }
        });

        $(window).on('mouseup.lg.thumb', function() {
            if (ismoved) {
                ismoved = false;
                _this.$thumbouter.removeclass('lg-dragging');

                _this.left = templeft;

                if (math.abs(endcoords - startcoords) < _this.core.s.swipethreshold) {
                    _this.thumbclickable = true;
                }

            } else {
                _this.thumbclickable = true;
            }

            if (isdraging) {
                isdraging = false;
                _this.$thumbouter.removeclass('lg-grabbing').addclass('lg-grab');
            }
        });

    };

    thumbnail.prototype.enablethumbswipe = function() {
        var _this = this;
        var startcoords = 0;
        var endcoords = 0;
        var ismoved = false;
        var templeft = 0;

        _this.core.$outer.find('.lg-thumb').on('touchstart.lg', function(e) {
            if (_this.thumbtotalwidth > _this.thumbouterwidth) {
                e.preventdefault();
                startcoords = e.originalevent.targettouches[0].pagex;
                _this.thumbclickable = false;
            }
        });

        _this.core.$outer.find('.lg-thumb').on('touchmove.lg', function(e) {
            if (_this.thumbtotalwidth > _this.thumbouterwidth) {
                e.preventdefault();
                endcoords = e.originalevent.targettouches[0].pagex;
                ismoved = true;

                _this.$thumbouter.addclass('lg-dragging');

                templeft = _this.left;

                templeft = templeft - (endcoords - startcoords);

                if (templeft > (_this.thumbtotalwidth - _this.thumbouterwidth)) {
                    templeft = _this.thumbtotalwidth - _this.thumbouterwidth;
                }

                if (templeft < 0) {
                    templeft = 0;
                }

                // move current slide
                _this.settranslate(templeft);

            }
        });

        _this.core.$outer.find('.lg-thumb').on('touchend.lg', function() {
            if (_this.thumbtotalwidth > _this.thumbouterwidth) {

                if (ismoved) {
                    ismoved = false;
                    _this.$thumbouter.removeclass('lg-dragging');
                    if (math.abs(endcoords - startcoords) < _this.core.s.swipethreshold) {
                        _this.thumbclickable = true;
                    }

                    _this.left = templeft;
                } else {
                    _this.thumbclickable = true;
                }
            } else {
                _this.thumbclickable = true;
            }
        });

    };

    thumbnail.prototype.toogle = function() {
        var _this = this;
        if (_this.core.s.tooglethumb) {
            _this.core.$outer.addclass('lg-can-toggle');
            _this.$thumbouter.append('<span class="lg-toogle-thumb lg-icon"></span>');
            _this.core.$outer.find('.lg-toogle-thumb').on('click.lg', function() {
                _this.core.$outer.toggleclass('lg-thumb-open');
            });
        }
    };

    thumbnail.prototype.thumbkeypress = function() {
        var _this = this;
        $(window).on('keydown.lg.thumb', function(e) {
            if (e.keycode === 38) {
                e.preventdefault();
                _this.core.$outer.addclass('lg-thumb-open');
            } else if (e.keycode === 40) {
                e.preventdefault();
                _this.core.$outer.removeclass('lg-thumb-open');
            }
        });
    };

    thumbnail.prototype.destroy = function() {
        if (this.core.s.thumbnail && this.core.$items.length > 1) {
            $(window).off('resize.lg.thumb orientationchange.lg.thumb keydown.lg.thumb');
            this.$thumbouter.remove();
            this.core.$outer.removeclass('lg-has-thumb');
        }
    };

    $.fn.lightgallery.modules.thumbnail = thumbnail;

})(jquery, window, document);