/*---------------------------------------------------------------------------------------------

 @author       constantin saguin - @brutaldesign
 @link            http://csag.co
 @github        http://github.com/brutaldesign/swipebox
 @version     1.2.1
 @license      mit license

 ----------------------------------------------------------------------------------------------*/

;
(function (window, document, $, undefined) {

    $.swipebox = function (elem, options) {

        var defaults = {
                usecss: true,
                initialindexonarray: 0,
                hidebarsdelay: 3000,
                videomaxwidth: 1140,
                vimeocolor: 'cccccc',
                beforeopen: null,
                afterclose: null
            },

            plugin = this,
            elements = [], // slides array [{href:'...', title:'...'}, ...],
            elem = elem,
            selector = elem.selector,
            $selector = $(selector),
            istouch = document.createtouch !== undefined || ('ontouchstart' in window) || ('onmsgesturechange' in window) || navigator.msmaxtouchpoints,
            supportsvg = !!(window.svgsvgelement),
            winwidth = window.innerwidth ? window.innerwidth : $(window).width(),
            winheight = window.innerheight ? window.innerheight : $(window).height(),
            html = '<div id="swipebox-overlay">\
				<div id="swipebox-slider"></div>\
				<div id="swipebox-caption"></div>\
				<div id="swipebox-action">\
					<a id="swipebox-close"></a>\
					<a id="swipebox-prev"></a>\
					<a id="swipebox-next"></a>\
				</div>\
		</div>';

        plugin.settings = {}

        plugin.init = function () {

            plugin.settings = $.extend({}, defaults, options);

            if ($.isarray(elem)) {

                elements = elem;
                ui.target = $(window);
                ui.init(plugin.settings.initialindexonarray);

            } else {

                $selector.click(function (e) {
                    elements = [];
                    var index, reltype, relval;

                    if (!relval) {
                        reltype = 'rel';
                        relval = $(this).attr(reltype);
                    }

                    if (relval && relval !== '' && relval !== 'nofollow') {
                        $elem = $selector.filter('[' + reltype + '="' + relval + '"]');
                    } else {
                        $elem = $(selector);
                    }

                    $elem.each(function () {

                        var title = null, href = null;

                        if ($(this).attr('title'))
                            title = $(this).attr('title');

                        if ($(this).attr('href'))
                            href = $(this).attr('href');

                        elements.push({
                            href: href,
                            title: title
                        });
                    });

                    index = $elem.index($(this));
                    e.preventdefault();
                    e.stoppropagation();
                    ui.target = $(e.target);
                    ui.init(index);
                });
            }
        }

        plugin.refresh = function () {
            if (!$.isarray(elem)) {
                ui.destroy();
                $elem = $(selector);
                ui.actions();
            }
        }

        var ui = {

            init: function (index) {
                if (plugin.settings.beforeopen)
                    plugin.settings.beforeopen();
                this.target.trigger('swipebox-start');
                $.swipebox.isopen = true;
                this.build();
                this.openslide(index);
                this.openmedia(index);
                this.preloadmedia(index + 1);
                this.preloadmedia(index - 1);
            },

            build: function () {
                var $this = this;

                $('body').append(html);

                if ($this.docsstrans()) {
                    $('#swipebox-slider').css({
                        '-webkit-transition': 'left 0.4s ease',
                        '-moz-transition': 'left 0.4s ease',
                        '-o-transition': 'left 0.4s ease',
                        '-khtml-transition': 'left 0.4s ease',
                        'transition': 'left 0.4s ease'
                    });
                    $('#swipebox-overlay').css({
                        '-webkit-transition': 'opacity 1s ease',
                        '-moz-transition': 'opacity 1s ease',
                        '-o-transition': 'opacity 1s ease',
                        '-khtml-transition': 'opacity 1s ease',
                        'transition': 'opacity 1s ease'
                    });
                    $('#swipebox-action, #swipebox-caption').css({
                        '-webkit-transition': '0.5s',
                        '-moz-transition': '0.5s',
                        '-o-transition': '0.5s',
                        '-khtml-transition': '0.5s',
                        'transition': '0.5s'
                    });
                }


                if (supportsvg) {
                    var bg = $('#swipebox-action #swipebox-close').css('background-image');
                    bg = bg.replace('png', 'svg');
                    $('#swipebox-action #swipebox-prev,#swipebox-action #swipebox-next,#swipebox-action #swipebox-close').css({
                        'background-image': bg
                    });
                }

                $.each(elements, function () {
                    $('#swipebox-slider').append('<div class="slide"></div>');
                });

                $this.setdim();
                $this.actions();
                $this.keyboard();
                $this.gesture();
                $this.animbars();
                $this.resize();

            },

            setdim: function () {

                var width, height, slidercss = {};

                if ("onorientationchange" in window) {

                    window.addeventlistener("orientationchange", function () {
                        if (window.orientation == 0) {
                            width = winwidth;
                            height = winheight;
                        } else if (window.orientation == 90 || window.orientation == -90) {
                            width = winheight;
                            height = winwidth;
                        }
                    }, false);


                } else {

                    width = window.innerwidth ? window.innerwidth : $(window).width();
                    height = window.innerheight ? window.innerheight : $(window).height();
                }

                slidercss = {
                    width: width,
                    height: height
                }


                $('#swipebox-overlay').css(slidercss);

            },

            resize: function () {
                var $this = this;

                $(window).resize(function () {
                    $this.setdim();
                }).resize();
            },

            supporttransition: function () {
                var prefixes = 'transition webkittransition moztransition otransition mstransition khtmltransition'.split(' ');
                for (var i = 0; i < prefixes.length; i++) {
                    if (document.createelement('div').style[prefixes[i]] !== undefined) {
                        return prefixes[i];
                    }
                }
                return false;
            },

            docsstrans: function () {
                if (plugin.settings.usecss && this.supporttransition()) {
                    return true;
                }
            },

            gesture: function () {
                if (istouch) {
                    var $this = this,
                        distance = null,
                        swipmindistance = 10,
                        startcoords = {},
                        endcoords = {};
                    var bars = $('#swipebox-caption, #swipebox-action');

                    bars.addclass('visible-bars');
                    $this.settimeout();

                    $('body').bind('touchstart', function (e) {

                        $(this).addclass('touching');

                        endcoords = e.originalevent.targettouches[0];
                        startcoords.pagex = e.originalevent.targettouches[0].pagex;

                        $('.touching').bind('touchmove', function (e) {
                            e.preventdefault();
                            e.stoppropagation();
                            endcoords = e.originalevent.targettouches[0];

                        });

                        return false;

                    }).bind('touchend', function (e) {
                        e.preventdefault();
                        e.stoppropagation();

                        distance = endcoords.pagex - startcoords.pagex;

                        if (distance >= swipmindistance) {

                            // swipeleft
                            $this.getprev();

                        } else if (distance <= -swipmindistance) {

                            // swiperight
                            $this.getnext();

                        } else {
                            // tap
                            if (!bars.hasclass('visible-bars')) {
                                $this.showbars();
                                $this.settimeout();
                            } else {
                                $this.cleartimeout();
                                $this.hidebars();
                            }

                        }

                        $('.touching').off('touchmove').removeclass('touching');

                    });

                }
            },

            settimeout: function () {
                if (plugin.settings.hidebarsdelay > 0) {
                    var $this = this;
                    $this.cleartimeout();
                    $this.timeout = window.settimeout(function () {
                            $this.hidebars()
                        },
                        plugin.settings.hidebarsdelay
                    );
                }
            },

            cleartimeout: function () {
                window.cleartimeout(this.timeout);
                this.timeout = null;
            },

            showbars: function () {
                var bars = $('#swipebox-caption, #swipebox-action');
                if (this.docsstrans()) {
                    bars.addclass('visible-bars');
                } else {
                    $('#swipebox-caption').animate({top: 0}, 500);
                    $('#swipebox-action').animate({bottom: 0}, 500);
                    settimeout(function () {
                        bars.addclass('visible-bars');
                    }, 1000);
                }
            },

            hidebars: function () {
                var bars = $('#swipebox-caption, #swipebox-action');
                if (this.docsstrans()) {
                    bars.removeclass('visible-bars');
                } else {
                    $('#swipebox-caption').animate({top: '-50px'}, 500);
                    $('#swipebox-action').animate({bottom: '-50px'}, 500);
                    settimeout(function () {
                        bars.removeclass('visible-bars');
                    }, 1000);
                }
            },

            animbars: function () {
                var $this = this;
                var bars = $('#swipebox-caption, #swipebox-action');

                bars.addclass('visible-bars');
                $this.settimeout();

                $('#swipebox-slider').click(function (e) {
                    if (!bars.hasclass('visible-bars')) {
                        $this.showbars();
                        $this.settimeout();
                    }
                });

                $('#swipebox-action').hover(function () {
                    $this.showbars();
                    bars.addclass('force-visible-bars');
                    $this.cleartimeout();

                }, function () {
                    bars.removeclass('force-visible-bars');
                    $this.settimeout();

                });
            },

            keyboard: function () {
                var $this = this;
                $(window).bind('keyup', function (e) {
                    e.preventdefault();
                    e.stoppropagation();
                    if (e.keycode == 37) {
                        $this.getprev();
                    }
                    else if (e.keycode == 39) {
                        $this.getnext();
                    }
                    else if (e.keycode == 27) {
                        $this.closeslide();
                    }
                });
            },

            actions: function () {
                var $this = this;

                if (elements.length < 2) {
                    $('#swipebox-prev, #swipebox-next').hide();
                } else {
                    $('#swipebox-prev').bind('click touchend', function (e) {
                        e.preventdefault();
                        e.stoppropagation();
                        $this.getprev();
                        $this.settimeout();
                    });

                    $('#swipebox-next').bind('click touchend', function (e) {
                        e.preventdefault();
                        e.stoppropagation();
                        $this.getnext();
                        $this.settimeout();
                    });
                }

                $('#swipebox-close').bind('click touchend', function (e) {
                    $this.closeslide();
                });
            },

            setslide: function (index, isfirst) {
                isfirst = isfirst || false;

                var slider = $('#swipebox-slider');

                if (this.docsstrans()) {
                    slider.css({left: (-index * 100) + '%'});
                } else {
                    slider.animate({left: (-index * 100) + '%'});
                }

                $('#swipebox-slider .slide').removeclass('current');
                $('#swipebox-slider .slide').eq(index).addclass('current');
                this.settitle(index);

                if (isfirst) {
                    slider.fadein();
                }

                $('#swipebox-prev, #swipebox-next').removeclass('disabled');
                if (index == 0) {
                    $('#swipebox-prev').addclass('disabled');
                } else if (index == elements.length - 1) {
                    $('#swipebox-next').addclass('disabled');
                }
            },

            openslide: function (index) {
                $('html').addclass('swipebox');
                $(window).trigger('resize'); // fix scroll bar visibility on desktop
                this.setslide(index, true);
            },

            preloadmedia: function (index) {
                var $this = this, src = null;

                if (elements[index] !== undefined)
                    src = elements[index].href;

                if (!$this.isvideo(src)) {
                    settimeout(function () {
                        $this.openmedia(index);
                    }, 1000);
                } else {
                    $this.openmedia(index);
                }
            },

            openmedia: function (index) {
                var $this = this, src = null;

                if (elements[index] !== undefined)
                    src = elements[index].href;

                if (index < 0 || index >= elements.length) {
                    return false;
                }

                if (!$this.isvideo(src)) {
                    $this.loadmedia(src, function () {
                        $('#swipebox-slider .slide').eq(index).html(this);
                    });
                } else {
                    $('#swipebox-slider .slide').eq(index).html($this.getvideo(src));
                }

            },

            settitle: function (index, isfirst) {
                var title = null;

                $('#swipebox-caption').empty();

                if (elements[index] !== undefined)
                    title = elements[index].title;

                if (title) {
                    $('#swipebox-caption').append(title);
                }
            },

            isvideo: function (src) {

                if (src) {
                    if (
                        src.match(/youtube\.com\/watch\?v=([a-za-z0-9\-_]+)/)
                        || src.match(/vimeo\.com\/([0-9]*)/)
                    ) {
                        return true;
                    }
                }

            },

            getvideo: function (url) {
                var iframe = '';
                var output = '';
                var youtubeurl = url.match(/watch\?v=([a-za-z0-9\-_]+)/);
                var vimeourl = url.match(/vimeo\.com\/([0-9]*)/);
                if (youtubeurl) {

                    iframe = '<iframe width="560" height="315" src="//www.youtube.com/embed/' + youtubeurl[1] + '" frameborder="0" allowfullscreen></iframe>';

                } else if (vimeourl) {

                    iframe = '<iframe width="560" height="315"  src="http://player.vimeo.com/video/' + vimeourl[1] + '?byline=0&amp;portrait=0&amp;color=' + plugin.settings.vimeocolor + '" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>';

                }

                return '<div class="swipebox-video-container" style="max-width:' + plugin.settings.videomaxwidth + 'px"><div class="swipebox-video">' + iframe + '</div></div>';
            },

            loadmedia: function (src, callback) {
                if (!this.isvideo(src)) {
                    var img = $('<img>').on('load', function () {
                        callback.call(img);
                    });

                    img.attr('src', src);
                }
            },

            getnext: function () {
                var $this = this;
                index = $('#swipebox-slider .slide').index($('#swipebox-slider .slide.current'));
                if (index + 1 < elements.length) {
                    index++;
                    $this.setslide(index);
                    $this.preloadmedia(index + 1);
                }
                else {

                    $('#swipebox-slider').addclass('rightspring');
                    settimeout(function () {
                        $('#swipebox-slider').removeclass('rightspring');
                    }, 500);
                }
            },

            getprev: function () {
                index = $('#swipebox-slider .slide').index($('#swipebox-slider .slide.current'));
                if (index > 0) {
                    index--;
                    this.setslide(index);
                    this.preloadmedia(index - 1);
                }
                else {

                    $('#swipebox-slider').addclass('leftspring');
                    settimeout(function () {
                        $('#swipebox-slider').removeclass('leftspring');
                    }, 500);
                }
            },


            closeslide: function () {
                $('html').removeclass('swipebox');
                $(window).trigger('resize');
                this.destroy();
            },

            destroy: function () {
                $(window).unbind('keyup');
                $('body').unbind('touchstart');
                $('body').unbind('touchmove');
                $('body').unbind('touchend');
                $('#swipebox-slider').unbind();
                $('#swipebox-overlay').remove();
                if (!$.isarray(elem))
                    elem.removedata('_swipebox');
                if (this.target)
                    this.target.trigger('swipebox-destroy');
                $.swipebox.isopen = false;
                if (plugin.settings.afterclose)
                    plugin.settings.afterclose();
            }

        };

        plugin.init();

    };

    $.fn.swipebox = function (options) {
        if (!$.data(this, "_swipebox")) {
            var swipebox = new $.swipebox(this, options);
            this.data('_swipebox', swipebox);
        }
        return this.data('_swipebox');
    }

}(window, document, jquery));