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

@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));